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.