Dokumenty HTML

Transkrypt

Dokumenty HTML
Dokumenty HTML
STRUKTURA dokumentu HTML
<HTML>
<HEAD>
<TITLE> Tytuł w
nagłówku okna
</TITLE>
</HEAD>
<BODY>
Tu są elementy pojawiające się na stronie
</BODY>
</HTML>
Utworzyć przy pomocy Notanika Windows plik index.html o powyższej
strukturze, a następnie obejrzeć efekt w przeglądarce internetowej.
Wykorzystać inne znaczniki:
Znacznik <P> - akapit
Przykłady:
<P align="center"> Tytuł </P>
<P align="left"> Tytuł2 </P>
Atrybuty wyrównania tekstu:
<P ALIGN="left"> TEKST
</P>
<P ALIGN="right"> </P>
<P ALIGN="center"> </P>
Znacznik <BR/> - UWAGA : – pojedynczy znacznik - zmiana wiersza
wewnątrz akapitu
Przykład:
<HTML>
<HEAD>
<TITLE> Moja strona internetowa </TITLE>
</HEAD>
<BODY>
to
będzie
jeden
wiersz
<P> a <BR/> to <BR/> cztery <BR/>wiersze</P>
<P> to </P> <P> tez </P> <P> cztery </P> <P> wiersze</P>
</BODY></HTML>
Znacznik <Hn> - poziom nagłówka strony
<H1> Nagłówek pierwszy </H1>
Wypróbować również znaczniki H2 H3 itd aż do H6
Linie poziome:
<HR SIZE="7" WIDTH="400" COLOR="yellow">
<HR SIZE="8" WIDTH="100" ALIGN=left COLOR="navy">
Wielkość czcionki:
<FONT SIZE="x"> tekst </FONT>
x – liczby od 1 do 7
Kroje czcionki:
<B> </B>
pogrubiona (albo <STRONG>)
<I> </I>
kursywa
<U> </U>
podkreślona
<STRIKE> </STRIKE> przekreślona
<SUP> </SUP>
indeks górny(superscript)
<SUB> </SUB>
indeks dolny(subscript)
<BIG> </BIG>
duża
<SMALL> </SMALL
Przykłady:
<B><I> To jest tekst pogrubiona kursywa </I></B>
<P ALIGN ="CENTER"> <B><FONT size="6">
Tekst</FONT></B> </P>
Czcionka
<FONT COLOR="nazwa koloru" SIZE="5"> tekst</FONT>
Stałe koloru:
white
gray
lime
red
fuchsia
purple
aqua
teal
olive
blue
black
silver
yellow
navy
maroon
green
lub <FONT COLOR="#336699" SIZE="5"> tekst</FONT>
liczba określająca w systemie szesnastkowym nasycenie barw
RGB – tu red: 33H, green: 66H , blue: 99H
Kolor tła strony
<BODY BGCOLOR=”nazwa koloru”>
Tabele
<TABLE BORDER>
<TR></TR> znaczniki wiersza
<TD></TD> znaczniki kolumny
</TABLE>
Przykład:
<TABLE BORDER>
<TR> <TD> AA </TD> <TD> AB </TD></TR>
<TR> <TD> BA </TD> <TD> BB </TD> </TR>
<TR> <TD> CA </TD> <TD> CB </TD> </TR>
</TABLE>
Lista wypunktowana
<UL>
<LI> tekst punktu pierwszego
<LI> tekst punktu drugiego
<LI> tekst punktu trzeciego
</UL>
Obrazy
<IMG SRC="ścieżka\plik_graficzny">
<img border="0" src="email_7.gif" width="55" height="45">
<IMG SRC="plik.jpg" HEIGHT="80">
Hiperłącza - odsyłacze
Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. Jej
konstrukcję można przedstawić w postaci:
<A HREF= "adres strony " > Tekst (lub obrazek), który należy kliknąć </A>
Np.
<A HREF= " http://www.wp.pl" > Wirtualna Polska </A>
<A HREF="http://www.microsoft.com/poland/”> Możesz
zaglądnąć pod ten adres </A>
<A HREF="./reklama.htm"> <IMG SRC="reklama.jpg" > </A>
<A HREF=mailto:imię nazwisko@adres> Napisz do autorów tej
strony</A>
Odsyłacz do zakładki o nazwie x
<a href="#x">Skocz do rozdz.1</a>
...
...
<P> Teksty</P>
<a name=x>Rozdział 1</a>
Formularze
Przykład: Utworzyć poniższy formularz:
Wykorzystać np.FrontPage z pakietu Office lub napisać „ręcznie” w pliku
HTML:
<html>
<meta http-equiv="content-type" content="text/html; charset=Windows1250"/>
<body>
<FORM>
<p>Nazwisko:<INPUT type='text' name='Nazwisko'></p>
<p>Imię:<INPUT type='text' name='Imie'></p>
<p>Wzrost:</p>
<p>Wysoki<input type="radio" name="wzrost" checked></p>
<p>Średni<input type="radio" name="wzrost" ></p>
<p>Niski<input type="radio" name="wzrost" ></p>
<p><select>
<option>Podstawowe</option>
<option>Średnie</option>
<option>Wyższe</option>
</select></p>
<p><INPUT type='submit' value="Przeslij"> </p>
</FORM>
</body>
</html>
Materiały pomocnicze w sieci:
http://www.kurshtml.boo.pl
http://www.signs.pl/html/
Ćwiczenie
Wykonać stronę z elementami z powyższej instrukcji, według własnego
projektu.