HTML DLA ZIELONYCH. CZ I – PODSTAWOWE ELEMENTY I STYLE


kabexxx
HTML DLA ZIELONYCH. CZ I – PODSTAWOWE...
Dodano przez kabexxx · 1 597 odsłon

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

Pokaż komentarze (0)

Komentarze

Powiązane artykuły

Nauka i technika

Efektywne metody nauki angielskiego

Znajomość języków ma teraz bardzo wielkie znaczenie. Świat staje się coraz szybciej „globalną wioską”, więc należy potrafić porozumiewać się co najmniej jednym językiem obcym. Dwa...

Wysłany dnia przez amalicki111
Nauka i technika

LG K4 – koreański smartfon dla niewymagających

Koreańczycy wiodą obecnie prym, jeżeli chodzi o elektronikę. Tworzą wysokiej klasy produkty, które są eksportowane i sprzedawane na całym świecie. Jedną z najbardziej...

Wysłany dnia przez radsok