HTML jest naprawdę prosty w nauce, aczkolwiek by nie zapomnieć podstaw tego języka, warto dość często przypominać go sobie. W części drugiej nauczycie się dowolnie formatować tekst oraz poznacie podstawy CSS.
Powtórzenie pierwszej części kursu HTML
Elementy (tagi) w języku HTML zapisuje się w nawiasach ostrych <[nazwa taga]> i większość z nich wymaga zamknięcia poprzez </[nazwa taga]>. Na początku dokumentu HTML umieszcza się <!doctype HTML>, które informuje przeglądarkę, z jakim dokumentem ma do czynienia. W sekcji <HEAD> umieszczamy informacje o stronie i między innymi kod css (więcej o nim w późniejszej części tekstu).
Natomiast w <BODY> znajduje się właściwa część strony, czyli nagłówki, akapity czy zdjęcia. Tag zdjęcia to <img src=” ”> a w atrybucie „src” wpisuje się źródło obrazu. Jest to dla ciebie dalej trudne i nie znasz przytoczonych przeze mnie tagów? Koniecznie zerknij na pierwszą część tutoriala, klikając tutaj. Przypomnę tylko, że podczas umieszczania znaczników HTML, wielkość liter nie ma znaczenia.
Formatowanie tekstu w HTML
Tak samo, jak między innymi Word czy inny edytor tekstu, HTML daje nam możliwość formatowania tekstu. Jest to bajecznie proste, a samo formatowanie możemy przeprowadzić na kilka różnych sposobów. Ja postaram się przedstawić, według mnie, najprostsze.
Pierwszy sposób polega na umieszczeniu tekstu w odpowiednim znaczniku. Przykładowo, gdy chcemy pogrubić tekst, wpisujemy go w tagach <b>[nasz tekst]</b>, (oczywiście bez kwadratowych nawiasów). Gdy musimy zapisać jakiś cytat lub tytuł, warto by użyć kursywy. Pochylimy go poprzez wpisanie go w znacznik <i>[nasz tekst]</i>. Znaleźliśmy ważny fragment więc jak go podkreślić? Z pomocą przychodzi nam <u>, z języka angielskiego „underline” oznaczającego właśnie podkreślenie. Celowe popełnienie i zostawienie błędu umożliwia nam <s>, jest to zwykłe skreślenie.
<b>Tekst pogrubiony</b> <i>Tekst pochylony</i> <u>Tekst podkreślony</u> <s>Tekst skreślony</s>
Zaczynamy podstawy CSS
CSS – (z ang. Kaskadowe Arkusze Stylów), są to tylko i wyłącznie określające i modyfikujące wygląd tagów HTML elementy języka CSS. Przykładowo, zmiana koloru nagłówka tekstu <h1> odbywa się za pośrednictwem odpowiedniego polecenia CSS.
Składnia CSS wygląda tak:
Selektor {
Atrybut1: wartość1;
Artybut2: wartość2;
} Selektorem jest nazwa taga HTML (np. „H1”), a atrybut i jego wartość to określenia selektora. Spokojnie to jest bardzo łatwe do zrozumienia. Posłużę się przykładem dotyczącym zmiany koloru nagłówka H1. Zapiszmy na początek nasz selektor, jest nim H1. Dalej twórzmy nawias klamrowy i wpiszmy: color: green; , ważne jest, aby po każdej wartości postawić średnik „;”.
<!doctype HTML><HTML><HEAD><style>
H1 {
Color:green;
}
</style></HEAD><BODY><H1>Jestem zielony</H1></BODY></HTML>Gotowe, nasz nagłówek, zmienił kolor na zielony (możesz to sprawdzić, klikając przycisk „play” na okienku z kodem). Pełną i ciągle odświeżaną listę atrybutów dotyczących formatowania można znaleźć na przykład tutaj. Jest ich bardzo dużo, aczkolwiek wiele z nich jest zapisana po angielsku lub jest skrótem od angielskiego słowa. Przykładowo „text-align: justify”, wyjustuje nam tekst. Są to oczywiście podstawy CSS.
Podsumowanie
Z dzisiejszego artykułu dowiedzieliście się jak dobrze formatować strony i jak dużo możliwości ma język CSS. Tak jak pisałem na początku tego tekstu, HTML jest bardzo prosty w nauce. Wystarczy tylko chcieć. Te lekcje przygotuje was do zawodowego tworzenia stron internetowych. Kolejny artykuł już niedługo.
