Kodowanie HTML
Słowem wstępu
HTML sam w sobie jest językiem znaczników, któremu coraz bliżej do prostego języka programowania niż jego pierwowzoru XML’a. Co przez to rozumieć? Jeśli chcemy zakodować poprawną stronę HTML to musimy zwracać uwagę na pewne z góry ustalone standardy np. walidację HTML czy standardy języka HTML5 – jeśli oczywiście tworzymy stronę w HTML5, do czego gorąco namawiam. Dla początkujących koderów lub osób, które chcą zacząć tworzyć strony www, ale nie znają tego języka nie będzie to stanowiło problemu, ale dla osób wcześniej tworzących strony w XHTML standardy HTML5 mogą wydać się lekkim ograniczeniem. Pomimo tego warto przyswoić sobie wiedzę na temat semantyki HTML5- semantyka ta znacząco porządkuje proces kodowania html, co postaram się opisać w poniższym artykule.
Kodowanie HTML – od czego zacząć?
Pierwszą kwestią, która pojawi się na drodze młodego kodera html będzie wybór edytora tekstowego. Jak go wybrać i czym się kierować? Jeśli już wcześniej programowałeś to polecam korzystać z dotychczasowego edytora – w większości przypadków edytory te również mają markup do tworzenia stron internetowych. Jeżeli jednak do tej pory nie kodowałeś polecam Ci 4 edytory, z których korzystałem lub korzystam nadal:
- Notepad ++
- SublimeText
- Brackets
- Atom
Aktualnie korzystam z edytora Atom, nad którym spędziłem większość swojego koderskiego życia, lecz pozostałe edytory nie odstają mu poziomem. Moim zdaniem warto zainstalować sobie wszystkie 4 edytory i spróbować zakodować w nich tę samą stronę internetową – dzięki temu w prosty sposób zobaczysz, który edytor jest dla Ciebie wygodniejszy. Nie zapomnij jednak o tym, że SublimeText, Brackets oraz Atom mają biblioteki dodatków, które znacząco skrócą czas potrzebny do utworzenia strony. Nie będę pisać o wszystkich dodatkach, ale polecam zainstalować emmet oraz beautify, które znacznie ułatwiają proces pisania kodu i sprawią, że od razu nauczysz się poprawnej gramatyki HTML. Odradzam korzystanie z podstawowego notatnika, gdyż moim zdaniem czyni on więcej szkody niż pożytku, chociaż wg niektórych warto od niego rozpocząć.
Mam edytor, co dalej?
Proces kodowania html rozpoczynamy od deklaracji dokumentu html. Aby tego dokonać tworzymy w wybranym przez nas edytorze plik html, np. index.html. Następnie wpisujemy w nim:
<!DOCTYPE html>
w tym momencie poinformowaliśmy przeglądarkę, że ma odwoływać się do tego zakresu DTD (document type definition). Po resztę wiedzy teoretycznej odnośnie DTD odsyłam do Wikipedii.
W następnej kolejności deklarujemy strukturę HTML. Na początku wspomniałem, że język HTML wywodzi się z języka XML i że jest językiem znaczników. Z tego powodu posiada budowę zagnieżdżonej listy, o czym przekonacie się podczas kodowania strony.
Pierwszym elementem naszej listy będzie element drzewa (root element). Jest to tag, który informuje przeglądarkę o tym, że ma do czynienia ze stroną internetową:
<html>
</html>
Jednak przeglądarka może otrzymać od nas jeszcze więcej informacji. Najprawdopodobniej nieraz widziałeś ciekawe czcionki, dynamiczne elementy itp. Większość z nich znajduje się w innych plikach, które bez odpowiedniego zaimplementowania w strukturze dokumentu HTML nie byłyby dostępne, gdyż przeglądarka nie wiedziałaby, do jakiego pliku lub katalogu ma się odwołać.
Znacznikiem, który zawiera w sobie te elementy jest znacznik head, a deklarujemy go w następujący sposób:
<head>
</head>
Po to, aby dokładnie omówić jakie elementy mogą zawierać się w znaczniku przedstawię przykład, którego zawsze będziesz używać przy kodowaniu stron html. Jeżeli tworzysz strony dla rynku wykorzystującego „nasz” alfabet musisz zadeklarować kodowanie UTF-8, aby tego dokonać deklarujesz znacznik o atrybucie charset = utf-8:
<head>
<meta charset=utf-8/>
</head>
Dzięki zadeklarowaniu kodowania utf8 w sposób przedstawiony powyżej, nie powinieneś już mieć kłopotu z brakiem literek: ą, ę, ó itp.
Kolejnym elementem, który znajdzie się w praktycznie każdym projekcie jest znacznik , który jak sama nazwa wskazuje jest stosowany do tworzenia tytułów stron:
<head>
<meta charset=utf-8 />
<title>Tutaj umieść tytuł kodowanego html'a</title>
</head>
W związku z tym że style inline są złem wcielonym (style CSS mogą być dodawane zarówno w innym pliku, jak i w pliku HTML do odpowiednich znaczników), gdyż zaśmiecają nasz kod HTML tworzymy plik o rozszerzeniu.css.
Zadanie nr. 1
Utwórz sobie nowy plik i nazwij go style.css, następnie zapisz w nim:
html {
color:blue;
}
Powyższa deklaracja zmieni kolor czcionki w całym dokumencie html na kolor niebieski. Zapisz plik style.css w tej samej lokalizacji, co plik index.html. Następnym krokiem będzie deklaracja linku do dokumentu CSS:
<head>
<meta charset=utf-8 />
<title>Tutaj umieść tytuł kodowanego html'a</title>
<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"style.css\"/>
</head>
Na tym możemy zakończyć deklarację znacznika – sądzę, że mniej więcej rozumiesz jak on działa i co można w nim zawrzeć. Oczywiście są jeszcze inne deklaracje, jak chociażby deklaracja pliku javascript, lecz robi się ją analogicznie do deklaracji pliku CSS.
Kolejną ważną, o ile nie najważniejszą kwestią w dokumencie html jest deklaracja znacznika , który zawiera w sobie wszystkie elementy strony mające zostać wyświetlone na ekranie przeglądarki:
<body>
</body>
Po zapisaniu w pliku index.html znacznika otrzymamy już podstawowy schemat dokumentu html:
Co dalej?
Zacznijmy od otworzenia pliku html w przeglądarce. Bez względu na to, jakiej przeglądarki używasz po prostu przeciągnij plik html na nią. Plik powinien się otworzyć, a Twoim oczom powinna ukazać się biała (lub niebieska, po poprzednim zadaniu) pusta strona. Jeśli tak jest to znaczy, że wszystko działa!
Zaraz zaraz, tyle napisaliśmy, a nic się nie pojawiło? Czemu? Ponieważ poprawnie zadeklarowane znaczniki html są niewidoczne w oknie przeglądarki. Pomyśl sobie, co by było gdyby strony internetowe musiały być wyświetlane razem z ich znacznikami? Tak mamy czystą sytuację na stronach – chyba, że są kiepsko zrobione.
Nie martw się, nie zostawię Cię z niczym. Wykonamy jeszcze kilka kroków, aby stworzona strona przypominała, chociaż szablon html, który później będziesz mógł swobodnie edytować. Napisałem wcześniej o HTML5, więc obecnie zajmę się wyjaśnianiem jego semantyki. Następnie wdrożymy ją do naszego projektu. Serdecznie zapraszam.
Semantyka HTML5
W porównaniu do poprzedniej wersji języka HTML, wersja 5 przeszła gruntowną zmianę, która przyczyniła się do utworzenia pewnego standardu semantycznego.
Kodowanie html przypomina obecnie tworzenie książki. Książka – strona www dzielona jest na dobrze zdefiniowane sekcje – spis treści, nagłówek, treść, stopkę, przypisy itp. Proces ten znacząco standaryzuje pracę i zwiększa czytelność kodu, zarówno dla przeglądarek, robotów indeksujących, jak i programistów.
Poniżej przedstawiam najczęściej stosowane znaczniki HTML5:
Znacznik main
<main>
</main>
Odwołuje się do głównej części strony, w której zawarte są najważniejsze informacje dla użytkownika (tekst w książce). Przeważnie będzie to część od nagłówka do stopki z wyłączeniem paneli bocznych (w których znajdują się np. menu boczne).
Znacznik header
<header>
</header>
Odnosi się do nagłówka naszej strony lub sekcji i powinien zawierać w sobie „intro” strony. W znaczniku tym znajdziemy przede wszystkim menu nawigacyjne, logo strony oraz inne „ważne” dodatki jak np. zmianę języka.
Znacznik footer
<footer>
</footer>
Jak sama nazwa wskazuje na stopkę strony lub sekcji. Do niedawna był ogromny boom na stopki na stronach, które potrafiły mieć większą wysokość niż zawartość main. Obecnie w zależności od tego czy wykorzystujemy system CMS czy „prosty” szablon html, stopka powinna zawierać wybrane elementy menu głównego, przycisk powrotu na górę strony (przydatny z użytkowego punktu widzenia) oraz linki do sociali (chyba, że są podane w innej sekcji i np. podążają za użytkownikiem).
Znacznik aside
<aside>
</aside>
Przeważnie jest wykorzystywany w przypadku stron wielokolumnowych. Wszelkie menu boczne – sidebar, reklamy lub odnośniki do innych stron wewnętrznych powinny znaleźć się w tym znaczniku. Z założenia prezentuje on niższą „moc” niż znacznik main.
Znacznik nav
<nav>
</nav>
Służy do określania menu nawigacyjnego na stronie www. Powinno się stosować go raz do oznaczanie menu głównego.
Znacznik section
<section>
</section>
Używany jest do oznaczania sekcji dokumentu. Sekcją bardzo często obejmujemy znaczniki blokowe div, w których treści odnoszą się do tej samej tematyki.
Znacznik article
<article>
</article>
Według dokumentacji HTML5 powinien zawierać w sobie treść, która jest niezależna w stosunku do całej strony. Ten dość zagmatwany opis oznacza mniej więcej tyle, że ten wpis powinien znajdować się w tym znaczniku.
Jest jeszcze wiele innych semantycznych znaczników, które często wykorzystasz w procesie kodowania html. Jednak ww. będą wykorzystywane praktycznie zawsze – wszystko zależy jednak od założeń projektu lub Twojej nieuwagi. Mając już podane znaczniki HTML5 wypełnimy nasz wcześniej przygotowany szkielet HTML5 o potrzebne dane.
Kodowania html ciąg dalszy
Projekt kodowania html zakończyliśmy na takim etapie:
Zadanie nr. 2
Zajmijmy się wypełnianiem strony odpowiednią treścią. W znaczniku body utworzymy nagłówek naszej strony, w której znajdzie się miejsce na logo oraz nawigację, podzieloną na 4 adresy:
Po zapisaniu naszego kodu html naszym oczom powinien ukazać się taki oto efekt:
Aby nie mieszać procesu kodowania html ze stylowaniem css, drugim procesem zajmiemy się później, po skończeniu szkieletu strony (można robić to na bieżąco, lecz ja preferuje takie rozwiązanie podczas codziennej pracy).
ZADANIE NR. 3
Mając nagłówek strony warto zacząć od wypełniania strony treścią. Załóżmy, że strona to landing page i chcesz zawrzeć w niej jak najwięcej informacji o swojej działalności. W znaczniku body po znaczniku header umieścimy znacznik main oraz aside. Stronę podzielimy na układ 2 kolumnowy. W lewej kolumnie znajdą się 3 sekcje zróżnicowane tematycznie oznaczone znacznikami section, natomiast w prawej kolumnie strony znajdą się linki graficzne do stron firm partnerskich, które znajdą się w znaczniku aside.
Po zapisaniu nasza strona będzie się prezentowała następująco:
Jak widzisz, obecnie nasze elementy nie licząc nawigacji i obrazków umiejscowione są jedne na drugim, a nie obok jak to było założone (main | aside). Aby dobrze zademonstrować Ci dlaczego tak się dzieje, wzbogacę stronę o kilka stylów CSS, spójrz na rysunek poniżej:
Elementy dokumentu html dzielą się na 2 główne rodzaje, elementy blokowe oraz elementy liniowe. Elementy blokowe z założenia zajmują 100% długości dokumentu, natomiast elementy liniowe tylko tyle ile potrzebują do pełnego wyświetlenia ich zawartości. Jeśli popatrzeć na rysunek to elementem blokowym będzie np. znacznik main, który zawiera w sobie blokowe elementy section. Kolejnym elementem naszej strony jest znacznik blokowy aside, który zawiera 3 liniowe elementy a, wewnątrz których mieszczą się liniowe znaczniki img. Mam nadzieję że podział ten jest dla Ciebie zrozumiały po powyższym wyjaśnieniu, jeśli nie, nie przejmuj się ten oczywisty podział utrwali Ci się z czasem.
Wpis już jest dość rozbudowany, więc do poznania stylów CSS, którymi zmodyfikujemy stworzony projekt strony html zapraszam do kolejnego artykułu, pt. kodowanie-css.", "seoTitle": "Kodowanie HTML - Jacob Sobota - tworzenie stron internetowych
Powrót do listy artykułów