Wprowadzenie

Czasy, kiedy każdy chciał mieć własną stronę w Internecie, fascynacji kliknięciem na ikonkę przeglądarki i ujrzeniem swojego dzieła tworzonego mozolnie w HTML-u myślę, minęły. Zaistnieć w Internecie można bez znajomości html-a, tajników protokołu ftp, składni języka javascript czy php. Filmikami pochwalimy się znajomym "wrzucając" je na Youtube, galerię zdjęć pokażemy znajomym zakładając darmowe konto na Gmailu i korzystając z usługi Picasa Web Albums. Komentować zdjęcia znajomych, możemy na portalach społecznościowych. Pisanie emaili przy pomocy poczty elektronicznej jest już przeżytkiem. Jeżeli chcesz mieć pełną kontrolę nad swoim miejscem w sieci. Być niezależnym od portali oferujących Ci prawie wszystko za akceptację regulaminu. Musisz poznać wyżej wymienione tajniki, poświęcić godziny na pisanie linijek kodu html-a. Wybrać swój ulubiony edytor, który będzie przynajmniej kolorował składnię. Kolejnym krokiem, będzie edytor z podglądem strony, dający możliwość dodawania elementów kliknięciem myszki. Potem serwer zainstalowany lokalnie, serwer komercyjny... po drodze elementy php bądź javascript-u. Polecam tworzenie stron zgodnie ze standardami, które określa organizacja W3C. Strategia tworzenia nowoczesnych stron internetowych polega w skrócie na stosowaniu języka HTML 5 tylko i wyłącznie do określania elementów strony, typu: nagłówek, stopka, artykuł, zdjęcie, podpis zdjęcia, paski boczne... a za wygląd odpowiadają kaskadowe arkusze stylów (CSS).
Moja strona jest dopasowana do treści lekcji, zawiera prosty szablon strony głównej, szablon galerii, podstawowe informacje o CSS i PHP. W innym dziale znajduje się wprowadzenie do programowania w języku C++ pod kątem zdających egzamin maturalny z informatyki.

Główne cechy języka HTML

prosty język, którego polecenia - znaczniki - "przeplatają" się z tekstem dokumentu
opisuje strukturę logiczną dokumentu - "drzewo", którego kształt wyznaczają wystąpienia znaczników
umożliwia tworzenie tzw. dokumentów hipertekstowych zawierających odsyłacze - hiperłacza - do innych zasobów
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 bywa różnie interpretowany przez przeglądarki różnych producentów, tworząc stronę dobrze jest testować jej wygląd w co najmniej dwóch przeglądarkach (strona może inaczej wyglądać w Firefoxie, inaczej w IE, a nawet w różnych wersjach tej samej przeglądarki)

Dokument HTML = tekst + znaczniki

Dwa typy znaczników:

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

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

Uwagi:

zalecane jest domykanie wszystkich znaczników, np. : piszemy <br/> zamiast <br>
nazwy znaczników należy pisać małymi literami
nie należy pomijać znaczników zamykających (</nazwa>) nawet tam, gdzie dopuszcza to standard języka HTML - zgodność z CSS oraz XHTML

Szablon strony w języku html

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 stronę
treść - zawartość wyświetlana w oknie przeglądarki

Szablon strony w HTML 4.1 z kodowaniem windows-1250

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   	"http://www.w3.org/TR/html4/loose.dtd">
<head>
	<title>strona główna</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
	<meta name="language" content="PL">
	<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>
<body>
	
</body>
</html>

Szablon strony w HTML 5 z kodowaniem UTF-8

<!DOCTYPE html>
<html lang="pl">
<head>
	<title>strona główna</title>
	<meta charset=UTF-8>
	<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>
<body>
	
</body>
</html>

znacznik <link rel="stylesheet" type="text/css" href="styl.css"> jest informacją o dołączeniu zewnętrznego arkusza stylów style.css