EE.09.3 - HTML, CSS - [01] Wprowadzenie do HTML

SAVE OFFLINE

WITRYNY INTERNETOWE HTML i CSS TEMAT 1: Wprowadzenie do HTML. Autor dokumentu: Wojciech Galiński

piątek, 1 lutego 2019 r.

351203 Technik informatyk

w3.org, w3schools.com, webmaster.helion.pl, how2html.pl, miroslawzelent.pl, kurs.browsehappy.pl, ŹRÓDŁA WIEDZY: poradnik-webmastera.com, csszengarden.com, css.maxdesign.com.au, css3.pl.

Zagadnienia obowiązkowe 1. Ewolucja języków opisowych – oto schemat: HTML (1991) GML (1970)

SGML (1986)

XHTML (2000) MathML (1998)

XML (1997)

SVG (1999)

2. Język HTML – „(ang. HyperText Markup Language) – hipertekstowy język znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych” (źródło: Wikipedia). Najnowsza wersja języka HTML to HTML5 (jest to standard rekomendowany przez W3C). 3. Edytor HTML – „program komputerowy służący do tworzenia dokumentów HTML” (źródło: Wikipedia). W odróżnieniu od zwykłego edytora tekstu zawiera m. in. następujące funkcje: numeruje wiersze kodu, koloruje składnię, wyświetla pomoc dotyczącą elementów języka HTML, pomaga domknąć znaczniki. 4. Dokument HTML (strona internetowa, strona WWW) – „plik tekstowy odczytywany przez przeglądarkę internetową, zazwyczaj mający rozszerzenie .htm lub .html” (źródło: Wikipedia). Może on odwoływać się m. in. do takich zasobów, jak: grafika, dźwięk, wideo, css, js. 5. Kod źródłowy dokumentu HTML – to zawartość dokumentu HTML. Obejmuje: ➔ zwykły tekst - wyświetlany jest w przeglądarce z ignorowaniem znaków końca wiersza, tabulacji oraz powtarzających się spacji; ➔ znaczniki - czyli tekst w ostrych nawiasach, za pomocą których buduje się nietekstowe elementy strony WWW, np. pojemniki, obrazy, tabele, formularze. Oto wzorzec: albo ZAPAMIĘTAJ! Nazwy znaczników i ich atrybutów piszemy małymi literami, nie mogą zawierać spacji. 6. Witryna internetowa (witryna WWW) – to zbiór dokumentów HTML (fizyczny lub logiczny). 7. Przeglądarka internetowa (przeglądarka WWW) – program komputerowy służący przede wszystkim do interpretowania dokumentów HTML. 8. Rodzaje znaczników HTML – wyróżniamy: ➔ znacznik specjalny „doctype” – informuje o wersji języka HTML użytej w dokumencie (znacznik ten wstawiamy na samym początku dokumentu przed znacznikiem ). Poniższy przykład informuje o wersji 4.01: Natomiast poniższy przykład informuje o wersji 5 (która obecnie nie jest jeszcze standardem): ➔ znacznik specjalny „komentarz” – służy do wstawiania komentarzy do kodu HTML ➔ znaczniki HTML ze znacznikiem domykającym – najpierw wstawiamy znacznik otwierający (np. ) oznaczający początek czegoś (w tym wypadku tytułu 1. stopnia), a na koniec znacznik zamykający (np. ) oznaczający koniec czegoś (w tym wypadku koniec tytułu 1. stopnia); ➔ znaczniki HTML bez znacznika zamykającego – w tym wypadku nie wstawiamy znacznika zamykającego, ale w znaczniku wstawiamy znak ukośnika bezpośrednio przed zamknięciem znacznika (np. - linia pozioma);

9. Kilka ważnych rad na początek: ➔ ➔ ➔ ➔ ➔ ➔ ➔ ➔ ➔

dokument HTML powinien tak samo wyświetlać się w różnych przeglądarkach internetowych (choć dość często nie jest to możliwe); stosuj znaczniki pisane małymi literami – np. zamiast ; domykaj znaczniki – np. i zamiast i ; używaj cudzysłowu przy podawaniu wartości parametrów znaczników HTML – np. zamiast ; nie mieszaj znaczników – np. zamiast ; nie stosuj ramek – chodzi o znaczniki: i ; używaj tabel tylko do przedstawiania danych tabelarycznych – nie używaj tabel do tworzenia układu strony internetowej; zatytułuj stronę – użyj znacznika: w sekcji ; używaj znaczników meta – szczególnie polecane znaczniki meta: charset, description, keywords.

10. Pierwszy dokument HTML – oto jego treść: Pierwszy dokument HTML5 Wprowadzenie Witaj! Polecam Ci witrynę rolniknysa.pl, która poświęcona jest naszej szkole. W menu Start | Technik informatyk znajduje się odsyłacz do mojej strony internetowej. Jest tam też link do witryny, która wygląda tak: . Pozdrawiam...

Pierwszy dokument HTML5 Oto opis znaczników użytych w powyższym kodzie HTML: ➔ – informacja, że jest dokument napisany jest w języku HTML5; ➔ – początek i koniec dokumentu HTML; ➔ – początek i koniec nagłówka dokumentu HTML (zawiera konfigurację dokumentu HTML). Wewnątrz tego znacznika znajdują się: ✔ – informacja o kodowaniu znaków (umożliwia prawidłowe wyświetlanie się polskich znaków w każdej przeglądarce internetowej); ✔ – tytuł dokumentu HTML widniejący w tytule przeglądarki WWW; ✔ – opis strony wyświetlający się w wyszukiwarce internetowej; ✔ – najważniejsze słowa kluczowe dotyczące dokumentu HTML (wg autora); ✔ – autor dokumentu HTML. ➔ – początek i koniec ciała dokumentu HTML (zawiera treści widoczne w przeglądarce). Wewnątrz tego znacznika znajdują się: ✔ – tytuł 1 stopnia (analogicznie do tytułu rozdziału w książce); ✔ – początek i koniec akapitu; ✔ , , – tekst pogrubiony / pochylony / podkreślony; ✔ – polecenie przejścia do następnego wiersza (odpowiednik klawisza ENTER); ✔ – odsyłacz (hiperłącze) do miejsca w sieci Internet o adresie zdefiniowanym w atrybucie „href”; ✔ – w miejsce tego kodu zostanie wstawiony obrazek o adresie ustalonym w atrybucie „src”, a jeśli obrazek nie zostanie znaleziony, to pojawi się napis zdefiniowany w atrybucie „alt”. Tekst w atrybucie „title” pojawi się w dymku po najechaniu na obraz.

11. Walidacja dokumentu HTML – może być zastosowana w celu sprawdzenia zgodności dokumentu z określonym standardem, np. HTML 4.01, HTML 5. Walidacja dokumentów dostępna jest m. in. pod następującymi adresami: http://validator.w3.org/, https://validator.w3.org/nu/, http:// jigsaw.w3.org/css-validator/, http://tidy.sourceforge.net/.

Zadania 1.

Utwórz dokument HTML przedstawiony w ramce i sprawdź, jak wyświetli się w różnych przeglądarkach internetowych. Ustaw siebie jako autora dokumentu. Sprawdź poprawność swojego dokumentu pod adresem: https://validator.w3.org/nu/.