Po kliknięciu na dowolne hiperłącze zostaniesz przekierowany na aktualną stronę.
 header

Wprowadzenie

Czasy, kiedy każdy chciał mieć własną stronę w Internecie, fascynacji kliknięciem na ikonkę przyglądarki i ujrzeniem swojego dzieła, myślę, że minęły. Współcześnie (piszę ten wstęp jesienią 2008 r.) żeby zaistnieć w Internecie nie potrzeba znajomości ani html-a, ani tajników protokołu ftp, ani javascript-u czy php. Filmikami pochwalimy się znajomym "wrzucając" je na serwis Youtube, galerie zdjęć pokażemy światu załadając darmowe konto na Gmailu i korzystając z usługi Picasa Web Albums. "Spotykać się" ze znajomymi, komentować ich zdjęcia, pisać maile możemy na portalach społecznościowych typu Nasza Klasa. Wiadomości na mojej stronie kieruję do osób, którym to nie wystarczy, chcą stworzyć własną stronę, mieć nad nią pełną kontrolę i samemu decydować o układzie i zawartości. Między inny do uczniów, którzy muszą zrobić stronę w ramach Technologii Informacyjnej :) Polecam tworzenie stron zgodnie ze standardami, które określa organizacja W3C. Strategia tworzenia nowoczesnych stron internetowych polega ogólnie na stosowaniu języka HTML tylko i wyłącznie do umieszczenia zawartości strony, a za cały wygląd (formatowanie strony) są odpowiedzialne kaskadowe arkusze stylów (CSS). Oczywiście nowoczesne strony tworzy się również we Flashu lub jako rozbudowane aplety Javy. W tym wypadku z języka html potrzebna jest tylko informacja, jak taki obiekt wstawić na strone. Moja strona będzie dopasowana do treści lekcji, dlatego głównie zawierać będzie szczegółowy opis języka HTML, arkusze stylów CSS1, elementy języka PHP, w innej części wprowadzenie do programowania w języku C++, i dział matura z informatyki.

Główne cechy języka HTML

  • prosty język, którego polecenia - znaczniki - "przeplatają" się z tekstem dokumentu
  • opisuje strukturę logiczna dokumentu - "drzewo", którego kształt wyznaczają wystąpienia znaczników
  • umozliwia tworzenie tzw. dokumentów hipertekstowych zawierających odsyłacze - hiperłacza - do innych zasobów
  • w zasadzie nie służy do określania wyglądu dokumentu - do tego celu należy używać kaskadowych arkuszy stylów (CSS)
  • standard języka wciąż bywa różnie interpretowany przez przeglądarki róznych producentów, tworząc stronę dobrze jest testować jej wygląd w conajmniej dwóch przeglądarkach (strona może inaczej wyglądać w Firefoxie, inaczej w IE i niestety zwykle inaczej wygląda)

Dokument HTML = tekst + znaczniki

Dwa typy znaczników:

<nazwa> ... </nazwa> - znacznik "pojemnik"

<nazwa> - znacznik pojedynczy

Przykłady:
<body> ... </body> - zawiera cała treść dokumentu
<br> - poleca "złamanie" linii tekstu

Uwagi:

  • jeżeli chcemy być bardzo dokładni, a przede wszystkim zgodni z XHTML, powinniśmy domykać wszystkie znaczniki, np. : piszemy <br/> zamiast <br>
  • nazwy znaczników należy pisać małymi literami - zgodność z XHTML
  • nie należy pomijać znaczników zamykających (</nazwa>) nawet tam, gdzie dopuszcza to standard języka HTML - zgodność z CSS oraz XHTM

Ogólna postać dokumentu

deklaracja typu dokumentu

<html>

<head> nagłówek </head>

<body> treść </body>

</html>
  • deklaracja typu dokumentu - określa wersję języka HTML(XHTML)
  • nagłówek - informacje opisujące dokument
  • treść - zawartość dokumentu (wyświetlaną w oknie przeglądarki)

Przykład nagłówka strony internetowej

<head>
	<title>strona główna</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

	<meta name="language" content="PL">
	<meta name="keywords" content="html, CSS, szablon stony internetowej, szablony stron">
	<meta name="description" content="Strona o języku HTML i formatowaniu stron internetowych
			 przy pomocy kaskadowych arkuszy stylów (CSS).">

	<meta name="author" content="JK (jk@jakistamserwer.pl)">
	<link rel="stylesheet" type="text/css" href="styl.css">

</head>
  • <title> ... </title> - element wymagany, tytuł naszej strony wyświetlany na pasku przeglądarki
  • znacznik <meta> z atrybutem charset - element wymagany, określa użyte kodowanie znaków, określenie języka dokumentu itp.
  • znacznik <meta> z name="language" określa język dokumentu (użyteczne dla przeglądarek i wyszukiwarek)
  • znacznik <meta> z name="keywords" zawiera słowa kluczowe dla przeglądarek, dawniej najważniejszy znacznik przy pozycjonowaniu strony w wynikach wyszukiwania, obecnie ze względu na wpisywanie słów niezgodnych z treścią strony, a często wprowadzanych przez internautów w okienko wyszukiwarki (np. sex) znacznik jest mało istotny
  • znacznik <meta> z name="description" zawiera krótki opis zawartości strony, wyświetlany potem przez niektóre wyszukiwarki w wynikach
  • znacznik <meta> z name="author" zawiera dane autora strony
  • znacznik <link rel="stylesheet"... jest informacją o dołączeniu zewnętrznego arkusza stylów