Krok 2 - Projekt i struktura strony

W tym kroku musimy wziąć kartkę i ołówek i określić w jaki sposób będzie wyglądała nasza strona. Musimy wziąć pod uwagę:

Baner/logo strony

Menu główne

Czy będą nam potrzebne panele boczne

Gdzie będzie się znajdowała główna treść

W jakim stylu ją przedstawimy

Stopka strony

Po chwili namysłu określiłem, że moja strona, z racji, że ma charakter czysto informacyjny nie potrzebuje żadnych paneli bocznych, a przedstawię ją jako zwykły stosik:

Jak widać strona składa się z pięciu bloków (właściwie sześciu - brakuje jeszcze jednego, który będzie zawierał je wszystkie). Bloki te uzyskuje się poprzez znaczniki <div>. Mozna je porównać do klocków lub cegiełek, z których zbudowana jest strona. Divy jednak, żeby jakoś wyglądały potrzebują stylizacji w css. Inaczej są bardzo elastyczne i układają się od góry do dołu. Strona, która przeglądasz ma już określone divy, mimo, że wyglądem nie różni się od tej z kroku pierwszego. Uzbrójmy się w cierpliwość - na wszystko przyjdzie pora!

Zaczynajmy

Przejdźmy do znacznika <body> i wpiszmy w nim:

Jest to znacznik div z identyfikatorem "container". Identyfikatory będą nam potrzebne, aby formatować tylko ten znacznik w CSSie. Gdybyśmy nie określili identyfikatora, a formatowali div, to każdy z divów na stronie miałby ten sam wygląd.
Przykład:
Uznajmy, że treść byłaby blokiem 1000 na 1000 pikseli, wtedy zarówno menu, jak i stopka miałaby te same wymiary. Nie możemy do tego dopuścić i właśnie dlatego używamy identyfikatorów.

Teraz nieco o składni

Div ma swój początek i koniec. Ludzie zaczynający swoją przygodę z html'em czasami zapominają o końcu przez co robi się bałagan.
Div powinien wyglądać w ten sposób:

<div argument="określenie argumentu"> TREŚĆ </div>

Polecam podczas pracowania od razu "domykać" diva, a co dopiero wpisywać treść. Ułatwi nam to później pracę i oszczędzi frustracji.

Zawartość "pojemnika"

W divy możemy wpisywać wszystko, oprócz tego co zarezerwowane dla <head>. To oznacza, że możemy wpisywać również inne divy
działa to na zasadzie folder>podfolder w naszych znanych i lubianych systemach operacyjnych.

Kodujemy strukturę strony

Przypatrzmy się projektowi naszej strony i postarajmy się go przelać na kod. Najłatwiej jest
po prostu wpisywać go od góry do dołu i od lewej do prawej. W ten sposób znacznie łatwiej nam będzie się odnaleźć.
Na samej górze znajduje się logo strony, dlatego w container wpisujemy:

Później menu z przyciskiem strony głównej oraz spisem treści:

Znaczniki określone jako <a> to nic innego, jak linki. Ich składnia:

<a href="ŹRÓDŁO STRONY">TEKST, BĄDŹ OBRAZEK DO KLIKNIĘCIA</a>

Zwróćmy jeszcze uwagę na czytelność kodu. Możemy pisać wszystko w jednej linijce, dosłownie kładąc jeden znacznik na drugim,
ale próba edycji lub poprawki takiej strony to katorga. Wg mnie, najlepiej jest po skończeniu znacznika po prostu zrobić nowy akapit,
a w kody podrzędne odpowiednio stopniować wcięciami (przycisk TAB).

Teraz czas na div o identyfikatorze "content", czyli treść strony oraz na div o identyfikatorze "footer", czyli po prostu stopka.

No dobrze, ale dlaczego identyfikujemy po angielsku?

Angielski jest uznawany za język międzynarodowy i każdy przynajmniej raz kiedyś się z nim zetknął. Chodzi o to, aby ułatwić osobom,
które są zainteresowane budową naszej strony. W ten sposób mogą bez barier językowych, spokojnie przeanalizować nasz kod.
Jak wspomniałem w poprzedniej części, front-end jest widoczny dla wszystkich i każdy może zobaczyć
w jaki sposób nasza strona została zaprojektowana przeglądając źródło.