Wykład 15 Dokumenty HTML. Tworzenie stron WWW
Źródła Ten fragment wykładu „Podstaw Informatyki” jest oparty na kursie HTML autorstwa Pawła Wimmera, przygotowanym dla czasopisma PC Kurier, dostęp-nym publicznie na zasadzie freeware (swoboda rozpowswzechniania), ale nie public domain (nie wolno dokonywać zmian w treści oryginału).
Język HTML HTML, czyli HyperText Markup Language, to język słżący do tworzenia dokumentów hipertekstowych, czyli zawierających (oprócz tekstu) grafikę, animacje czy dźwięki, ale przede wszystkim powiązanych ze sobą systemem odnośników (linków) umożliwiając aktywną współpracę z odbiorcą. Mimo to sam doku-ment HTML jest zwykłym plikiem tekstowym.
„Netykieta” Dobre zwyczaje obowiązują też w sieci, ale tutaj rzadko zdarzają się cenzorzy. Utrzymanie minimum poziomu kulturalnego zależy od nas samych! nie podpisuj się pod cudzą pracą oszczędnie dozuj grafikę pamiętaj, że treść jest ważniejsza od formy! wulgaryzmy świadczą dobitnie o poziomie piszącego
Edytory HTML W najprostszym przypadku dokument HTML, czyli „stronę sieciową”, można pisać wprost w edytorze tekstu używając odpowiednich komend. Specjalizo-wane edytory (polskie!) to Pajączek, Tiger, ezHTML (http://ezhtml.bydnet.com.pl/), WebPage Xpress (http://adl.pl/webpager/). Użycie polskich edyto-rów uwalnia nas od „zabawy” w formatowanie sposobu wyświetlania polskich znaków!
Tagi HTML Dokument HTML to plik tekstowy zawierający ko-mendy (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> - otwarcie …. </HTML> - zamknięcie
Struktura dokumentu HTML <HTML> - otwarcie <HEAD> … - tytuł, standard kodowania liter… </HEAD> <BODY> … - właściwa treść dokumentu </BODY> </HTML> - zamknięcie
Nagłówek <HEAD> <TITLE> Moja własna strona </TITLE> <META http-equiv="content-type" content= "text/html; charset=iso-8859-2"> dla innego standardu: <META http-equiv="content-type" content= "text/html; charset=windows-1250"> </HEAD>
Nagłówek <HEAD> <TITLE> Moja własna strona </TITLE> <META http-equiv="content-type" content= "text/html; charset=iso-8859-2"> <META NAME=„Description” CONTENT=„Na tej stronie piszę o sobie” > <META NAME=„Keywords” CONTENT=„piłka nożna, koszykówka, heavy metal” > <META NAME=„Language” CONTENT=„pl” > </HEAD>
Automatyczne odświeżanie strony <HEAD> <TITLE> Moja kamera sieciowa </TITLE> <META http-equiv="content-type" content= "text/html; charset=iso-8859-2"> <META http-equiv=„Refresh" content= „60"> ... </HEAD> Strona będzie odświeżać się co 60 sekund
Przekierowanie na nową stronę <HEAD> <TITLE> Moja stara strona </TITLE> <META http-equiv="content-type" content= "text/html; charset=iso-8859-2"> <META http-equiv=„Refresh" content= „10; URL=http://moja.nowa.strona"> ... </HEAD> Za 10 sekund nastąpi przekierowanie do nowej strony
Treść dokumentu - <BODY> Tu mogę wpisywać tekst, który po prostu ukaże się na mojej stronie. Muszę pamiętać o tym, że komputer sam będzie dzielił tekst, a zatem takie coś nic mi nie da! </BODY>
Akapity, łamanie wiersza <BODY> <P> Tu mogę wpisywać tekst, który po prostu ukaże się na mojej stronie.</P> <P> Muszę pamiętać o tym, by zaznaczać podział tekstu na akapity, a jeśli chcę przejść do nowej linijki, to robię to tak: <BR> i już nowa linijka! </P> </BODY>
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 (wyrównanie do obu marginesów).</P> </BODY>
Pozioma linia <BODY> <P> Trochę tekstu przed linią.</P> <HR SIZE=10 WIDTH=300> <P> Ten tekst wyświetli się już po poziomej linii o szerokości 300 pikseli.</P> <HR WIDTH=50%> <P> Poprzednia linia miała szerokość równą połowie strony. </P> </BODY>
Tytuły – tagi <H1> do <H6> <BODY> <H1> Rozdział 1.</H1> <H2> Podrozdział 1.1 </H2> <P> Tu będzie treść podrozdziału 1.1.</P> <H2> Podrozdział 1.2 </H2> ... </BODY>
Listy, wypunktowania <UL> <LI> Punkt pierwszy</LI> <LI> Punkt kolejny</LI> </UL> <OL> <LI> Punkt pierwszy (z numerem)</LI> <LI> Punkt drugi (z numerem)</LI> </OL>
Atrybuty czcionki <P> <B> Tekst pogrubiony (Bold)</B> <I> Tekst pochylony, kursywa (Italic)</I> <U> Tekst podkreślony (Underline)</U> <BR> Tekst „chemiczny”: <BR> H<SUB>3</SUB>O<SUP>+</SUP> </P>
Wielkość czcionki Wielkością czcionki możemy sterować w skali od 1 do 7, albo też użyć odpowiednich tagów <SMALL> i <BIG>: <FONT SIZE=„1”> Drobniutki tekst</FONT> <FONT SIZE=„7”> Ogromny tekst</FONT> <FONT SIZE=„+2”> Czcionka powiększona o dwa stopnie względem czcionki bazowej</FONT> <SMALL> Tekst zmniejszony </SMALL> <BIG> Tekst powiększony </BIG>
Kolory czcionki Kolor czcionki możemy wybrać spośród wartości predefinio-wanych albo też podać składowe RGB: <FONT COLOR=„green”>Zielony tekst</FONT> <FONT COLOR=„white”>Biały tekst</FONT> <FONT COLOR=„#FF0000”> Kolor... jaki? (czer-wony) </FONT> Ale czy nasze napisy będzie widać na tle strony?
Tło strony Jako tło możemy podać wartość predefiniowaną, składowe RGB albo nazwę obrazka. Żądany atrybut jest parametrem tagu <BODY>. Można też ustawić domyślny kolor czcionki: <BODY BGCOLOR=„green”> lub <BODY BGCOLOR=„#008000”> albo <BODY BACKGROUND=„images/tło.gif”> czy też <BODY BGCOLOR=„navy” TEXT=„white”>
black silver gray white maroon red purple fuchsia Kolory Oto kilka pośród wielu predefiniowanych kolorów: black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua
Kolory Kolory definiujemy zwykle według modelu RGB podając dla każdej składowej (Red, Green, Blue) jej intensywność jako jeden bajt. Daje to 3 bajty: #RRGGBB - każdy bajt ma wartość od 00 do FF #FFFFFF #FF0000 #FFFF00 #00FF00 #808080 #0000FF #00C0C0
Siła hipertekstu: odnośniki Wstawienie odnośnika na stronie to użycie tagu <A>: <A HREF=„www.chem.uni.wroc.pl”> Kliknij tu by odwiedzić strony Wydziału Chemii </A> <A HREF=„mailto:babajaga@las.pl> Napisz list do Baby Jagi </A> <A HREF=„#objaśnienie”> Kliknij jeśli coś jest niejasne” </A> po kliknięciu komputer przeniesie nas do takiego miejsca: <A NAME=„objaśnienie”> I wszystko jasne </A>
Siła hipertekstu: odnośniki Można tworzyć odnośniki do obrazków, umożliwiać ściąganie plików, a w wysyłanym mailu np. przygotować temat: <A HREF=„../obrazy/plik.jpg”> Kliknij tu aby zobaczyć obrazek </A> <A HREF=„mailto:babajaga@las.pl?subject= „u-wolnić Jasia”> Petycja do Baby Jagi </A> <A HREF=„ftp://mój.serwer/katalog/plik.exe”> Kliknij tu aby ściągnąć plik.exe” </A> <A HREF=„str2.html”> Przejście na str.2 </A>
Wstawiamy obrazki 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>
Wstawiamy obrazki Za otaczanie obrazka tekstem odpowiada atrybut ALIGN: <IMG SRC=„obrazki/obrazek.gif” ALIGN=top> Możliwe wartości tego atrybutu: ALIGN=top ALIGN=bottom ALIGN=middle ALIGN=left ALIGN=right Polecenie to działa również na znaną nam już linię poziomą: <HR WIDTH=50% ALIGN=left>
Wstawiamy obrazki Jeżeli chcemy, by po ustawieniu kursora nad obrazkiem pokazał się jakiś napis, stosujemy taką składnię: <IMG SRC=„obrazki/obrazek.gif” ALT=„Na tym obrazku jest ładny samochód”>
Tabelki Wiersze tworzymy tagiem <TR>, a komórki tagiem <TD>: <TABLE BORDER=10 WIDTH=80% ALIGN=top> <TR> <TD> a11 </TD> <TD> a12 </TD> </TR> <TR> <TD> a21 </TD> <TD> a22 </TD> </TR> <TR> <TD> a31 </TD> <TD> a32 </TD> </TR> </TABLE>
Dalsze plany... Nie omówiliśmy dziś takich elementów języka, jak: style ramki formularze skrypty Java i Flash ale już umiemy tworzyć proste strony!