HTML, Jak się uczę, Newsy, Początki programowania, Programowanie

Czym tak właściwie jest HTML?

Zaczynając od samego początku czym tak właściwie jest HTML?

Skrót html oznacza Hypertext Markup Language – czyli hipertekstowy język znaczników. A bardziej „po polsku” – chodzi o język oparty o hiperłącza, zbudowany ze znaczników. Język html stosuje się do tworzenia stron internetowych. Przeglądarki internetowe odczytują składnię html i interpretują ją, wyświetlając stronę.
Pierwsza strona internetowa była napisana w samym html a wyglądała ona własnie TAK

 

Historia rozwijania HTML

Szczególnie osobom, które dopiero zaczynają przygodę z html’em łatwo będzie się pogubić w tym całym nomenklaturowym zgiełku. O co w ogóle chodzi z tymi cyferkami?

Html jest stale rozwijającym się standardem. Za jego rozwój oficjalnie odpowiedzialna jest organizacja W3C (World Wide Web Consortium).  Grupa robocza WHATWG rozpoczęła pracę nad nowym standardem w 2004 roku, jednocześnie HTML 4.01 nie było aktualizowane od 2000 roku. World Wide Web Consortium (W3C) koncentrowało się na przyszłych zmianach w XHTML 2.0. W 2009 roku W3C postanowiło, że XHTML 2.0 nie będzie już rozwijane.

Ostatnim zatwierdzonym standardem Html, była wersja czwarta (HTML4) z 1999 roku. Po drodze pojawiło się kilka pomysłów co zrobić z dalszym rozwojem tego standardu, aż w końcu przyjęto rozwój standardu Html z piątką na końcu. Skąd ta podwójna pisownia HTML5 i HTML 5?

Organizacja WHATWG rozwijając nowy standard odnosiła się do niego jako HTML5. Natomiast W3C głosowało za przyjęciem nazwy HTML 5 ze spacją. Od tej pory powstał rozłam nazw, który nie był dobry dla marketingu. Jednak w końcu ustalono, że jedna i druga organizacja, przyjeła nazwe HTML5.  W3C oraz WHATWG obecnie pracują wspólnie nad rozwojem HTML5.

 

Jaki standard mam wybrać HTML4 czy HTML5?

Jak najbardziej HTML5,  jest to rozwinięcie poprzedniego. Jeśli ktoś zna HTML w wersji poprzedniej wystarczy tak na prawdę, że uzupełni swoją wiedzę o wprowadzone zmiany i będzie mógł się bezproblemowo przesiąść na nowy standard. Kilka rzeczy zostało usuniętych z html4, aby poprawić czytelność kodu i kilka rzeczy zostało wprowadzonych, aby wspomóc użytkowników. W gruncie rzeczy te dwa standardy, aż tak mocno się nie różnią od siebie, jeśli chodzi o tworzenie stron internetowych.

Czym zatem są znaczniki?

Znaczniki to takie wyrażenia w ostrych nawiasach <>, z którymi już się zapewne nie raz spotkaliście np. <head>, dlatego mamy język znaczników (nie mylić z językiem programowania).

Język Html to język opisu stron internetowych. Czyli nazywanie poszczególnych elementów na stronie, przykładowo w tym wpisie występuje element nagłówku <h2> i paragrafu <p>. W języku html oddzielnie oznaczymy tekst nagłówka, a oddzielnie tekst paragrafu. Samo oznaczenie elementów nic szczególnego nam nie daje. Musimy je jeszcze sformatować przy użyciu języka styli CSS.

Znaczniki możemy podzielić na znaczniki otwarcia oraz zamknięcia. Znaczniki otwarcia od znaczników zamknięcia różnią się jedynie pionową kreską pochyloną w prawo, tzw. forward slash, który poprzedza wyrażenie html. Pomiędzy znacznikami otwarcia oraz zamknięcia znajduje się miejsce obowiązywania elementu. Tak jak w przykładzie poniżej w znaczniku <p> , znajduje się treść paragrafu.

Deklaracja HTML

Zanim rozpoczniemy prace nad nową stroną, pierwszą linijką kodu jaką napiszemy, będzie deklaracja dokumentu. Czym ona jest?  Jest to informacja dla przeglądarki z jakim typem dokumentu ma do czynienia. Zapis:

informuje przeglądarkę, że jest to dokument html (strona internetowa) i może go przetworzyć, wyświetlić w naszej przeglądarce.

Znacznik HTML

Następnym zapisem zaraz po deklaracji jakim rodzajem jest dokument, czas na deklarację języka, w którym dokument zostanie napisany. Deklaracji języka html dokonujemy znacznikiem <html>. Dodamy teraz ten znacznik, pod znacznikiem deklaracji dokumentu. Tak więc wszystko co jest wyświetlane pomiędzy znacznikiem <html> </html> jest to zawartość naszej strony internetowej. Warto również od razu wspomnieć przeglądarce w jakim języku będzie pisana nasza strona czy po Angielsku czy po Polsku czy też w innym języku. A wystarczy tylko dodać do html następujący zapis:

Dopisek lang  jest to deklaracji języka stosowanego na naszej stronie internetowej.

Znacznik HEAD

Świetnie mamy już zdefiniowane w jakim języku piszemy, następne co musimy zrobić to dodać linijkę kodu elementem <head> czyli nagłówek. Element head opisuje ustawienia dokumentu html. Nasz kod powinien wyglądać tak:

Element head jest elementem języka html, dlatego umieścimy go pomiędzy znacznikami html. Znacznik <html> jest rodzicem znacznika <head> a ten zaś jest dzieckiem tego pierwszego.

Warto też dodać dwie linijki kodu, które mówią nam o polskich znakach występujących w tekście html <meta charset="UTF-8">

Pierwszym elementem, jaki zapiszemy w sekcji <head>, jest deklaracja zestawu znaków, który będzie używany na stronie internetowej, aby tekst wyświetlał się odpowiednio. Zestaw znaków, którego będziemy używali to UTF-8.

Drugim elementem, który zapiszemy w naszym kodzie będzie to tytuł naszej strony, czyli <Title>Moja Pierwsza Strona<Title>

Znacznik Body

Znacznik Head mamy już za sobą, teraz czas na część elementu body. Ustawienia strony znajdują się w sekcji head, natomiast cała jej treść, czyli to co będzie wyświetlane nam na ekranie, będzie znajdować się w elemencie body czyli całemu ciału. Head jako głowa, nagłówek strony a body ciało, zawartość strony. Czyli pomiędzy znacznikami <head></head> informujemy przeglądarkę o  wszystkich informacjach, które chcemy aby były umieszczone na stronie. Nasz dokument powinien wyglądać teraz tak:

Treść Strony

Po zakończeniu struktury, zadeklarowaniu zestawu znaków i tytule naszej strony, czas na punk ostatni czyli na jej treść. Skorzystamy tutaj z Nagłówka<h1></h1> i Akapitu strony <p></p>. Informacje, które chcemy, aby znalazły się na naszej stronie musimy zawrzeć w sekcji <body>. A nasz dokument końcowy powinien wyglądać w następujący sposób:

Aby sprawdzić naszą stronę internetową musimy najpierw odpowiednio zapisać nasz dokument html. W notatniku bądz innym edytorze kodu (polecam Sublime Text) z menu na górnej belce wybieramy polecenie Plik, a następnie opcję Zapisz, w menu zapisu zmieniamy nazwę i rozszerzenie pliku na index.html. Zapisujemy plik w dowolnym miejscu na naszym dysku, a następnie otwieramy go w naszej przeglądarce internetowej. Waszym oczom powinien ukazać się taki oto tekst z nagłówkiem.

2 thoughts on “Czym tak właściwie jest HTML?

  1. Ciekawy blog, zawierajacy duzo przydatnych informacji
    a napisany przystepnym, szczegolnie dla poczatkujacych
    marketingowcow jezykiem. Chetnie bede tu zagladac.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *