HTML DLA ZIELONYCH. CZ I – PODSTAWOWE ELEMENTY I STYLE


kabexxx
HTML DLA ZIELONYCH. CZ I – PODSTAWOWE...
Dodano przez kabexxx · 3 476 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

Inna

Aktywne spędzanie wolnego czasu

W obecnych czasach dzieci i młodzież coraz rzadziej jest zobaczyć spędzających czas wśród znajomych na świeżym powietrzu poza domem. Natłok nowej technologii powoduje, że młodzi...

Wysłany dnia przez mariuszc
Inna

Work and Travel czyli pracuj i zwiedzaj Stany Zjednoczone

Work and Travel USA, możemy przetłumaczy z angielskiego jako praca i podróże po Stanach Zjednoczonych. Głównymi założeniami programu jest właśnie praca zarobkowa oraz jednoczesne...

Wysłany dnia przez pheonix