Politechnika Lubelska
Wydział Mechaniczny
Instytut Technologicznych Systemów Informacyjnych
Podstawy języka HTML
Ogólne informacje i zasady języka HTML
Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu) i odnosi się do
jednego z wielu języków znakowania. Język znakowania to sposób kodowania dokumentów tekstowych
przy pomocy specjalnych elementów  znaczników.
Znaczniki języka HTML mają postać:
dwuczęściową:
...np.

...

jednoczęściową:
np.

Znaczniki posiadają atrybuty, które dają elastyczność w tworzeniu dokumentów HTML. Dostarczają
dodatkowych informacji o elementach strony definiowanych poprzez znaczniki.
Atrybut definiowany jest za pomocą paryatrybut="wartość":
...
np.

...

Podstawowe elementy dokumentu
Dokument HTML składa się z dwóch części:
części nagłówkowej,
obszaru treści.
Ogólna struktura dokumentu wygląda następująco:

- początek nagłówka
- Polecenia zawarte w nagłówku -
- koniec nagłówka
- początek obszaru treści
- Treść dokumentu -
- koniec obszaru treści

Dodatkowe elementy HEAD
W elemencie HEADmożna umieścić m.in. takie elementy jak:
TITLE - definiuje tytuł dokumentu HTML,
META - definiuje dodatkowe informacje o dokumencie, takie jak: standard kodowania znaków,
informacje o autorze strony, słowa kluczowe, czy opis strony,
STYLE - definiuje style wewnÄ…trz dokumentu HTML,
LINK - łączy stronę z zewnętrznym arkuszem stylów.
Przykład 1. Zastosowanie elementów TITLEi META.












Formatowanie zawartości dokumentu
za pomocą elementów blokowych
Strona WWW składa się z elementów blokowych. Służą one dwóm celom:
informują przeglądarkę, jaki rodzaj zawartości znajduje się w bloku,
umożliwiają określenie w arkuszu stylów, w jaki sposób będą one wyglądać.
Przykładowe elementy blokowe określające strukturę wierszy i akapitów:
P  akapit,
H1, H2, H3, H4, H5i H6  nagłówki,
PRE - tekst preformatowany.
Przykład 2. Wykorzystanie elementów blokowych.

Ten akapit jest wyśrodkowany

Ten akapit jest wyrównany do lewej strony okna

Ten jest wyrównany do prawej strony

Ten tekst zostanie przełamany dokładnie
w tym miejscu

---

---

---

---

---

Tytuł pierwszego stopnia

Tytuł drugiego stopnia

Tytuł trzeciego stopnia itd.

Ten akapit wyjaśnia 
ideę tekstu preformatowanego. Można 
zauważyć, 
że tekst zachowuje swoje właściwości.. 
i nie jest Å‚amany.

Rys. 1. Wygląd strony po wykorzystaniu elementów blokowych.
Elementy liniowe i znaki specjalne
Elementy liniowe są częścią dokumentu wypełniającą elementy blokowe. Można zdefiniować m.in. takie
elementy liniowe jak:
B - pogrubienie tekstu,
I - kursywa,
TT  czcionka maszynowa,
BIG - czcionka powiększona,
U  podkreślenie.
W języku HTML zdefiniowano zestaw kodów, zwanych kodami znaków, które zastępują najczęściej
używane znaki specjalne np.: ©, ®.
Przykład 3. Formatowanie tekstu poprzez elementy liniowe i znaki specjalne.

Elementy liniowe

Ten tekst jest pisany czcionkÄ… pogrubionÄ…

Ten tekst jest pisany kursywÄ…

Ten tekst jest pisany czcionkÄ… maszynowÄ…

Czcionka powiększona czcionka pomniejszona

Indeks dolny: H₂O

Indeks górny: x²

Kod programu: For a=1

Znaki specjalne

Zastrzeżony znak towarowy: ®

Znak praw autorskich: ©

Znak funta: £

Znak paragrafu: ¶


Rys. 2. Wygląd strony po wykorzystaniu elementów liniowych i znaków specjalnych.
Tworzenie list
W języku HTML istnieją trzy rodzaje list:
listy wypunktowane (zwane listami nieuporzÄ…dkowanymi) - tworzone za pomocÄ… elementu UL,
listy numerowane (zwane listami uporzÄ…dkowanymi) - tworzone za pomocÄ… elementu OL,
listy definicji - tworzone za pomocÄ… elementu DL.
Przykład 4. Tworzenie list wypunktowanych, numerowanych oraz list definicji.

• element numer 1


• element numer 2
  
  
  
  • element wewnÄ™trzny numer 1
  
  
  • element wewnÄ™trzny numer 2
  
  
  
  


• element numer 3

1. element numer 1


2. element numer 2
   
   
   
   1. element wewnętrzny numer 1
   
   
   2. element wewnętrzny numer 2
   
   
   
   


3. element numer 3

Hasło numer 1

Ten tekst jest wyjaśnieniem hasła numer 1

Hasło numer 2

Ten tekst jest wyjaśnieniem hasła numer 2

Rys. 3. WyglÄ…d strony po zamieszczeniu list.
Dodawanie Å‚Ä…czy
Połączenie (odnośnik) to narzędzie nawigacji, które umożliwia czytelnikowi przemieszczanie się między
stronami serwisu WWW. Wyróżnia się następujące typy odnośników:
do innych miejsc na tej samej stronie,
do innych stron internetowych,
pocztowy (e-mail).
Do utworzenia Å‚Ä…cza na stronie wykorzystywany jest element Az atrybutami href oraz name.
Przykład 5. Wstawianie hiperłączy.

Link do Onet.PL

Przykładowy tekst

To jest odnośnik.

Przykładowy tekst

Przykładowy tekst

Link do odnośnika

Przykładowy tekst

Przykładowy tekst

Link do adresu pocztowego


Rys. 4. WyglÄ…d strony z wstawionymi Å‚Ä…czami.
Wstawianie grafiki i kolorów
Pliki graficzne mogą być w wielu formatach, ale na stronach WWW wykorzystuje się raczej trzy: GIF
(Graphics Interface Format), JPEG (Joint Photographic Experts Group) i PNG (Portable Network
Graphic). Dodawanie grafiki odbywa siÄ™ za pomocÄ… elementu IMGi atrybutu src.
Barwy można określać za pomocą rozszerzeń kolorów HTML na dwa różne sposoby:
za pomocÄ… liczby szesnastkowej (#FFFFFF),
za pomocÄ… predefiniowanej nazwy (Black).
Przykład 6. Wstawianie grafiki.

Logo Politechniki Lubelskiej

Rys. 5. Strona z zamieszczonÄ… grafikÄ….
Tabele
Tabele języka HTML umożliwiają prezentację danych na stronach WWW, oraz kontrolowanie
umiejscawiania elementów strony  tekstu, obrazów, pól formularzy, czy też innych tabel, poprzez
umieszczanie ich w kolumnach lub wierszach tabeli.
Elementy definiujÄ…ce tabele:
TABLE - tworzy tabele,
TR - definiuje wiersze,
TH - definiuje komórki nagłówka,
TD - definiuje komórki danych.
Przykład 7. Standardowa tabela.

Tabela przykładowa

NAGA ÓWEK, komórka 1	NAGA ÓWEK, komórka 2
wiersz 1, komórka 1	wiersz 1, komórka 2
wiersz 2, komórka 1	wiersz 2, komórka 2

Rys. 6. WyglÄ…d standardowej tabeli.
Tworzenie formularzy
Formularze HTML służą do pobierania informacji od osób odwiedzających witryny WWW. Istnieje ich
bardzo wiele: proste formularze służące do przeszukiwania, formularze umożliwiające zalogowanie się na
witrynie, kupowanie produktów za pośrednictwem Internetu itd.
Każdy formularz składa się z elementu FORM zawierającego specjalne elementy kontrolne, takie jak
przyciski, pola tekstowe, pola wyboru, oraz listy. Najbardziej uniwersalnym elementem tworzÄ…cym
kontrolki jest element INPUT.
Przykład 8. Wykorzystanie kontrolek tworzonych przy pomocy elementu INPUT.

Pole tekstowe (text) -

Pole typu "password" -

Przycisk typu "checkbox" -

Przycisk typu "radio" -

Przycisk typu "file" -

Przycisk typu "button" -

Przycisk typu "reset" -

Przycisk typu "submit" -

Przycisk typu "image" -

Rys. 7. Kontrolki tworzone poprzez element INPUT.
Tworzenie ramek
Ramki pozwalają wyświetlić w oknie przeglądarki więcej niż jeden dokument HTML. Każdy z takich
dokumentów jest prezentowany w odrębnej ramce, a poszczególne ramki są od siebie niezależne. Zawartość
ramki tworzy standardowy plik HTML.
Do stworzenia dokumentu układu ramek używane są następujące elementy:
FRAMESET - określa, ile będzie ramek i jakiej wielkości,
FRAME - nadaje każdej ramce nazwę i ładuje do niej stronę początkową.
Przykład 9. Tworzenie ramek.














Rys. 8. Przykładowa strona WWW z ramkami.
Wprowadzenie do kaskadowych arkuszy stylów
Kaskadowy arkusz stylów (CSS - Cascading Style Sheets) to mechanizm definiujący formatowanie dla
danej strony przy zastosowaniu stylów złożonych, które przeglądarka zinterpretuje w określonym porządku
zwanym kaskadą. Arkusze stylów to potężne narzędzie do formatowania stron WWW. Dają one ogromne
możliwości manipulowania wyglądem dokumentów i zwiększają efektywność narzędzi.
Arkusze stylów dają wiele możliwości stosowania stylów. Definicja stylu może pojawić się w konkretnym
elemencie HTML  wówczas mówimy o stylu wpisanym, w obrębie elementu HEAD strony HTML (to
znaczy między znacznikami )  takie arkusze stylów nazywa się osadzonymi, lub może
zostać pobrana z pliku zewnętrznego  jest to wtedy zewnętrzny lub łączony arkusz stylów.
Składnia CSS
Ogólna postać CSS
Postać arkusza stylu CSS zależy od typu arkusza. W przypadku stylu wpisanego ma ona następującą
postać:

Ogólna postać osadzonego i zewnętrznego arkusza CSS jest następująca:
selektor {właściwość: wartość;}
Definicja składa się z selektora i jednej lub kilku deklaracji. Deklaracja składa się z właściwości i jednej
lub kilku wartości. Selektorem nazywa się znacznik czy też element, który jest definiowany, właściwość
to jego atrybut, który zmieniany jest poprzez przypisanie mu nowej wartości.
Definiowanie klas
Klasy umożliwiają modyfikacje elementów na stronie. Dzięki klasom można zdefiniować w arkuszu stylu kilka
wyglądów jednego elementu, a następnie na tworzonej stronie określa się tylko, jaki wygląd zostanie w danym
momencie użyty. Definiowane są za pomocą następującego zapisu:
element.nazwa_klasy{właściwość: wartość;}
lub
.nazwa_klasy{właściwość: wartość}
Aby wykorzystać klasę na tworzonej stronie, należy odwołać się do niej poprzez atrybut class.
Definiowanie identyfikatora
Pojedynczym wystąpieniom danego typu można narzucić styl korzystając z atrybutu id. Można go
zdefiniować na dwa sposoby:
#nazwa {właściwość: wartość;}
lub
element#nazwa {właściwość: wartość;}
Dodawanie stylów do strony WWW
Zewnętrzne arkusze stylów
Zewnętrzny arkusz stylów dołącza się za pomocą znacznika , który jest umieszczany w sekcji
HEADdokumentu HTML.



Zaleta arkuszy stylów tego typu polega na tym, iż reguły stylów można wykorzystywać w wielu
dokumentach HTML wchodzących w skład witryny.
Osadzone arkusze stylów
Osadzone arkusze stylów to standardowe dokumenty HTML, wewnątrz których zostały umieszczone
między znacznikami definicje stylów. Element ten powinien znalez
ć się w
nagłówku dokumentu. Konfiguruje on atrybuty stylu dla całej strony.
Lokalne arkusze stylów
Styl lokalny pozwala na nadanie formatowania konkretnemu pojedynczemu elementowi strony. Styl taki
jest definiowany przy pomocy atrybutu style. Jest on wprowadzany w wybranym znaczniku i nie ma
wpływu na pozostałe znaczniki. Ogólna postać definicji stylu wpisanego jest następująca:

Formatowanie akapitów
CSS używa pomysłowej metafory, aby ułatwić definiowanie elementów blokowych na stronie  traktuje je jak
pudełko. Określając formatowanie tychże elementów na potrzeby CSS (mogą to być akapity, bloki cytatów, listy,
grafika itp.), definiowane jest formatowanie pudełka. Nie ma znaczenia, co jest w środku, istotne jest tylko, jak ma
być sformatowany element. Ta możliwość CSS dotyczy elementów blokowych dokumentu, włączając w to akapity.
Element
Odstęp
Obwódka
Margines
Akapity formatuje się za pomocą następujących właściwości:
padding ustawianie odstępów,
margin  ustawianie marginesów,
border ustawianie obwódki,
text-indent zdefiniowanie wcięcia lub wysunięcia pierwszej linii tekstu,
text-align  kontrolowanie wyrównania tekstu.
Przykład 10. Użycie arkuszy stylów do formatowania akapitów.

Ten akapit jest otoczony obwódką, posiada odstępy, wyrównanie i wcięcie
takie jak zdefiniowane w klasie ".akapit". Marginesy są zgodne z właściwościami
zawartymi w definicji "BODY".

Lista wypunktowana:

• element numer 1


• element numer 2


• element numer 3

Lista numerowana:

1. element numer 1


2. element numer 2


3. element numer 3

Rys. 9. Wygląd strony po użyciu CSS formatujących akapity.
Definiowanie czcionek
Arkusze stylów umożliwiają bardzo elastyczne definiowanie czcionek na stronach WWW co sprawia że,
style CSS definiujące krój, kolor, rozmiar i styl czcionki są bardzo często stosowane.
Definiowane sÄ… podstawowe cechy czcionek jak:
rodzaj - właściwośćfont-family,
wielkość - właściwośćfont-size,
grubość - właściwośćfont-weight,
rozmieszczenie znaków  właściwości letter-spacing, word-spacing, line-height.
Przykład 11. Określanie postaci czcionki.

font-family: Arial

font-family: fantasy

---

font-size: small
font-size: medium
font-size: xx-large

---

font-weight: 100

font-weight: 900

---

Tekst rozstrzelony Tekst rozstrzelony Tekst rozstrzelony Tekst
rozstrzelony

---

Tekst ściśnięty Tekst ściśnięty Tekst ściśnięty Tekst ściśnięty
Tekst ściśnięty Tekst ściśnięty Tekst ściśnięty

Rys. 10. Wygląd strony po użyciu CSS formatujących czcionki.
Dodawanie kolorów i tła
Możliwości kontroli kolorów i tła jakie daje CSS są bardzo duże. Dzięki temu, iż style są stosowane do
określania postaci poszczególnych elementów strony, istnieje możliwość określenia różnego tła i kolorów
dla różnych elementów.
Można zdefiniować m.in.:
kolory dla tekstu - właściwośćcolor,
kolor tła elementu - właściwośćbackground-color,
obraz jako tło elementu - właściwośćbackground-image.
Przykład 12. Zmiana kolorów i tła.

Czerwony nagłówek na białym tle

Tekst jest żółty na niebieskim tle.

Biały nagłówek na czerwonym tle

Tekst jest szary na zielonym tle. Akapit posiada czarne obramowanie.

Tekst jest biały. Jako tło wykorzystano plik graficznytlo.gif

Rys. 11. Wygląd strony po użyciu CSS formatujących kolory i tło.
Grupowanie elementów za pomocą DIV i SPAN
Style można nadawać elementom dokumentu, posługując się bardzo elastycznym poleceniem bloku. Bloki
wydzielane są za pomocą pary znaczników

. Fragment dokumentu objęty nimi można w
swobodny sposób formatować za pomocą stylów. Mogą one zawierać nagłówki, akapity, listy, a nawet inne
bloki.
Element SPANjest liniowym odpowiednikiem elementu DIV. Można grupować dowolną liczbę elementów
wewnątrz elementu blokowego lub pomiędzy nimi, otaczając je znacznikami .
Znacznika można użyć nawet do określenia postaci pierwszej litery lub pierwszego słowa strony.
Przykład 13. Wykorzystanie elementów DIV i SPAN.

Ten akpit i poniższe listy są otoczone obwódką, oraz mają wspólne
tło.

Lista wypunktowana:

• element numer 1


• element numer 2


• element numer 3

Akapit, w którym
fragment tekstu jest formatowany zgodnie z określonym stylem

Rys. 12. Wygląd strony po użyciu elementów grupujących DIV i SPAN.