Gdy już poznaliśmy dostępne znaczniki i ich atrybuty oraz ogólną strukturę dokumentu możemy przystąpić do tworzenia dokumentów.
Najmniejszą częścią tekstu z jaką wygodnie pracuję się używając języka HTMKL jest akapit. Para <p> i </p> wyznacza naturalne granice akapitów, oddzielając kolejne akapity pustą linią. Domyślnie tekst akapitu jest wyrównywany do lewej strony , bez wcięcia.
Wykorzystajmy uprzednio zdefiniowany szkielet strony i jako treść wpiszmy następujący kod:
<p align="left">tekst do wyrównany do lewego marginesu </p>
<p align="center">tekst centrowany </p>
<p align="right">tekst do wyrównany do prawego marginesu </p>
W przeglądarce powinniśmy zobaczyć następujący widok:
Korzystając ze znaczników takich jak <b>, <em>, <i> spróbujemy dokonać kolejnych modyfikacji wyglądu dokumentu.
Jak widać poniższy kod w prosty sposób modyfikuje wygląd tekstu.
<p> Czas na <b>pogrubienie</b></p>
<p> na <i>kursywę</i></p>
<p> oraz na <em>wyróżnienie</em> tekstu</p>
W tym momencie można dokładnie zaobserwować specjalną rolę pełnioną przez znaki < oraz >. Gdy chcemy je umieścić w treści dokumentu zastępujemy je przez sekwencje znaków < oraz >. Znak & musimy zastąpić przez &.
Dokładne parametry użytej czcionki możemy kontrolować za pomocą znacznika <font> oraz jego atrybutów. Na przykład, znacznik następującej postaci:
<font face=”Arial” size=”5” colour=”red” >
spowoduje wybranie przez przeglądarkę czcionki typu Arial, rozmiaru 5 – około 24 pixeli ekranowych, koloru czerwonego. Z wykorzystaniem atrybutu face wiąże się pewna niedogodność. Zadeklarowana czcionka musi być obecna na komputerze użytkownika strony. Jeśli wybierzemy więc jakiś nietypowy font to wygląd strony w przeglądarce bez zainstalowanego tego fontu może bardzo odbiegać od myśli autora. Treść jednak pozostanie bez zmian.
Spróbujmy teraz dodać grafikę do dokumentu. Znacznik odpowiadający za obsługę obrazów to <img/>. Do prawidłowego działania wymagane jest podanie co najmniej dwu atrybutów: src oraz alt. Drugi z atrybutów zastąpi grafikę w przeglądarkach tekstowych. Zostanie również przeczytany w przypadku przeglądarek przystosowanych dla osób słabowidzących. Atrybut src zawiera informację o położeniu pliku zawierającego grafikę. W tym momencie musimy wprowadzić pojęcie adresu URL.
URL - (Uniform Resource Locator) Jednoznaczny Adres Zasobów , np.: http://www.wikipedia.com/wiki/URL, jest jednoznacznym i prostym zapisem podającym położenie pliku z zasobem w sieci Internet. W jego skład wchodzi kolejno: nazwa protokołu, nazwa serwera udostępniającego, ścieżka dostępu do zasobu. W bardziej rozbudowanej wersji można jeszcze dołączyć: nr portu, nazwę użytkownika oraz hasło dostępu.
W naszym przypadku gdy będziemy chcieli udostępniać nasze zasoby graficzne wystarczy podać wyłącznie ścieżkę dostępu do pliku. Tak więc nasz znacznik będzie często wyglądał tak: <img src=”../foto/prometeusz.jpg” alt=”prometeusz”>. Przy takiej konstrukcji do naszego dokumentu dołączamy plik prometeusz.jpg.
Rozbudowanie znacznika o atrybuty width oraz height pozwala dopasować wielkość obrazu do naszych potrzeb. Nie jet to fizyczna zmiana zmiana wielkości i/lub jakości danych. Po prostu po pobraniu całego pliku, przeglądarka wyświetla przeskalowany obraz. Po dodaniu kolejnego znacznika <img src=”../foto/prometeusz.jpg” alt=”prometeusz” width=”50px” height=”40px”> obraz wyglądajacy jak poniżej: