Ćw.2 Dokumenty HTML, style CSStbajorek.prz.edu.pl/PZ2_I1/sem3_cw2_HTML.pdf · W przykładzie...
5
Click here to load reader
-
Upload
nguyenthuan -
Category
Documents
-
view
212 -
download
0
Transcript of Ćw.2 Dokumenty HTML, style CSStbajorek.prz.edu.pl/PZ2_I1/sem3_cw2_HTML.pdf · W przykładzie...
Informatyka1 – MPZI sem.3
Ćw.2 Dokumenty HTML, style CSS Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.
Struktura szkieletu dokumentu HTML:
<HTML>
<HEAD>
<TITLE> Tytuł w nagłówku okna </TITLE>
</HEAD>
<BODY>
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 (zalecany jest tu Notepad++, darmowy, posiadający kolorowanie tekstu,
numerację wierszy, autouzupełnianie) 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 plik w przeglądarce internetowej.
Znaczniki HTML mają ogólną strukturę:
<ZNACZNIK atrybuty> Treść </ZNACZNIK>
Składnikiem treści może być inny znacznik (zagnieżdżanie). Znaczniki bez treści (np. BR, IMG, HR i inne)
można zapisać:
<ZNACZNIK atrybuty />
Najważniejsze znaczniki:
Znacznik Znaczenie Przykład
P akapit tekstowy <P> Tekst </P>
TABLE tabela <TABLE>
<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>
TR wiersz tabeli
TD komórka tabeli
UL lista wypunktowana <UL>
<LI> tekst punktu pierwszego</LI>
<LI> tekst punktu drugiego</LI>
<LI> tekst punktu trzeciego</LI>
</UL>
OL lista numerowana
LI element listy
IMG grafika <IMG SRC="obrazki/1.jpg">
A odnośnik (hiperłącze) <A HREF= " http://www.wp.pl" > Wirtualna Polska </A>
BR zmiana wiersza <P> jakiś tekst <BR /> inny tekst</P>
HR linia pozioma <HR />
Oto kilka przykładowych znaczników:
Akapit tekstowy - znacznik <P>
Przykłady:
<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 url('rys.gif')
border-color kolor obramowania blue
#CCFF33
border-width grubość obramowania 2px
border-style styl obramowania dotted
dashed
solid
border
border-left
border-right
border-top
border-bottom
całe obramowanie (grubość, typ linii, kolor)
... albo każda krawędź osobno
3px solid green
color kolor tekstu yellow
#669933
cursor wygląd kursora myszki hand
crosshair
font-family rodzaj oraz rodzina czcionki Arial sans-serif
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
margin-left
margin-right
margin-top
margin-bottom
wszystkie marginesy zewnętrzne (górny, prawy,
dolny, lewy)
... albo każdy osobno
5px 5px 10px 10px
10cm
100px
text-align wyrównanie poziome tekstu left
center
right
justify
Pełny opis możliwych do zastosowanie cech stylów znajduje się np. pod adresem:
http://www.signs.pl/html/o/style.php
Zmiana wiersza wewnątrz akapitu - znacznik <BR /> UWAGA : – pojedynczy znacznik
Przykład:
<P> jakiś tekst <BR /> inny tekst </P>
Linie poziome – znacznik <HR>
<HR style="width:800px;height:4px;color:red">
Style czcionki (dla krótkich tekstów)
<B> </B> pogrubiona (albo <STRONG>)
<I> </I> kursywa
<U> </U> podkreślona
<SUP> </SUP> indeks górny(superscript)
<SUB> </SUB> indeks dolny(subscript)
Przykłady:
<B><I> To jest tekst napisany pogrubioną kursywą </I></B>
<P style="text-align:center"> Jakiś <B>Tekst</B> x<SUP>2</SUP></P>
Stałe koloru:
white aqua silver
grey teal yellow
lime olive navy
red blue maroon
fuchsia black green
purple
lub #336699
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 stylu background-color dla stylu znacznika BODY)
Przykłady:
<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" />
Przykład:
<IMG src="obrazki/p1.gif" style="width:55px;height:45px" />
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= " http://www.wp.pl" > Wirtualna Polska </A>
<A href="http://www.microsoft.com/poland/"> 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>
Ćwiczenie
Wykonać stronę z elementami z powyższej instrukcji, według własnego projektu.
Arkusze stylów CSS
Można zastosować poszczególne cechy w atrybucie style dla znaczników, np.:
<P style="font-size:18px; color:red;font-weight:bold"> Tekst</P> <TABLE style="background-color:blue;border:2px solid green">.....tu wiersze i kolumny......</TABLE>
Poszczególne cechy stylu oddzielamy średnikami.
Własne style można dowolnie nazywać, np. "naglowek", "akapitczerwony" (tzw. klasa). Można je
zadeklarować w osobnym pliku lub wprost na wybranej stronie WWW.
W nagłówku strony, w sekcji HEAD umieścić swoją definicję stylu pomiędzy znacznikami <STYLE></STYLE>.
<HTML><HEAD> <STYLE type="text/css">
h1,td {color: green;} .naglowek {color: red; font-size:30px;} .gruby_w_ramce {font-weight: bold;border:2px solid green}
p.duza { font-size:30px;} </STYLE> </HEAD>
<BODY> <H1>Nagłówek strony</H1>
<a href="http://www.signs.pl/html/" class="naglowek">Duży link do strony SIGNS</A> <P> Standardowy akapit</P> <P style="color:blue;font-size:50px"> Bezpośredni opis stylu</P>
<SPAN class="gruby_w_ramce"> Opis klasy </SPAN> <P class="duza"> Akapit opisanej klasy <I>duza</I> </P> </BODY></HTML>
W przykładzie zostały zdefiniowany styl dla elementów H1 i TD i trzy style o nazwach klas: naglowek i
gruby_w_ramce i duza.
Najczęściej spotykane jest przypisanie stylu do istniejącego elementu HTML. Kropka przed nazwą stylu
określa, że styl jest selektorem klasy, czyli klasa będzie miała nadaną przez nas nazwę, którą można potem użyć
jako atrybut class dla dowolnego elementu HTML. Cechy stylu opisujemy w nawiasach klamrowych. Wszystkie
tytuły H1 i komórki tabeli TD będą miały kolor zielony (color: green;) Nagłówek ma mieć czerwony kolor (color:
red;) i wielkość 30 pikseli (font-size:30px;). Styl gruby_w_ramce będzie posiadał opisane cechy. Duza to klasa,
ale tylko dla akapitów <P>.
Cechy w opisie stylu oddzielamy średnikami.
Dowolny element HTML na stronie, który ma mieć styl klasy naglowek, powinien mieć atrybut class z
nazwą naszego stylu (bez kropki).
Zamiast osadzać style CSS w tekście strony, można je dołączyć z zewnętrznego pliku (arkusza stylów) za
pomocą elementu link w sekcji <HEAD>:
<HEAD> <TITLE>Tytuł strony </TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
Dołączany dodatkowy plik tekstowy o nazwie np. style.css powinien zawierać definicje stylów, przykładowo:
body, p { font-family: Arial, sans-serif;
font-size: 14px; }
a { text-decoration:none; color:red;
} .mojstyl { font-size:30px;
font-family:Verdana; font-weight:bold; color: #cc9933;
}
Taka metoda pozwala na dołączanie gotowych plików CSS (ze zdefiniowanymi stylami) do wielu projektów
stron.
Zadanie
Opracować dokument HTML i wzbogacić go o funkcjonalny arkusz stylów w osobnym pliku.
Sprawdzić jego działanie po modyfikacjach definicji stylów dla znaczników i klas w pliku CSS.
