Rozpoczęcie przygody z HTML – cz.1

Related Articles

Podstawy korzystania z programu Blender

1 dzień ago

Jak wymodelować samochód w Blender?

1 dzień ago

Jak stworzyć kostkę rubika w programie Blender?

2 dni ago

Ataki Brute Force (Cloudflare) – jak skutecznie uchronić stronę?

3 dni ago

W dawniejszych czasach strony internetowe wykorzystywały właśnie głównie ten język wraz z CSS, który także omówię w osobnym artykule. HTML – hipertekstowy język znaczników, język znaczników stosowany do tworzenia dokumentów hipertekstowych.

Podstawowe znaczniki HTML:

• < !DOCTYPE HTML > – określa z jakim typem dokumentów mamy do czynienia. Jest to jeden z dwóch znaczników, który po znaku mniejszości ma wykrzyknik,
• < html > … < /html > – między tym znacznikiem umieszczana jest cała treść dokumentu,
• < head > … < /head > – zawiera podstawowe informacje o dokumencie, takie jak tytuł, opis, linki do arkuszy stylów i skryptów,
• < title > … < /title > – tytuł strony, który pojawia się na pasku przeglądarki oraz w wynikach wyszukiwania.
• < meta … > – znacznik opisujący szczegółowo opisujący zawartość strony. W zależności od użytych argumentów może zawierać opis strony (description – widoczne pod tytułem w wynikach wyszukiwania), słowa kluczowe, kodowanie dokumentu czy autora strony.
• < link … > – element określający relację między dokumentem a zewnętrznym zasobem.
• < style > … < /style > – wewnętrzny arkusz stylów.
• < script > … < /script > – umożliwia umieszczenie skryptu w kodzie HTML.
• < body > … < /body > – znacznik zawierający główną treść dokumentu.
• < div > … < /div > – blok wykorzystywany do budowy szkieletu dokumentu.
• < hx > … < /hx > – nagłówek określonego przez x stopnia (od 1 do 6).
• < p > … < /p > – paragraf tekstu.
• < img … > – element graficzny.
• < a > … < /a > – odnośnik, link do innej witryny lub zasobu, wewnętrzny lub zewnętrzny.
• < ul > … < /ul > – lista nieuporządkowana.
• < ol > … < /ol > – lista uporządkowana.
• < li > … < /li > – element listy.
• < table > … < /table > – tabela.
• < tr > … < /tr > – wiersz w tabeli.
• < td > … < /td > – komórka, będąca elementem wiersza.
• < th > … < /th > – komórka będąca nagłówkiem dla kolumny.
• < form > … < /form > – formularz. Wewnątrz tych znaczników umieszcza się elementy takie jak pola tekstowe, etykiety, checkboxy, pola wyboru, przyciski.
• < strong >…< /strong > – znacznik semantyczny informujący o ważności tekstu.
• < em > … < /em > – znacznik semantyczny, wyróżnienie tekstu definiujące emfazę.
• < span >…< /span > – znacznik liniowy używany głównie do stylowania fragmentu tekstu.
• < !– … — > – komentarz, niewidoczny dla odwiedzającego tekst
• < br > … < /br> – złamanie wiersza bez nowego akapitu
• < i > … < /i> – czcionka pochylona
• < blink > … < /blink> – czcionka migająca
• < u > … < /u> – czcionka podkreślona
• <sup> … < /sup> – indeks górny
• <sub> … < /sub> – indeks dolny
• <font> … < /font> – ustala czcionkę
• <hr> … < /hr> – linia pozioma
• <center> … < /center> – wyśrodkowanie
• <right> … < /right> – wyrównanie do prawej strony
• <left> … < /left> – wyrównanie do lewej strony
• <justify> … < /justify> – wyjustowanie
• <strike> … < /strike> – czcionka przekreślona

Podział znaczników:

Znaczniki obecne w kodzie HTML możemy podzielić na kilka sposobów:

• na występujące w sekcji < head > i < body >,
• na semantyczne i niesemantyczne,
• na liniowe i blokowe,
• pojedyncze i podwójne.

Odsyłacze:

• <a href=”nazwa”>tekst świadczący o istnieniu odsyłacza</a> – Tworzy połączenie do pliku – po podaniu nazwy pliku lub do strony WWW po podaniu jej adresu.
• <a href=mailto:e-mail>tekst świadczący o istnieniu odsyłacza</a> – Odsyłacz umożliwiający internaucie wysłanie poczty e-mail ze strony.
• <a href=”#nazwa”>tekst świadczący o istnieniu odsyłacza</a> – Odsyłacz umożliwiający internaucie przejście do określonego wcześniej
  miejsca na stronie WWW „nazwa”. Miejsce to ustala się przy użyciu znacznika <a name=”nazwa”>.
• <img src=”nazwa pliku”> – Umożliwia umieszczenie grafiki na stronie.

Struktura dokumentu HTML:

Pierwsza linijka informuje przeglądarkę o wersji HTML, w której napisana jest strona. Została ona skrócona i uproszczona w porównaniu z wersjami poprzednimi. W znacznikach umieszczamy znaczniki meta, skrypty oraz tytuł strony (title). Został również uproszczony znacznik meta – informujący o rodzaju kodowania znaków na stronie (UTF-8, zawiera kodowanie znaków w języku polskim).

Wykorzystaliśmy tu również wprowadzone w html5 znaczniki struktury strony: nagłówek, sekcję, stopkę. Wymaganym elementem strony internetowej zgodnie ze standardem jest również wykorzystany tu znacznik nagłówka pierwszego stopnia: H1.