HTML

HTML (HyperText Markup Language) to język znaczników pozwalających opisać strukturę strony internetowej oraz zależności między nimi. Umożliwia także zdefiniowanie wyglądu strony. Implementacja języka jest ułatwiona, bo jest on standaryzowany. Aktualnym standardem jest HTML5, który obsługuje większość współczesnych przeglądarek.

Czy potrzebuję specjalnego programu, by pisać kod HTML?

Kod źródłowy HTML ma postać tekstową, więc można go pisać w dowolnym edytorze tekstu. Na początek nie potrzebujesz żadnego płatnego oprogramowania. Wystarczy Notatnik, który jest wbudowany w każdy system Windows lub jego odpowiednik na innych systemach operacyjnych. Przy prostych stronach w zupełności wystarcza, jednak istnieją bardziej zaawansowane rozwiązania. Alternatywą jest Notepad++, który ma kilka dodatkowych funkcji, między innymi kolorowanie słów kluczowych oraz obsługę wielu plików naraz.

Warto poszukać zintegrowanego środowiska programistycznego, które jeszcze bardziej ułatwia pracę. Przykładem takiego programu jest darmowy Microsoft Visual Studio Cod. Zawiera on mnóstwo dodatków, obsługuje większość współczesnych języków programowania (w tym HTML), ma wbudowane inteligentne podpowiadanie składni oraz ułatwia organizację większego projektu.

Edytorów jest więcej, warto poszukać takiego, który będzie nam odpowiadał.

Co w sekcji `BODY`, a co w `HEAD`?

Ogólna zasada mówi, że ustawienia trafiają do sekcji, którą wyznacza element head, a to, co wyświetla się na stronie – do sekcji body.

Przykładowe znaczniki w sekcji `head`

Elementy, które powinny zostać umieszczone w sekcji head:

<title>tytuł strony</title>

<meta name="Description" content="Opis zawartości strony"/>

<meta name="Keywords" content="Słowa kluczowe oddzielone przecinkami"/>

<meta http-equiv="Content-Type" content="System kodowania znaków" />

<meta http-equiv="Content-Language" content="Język strony"/>

<meta name="Author" content="Autor strony"/>

<meta http-equiv="Reply-To" content="Adres e-mail do kontaktu"/>

Przykładowe znaczniki w sekcji `body`

Elementy, które powinny zostać umieszczone w sekcji body:

Linia 1. otwórz nawias ostrokątny body bgcolor znak równości cudzysłów kod koloru RGB cudzysłów zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny br prawy ukośnik zamknij nawias ostrokątny otwórz nawias ostrokątny wykrzyknik minus minus znacznik przejścia do nowej linijki minus minus zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny ol zamknij nawias ostrokątny lista uporządkowana otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 6. otwórz nawias ostrokątny li zamknij nawias ostrokątny znacznik elementu listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 8. otwórz nawias ostrokątny wykrzyknik minus minus przykład listy uporządkowanej minus minus zamknij nawias ostrokątny. Linia 9. otwórz nawias ostrokątny ol zamknij nawias ostrokątny Epoki literackie. Linia 10. otwórz nawias ostrokątny li zamknij nawias ostrokątny antyk otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 11. otwórz nawias ostrokątny li zamknij nawias ostrokątny średniowiecze otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny li zamknij nawias ostrokątny renesans otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny li zamknij nawias ostrokątny barok otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny li zamknij nawias ostrokątny oświecenie otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny li zamknij nawias ostrokątny romantyzm otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny li zamknij nawias ostrokątny pozytywizm otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 17. otwórz nawias ostrokątny li zamknij nawias ostrokątny Młoda Polska otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 18. otwórz nawias ostrokątny li zamknij nawias ostrokątny dwudziestolecie międzywojenne otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 19. otwórz nawias ostrokątny li zamknij nawias ostrokątny modernizm otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 20. otwórz nawias ostrokątny prawy ukośnik ol zamknij nawias ostrokątny. Linia 22. otwórz nawias ostrokątny ul zamknij nawias ostrokątny lista wypunktowana otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny. Linia 23. otwórz nawias ostrokątny li zamknij nawias ostrokątny znacznik elementu listy otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny wykrzyknik minus minus przykład listy wypunktowanej minus minus zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny ul zamknij nawias ostrokątny Polskie pisarki. Linia 27. otwórz nawias ostrokątny li zamknij nawias ostrokątny Maria Konopnicka otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny li zamknij nawias ostrokątny Maria Dąbrowska otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 29. otwórz nawias ostrokątny li zamknij nawias ostrokątny Zofia Nałkowska otwórz nawias ostrokątny prawy ukośnik li zamknij nawias ostrokątny. Linia 30. otwórz nawias ostrokątny prawy ukośnik ul zamknij nawias ostrokątny.

<body bgcolor="kod koloru RGB">
    
<br/> <!--znacznik przejścia do nowej linijki-->
    
<ol>lista uporządkowana</ol>
<li>znacznik elementu listy</li>
    
<!--przykład listy uporządkowanej-->
    <ol>Epoki literackie
        <li>antyk</li>
        <li>średniowiecze</li>
        <li>renesans</li>
        <li>barok</li>
        <li>oświecenie</li>
        <li>romantyzm</li>
        <li>pozytywizm</li>
        <li>Młoda Polska</li>
        <li>dwudziestolecie międzywojenne</li>
        <li>modernizm</li>
    </ol>
    
<ul>lista wypunktowana</ul>
<li>znacznik elementu listy</li>
    
<!--przykład listy wypunktowanej-->
    <ul>Polskie pisarki
        <li>Maria Konopnicka</li>
        <li>Maria Dąbrowska</li>
        <li>Zofia Nałkowska</li>
    </ul>

W sekcji body umieszczamy również wszystkie znaczniki manipulujące wyglądem tekstu.

Nagłówki

Na swojej stronie możesz używać stopniowalnych nagłówków.

Nagłówek pierwszego stopnia

<h1>tekst</h1>

Znaczniki dla kolejnych poziomów wyglądają bardzo podobnie, zmienia się wyłącznie cyfra.

Jak jednak wyglądają jeden pod drugim? Sprawdźmy.

Nagłówek drugiego stopnia

Nagłówek trzeciego stopnia

Nagłówek czwartego stopnia

Nagłówek piątego stopnia

Nagłówek szóstego stopnia

Ważne!

Korzystając z witryny ZPE, nowe nagłówki w markdownie możesz wprowadzać za pomocą #. Jeden # to jeden poziom nagłówka.

Nagłówek piątego stopnia:

##### Nagłówek piątego stopnia

Nagłówki możemy również wyrównywać.

<hx align="kierunek wyrównania">tekst</hx>

Do wyboru mamy kierunki: left, right, center.

Akapity

Przejście do nowego akapitu sygnalizujemy znacznikiem:

<p>

Akapity, podobnie jak nagłówki, możemy wyrównywać.

<p align="kierunek wyrównania">tekst</p>

Do wyboru mamy kierunki: left, right, center.

Jeśli w danym miejscu chcemy zaznaczyć koniec wiersza, ale nie akapitu, posłużymy się znacznikiem:

<br/>

Blokadę łamania wprowadzimy natomiast następującym znacznikiem:

<nobr>tekst</nobr>

Listy

Na budowanej stronie możemy chcieć zamieścić listę. Jak to zrobić?

Najpierw zdecydujmy, czy chcemy stworzyć listę numerowaną czy nienumerowaną.

Lista nienumerowana (nieuporządkowana)

Wprowadzamy ją następującymi znacznikami:

<ul>lista</ul>

To jednak nie wszystko, ponieważ oznaczyć powinniśmy również jej kolejne elementy. Jak to zrobić?

<ul>
	<li>pierwszy element listy</li>
    <li>drugi element listy</li>
    <li>trzeci element listy</li>
</ul>

Lista numerowana (uporządkowana)

Wprowadzamy ją następującymi znacznikami:

<ol>lista</ol>

Lista wraz z elementami wygląda podobnie jak lista nieuporządkowana:

<ol>
	<li>pierwszy element listy</li>
    <li>drugi element listy</li>
    <li>trzeci element listy</li>
</ol>

Odsyłacze

Nie bez powodu internet nazywamy siecią. Wszechobecne hiperłącza nie są już dla nikogo zaskoczeniem. Twoja strona internetowa zapewne będzie zawierać przynajmniej kilka odsyłaczy prowadzących do dokumentów, innych witryn, etc. Jak zatem przygotować taki odsyłacz?

<a href="miejsce docelowe">tekst hiperłącza</a>

Hiperłącza mogą prowadzić nie tylko do innych witryn, ale też otwierać klienta poczty, by wysłać maila na podany adres. Wymagają wtedy niewielkiej modyfikacji:

<a href="mailto:adres email">tekst hiperłącza</a>

Jeśli utworzysz odnośnik, tekst hiperłącza domyślnie będzie miał kolor niebieski oraz będzie podkreślony.

Komentarze

<!-- treść komentarza -->

Cokolwiek umieścisz w znaczniku komentarza zostanie zignorowane przez przeglądarkę. Tag ten jest niezmiernie użyteczny z punktu widzenia programisty. Umożliwia dokumentację kodu - wyjaśnienie jego działania, dzięki czemu, kiedy w przyszłości wrócisz do swojego kodu, będziesz wiedzieć, za co odpowiadał dany element.

Ciekawostka

Większość współczesnych przeglądarek stron WWW ma wbudowane narzędzia ułatwiające programistom tworzenie stron internetowych. Jeśli korzystasz z systemu Windows, otworzysz je przyciskiem F12.

Funkcje, jakie udostępniają, mogą ułatwić naprawianie błędów na stronie. Dostępna jest inspekcja kodu źródłowego, analiza ruchu sieciowego pomiędzy przeglądarką a serwerem, analiza wydajności strony i wiele innych.

Polecenie 1

Wejdź na dowolną stronę WWW i uruchom narzędzia programistyczne. Przejrzyj dostępne funkcje, sprawdź co się dzieje, kiedy przeglądasz stronę i wchodzisz z nią w interakcję.

Na dobry początek

Powtórzenie najważniejszych informacji o HTML

Elementy języka HTML

HTML

Czy potrzebuję specjalnego programu, by pisać kod HTML?

Co w sekcji `BODY`, a co w `HEAD`?

Przykładowe znaczniki w sekcji `head`

Przykładowe znaczniki w sekcji `body`

Nagłówki

Nagłówek pierwszego stopnia

Nagłówek drugiego stopnia

Nagłówek trzeciego stopnia

Nagłówek czwartego stopnia

Nagłówek piątego stopnia

Nagłówek szóstego stopnia

Akapity

Listy

Lista nienumerowana (nieuporządkowana)

Lista numerowana (uporządkowana)

Odsyłacze

Komentarze

Na dobry początek

Powtórzenie najważniejszych informacji o HTML

Elementy języka HTML

HTML

Czy potrzebuję specjalnego programu, by pisać kod HTML?

Co w sekcji BODY, a co w HEAD?

Przykładowe znaczniki w sekcji head

Przykładowe znaczniki w sekcji body

Nagłówki

Nagłówek pierwszego stopnia

Nagłówek drugiego stopnia

Nagłówek trzeciego stopnia

Nagłówek czwartego stopnia

Nagłówek piątego stopnia

Nagłówek szóstego stopnia

Akapity

Listy

Lista nienumerowana (nieuporządkowana)

Lista numerowana (uporządkowana)

Odsyłacze

Komentarze

Co w sekcji `BODY`, a co w `HEAD`?

Przykładowe znaczniki w sekcji `head`

Przykładowe znaczniki w sekcji `body`