Dziś trochę z innej beczki, chciałbym przedstawić podstawy kodowania z pomocą HTML i CSS. Nie będzie to kurs tworzenia stron www, tylko podstawowa wiedza, która pozwoli Tobie, jako grafikowi lepiej współpracować z programistą i zrozumieć niektóre pojęcia.

HTML, CSS i języki programowania czym to się różni?

Generalnie HTML i CSS to nie są języki programowania. Są one o wiele łatwiejsze do zrozumienia, ponieważ nie są tak złożone i posiadają w dużym stopniu ograniczone możliwości. Potocznie na ludzi, którzy się nimi posługują mówi się koderzy. Natomiast języki programowania umożliwiają pracę bardziej abstrakcyjną, tworząc część logiczną strony i współpracując z bazami danych. Z ich pomocą zaprojektujemy trudniejsze elementy strony. Dobrym przykładem jest możliwość rozpoczęcia pewnej akcji na stronie dopiero w momencie, kiedy użytkownik będzie widział animowany element na swoim ekranie. Języki programowania dzielą się na dwie główne grupy: Front-end i Back-end. Pierwsza z nich działa po stronie klienta, czyli osoby która przegląda stronę i odpowiada za część interaktywną z użytkownikiem Przykładowym językiem front-endowym jest Javascript. Natomiast druga grupa jest niewidoczna i pracuje po stronie serwera. Tutaj warto wymienić PHP. Jest to język, na którym opiera się większość CMS (System zarządzania treścią) jak WordPress. Wracając do głównego tematu wpisu, czyli po pierwsze HTML, buduje całą strukture strony i jej semantyczną część. Każdy tekst i element strony musi się w nim zawrzeć. Wpisując tekst w jakimkolwiek miejscu dokumentu html, na pewno zobaczysz go na stronie chyba, że akurat został ukryty w jakiś sposób. Dokument HTML również zawiera takie elementy jak tytuł strony i jej opis. Każdy z elementów jest przypisany do jakiegoś tagu, który określa jego znaczenie na stronie.  CSS działa na zasadzie linków do tagów HTML którym możemy przypisać klasę albo identyfikator i dzięki takiemu oznaczeniu (selektor) w CSS określimy właściwości wybranego elementu, ustalimy jego wymiary, kolor, rodzaj fontu itd. Podsumowując HTML odpowiada za strukturę i ułożenie elementów strony, a CSS za ich graficzne ostylowanie. Najlepsze kompendium wiedzy i opis poszczególnych właściwości HTML i CSS można znaleźć na stronie W3School

O HTML

HTML, czyli HyperText Markup Language jest głównie wykorzystywany w projektowaniu stron internetowych. Aktualnie posługujemy się wersją piątą czyli HTML5. Każdy dokument html wygląda w ten sposób jak poniżej. Powstać może w zwykłym notatniku albo w programie do tego stworzonym, jak Dreamweaver czy darmowy Sublimetext.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tytuł Strony</title>
</head>

<body>
Treść strony widoczna na ekranie
</body>

</html>

 

Zapisując powyższy fragment kodu w notatniku z końcówką w nazwie .html i otwierając go w przeglądarce, otrzymamy gotową prostą stronę tylko z napisem jak powyżej “Treść strony widoczna na ekranie”.

Jak można zauważyć HTML składa się z tagów o pewnej nazwie np <body> informuje nas o początku oraz o tym, że w tym miejscu znajduje się “ciało strony” oraz drugi tag </body> z “/”, który mówi o jego zamknięciu. Tego typu struktura obowiązuje w większości składni HTML. Aktualnie strony powstają z tzw. bloków albo modułów. Tego typu kontenery w HTML określane są za pomocą tagu <div></div>. W tagu Div znajdziemy np.: zaprojektowany box ze zdjęciem i tekstem.

Istotną grupą tagów są te które pozwalają na umieszczanie zdjęć i linków na stronie:

<img src="obrazek.jpg" alt="opis obrazka">
W powyższym kodzie wygląda to nieco inaczej. Tag <img> nie ma zamknięcia, ponieważ nie jest ono potrzebne. Wystarczy sama ścieżka src do zdjęcia oraz alt z opisem tego co się znajduję na zdjęciu.

 

<a href="http://strona.com">kliknij tutaj</a>
Tutaj sprawa wygląda bardziej szablonowo. Mamy otwarcie tagu <a> i jego zamknięcie czyli </a>,  a pomiędzy nimi tekst, który po kliknięciu będzie prowadził do linku z href.

Zbiór tagów wyświetlających tekst:

<p>akapit</p>

 

<span>magazyn dla tekstu odpowiednik liniowy diva</span>

 

<h1>nagłówek</h1>, <h2></h2>, aż do<h6>

 

H1 to nagłówek najwyższego stanu, który ma największe znaczenia przy pozycjonowaniu, używany najczęściej w tytułach stron.

 

<strong>pogrubienie tekstu</strong>

 

<ul>
<li>lista podpunkt</li>
<li>lista podpunkt</li>
<li>lista podpunkt</li>
</ul>

 

W środku tagu <ul> stworzymy wypunktowaną listę z pomocą <li>
Jak już wspomniałem wcześniej, każdy z tagów może mieć swój unikalny identyfikator albo klasę, która może być taka sama dla wielu tagów i odnosić się do wielu elementów. Z pomocą tych oznaczeń i CSS możemy ostylować elementy na stronie, ale o tym będę pisał w kolejnej części.

 

<div id="unikalny identyfikator">zawartość</div>

<div class="identyfikator który można użyć też w innych tagach">zawartość</div>