Logiczne elementy dokumentu HTML

Akapit

Najważniejszą jednostką podziału tekstu jest akapit. Jest to „jednostka podziału” głównie dlatego, że treść akapitu powinna być poświęcona jednej spójnej myśli lub pojęciu. Cały akapit należy umieszczać wewnątrz elementu p:

	<p>Cały akapit</p>
		

Rozdziały dokumentu

Podzielenie dokumentu na rozdziały, podrozdziały, punkty itd. pomaga czytelnikom lepiej orientować się w tekście. HTML nie ma znaczników dla rozdziałów dokumentu. Istnieją natomiast znaczniki do nagłówków rozdziałów różnych poziomów:

  • h1 — nagłówek całości dokumentu.
  • h2h6 — nagłówki rozdziałów i podrozdziałów dokumentu.

Do autora należy wykorzystanie tych znaczników w odpowiednim porządku.

Przykład nagłówka rozdziału drugiego rzędu:

	<h3>Rozdziały dokumentu</h3>
			

Wyróżnienia

Logicznie wyróżniony fragment tekstu umieszcza się wewnątrz elementuem:

	<p>Element <em>pusty</em nie ma ani treści ani atrybutów</p>
		

Element pusty nie ma ani treści ani atrybutów

Wyszczególnienia i wyliczenia

Do wyszczególnień i wyliczeń używa się odpowiednio znaczników ul (unordered list) i ol (ordered list). Każdy element listy zostaje umieszczony wewnątrz znacznika li (list item):

	<ul>
	<li>Wprowadzenie</li>
	<li>Znaczniki HTML</li>
	<li>Ogólna struktura plika HTML</li>
	</ul>
	
  • Wprowadzenie
  • Znaczniki HTML
  • Ogólna struktura plika HTML
	<ol>
	<li>Wprowadzenie</li>
	<li>Znaczniki HTML</li>
	<li>Ogólna struktura plika HTML</li>
	</ol>
			
  1. Wprowadzenie
  2. Znaczniki HTML
  3. Ogólna struktura plika HTML

Listy mogą być zagnieżdżone:

	<ol>
		<li>Meta informacja o dokumencie HTML</li>
		<ol>
			<li>Kodowanie polskich znaków</li>
			<li>Inne elementy body, zawierające meta-informacje o dokumencie</li>
		</ol>
		<li>Logiczne elementy dokumentu HTML</li>
		<ol>
			<li>Akapit</li>
			<li>Rozdziały dokumentu</li>
			<li>Wyróżnienia</li>
		</ol>
	</ol>
			

Tabele

Tabeli odpowiada element table, który składa się z wierszy tabeli. Wiersze tabel są dwóch typów: elementy th — nagłówek tabeli i tr — zwykły wiersz. Każdy z wierszy składa się z elementów td, które odpowiadają komórkom tabeli.

<table>
	<th>
		<td>Nazwa waluty</td>
		<td>Kod waluty</td>
		<td>Kurs średni</td>
	</th>
	<tr>
		<td>dolar amerykański</td>
		<td>1 USD</td>
		<td>3,0828</td>
	</tr>
	<tr>
		<td>dolar australijski</td>
		<td>1 AUD</td>
		<td>2,3466</td>
	</tr>
	<tr>
		<td>euro</td>
		<td>1 EUR</td>
		<td>3,9390</td>
	</tr>
</table>
		

Puste komórki należy wypełnić przez &nbsp;

Obrazki

Rysunki wstawia się jako pusty element z atrybutami img:

<img width="100" height="75" src="images/domek.png" alt="Gmach uczelni" title="Gmach uczelni"/>
				

Zazwyczaj obrazki umieszcza się w oddzielnym akapicie. Czasami do umieszczenia obrazków stosuje sie tabele.

Atrybut src wskazuje źródło obrazka. Może to być plik graficzny umieszczony na tym samym komputerze, co i  plik HTML, lub w dowolnym miejscu w Internecie. W ostatnim przypadku należy wskazać dokładny URL plika. Przy umieszczeniu obrazka lokalnie, zazwyczaj na obrazki zakłada się oddzielny folder (images w naszym przykładzie). W tym przypadku należy wskazać ścieżkę do plika z obrazkiem względem lokacji plika HTML. Ciąg pod-folderów należy rozdzielać ukośnikiem (/). Ponieważ większość serwerów internetowych chodzi pod systemem operacyjnym który potrafi odróżnić duże i małe litery, należy zwrócić uwagę, żeby wielkość liter w nazwach plików i folderów zgadzała się z rzeczywistą.

Większość przeglądarek poprawnie wyświetli obrazki formatów png, jpeg, gif. Format gif jest opatentowany i dlatego ma ograniczone zastosowanie w Internecie, zwłaszcza w krajach, wspierających patentowanie oprogramowania.

Atrybuty width i height przedstawiają szerokość i wysokość obrazka. Jeśli te atrybuty nie są podane, przeglądarka wyświetli obrazek w naturalnych rozmiarach. Atrybuty te powinny wspomagać przeglądarce poprawnie zarezerwować miejsce na obrazek zanim ona go załaduje. W razie potrzeby zmienić rozmiary obrazka, należy zrobić to za pomocą edytora graficznego i w atrybutach widthheight podać aktualne rozmiary obrazka. W rzadkich przypadkach za pomocą tych atrybutów rozciąga się obrazek.

W atrybucie alt umieszcza się tekst, który zostanie wpisany w ramce obrazka, jeśli z jakichś powodów sam obrazek nie da sie załadować.

W atrybucie title umieszcza się tekst, który zostanie wyświetlony najechaniu myszką na obszar obrazka.

Odnośniki

Odnośniki (hiperłącza, odsyłacze) odsyłają na inny plik lub w inne miejsce danego pliku. Odnośnikiem może być dowolny element dokumentu lub fragment tekstu. Żeby zrobić element (fragment tekstu) odnośnikiem, należy jego umieścić wewnątrz elementu a:

<a href="http://www.euh-e.edu.pl">EUH-E</a>
			

Plik, na który odwoła się odnośnik, wskazuje się w sposób analogiczny wskazaniu źródła obrazka

Odsyłacze w inne miejsce tego samego plika organizują się w sposób następujący. Jeśli celem odsyłacza jest element HTMLu, należy go zaznaczyć za pomocą atrybutu id, na przykład:

<h3 id="rysunki">Obrazki</h3>
				

Atrybut href odnośnika na ten nagłówek powinien mieć wartość #rysunki.

Jeśli celem hiperłącza jest fragment teksu, należy umieścić ten fragment wewnątrz elementu a:

					<a id="Przyklad1">W danym przykładzie</a>
				

Etykieta id powinna być unikatową.