Wprowadzenie do języka HTML - informatyka p. podstawowy kl. 1a / 1b gr.2/3/4 – E. Gwóźdź
1. Podręcznik od str. 249
HTML to język hipertekstowego znakowania (Hypertext Markup Language), który jest ustanowioną przez konsorcjum World Wide Web Consortium (W3C) specyfikacją, określającą postać dokumentów prezentowanych w Internecie.
Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML. Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów – jak Notatnik w Windows – ręcznie wpisując znaczniki. Ja osobiście polecam te przykładowe edytory tekstowe stron internetowych, których możemy używać w środowisku Windows za darmo:
Polecenia języka HTML są zazwyczaj nazywane znacznikami (tagami). Są to specjalne ciągi znaków objętych nawiasami < >. Informują one przeglądarkę, jak wyświetlić stronę na ekranie. Znaczniki stosowane są najczęściej w parach, np. <html> </html>. Należy zwrócić uwagę na ukośnik, który odróżnia znacznik zamykający </title> od otwierającego <title>. Teoretycznie nie ma znaczenia, czy znaczniki zapisane są za pomocą małych czy dużych liter, bowiem są interpretowane w ten sam sposób. Jednak warto przyzwyczajać się od początku do małych liter, gdyż są one zalecane w rekomendacji W3C dotyczącej specyfikacji HTML 4.01, a w specyfikacji XHTML są wymagane. Większość znaczników może mieć przypisane odpowiednie parametry (atrybuty) określające ich szczególne cechy. Atrybuty definiowane są za pomocą pary: atrybut=”wartość” i są umieszczane w znaczniku otwierającym, np. <p style=”font-family: verdana;”>tekst wyświetlany </p> Wartości należy podawać w cudzysłowie.
Struktura dokumentu
Cały dokument powinien być objęty parą znaczników <html> </html>. Znaczniki te informują, że wszystko, co znajduje się pomiędzy nimi stanowi dokument HTML. Pierwszym elementem strony jest nagłówek, a jego ramy wyznacza para znaczników <head> </head>. Zawiera informacje istotne m. in. dla przeglądarki wyświetlającej stronę. Zawartość nagłówka nie jest wyświetlana na stronie internetowej.
W sekcji <head> można wstawić parametry, które uzupełniają informacje na temat dokumentu. Najczęściej są to informacje przydatne przeglądarkom lub słowa kluczowe, wykorzystywane (już coraz rzadziej) przez serwisy wyszukujące. Między znacznikami <head> i </head> powinno się znaleźć polecenie <title> </title> czyli tytuł, co nie oznacza wcale śródtytułu (nagłówka) na stronie, którą będzie widział oglądający ją w przeglądarce użytkownik. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie. Zalecane jest, aby długość tytułu nie przekraczała 40 znaków. Nie należy także używać w tytule samych wielkich liter, gdyż wiele przeglądarek zignoruje stronę ani wpisywać adresów internetowych. Ważne! polecenie title powinno być umieszczone zaraz za otwierającym znacznikiem head, jeszcze przed wszystkimi informacjami meta.
<head>
<title>Strona ucznia X</title>
</head>
Element head zawiera ogólne informacje na temat dokumentu, które są zamieszczane między innymi w znaczniku <meta>. Najczęściej są to informacje są wykorzystywane przez wyszukiwarki oraz przez przeglądarkę do wyświetlania w prawidłowy sposób naszego dokumentu (kodowanie dokumentu, język dokumentu, dołączane skrypty itp.).
Bardzo ważnym elementem jest informacja o kodowaniu dokumentu. Zalecane jest stosowanie strony kodowej UTF-8 (Unicode) i w przypadku tego standardu informacja o stronie kodowej ma następującą postać:
<head>
<meta charset=”UTF-8″>
</head>
Inne polecenia <meta> później!
Pozostałe informacje, wszystko to, co wyświetla się na stronie internetowej, czyli właściwa treść (ciało) dokumentu powinny być objęte znacznikami <body> </body>. Definiując ciało dokumentu możemy wstawić dodatkowo kilka informacji o stylach, które zadecydują o graficznym wyglądzie strony.
Ostateczna, standardowa struktura każdego dokumentu html powinna wyglądać tak:
<!doctype html>
<html>
<head>
<title>tytuł strony</title>
<meta charset=”UTF-8″>
</head>
<body>
właściwa treść (ciało) dokumentu. Tu wpisujemy tekst, wstawiamy obrazy, tabele, czyli wszystko to, co powinien zobaczyć użytkownik po opublikowaniu naszej strony.
</body>
</html>
Cały dokument należy zapisać z rozszerzeniem html lub htm. Nazwa tworzonego dokumentu może być dowolna, jednak po opublikowaniu na serwerze WWW domyślnie otwieraną stroną jest strona o nazwie index.html
2. Zobacz teraz jak to wygląda w praktyce: https://youtu.be/dVRvcxkH9Yc
3. Jako zadanie napisz taki dokument HTML w notatniku wyślij na adres skalna1@poczta.fm
Pamiętaj o możliwości konsultacji!
Pamiętaj, aby odbierać wiadomości przez dziennik – to potwierdza Twoją frekwencję!
