Tworzenie stron internetowych www World Wide Web Język HTML czyli Hyper Text Markup Language
Język HTML HTML, czyli HyperText Markup Language, to język służący do tworzenia dokumentów hipertekstowych, czyli zawierających (oprócz tekstu) grafikę, animacje czy dźwięki, ale przede wszystkim powiązany ze sobą systemem odnośników (linków) umożliwiając aktywną współpracę z odbiorcą. Mimo to sam dokument HTML jest zwykłym plikiem tekstowym.
Tagi HTML Dokument HTML to plik tekstowy zawierający komendy (tagi) sterujące wyświetlaniem zawartości. Tagi umieszcza się w nawiasach trójkątnych; zwykle należy pamiętać o „zamknięciu” obszaru działania danego taga! <HTML> ... </HTML > i zawiera: 1) głowę dokumentu między tagami <HEAD> .. </HEAD> 2) ciało dokumentu między tagami <BODY> .. </BODY>
Struktura dokumentu HTML <HTML> - otwarcie <HEAD> … - tytuł, standard kodowania liter… </HEAD> <BODY> … - właściwa treść dokumentu </BODY> </HTML> - zamknięcie
Kodowanie strony Bardzo ważnym elementem strony WWW jest informacja o stronie kodowej dokumentu. Zalecana strona kodowa to ISO-8859-2. Informacja umieszczona jest w ramach znaczników <HEAD> i wygląda następująco: <META http-equiv="content-type" content="text/html; charset=iso-8859-2">
Nagłówek <HEAD> <TITLE> Moja własna strona </TITLE> <META http-equiv="content-type" content= "text/html; charset=iso-8859-2"> </HEAD>
Znaczniki META W nagłówku dokumentu umieszcza się zwykle informacje ważne dla przeglądarek i wyszukiwarek – są to tzw. znaczniki META. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <meta http-equiv="Content-Language" content="pl"> <meta name="description" content="Podstawy HTML"> <meta name="Author" content=„Alibaba">
Treść dokumentu - <BODY> Tu mogę wpisywać tekst, który po prostu ukaże się na mojej stronie. </BODY>
A teraz przepisując poniższy kod źródłowy utworzymy pierwszą stronę <HTML> <HEAD> <META http-equiv="content-type" content= "text/html; charset=iso-8859-2"> </HEAD> <BODY> To jest moja pierwsza strona WWW. </BODY> </HTML>
Kolor tła dokumentu <BODY BGCOLOR="kolor"> "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości szesnastkowych - #FF0000, #008000, #000000, #FFFFFF
Kolor tła Kolor tła określamy za pomocą atrybutu bgcolor znacznika <BODY>: <BODY bgcolor = ”aqua” text = ”navy” > <BODY bgcolor = ”#FFFF00 ” text = ”#FFFFFF ” > <BODY bgcolor = rgb(255, 255, 0) text = rgb(255, 255, 255) > Tłem strony może być też tapeta zapisana w pliku graficznym, którego nazwę podaje się jako wartość atrybutu background: <BODY background = ”tlo.gif” > <BODY background = ”images/tlo.gif” > <BODY background = ”../tlo.gif” >
<HTML> <HEAD> <META http-equiv="content-type" content= "text/html; charset=iso-8859-2"> </HEAD> <BODY bgcolor=pink text=blue> <h1>To jest moja pierwsza strona WWW.</h1> </BODY> </HTML>
<P> tekst </P> Akapit tekstu : <P> tekst </P> Zmiana linii wewnątrz akapitu: tekst <BR> nowa linia tekstu Wycentrowanie tekstu: <CENTER> tekst </CENTER> Formatowanie cech czcionki tekstu <B> ten tekst będzie wytłuszczony </B> <I> ten tekst będzie pochylony </I> <U> ten tekst będzie podkreślony </U>
Wyrównywanie tekstu <BODY> <P ALIGN=LEFT> Tekst wyrównany do lewej.</P> <P ALIGN=RIGHT> Wyrównanie do prawej.</P> <P ALIGN=CENTER> Centrowanie.</P> <P ALIGN=JUSTIFY> Justowanie.</P> </BODY>
Formatowanie tytułów <H1> Tytuł główny (największy) </H1> <H2> Tytuł drugiego poziomu </H2> <H3> Tytuł trzeciego poziomu </H3> <H4> Tytuł czwartego poziomu </H4> . . . . . . . . . .
Pozioma linia <HR> Opcje dodatkowe: size – rozmiar w pikselach, color – kolor linii, width – długość w pikselach lub procentach strony. align – typ wyrównania (do lewej, środka, prawej)
Definiowanie czcionek Rozmiar, kolor i krój czcionki można określić za pomocą znacznika <FONT>...</FONT> i jego atrybutów: size - rozmiar czcionki (od 1 do 7, wartością domyślną jest 3) color - kolor face - krój Można też używać bardziej uniwersalnych znaczników, takich jak: <BIG>...</BIG> - powiększenie czcionki o 1 punkt, <SMALL>...</ SMALL > - zmniejszenie czcionki o 1 punkt.
Wielkość czcionki Wielkość bezwzględna <FONT SIZE="x">Tekst objęty definicją</FONT> x = 1...7 Wielkość względna <FONT SIZE="+x">Tekst objęty definicją </FONT> <FONT SIZE="-x">Tekst objęty definicją</FONT> x = 1...6
Kolor czcionki Szesnaście podstawowych barw: black silver gray white <FONT COLOR="kolor">Tekst objęty poleceniem</FONT> Szesnaście podstawowych barw: black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua Kolor może być podany kodem hexadecymalnym w postaci: #CCF78A
Lista wypunktowana: Lista numerowana: <UL> <LI> temat 1</LI> <LI> temat 2</LI> <LI> . . . .</LI> </UL> Lista numerowana: <OL> <LI> punkt 1</LI> <LI> punkt 2</LI> </OL>
Wstawianie odnośników Do tworzenia odnośników służy znacznik <A> (anchor – kotwica), którego podstawowym atrybutem jest href (Hypertext REFerence), określający adres odnośnika: <A href="HTTP://WWW.ONET.PL"> tekst aktywny </A> Jeśli chcemy, aby elementem interaktywnym był obrazek, po prostu wstawiamy w odpowiednim miejscu znacznik <IMG> <A href="index.html"> <img src="1.gif" border="0"> </A> Odsyłacz do dokumentu istniejącego w tym samym folderze: <A HREF=”zadania.htm”> Zadania z fizyki</A>
Wstawianie obrazków: IMG jest skrótem od Image (obraz), SRC jest skrótem od Source (żródło). Aby wstawić w tekst obrazek posługujemy się komendą: <IMG SRC=„obrazki/obrazek.gif”> Obrazek wyśrodkowany w wierszu: <CENTER> <IMG SRC=„plik.gif”> </CENTER> Sterujemy wielkością obrazka: <IMG SRC=„obrazek.gif” WIDTH=300 HEIGHT=200> Jeśli nie chcemy otaczać obrazka tekstem, wstawiamy go w wydzielony akapit: <P> <IMG SRC=„plik.jpg”> </P>
Wyrównanie grafiki Sposób rozmieszczenia tekstu wokół obrazka określany jest za pomocą atrybutu ALIGN znacznika <IMG>. Do pionowego zorientowania rysunku względem wiersza używane są następujące wartości: ALIGN = ”top” ALIGN = ”middle” ALIGN = ”bottom” Przykład: <img src="foto.gif" align="middle"> Ania na spacerze Do oblewania grafiki tekstem używane są wartości left, right: ALIGN = ”left” - dosunięcie obrazka do lewej i otoczenie go tekstem z prawej strony, ALIGN = ”right” - odwrotnie