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! :)