KUL · Web viewTabela HTML składa się z wierszy podzielonych na komórki. Całą tabelę otaczamy...
13
SKŁADNIA I STRUKTURA DOKUMENTU HTML Oprac. Magdalena Wilkołazka 1. Podstawowe pojęcia: Znacznik – napis otoczony znakami < oraz >. Bezpośrednio po znaku < występuje nazwa znacznika np.: <p>, <div>..itp. Większość znaczników otwierających ma odpowiadające im znaczniki zamykające: </p>, </div>. Znaczniki otwierający i zamykający otaczają pewien fragment nadając mu odpowiednie znaczenie. Nazwy znaczników zapisuje się wyłącznie małymi literami. Element – tworzy go para znaczników: otwierający i zamykający np. <div> Coś tam </div> - element div o zawartości: Coś tam. Atrybuty – zawarte są w znacznikach otwierających. Ich rolą jest nadawanie dodatkowych właściwości elementom. Komentarz – umieszcza się je pomiędzy <!—oraz -->, służą do oznaczania fragmentu dokumentu lub tymczasowego wyłączania niektórych znaczników. Komentarzy nie można zagnieżdżać i nie mogą być umieszczone wewnątrz znaczników. Np. <p <!—komentarz-- >> Strona internetowa - strona posiada konkretny, niepowtarzalny adres URL i jest pokazywana w oknie przeglądarki Serwis internetowy - serwis lub witryna - grupa stron internetowych powiązanych ze sobą poprzez hiperłącza Zestawienie elementów języka HTML: Funkcja Elementy Struktura dokumentu html, head, titile, body Dodatkowe dane o dokumencie meta Elementy ogólne div, span Tytuły rozdziałów i podrozdziałów h1-h6 Tekst p, br, q, sub, sup, em, var, cite, abbr
Transcript of KUL · Web viewTabela HTML składa się z wierszy podzielonych na komórki. Całą tabelę otaczamy...
SKŁADNIA I STRUKTURA DOKUMENTU HTML
Oprac. Magdalena Wilkołazka
1. Podstawowe pojęcia:
Znacznik – napis otoczony znakami < oraz >. Bezpośrednio po znaku < występuje nazwa znacznika np.: <p>, <div>..itp. Większość znaczników otwierających ma odpowiadające im znaczniki zamykające: </p>, </div>.Znaczniki otwierający i zamykający otaczają pewien fragment nadając mu odpowiednie znaczenie. Nazwy znaczników zapisuje się wyłącznie małymi literami.
Element – tworzy go para znaczników: otwierający i zamykający np. <div> Coś tam </div> - element div o zawartości: Coś tam.
Atrybuty – zawarte są w znacznikach otwierających. Ich rolą jest nadawanie dodatkowych właściwości elementom.
Komentarz – umieszcza się je pomiędzy <!—oraz -->, służą do oznaczania fragmentu dokumentu lub tymczasowego wyłączania niektórych znaczników. Komentarzy nie można zagnieżdżać i nie mogą być umieszczone wewnątrz znaczników. Np. <p <!—komentarz-->>
Strona internetowa - strona posiada konkretny, niepowtarzalny adres URL i jest pokazywana w oknie przeglądarki
Serwis internetowy - serwis lub witryna - grupa stron internetowych powiązanych ze sobą poprzez hiperłącza
Zestawienie elementów języka HTML:
Funkcja ElementyStruktura dokumentu html, head, titile, bodyDodatkowe dane o dokumencie metaElementy ogólne div, spanTytuły rozdziałów i podrozdziałów h1-h6Tekst p, br, q, sub, sup, em, var, cite, abbrZmiany w dokumencie Ins, delListy Ul, ol, liTabele table, tr, td, th, caption, tbodyHiperłącza a, link, baseObrazy i obiekty img, object, map, areaFormularze form, input, buton, select, option, label
2. Nowe elementy w HTML 5: Section i article<section></section> - sekcja<article></article> - artykuł
Oba znaczniki wydzielają z <body></body> obszary treści wspólnych tematycznie. Oba mogą być pojemnikami (kontenerami, pudełkami) dla wewnętrznych sekcji, artykułów i akapitów - teoretycznie nie ma tu żadnych ograniczeń, praktycznie ogranicza nas logika układu treści. Należy jednak podkreślić, że nie wolno ich stosować jako pojemników w celach związanych np. z wyglądem strony - wtedy powinno się zastosować znacznik div, który nie ma znaczenia semantycznego. Artykuły i sekcje powinny posiadać jeden z nagłówków h1, h2...h6 w zależności od usytuowania w strukturze treści, przy czym nagłówki te, jak już mówiliśmy, pełnią rolę tytułów. Struktura artykułów i sekcji jest poprawna, jeżeli tytuły te tworzą pewnego rodzaju spis treści - konspekt logicznie informujący o zawartości strony.
Kiedy zastosować sekcję, a kiedy artykuł?Artykuł mógłby być samodzielnie opublikowany, wyrwany z kontekstu zachowuje pierwotny sens. Musi być przy tym wystarczająco rozbudowany, mieć swoją wagę i wartość zasługującą na takie miano - możesz sobie na przykład zadać pytanie, czy zestaw treści, które określiłem mianem artykułu mógłby zostać wydrukowany w gazecie? Tak więc artykuł jest sekcją spełniającą wymienione warunki.Sekcja jest przeznaczona do konstruowania szkieletu treści dokumentu. Może wyznaczać ramy całego dokumentu tak jak pokazanym wcześniej przykładzie, może także wydzielać bloki wewnątrz artykułu jak przykładzie pokazanym wyżej.
Main<main></main> - treść główna - powinniśmy nim oznaczyć główną treść każdego dokumentu. Zwykle można ją rozpoznać po tym, że jest bezpośrednio związana z tytułem strony. Znacznikiem main nie należy obejmować żadnych stałych elementów, które powtarzają się w całym serwisie: menu nawigacyjnego, informacji o prawach autorskich, logo serwisu, bannerów, formularzy wyszukiwania itp. Znacznik ten może jednak obejmować linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach.
Aside<aside></aside> - treść obok - sekcja, w której umieszczamy treść powiązaną ze znacznikiem w którym występuje. Ma znaczenie uzupełniajace, nie jest wymagana do zrozumienia treści dokumentu. Gdybyśmy usunęli sekcję aside, zarówno sam artykuł jaki i wyrwana z kontekstu sekcja nie utracą sensu ani swojej wewnętrznej kompletności. Należy być świadomym kontekstu w jakim go używamy. Jeśli używamy go wewnątrz article musimy pamiętać, że musi on mieć związek z artykułem, natomiast w sytuacji, w której używamy go na zewnątrz artykułu ważne jest by był on związany bezpośrednio ze stroną. Najczęściej umieszcza się w tym znaczniku przypisy oraz reklamy.
Header<header></header> - nagłówek sekcji, w której został użyty. Strona może zawierać więcej niż jeden znacznik header, lecz każdy musi być w innej sekcji. Możemy mówić o nagłówku dokumentu oraz nagłówkach poszczególnych sekcji. Nagłówek może zawierać tytuł h1..h6, część nawigacyjną, wstęp, formularz wyszukiwarki itp.
Footer<footer></footer> - stopka sekcji, w której została użyta. Strona może zawierać więcej niż jeden znacznik footer, lecz każdy musi być w innej sekcji. Możemy mówić o stopce dokumentu
oraz stopkach poszczególnych sekcji. Stopka przechowuje zwykle informacje na temat sekcji - np.: autor, linki do powiązanych dokumentów, prawa autorskie itp.
Nav<nav></nav> - sekcja nawigacyjna - zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. Często w stopce serwisu znajdują się linki takie jak: kontakt, regulamin, prawa autorskie. Choć teoretycznie można je objąć znacznikiem nav, zwykle bardziej właściwy do tego będzie element footer. Niewłaściwym miejscem dla nav będą linki umieszczone w środku treści tekstowej artykułu.
3. Elementy usunięte z HTML 5 w stosunku do HTML 4.01 Następujące znaczniki ze specyfikacji HTML 4 zostały usunięte z obecnej wersji HTML 5. HTML 5 jest nadal standardem w wersji rozwojowej, więc do przedstawionej listy mogą zostać wprowadzone pewne zmiany w przyszłości.
<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike><tt>
Więcej na: http://www.w3schools.com/tags/
Dokument HTML ma strukturę drzewiastą – każdy element jest węzłem który może/musi zawierać inne węzły:
HTML
Head
Title
Meta
Link
Script
Body
p
H1
Div p
"Ala ma kota "
b "a Ola "
"ma psa"
Elementy blokowe oraz liniowe• Elementy języka HTML możemy podzielić na dwie grupy. Mianowicie na elementy blokowe, do których należą m. in. akapity czy nagłówki oraz na elementy liniowe, którymi są np. em czy strong. Jednak niektóre elementy nie są ani elementami liniowymi ani blokowymi, m.in. link czy meta.• Za elementy blokowe uważane są te, które domyślnie wyświetlane są w trybie block, a za elementy liniowe te, dla których domyślnym trybem prezentacji jest tryb inline.
Elementy ogólne div i spanDiv jest elementem blokowym a span elementem liniowym. Element div może zawierać dowolne elementy blokowe i liniowe, natomiast span może zawierać dowolne elementy tekstowe, ale nie może zawierać elementów liniowych.
4. Struktura dokumentu html Wygląda ona następująco:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
<!doctype html> - informuje przeglądarkę że ma do czynienia z dokumentem HTML;
<html></html> ten znacznik określa ramy dokumentu HTML, a więc jego początek i koniec;
sekcja <head></head> - tworzy tak zwany nagłówek dokumentu. W tym przykładzie jest on
pusty ale powinien obowiązkowo zawierać kilka informacji. W wersji minimum są to: strona
kodowa, tytuł, oraz słowa kluczowe i opis strony;
sekcja <body></body> to tak zwane ciało dokumentu, tutaj umieszczamy treść.O ile sekcja
head pełni rolę czysto informacyjną i jej zwartość (poza tytułem który przeglądarka wyświetla
na pasku tytułu) można obejrzeć tylko w źródle, o tyle zawartość body jest w całości
wyświetlane w oknie przeglądarki.
5. Schemat układu treści strony
Można wyróżnić następujące główne elementy typowej strony:
Nagłówek serwisu (znacznik <header></header>), który występuje w podobnej postaci na
wszystkich stronach witryny. Zazwyczaj umieszczamy tutaj logo, tematykę serwisu, nazwę
firmy, formularz wyszukujący, jakąś bardzo krótką, zwięzłą informację, itp. W sensie
logicznym oraz wizualnym nagłówek rozpoczyna stronę. Nagłówek może posiadać elementy
nawigacyjne np. odnośnik do strony głównej serwisu. Pojęcie nagłówka może być mylące
ponieważ oznacza ono również:
o znacznik <head></head>, który już stosowaliśmy definiując szkielet dokumentu,
o znaczniki <h1></h1> (h1..h6) które będą omówiony dalej,
o nagłówki poszczególnych sekcji.
Stopka serwisu (znacznik <footer></footer>) - zamyka stronę. Inaczej będzie wyglądała w
przypadku oficjalnej strony firmowej, inaczej na prywatnej stronie a jeszcze inaczej na blogu
czy sklepie internetowym. Należy jednak pamiętać, że stopka powinna być swym wyglądem
dopasowana do wyglądu strony. Najczęściej występujace elementy:
o informacje o autorze strony, prawa autorskie,
o na stronach firmowych odnośnik do podstrony np. Praca,
o odnośnik przenoszący do góry strony,
o linki pozycjonujące,
o w przypadku stron firmowych w stopce umieszcza się również nazwę i dane firmy,
regulamin serwisu czy politykę prywatności,
o odnośniki do serwisów społecznościowych np. do facebooka czy twittera,
o stopki blogowe często zawierają np. odnośniki do ostatnich artykułów komentarzy,
archiwum.
Ilość informacji zawartych w stopce należy ograniczyć do niezbędnego minimum.
Poszczególne sekcje, mogą posiadać własne stopki.
Sekcja nawigacyjna serwisu (znacznik <nav></nav>) - zawiera listę linków do innych
stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie odnośniki na
stronie powinny być umieszczane w tej sekcji, a tytlko te, które decydują o funkcjonowaniu
witryny. Na przykład, często w stopce serwisu znajdują się linki które nie mają charakteru
sekcji nawigacyjnej serwisu. Poszczególne sekcje strony mogą posiadać własne sekcje
nawigacyjne.
Schemat przykładowego szkieletu treści witryny
6. Kodowanie znaków Obowiązującym standardem kodowania jest kodowanie UTF-8, które pozwala na kodowanie znaków z dowolnego języka. Znaki typowo polskie kodowane są na 2 bajtach, pozostałe na 1, co zapewnia optymalna wielkość stworzonego pliku .html. Kodowania ISO 8859-2 oraz Windows 1250 są obecnie przestarzałe, znaki z innych języków mogą w nich nie zostać zakodowane poprawnie.
Stronę kodową umieszczamy w nagłówku dokumentu, a dokładniej w znaczniku meta. Ten znacznik nie występuje w parze, umieszczenie strony kodowej będzie wyglądało następująco:
<!doctype html><html> <head> <meta charset="UTF-8" /> </head> <body> </body> </html>
7. Encje – znaki specjalne
8. Listy Lista wypunktowana<ul><li>Pierwsza pozycja</li><li>Druga pozycja</li><li>Trzecia pozycja</li></ul>
Lista numerowana<ol><li>Pierwsza pozycja</li><li>Druga pozycja</li><li>Trzecia pozycja</li></ol>Lista definicjiZa pomocą znaczników <dl></dl> określamy główne ramy listy. Następnie przy użyciu znaczników <dt></dt> oznaczamy słowo lub fragment tekstu, który chcemy szerzej opisać. Na koniec używając <dd></dd> dodajemy opis. <dl><dt>słowo definiowane</dt><dd>opis słowa definiowanego</dd><dt>kolejne słowo definiowane</dt><dd>kolejny opis słowa definiowanego</dd></dl>Listy zagnieżdżone Podczas zagnieżdżania możemy łączyć różne typy list, np. numerowaną z wypunktowaną.Przykład<ol><li>Sporty<ul><li>siatkówka</li><li>koszykówka</li><li>piłka ręczna</li>
</ul></li><li>Produkty mleczne<ul><li>mleko</li><li>jogurt naturlny</li><li>śmietana</li></ul></li><li>Warzywa<ul><li>cebula</li><li>korzeniowe<ul><li>pietruszka</li><li>marchew</li></ul></li></ul></li> </ol>
9. Tabele
Tabela HTML składa się z wierszy podzielonych na komórki. Całą tabelę otaczamy znacznikami <TABLE> oraz </TABLE>, wewnątrz umieszczając wiersze. Do definiowania wierszy stosujemy znaczniki <TR> i </TR>. Nazwa znacznika TR jest skrótem Table Row - wiersz tabeli. Komórki umieszczamy pomiędzy <TD> oraz </TD> (ang. Table Data - dane tabeli).
lp. Element Kod HTML
1. Tabela <TABLE></TABLE>2. Wiersz tabeli <TR></TR>3. Komórka tabeli <TD></TD>4. Komórka nagłówkowa <TH></TH>5. Podpis tabeli <CAPTION></CAPTION>
10. Ćwiczenia:
a. Wykonaj stronę WWW, na której będzie pokazany napis "Ćwiczenie deklarowania strony kodowej. Sprawdzę wyświetlanie liter ąęśćółńżź". Sprawdź co się stanie gdy zmienisz kodowanie.
b. Stwórz następujące listy:
Państwa Europy to: Włochy Polska Czechy Słowacja Białoruś
Systematyka kota domowego:1. Domena: eukarionty2. Królestwo: zwierzęta3. Typ: strunowce4. Podtyp kręgowce5. Gromada: ssaki6. Podgromada żyworodne7. Infragromada łożyskowce8. Rząd drapieżne
o Podrząd: psokształtneo Podrząd: kotoksztaltne
Felidae – kotowate Viverridae – wiwerowate Eupleridae – falanrukowate
c. Wykonaj tabelę o trzech wierszach i jednej kolumnie (3×1). W komórkach umieść litery X, Y, Z.
d. Wykonaj tabelę o dwóch wierszach i pięciu kolumnach (2×5). W komórkach umieść kolejne liczby naturalne.
Żródła:http://www.teacher.webd.pl/kurs_html5W. Gajda: „HTML, XHTML, CSS. Praktyczne projekty”
