Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.

Wielkość: px

Rozpocząć pokaz od strony:

Download "Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów."

Irena Kowalik
7 lat temu
Przeglądów:

1 Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: <ZNACZNIK atrybuty> zawartość </ZNACZNIK> Struktura szkieletu dokumentu HTML: <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> Tu są elementy pojawiające się na stronie główna część dokumentu HTML </BODY> </HTML> Zwrócić uwagę na początek i koniec bloków oznaczonych znacznikami HTML, HEAD i BODY. Utworzyć przy pomocy Notatnika Windows plik tekstowy o powyższej strukturze. Aby poprawnie wyświetlane były polskie znaki zapisać dokument z kodowaniem UTF-8, zmienić mu nazwę na index.html (ważne rozszerzenie nazwy), a następnie obejrzeć efekt otwierając w przeglądarce internetowej. Oto kilka przydatnych znaczników: Akapit tekstowy - znacznik <P> <P style="text-align:center"> Tytuł </P> <P style="text-align:center; font-size:28px;color:#887755"> Tytuł2 </P> Jak wynika z powyższego przykładu wiele parametrów dla znacznika można ustalić dzięki atrybutowi style. Atrybut ten może posiadać wiele cech o określonych wartościach. Jest to lista reguł ustalających w jaki sposób mają zostać wyświetlone przez przeglądarkę wybrane elementy HTML. Schemat zastosowania: <ZNACZNIK style="cecha1:wartość; cecha2:wartość; itd">zawartość</znacznik> Wybrane cechy stylów: Cecha stylu Opis Przykładowe wartości background-color kolor tła elementu red #ff0000 background-image adres tła graficznego rys.gif border-color kolor obramowania #CCFF33 border-width grubość obramowania 2px border-style styl obramowania dotted dashed solid border obramowanie (całość cech) 3px solid green color kolor tekstu yellow # cursor wygląd kursora myszki hand crosshair font-family rodzaj oraz rodzina Arial sans-serif

2 czcionki font-size wielkość czcionki 14px font-style styl czcionki italic font-weight grubość (waga) czcionki bold height wysokość elementu 23mm width szerokość elementu 5cm margin-left margin-right margin-top margin-bottom text-align marginesy zewnętrzne wyrównanie poziome tekstu 10cm 100px left center right justify text-decoration wygląd tekstu none underline blink Pełny opis możliwych do zastosowanie cech stylów znajduje się np. pod adresem: Zmiana wiersza wewnątrz akapitu - znacznik <BR /> UWAGA : pojedynczy znacznik Przykład: <HEAD> <TITLE> Moja strona internetowa </TITLE> </HEAD> 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> Poziom nagłówka strony - znacznik <Hn> - <H1> Nagłówek pierwszy </H1> Wypróbować również znaczniki H2 H3 itd. aż do H6 Linie poziome znacznik <HR> <HR style="width:800px;height:14px;color:red"> Style czcionki (dla krótkich tekstów) <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) <B><I> To jest tekst napisany pogrubioną kursywą </I></B> <P style="text-align:center"> Jakiś <B>Tekst</B> x<sup>2</sup></p>

3 Stałe koloru: white aqua silver gray teal yellow lime olive navy red blue maroon fuchsia black green purple lub # liczba określająca w systemie szesnastkowym nasycenie barw RGB (od 00 do FF) tutaj: red: 33h, green: 66h, blue: 99h Kolor tła strony (cecha background-color dla stylu znacznika BODY) <BODY style="background-color:maroon"> <BODY style="background-color:#668600"> Tabele znaczniki: <TABLE ></TABLE> znacznik całej tabeli <TR></TR> znaczniki wiersza <TD></TD> znaczniki kolumny Przykład: <TABLE style="border:4px solid green"> <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> Aby ustalić styl dla wszystkich komórek tabeli można w bloku pomiędzy znacznikami <HEAD> zastosować przykładową definicję: <STYLE type="text/css"> TD{color: blue; border:1px dotted black;width:80px} </STYLE> Lista wypunktowana znaczniki <UL> i <LI> <UL> <LI> tekst punktu pierwszego</li> <LI> tekst punktu drugiego</li> <LI> tekst punktu trzeciego</li> </UL> Lista numerowana znaczniki <OL> i <LI> <OL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </OL> Grafika znacznik <IMG> <IMG src="ścieżka\plik_graficzny" /> <IMG src=" _7.gif" style="width:55px;height:45px" />

4 Hiperłącza (odsyłacze) znacznik <A> 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= " > Wirtualna Polska </A> <A href=" Microsoft </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: Realizacja wygląda następująco: <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="prześlij" /> </P> </FORM> </BODY>

5 </HTML> Ćwiczenie Wykonać stronę z elementami z powyższej instrukcji według własnego projektu, stosując wszystkie znaczniki i nadając im cechy stylu. Materiały pomocnicze w sieci:

Podobne dokumenty

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce