MiniRepetytorium HTML, XHTML, HTML5

Podstawowy szkielet strony (elementy obowiązkowe)
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. Obecnie obowiązującym standardem jest wersja HTML 5.2[1].
Tematy:
  1. Wstęp
  2. Struktura strony
  3. Elementy blokowe
  4. Elementy liniowe
  5. Grafika
  6. Multimedia
  7. Linki
  8. Tabele
  9. Formularze
  10. Suplement

WSTĘP

Znaczniki

  • <nazwa_elementu> - otwierający, początkowy
  • </nazwa_elementu> - zamykający, końcowy
  • <nazwa_elementu/> - pojedynczy
Znacznik (element) pojedynczy możemy zapisywać bez ukośnika /.

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.

Więcej na:

HIPERTEKST

Przykład 1.

Elementy struktury strony:

  • <html> - element główny
  • <body> - zawartość strony
  • <head> - nagłówek dokumentu
  • <link> - link
  • <meta charset name content> - metainformacje (atrybut name określa typ informacji np. wartość: description określa opis strony, keywords - słowa kluczowe - określone w atrybucie content; charset="UTF-8" - deklaruje zalecane kodowanie znaków UTF-8)
  • <title> - tytuł dokumentu
Inne:
  • <!DOCTYPE HTML> - deklaracja typu dokumentu (wersja 5)
  • Kody i encje (np. )
  • Kodowanie znaków

Więcej na:
Gra: http://plotkarka.eu/gry/losowy_validator.html

Elementy blokowe:

Struktura tekstu:
  • <blockquote> - cytat blokowy
  • <dl> - lista definicji
  • <hr> - linia
  • <h1>, <h2>, ..., <h6>- nagłówki tekstu
  • <li> - pozycja listy uporządkowanej lub nieuporządkowanej
  • <ol> - lista numerowana
  • <p> - akapit
  • <pre> - tekst preformatowany
  • <ul> - lista wypunktowana
Struktura strony:
  • <aside> - zakładka strony
  • <div id class> - grupa elementów (atrybut id - identyfikator, class - klasa elementu)
  • <footer> - stopka strony
  • <header> - nagłówek strony
  • <main> - część główna strony
  • <nav> - nawigacja strony
  • <section> - sekcja strony
Więcej na:

Elementy liniowe:

  • <a href rel target> - hiperłącze (atrybut href definiuje adres zasobu, umożliwia również przewijanie strony do elementu z określonym identyfikatorem, wykorzystujemy wtedy znak #, atrybut rel definiuje relację z zasobem docelowym, target określa docelowe okno, np. wartość _blank odpowiada za załadowanie strony do nowego okna lub karty) 
  • <abbr title> - skrót (zalecany atrybut title powinien zawierać rozwinięcie skrótu)
  • <b> - pogrubienie 
  • <br> - podział wiersza
  • <code> - kod
  • <em> - emfaza (wyróżnienie) 
  • <i> - kursywa
  • <ins> - tekst dodawany
  • <mark> - wyróżnienie (marker)
  • <s> - przekreślenie
  • <small> - tekst pomniejszony 
  • <span> - grupa elementów liniowych 
  • <strong> - wyróżnienie 
  • <sub> - indeks dolny 
  • <sup> - indeks górny
Więcej na:

Zadania (1. sprawdzian):


MULTIMEDIA, LINKI, TABELE, FORMULARZE, INNE

Przykład 2.

Elementy multimedialne:

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

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

  • <video> - film (atrybut który włącza tryb odtwarzania w kółko to loop)
  • <object> - umożliwiała dodawanie animacji FLASH (z rozszerzeniem .swf)

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 type name disabled checked> - pola formularza, 
  • <option> - opcja w liście rozwijalnej, 
  • <select> - lista rozwijalna (atrybut multiple - umożliwia zaznaczenia kilku opcji jednocześnie), 
  • <textarea> - pole tekstowe (wielowierszowe).

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

Inne:
  • <script> - skrypt (uwaga: może być umieszczony w elemencie <body> lub <head>)

Zadania (2. sprawdzian):

SUPLEMENT

XHTML
  • Język kodowania stron internetowych, w którym należy stosować zasady języka XML (obowiązkowo zamyka się pojedyncze znaczniki np. <br/>, atrybuty logiczne wymagają wartości np. disabled="disabled"). 
HTML 4

Elementy przestarzałe:
  • big - powiększenie, 
  • font - font, 
  • strike - przekreślenie.
Atrybuty przestarzałe:
  • bgcolor - kolor tła, 
  • color - kolor tekstu, 
  • face - nazwa fontu.
Kodowanie polskich znaków:
  • 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:

ŹRÓDŁA

[HTML5.2]
HTML5.2; W3C Recommendation, 14 December 2017;
URL: http://www.w3.org/TR/html/