Wykład 15 Dokumenty HTML. Tworzenie stron WWW

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>

<HEAD>

<TITLE> Moja własna strona </TITLE>

<META http-equiv="content-type" content=

"text/html; charset=iso-8859-2">

dla innego standardu:


"text/html; charset=windows-1250">

</HEAD>

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>

Automatyczne odświeżanie strony

<HEAD>

<TITLE> Moja kamera sieciowa </TITLE>



<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=„Refresh" content= „10;

URL=http://moja.nowa.strona">

...

</HEAD>

Za 10 sekund nastąpi przekierowanie do nowej strony

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>

Akapity, łamanie wiersza

<BODY>

 Tu mogę wpisywać tekst, który po prostu

ukaże się na mojej stronie.

 Muszę pamiętać o tym, by zaznaczać

podział tekstu na akapity, a jeśli chcę

przejść do nowej linijki, to robię to tak:

 i już nowa linijka! 

</BODY>

Wyrównywanie tekstu

<BODY>

 Tekst wyrównany do lewej.

 Wyrównanie do prawej.

 Centrowanie.

 Justowanie (wyrównanie do

obu marginesów).

</BODY>

Pozioma linia

<BODY>

 Trochę tekstu przed linią.

<HR SIZE=10 WIDTH=300>

 Ten tekst wyświetli się już po poziomej

linii o szerokości 300 pikseli.

<HR WIDTH=50%>

 Poprzednia linia miała szerokość równą

połowie strony. 

</BODY>

Tytuły – tagi <H1> do <H6>

<BODY>

<H1> Rozdział 1.</H1>

<H2> Podrozdział 1.1 </H2>

 Tu będzie treść podrozdziału 1.1.

<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



 Tekst pogrubiony (Bold)

 Tekst pochylony, kursywa (Italic)

 Tekst podkreślony (Underline)

 Tekst „chemiczny”: 

H3O+

Wielkość czcionki

Wielkością czcionki możemy sterować w skali od 1 do 7, albo

też użyć odpowiednich tagów i <BIG>:

 Drobniutki tekst

 Ogromny tekst

 Czcionka powiększona o dwa

stopnie względem czcionki bazowej

 Tekst zmniejszony 

<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:

Zielony tekst

Biały tekst

 Kolor... jaki? (czer-

wony) 

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”>

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

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:[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>

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>

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:

 <IMG SRC=„plik.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>

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!

Wykład 15 Dokumenty HTML. Tworzenie stron WWW

Documents

Transcript of Wykład 15 Dokumenty HTML. Tworzenie stron WWW