Strona o samochodach, 50 znaczników min.

80 htttp, 443 https

nginx, IIS, Apache, vhost - systemy work flow

JS - stworzony do zasobów lokalnych

PHP - język serwerów

by pisać w html, js nie trzeba serwera

budowa: jednolita struktura, która się nigdy nie zmienia

title

head

body

footer

!html to język przeglądarki

znaczniki html<!DOCTYPE> Typ dokumentu

<html> Dokument HTML

<head> Informacje o dokumencie

<title> Tytuł dokumentu

<body> Ciało dokumentu

<h1> to <h6> Nagłówki HTML

<p> Paragraf

<br> Przejście do nowej linii

<hr> Linia pozioma

<!–…–> Komentarz

Formatowanie

ZNACZNIK OPIS

<abbr> Akronim

<address> Informacje kontaktowe o autorze dokumentu

<b> Pogrubienie tekstu

<bdi> Służy do odizolowania fragmentu tekstu, który może być zinterpretowany przez przeglądarkę do wyświetlenia w nieodpowiednim kierunku (np. tekst w języku arabskim)

<bdo> Odwrócenie kierunku tekstu (np. <bdo dir=”rtl”>cokolwiek</bdo>)

<blockquote> Cytowane źródło

<cite> Tytuł cytowanej pracy

<code> Fragment kodu (języki programowania)

<del> Tekst który został usunięty z dokumentu

<dfn> Definiowana wartość, możliwość odniesienie do niej za pomocą #kotwicy

<em> Uwypuklenie fragmentu tekstu

<i> Tekst pochylony

<ins> Tekst, który został dodany do dokumentu (zob. <del>)

<kbd> Oznaczenie tekstu do wpisania, np. Wpisz <kbd>cmd</kbd>, a następnie…

<mark> Oznaczony tekst

<meter> Graficzne przedstawienie zakresu

<pre> Tekst preformatowany, interpretuje spację, tabulator oraz znak nowej linii

<progress> Graficzne przedstawienie postępu zadania

<s> Tekst który przestał być poprawny

<samp> Przykładowy wynik działania programu komputerowego

<small> Pomniejszony tekst

<strong> Ważny tekst

<sub> Tekst w indeksie dolnym

<sup> Tekst w indeksie górnym

<template> Szablon

<time> Data / czas

<u> Tekst, który ma być stylistycznie inny od reszty tekstu, podkreślenie

<var> Zmienna

<wbr> Możliwe przejście do nowej linii, np. przy ciągu znaków dłuższym od ilości znaków na linii ekranu

Formularze

ZNACZNIK OPIS

<form> Ramy formularza

<input> Wejście

<textarea> Wieloliniowe wejście tekstowe

<button> Przycisk

<select> Lista rozwijana

<optgroup> Grupa opcji na liście rozwijanej

<option> Opcja na liście rozwijanej

<label> Etykieta dla pola input

<fieldset> Grupa powiązanych elementów formularza

<legend> Legenda dla pola fieldset

<datalist> Lista predefiniowanych wartości, możliwych do wykorzystania np. poprzez autocomplete

<output> Wynik obliczeń

Ramki

ZNACZNIK OPIS

Obrazki

TAG DESCRIPTION

<img> Obrazek

<map> Mapa obrazu, np. do stworzenia klikalnych fragmentów obrazu

<area> Obszar wewnątrz mapy obrazu

<canvas> Wykorzystywane do tworzenia grafiki w locie

<figcaption> Opis do elementu <figure>

<figure> Definiuje samodzielną część dokumentu mogącą przechować np. obrazki, tekst, fragment kodu

<picture> Kontener na wiele zdjęć

Audio / Wideo

ZNACZNIK OPIS

<audio> Dźwięk

<source> Źródło elementu mediów

<track> Ścieżka dla elementu audio, video

<video> Film

Lini

ZNACZNIK OPIS

<a> Odnośnik

<nav> Kontener na elementy nawigacyjne

Listy

ZNACZNIK OPIS

<ul> Lista nieuporządkowana

<ol> Lista uporządkowana

<li> Element listy

<dl> Lista definicji

<dt> Nazwa na liście definicji

<dd> Opis na liście definicji

Tabele

ZNACZNIK OPIS

<table> Ramy tabeli

<caption> Podpis tabeli

<th> Pole nagłówkowe tabeli

<tr> Wiersz tabeli

<td> Komórka tabeli

<thead> Grupa treści nagłówkowych tabeli

<tbody> Grupa zawartości tabeli

<tfoot> Grupa treści stopki tabeli

<col> Grupuje atrybuty dla kilku kolumn tabeli

<colgroup> Grupuje strukturalnie kolumny tabeli

Style

ZNACZNIK OPIS

<div> Znacznik kontenera / sekcji

<span> Znacznik kontenera / sekcji

<header> Kontener nagłówka dokumentu

<footer> Kontener stopki dokumentu

<main> Kontener części głównej dokumentu

<section> Sekcja

<article> Artykuł

<aside> Poboczna sekcja strony

<details> Kontener, którego treść może być wyświetlona, bądź nie, otwierana interaktywnie

<dialog> Pole komunikatu

<summary> Widoczny nagłówek dla elementu <details>

Łączenie parametrów

W jaki sposób zmienić wygląd tekstu na stronie WWW?

Wszystkie powyższe parametry (atrybuty i znaczniki) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze:

<p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p>

Wielkość czcionki

W jaki sposób zmienić rozmiar czcionki na stronie WWW?

<span style="font-size: rozmiar">Tu wpisz tekst</span>

gdzie jako "rozmiar" należy wpisać:

xx-small

Czcionka najmniejsza

x-small

Czcionka bardzo mała

small

Czcionka mała

medium

Czcionka średnia

large

Czcionka duża

x-large

Czcionka bardzo duża

xx-large

Czcionka największa

Przykład:

Czcionka o rozmiarze

xx-small

Czcionka o rozmiarze

x-small

Czcionka o rozmiarze

small

(domyślna)

Czcionka o rozmiarze

medium

Czcionka o rozmiarze

large

Czcionka o rozmiarze

x-large

Czcionka o rozmiarze

xx-large

Składnia odsyłacza do adresu internetowego (w obrębie całego Internetu) jest następująca:

<a href="adres internetowy">opis odsyłacza</a>

Jak wstawić tabelkę na stronę WWW?

Jest to najprostsza tabela, gdzie:

<table>...</table>

jest znacznikiem tabeli

<tr>...</tr>

jest znacznikiem wiersza

<td>...</td>

jest znacznikiem pojedynczej komórki

W miejsce kropek należy wpisać treść poszczególnych komórek tabeli.

Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to konieczne, możliwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników <td>...</td>) lub wierszy (znaczniki <tr>...</tr>). Należy przy tym zauważyć, że komórki tabeli (<td>...</td>) znajdują się wewnątrz znacznków wierszy (<tr>...</tr>)! Liczba komórek w każdym wierszu powinna być taka sama.

Zwracam uwagę, że w obrębie tabeli tekst i inne elementy można wstawiać tylko wewnątrz znaczników komórek i ewentualnie tytułu tabeli, a nie poza nimi! Poza obrębem tych znaczników można umieszczać tylko ściśle określone elementy, które zostaną szczegółowo opisane w tym rozdziale. Zatem poniższy kod będzie nieprawidłowy:

HTML / Tabele

Komórki nagłówkowe <TH>

Jak powinno się tworzyć nagłówek tabeli?

Nagłówek poziomy<table> <tr> <th>...</th> <th>...</th> </tr> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table>
Nagłówek pionowy<table> <tr> <th>...</th> <td>...</td> <td>...</td> </tr> <tr> <th>...</th> <td>...</td> <td>...</td> </tr> </table>
Nagłówek mieszany<table> <tr> <th></th> <th>...</th> <th>...</th> </tr> <tr> <th>...</th> <td>...</td> <td>...</td> </tr> <tr> <th>...</th> <td>...</td> <td>...</td> </tr> </table>

ODSYŁACZE

Składnia odsyłacza do adresu internetowego (w obrębie całego Internetu) jest następująca:

<a href="adres internetowy">opis odsyłacza</a>

Łączenie parametrów

W jaki sposób zmienić wygląd tekstu na stronie WWW?

Wszystkie powyższe parametry (atrybuty i znaczniki) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze:

<p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p>

gdzie jako "kolor" można wpisać:

black		(czarny)
white		(biały)
silver		(srebrny)
gray		(szary)
maroon		(kasztanowy)
red		(czerwony)
purple		(purpurowy)
fuchsia		(fuksja)
green		(zielony)
lime		(limonowy)
olive		(oliwkowy)
yellow		(żółty)
navy		(granatowy)
blue		(niebieski)
teal		(zielonomodry)
aqua		(akwamaryna)

Top Menu

Side Menu

Content

Łączenie parametrów

Wielkość czcionki

Jak wstawić tabelkę na stronę WWW?

HTML / Tabele

Komórki nagłówkowe <TH>

ODSYŁACZE

Łączenie parametrów

Top Menu

Welcome to OpenProject

Get an overview

Side Menu

Content

Jak@@ Tar@@@@@@

Łączenie parametrów

Wielkość czcionki

Jak wstawić tabelkę na stronę WWW?

HTML / Tabele

Komórki nagłówkowe <TH>

ODSYŁACZE

Łączenie parametrów