![Page 1: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/1.jpg)
Wykład 15
Dokumenty HTML.Tworzenie stron WWW
![Page 2: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/2.jpg)
Ź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).
![Page 3: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/3.jpg)
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.
![Page 4: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/4.jpg)
„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
![Page 5: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/5.jpg)
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!
![Page 6: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/6.jpg)
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
![Page 7: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/7.jpg)
Struktura dokumentu HTML
<HTML> - otwarcie
<HEAD>
… - tytuł, standard kodowania liter…
</HEAD>
<BODY>
… - właściwa treść dokumentu
</BODY>
</HTML> - zamknięcie
![Page 8: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/8.jpg)
Nagłówek <HEAD>
<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>
![Page 9: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/9.jpg)
Nagłówek <HEAD>
<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>
![Page 10: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/10.jpg)
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
![Page 11: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/11.jpg)
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
![Page 12: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/12.jpg)
Treść dokumentu - <BODY>
<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>
![Page 13: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/13.jpg)
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>
![Page 14: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/14.jpg)
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>
![Page 15: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/15.jpg)
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>
![Page 16: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/16.jpg)
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>
![Page 17: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/17.jpg)
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>
![Page 18: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/18.jpg)
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>
![Page 19: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/19.jpg)
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>
![Page 20: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/20.jpg)
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?
![Page 21: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/21.jpg)
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”>
![Page 22: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/22.jpg)
Kolory
Oto kilka pośród wielu predefiniowanych kolorów:
black silver gray whitewhite
maroon red purple fuchsia
green lime olive yellow
navy blue teal aqua
![Page 23: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/23.jpg)
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
![Page 24: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/24.jpg)
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:[email protected]> 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>
![Page 25: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/25.jpg)
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:[email protected]?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>
![Page 26: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/26.jpg)
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>
![Page 27: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/27.jpg)
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>
![Page 28: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/28.jpg)
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”>
![Page 29: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/29.jpg)
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>
![Page 30: Wykład 15 Dokumenty HTML. Tworzenie stron WWW](https://reader035.vdocuments.site/reader035/viewer/2022062309/56813fae550346895daa9301/html5/thumbnails/30.jpg)
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!