Repetytorium cz. 1. HTML

WSTĘP

HTML
(ang. HyperText Markup Language) – hipertekstowy język znaczników zatwierdzany jako standard, zwany rekomendacją, przez W3C (ang. World Wide Web Consortium), zawierającą miedzy innymi wykaz elementów i atrybutów (oraz ich wartości) stosowanych w danej wersji języka.

Znaczniki

  • <nazwa_elementu> - otwierający, początkowy
  • </nazwa_elementu> - zamykający, końcowy
  • <nazwa_elementu/> - pojedynczy

Elementy

  • Element
    <nazwa_elementu>zawartość elementu</nazwa_elementu>
  • Element pusty
    <nazwa_elementu/>

Atrybuty

Atrybut umieszczamy w znaczniku:
  •  otwierającym
    <nazwa_elementu nazwa_atrybutu="wartość">
    zawartość elementu
    </nazwa_elementu>
  • lub pojedynczym
    <nazwa_elementu nazwa_atrybutu="wartość"/>
Kolejne atrybuty umieszczamy po spacji.
Znacznik (element) pojedynczy możemy zapisywać bez ukośnika /.

Więcej na: http://plotkarka.eu/PI/html5/preludium.html

HIPERTEKST

Przykład 1.

Elementy struktury strony:

  • <body> - zawartość strony
  • <head> - nagłówek dokumentu
  • <html> - element główny
  • <meta charset name> - metainformacje
  • <title> - tytuł dokumentu
Inne:
  • DOCTYPE - deklaracja typu dokumentu

Więcej na:
Karta: http://plotkarka.eu/KP/strona.html
Plansza http://plotkarka.eu/PI/html5/strona.html
Gra: http://plotkarka.eu/gry/losowy_validator.html

Elementy blokowe:

  • <div> - grupa elementów blokowych
  • <footer> - stopka
  • <header> - nagłówek
  • <hr> - linia 
  • <h1>, <h2> - nagłówki 
  • <li> - pozycja listy 
  • <ol> - lista numerowana 
  • <p> - akapit 
  • <ul> - lista wypunktowana 
  • <section> - sekcja

Więcej na:
Karta http://plotkarka.eu/KP/akapity.html
Plansza http://plotkarka.eu/PI/html5/blokowe.html

Elementy liniowe:

  • <a href> - hiperłącze (atrybut href definiuje adres zasobu, umożliwia również przewijanie strony do elementu z określonym identyfikatorem, wykorzystujemy wtedy znak #
  • <b> - pogrubienie 
  • <br> - podział wiersza 
  • <em> - emfaza (wyróżnienie) 
  • <i> - kursywa
  • <mark> - wyróżnienie (marker)
  • <small> - tekst pomniejszony 
  • <span> - grupa elementów liniowych 
  • <strong> - wyróżnienie 
  • <sub> - indeks dolny 
  • <sup> - indeks górny
Więcej na:
Karta http://plotkarka.eu/KP/tekst.html
Plansza http://plotkarka.eu/PI/html5/liniowe.html

OBRAZY, TABELE, FORMULARZE

Przykład 2.

Element obrazu:

  • <img src alt> - obraz (wymagany atrybuty to src - adres pliku obrazu i alt - definiujący tekst alternatywny)

Elementy tabeli:

  • <table border> - tabela (atrybut border o wartości 1 oznacza że będzie widoczne obramowanie), 
  • <td colspan rowspan> - komórka tabeli (colspan, rowspan - atrybuty scalania komórek w poziomie i pionie), 
  • <tr> - wiersz tabeli.

Elementy formularza:

  • <form> - formularz, 
  • <input> - pola formularza, 
  • <option> - opcja w liście rozwijalnej, 
  • <select> - lista rozwijalna, 
  • <textarea> - pole tekstowe (wielowierszowe).
Elementy przestarzałe:
  • big - powiększenie, 
  • font - font, 
  • strike - przekreślenie.
Atrybuty przestarzałe:
  • bgcolor - kolor tła, 
  • color - kolor tekstu, 
  • face - nazwa fontu.
Uwaga:
  • Kodowanie ISO-8859-2 (pliku strony) stosowane w celu poprawnego wyświetlania znaków narodowych (np. , ć, ń, ó, ą) jest zgodne z polską normą ale zaleca się stosowanie międzynarodowego standardu UTF-8.

Więcej na:
Plansza http://plotkarka.eu/PI/html5/index.html

ŹRÓDŁA

[HTML5]
HTML5; W3C Recommendation 28 October 2014;
URL: http://www.w3.org/TR/html5/