HTML jest bardzo ważnym (powszechnym) językiem adjustacyjnym (opisowym) opisuje strukturę strony. Od metainformacji przez sekcje i elementy pisarskie po zarządzanie stylami i skryptami.
Dokument HTML jest drzewem elementów. Dzięki temu każdy element może mieć własny poziom i miejsce. Reprezentacją elementu jest znacznik. Znaczniki mają ciekawą budowę:
W językach z rodziny SGML większość właściwości można określać dowolnie, lecz trzeba zwrócić uwagę na 2 rodzaje atrybutów:
- ID – jednoznaczny i niepowtarzalny identyfikator
- CLASS – klasa elementu – można porównać do tagu.
W HTML wszystkie atrybuty są predefiniowane i określone – więcej informacji znajdziesz w Internecie.
W tym artykule będę używał atrybutu STYLE, który pozwoli wstawić styl CSS.
Edycja HTML
Większość edytorów tekstowych uruchamianych w przeglądarce posiada tryb edycji HTML (W niektórych edytorach np. w WordPress nazywa się on text). Pozwala on wpisać kod źródłowy lub go poprawić. Dzięki temu możesz lepiej kontrolować swoje artykuły.
Do czego używa się HTML, a do czego CSS?
HTML to język, który opisuje strukturę dokumentu, W nim tworzymy po prostu treść.
CSS to style. Style mówią, co jak ma wyglądać. I dają dużo możliwości!
Sekcje
Każdy poprawnie zbudowany tekst jest podzielony na sekcje. Sekcje są swoistymi rozdziałami i podrozdziałami. Dzięki sekcjom przeglądarka jest w stanie zbudować spis treści (np. dla niepełnosprawnych). Robią to też roboty sieciowe.
Dostępnych jest 6 poziomów nagłówków:
- <h1> … </h1>
- <h2> … </h2>
- <h3> … </h3>
- <h4> … </h4>
- <h5> … </h5>
- <h6> … </h6>
Przykład użycia:
<h1> Zwierzęta </h1>
<h2> Ssaki</h2>
<h3> Człowiek </h3>
<h3> Pies </h3>
<h2> Ptaki </h2>
<h3> Kura </h3>
<h3> Kukułka </h3>
Podstawowe elementy
- Akapit – <p> Akapit </p>: Stanowi jedną myśl (tak w uogólnieniu). Aby nabrać wprawy w dzieleniu tekstów na akapity, czytaj dużo książek i blogów ;)
- Pozioma linia <hr />: Powinno się nią używać tylko wtedy, gdy ma oddzielać 2 różne części dokumentu
- Lista
- Punktowana – <ul> <li>Pozycja</li> <li>Pozycja</li> </ul>: Możesz zagnieżdżać listy tzn. umieszczać jedną w drugiej.
- Numerowana – <ol> <li>Pozycja</li> <li>Pozycja</li></ol>: Możesz zagnieżdżać listy tzn. umieszczać jedną w drugiej
- Przełamanie wiersza – <br />: Używamy, jeśli chcemy przejść do następnej linii bez tworzenia nowych akapitów
- Link – odsyłacz – <a href=’adres URL’>Tekst do wyświetlenia</a>: Klikalny link. Jako tekst do wyświetlenia możemy wstawić różne elementy, w tym obrazek, akapit i inne.
Formatowanie
Elementy szczególne
Tak, poniższe elementy są szczególne, ponieważ noszą one pewne znaczenie oprócz wyglądu, dlatego są oznaczane znacznikami HTML, a nie stylami.
- Pogrubienie – <b> </b>: Oznaczamy pojedyncze wyrazy lub wyrażenia, gdy są ważne.
- Pochylenie – <i> </i>: Oznaczamy tym cytat lub metaforę.
- Podkreślenie – <u> </u>: Oznaczamy tym błąd lub pojedyncze wyrazy/wyrażenia, gdy są szczególnie ważne.
- Przekreślenie – <s> </s>: Używamy, gdy podajemy treść, która jest już nie ważna, błędna (a wcześniej była poprawna), nasze zdanie, jeśli już go nie popieramy (ale popieraliśmy) i z jakichś powodów nie chcemy go usunąć.
- Wyróżnienie – <em> </em>: Inaczej zwane emfazą – wersja <b> dla całego akapitu (zamiast <p>), jeśli używamy kilka akapitów, które mają być wyróżnione, to każdy akapit musi być w osobnym znaczniku <em>.
- Szczególne wyróżnienie – <strike> </strike>: Inaczej mocna emfaza – wersja <u> dla całego akapitu (zamiast <p>), jeśli używamy kilka akapitów, które mają być wyróżnione, to każdy akapit musi być w osobnym znaczniku <strike>.
Zamiast <p> – to znaczy, że używamy <em> lub <strike> tylko, jeśli tę treść trzeba by było umieścić w oddzielnym akapicie (skrót myślowy: <p><b>Akapit</b></p> powinno być zastąpione <em>, a <p><u> Akapit </u> </p> – powinno być <strike>.
Style
Jeśli chcemy nadać tylko wygląd, używamy styli CSS (kaskadowe arkusze stylów).
W naszym przypadku style wstawiamy w ten sposób:
<nazwaelementu style=”nasz: styl; możemy:użyć kilku”> … </nazwaelementu>
- Ramka – tylko dla elementów blokowych (typu akapit, lista itd, ale nie pogrubienie, emfaza): <element style=’border: grubość kolor styl> … </element>
Styl:
- Solid – ciągłe
- Double – podwójne
- Dashed – kreskowane
- Dotted – kropkowane
- Groove – rowek
- Ridge – grzbiet
Kolory wpisujemy po angielsku. Paletę kolorów lub metody tworzenia własnych znajdziesz bardzo szybko w Internecie. Zwykły kolor to czarny i zamiast niego nie musisz nic wpisywać.
Tak jak w przykładzie, grubość, kolor i styl oddzielamy spacją.
Możemy użyć też poszczególnych stron:
<element style=’border-left/right/top/bottom: grubość wygląd kolor’> Zawartość </element>. Aby ukryć ramkę z jednej lub dwóch stron, jako wygląd wpisz none. Dzięki takim wariacjom możesz stworzyć coś takiego:
- Pogrubienie – jako stylu używamy, gdy chcemy np. cały akapit pogrubić, lecz nie ma on specjalnego znaczenia: <element style=’font-weight:bold’> Zawartość </element>
- Pochylenie – jako stylu używamy, gdy chcemy np. cały akapit pochylić, lecz nie ma on specjalnego znaczenia: <element style=’font-weight:bold’> Zawartość </element>
- Podkreślenie, przekreślenie itp. – jako stylu używamy, gdy chcemy np. cały akapit podkreślić, lecz nie ma on specjalnego znaczenia:
- Podkreślenie: <element style=’text-decoration:underline’> Zawartość </element>
- Przekreślenie: <element style=’text-decoration:line-trough’> Zawartość </element>
- Nadkreślenie: <element style=’text-decoration:overline’> Zawartość </element>
Warto poznać więcej elementów HTML i styli CSS – dzięki temu uzyskasz większą kontrolę nad swoimi tekstami.
W następnym wpisie z serii HTML dla zielonych zajmiemy się mediami – obrazkami, filmami. Zastosujemy też filtry graficzne, cienie tekstu i linki, których podstawą będzie obraz.
Jeśli masz jakieś pytania i propozycje – pisz! :)
Komentarze