Kurs HTML – Podstawy :: Lekcja 4

Kurs HTML – Podstawy :: Lekcja 4
28 Nov 2013

W tej lekcji zajmiemy się dość ważnym tematem, bez którego nie da rady pójść dalej, czyli tworzeniem i formatowaniem tekstu. HTML dostarcza nam praktycznie te same możliwości co office word. Jeśli jeszcze nie miałeś styczności z tym tematem –  ta lekcja jest dla Ciebie.

Zacznijmy od czegoś prostego. Nagłówki…

Nagłówki tworzymy za pomocą tagów <h1>, <h2>, <h3> itd. aż do <h6>.  Są one o tyle ważne, że wyszukiwarki używają ich do tworzenia pewnego indeksu struktury strony. tag H1 jest najważniejszy, potem h2, h3 itd. Ważne aby odpowiednio ich używać. Pamiętaj aby stosować nagłówki tylko do nagłówków! Nie stosuj ich do pogrubienia czy też zwiększenia tekstu. Wpływa to drastycznie na jakość strony, a co idzie w parze na “moc” strony w wyszukiwarkach.

Uwaga! Przeglądarki dodają automatycznie margines przed i po nagłówku, jeśli chcesz aby go nie było musisz dodać temu nagłówkowi odpowiedni styl (margin:0;)

Nie będę tu podawał wyglądu nagłówków. Możesz sam sprawdzić to tworząc odpowiedni kod HTML. Niech to będzie część twojego zadania domowego 🙂

 

Kolejnym znacznikiem, który warto omówić jest akapit (paragraf). W nim przestawiamy treści w języku HTML i tego się trzymaj. Nie wrzucaj tekstu na ślepo, lecz umieszczaj go w znaczniku <p> </p>. Jest to bardziej profesjonalne i estetyczne.

Do tego znacznika też jest dodawana pusta linia przed i po. Chyba już wiesz, jak temu zaradzić 🙂

Ok znamy już podstawowe znaczniki do tworzenia tekstu. Teraz przyszła pora na formatowanie. Nie przedłużając podaję kompletną listę poniżej – Pamiętaj, że każdy znacznik trzeba zamknąć!

<b> Pogrubiony tekst
<em> Podkreśla tekst ( nie chodzi o linie, lecz o nałożenie nacisku na dany fragment)
<u> Podkreśla tekst – dodaje linie
<i> Pochyla tekst
<small> Mały tekst (tak jak w worddzie)
<strong> Definiuje ważny tekst
<sub> Index dolny
<sup> Index górny
<ins> Wstawiony tekst (podkreślony)
<del> Usunięty tekst (przekreślony)
<mark> Tekst będzie zaznaczony

Pamiętaj, że <strong> robi to samo, co <b> ale ma inne znaczenie dla przeglądarki.

Prócz tego są jeszcze znaczniki komputerowe jak <pre> czy <code>, których już nie będę omawiał. Znajdziesz je  na stronie w3schools.com

 

Tym wszystkim znacznikom możemy nadać odpowiedni styl. Prócz tego każdy może otrzymać odpowiedni identyfikator i / lub klasę , ale o tym w kolejnej lekcji, do której serdecznie zapraszam, a już teraz możesz sprawdzić swoje umiejętności robiąc zadanie domowe:

1. Utwórz 6 nagłówków od h1 do h6, w których zawrzesz za każdym razem napis “Ala ma kota”.

2. Nadaj drugiemu nagłówkowi trochę stylu – niech będzie to czerwony tekst.

3. Ostatni nagłówek ma być pozbawiony marginesów.

4. Poniżej w znaczniku <p>…</p> wprowadź tekst “Sierotka ma rysia, a na imię ma Ola”

6. Podkreśl zwierzątko i pogrub imię dziewczynki.

 

Czekam na wasze prace i komentarze. Do usłyszenia :).