docĆw.4 Dokumenty HTML, style CSS
download 
Reklamacja Transkrypt
Ćw.4 Dokumenty HTML, style CSS
Ćw.4 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 będą elementy pojawiające się na stronie
- główna wizualna 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, zmienić mu nazwę na
index.html (ważne rozszerzenie nazwy, dobrze jest w trakcie zapisu ustalić kodowanie UTF8 dla
prawidłowego wyświetlania przez IExplorera polskich znaków diakrytycznych), a następnie obejrzeć efekt
otwierając dokument w przeglądarce internetowej.
Można też korzystać z lepszego notatnika Notepad2 (ściągnąć z internetu), który numeruje wiersze,
koloruje tekst i daje możliwość wielokrotnego cofania operacji edycyjnych (CTRL+z).
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
P
akapit tekstowy
TABLE
tabela
TR
wiersz tabeli
TD
komórka tabeli
UL
OL
LI
lista wypunktowana
lista numerowana
element listy
IMG
grafika
A
BR
HR
odnośnik (hiperłącze)
zmiana wiersza
linia pozioma
Przykład
<P> Tekst </P>
<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>
<UL>
<LI> tekst punktu pierwszego</LI>
<LI> tekst punktu drugiego</LI>
<LI> tekst punktu trzeciego</LI>
</UL>
<IMG SRC="obrazki/1.jpg" />
<A HREF= " http://www.wp.pl" > Wirtualna Polska </A>
<P> jakiś tekst <BR /> inny tekst</P>
<HR />
Przykłady znaczników:
Akapit tekstowy - znacznik <P>
Przykłady:
<P style="text-align:center"> Jakiś tekst </P>
<P style="text-align:center; font-size:28px;color:#887755"> Inny tekst</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
background-color
kolor tła elementu
background-image
border-color
border-width
border-style
adres obrazu tła graficznego
kolor obramowania
grubość obramowania
styl obramowania
border
border-left
border-right
border-top
border-bottom
color
całe obramowanie (grubość
typ linii, kolor)
cursor
wygląd kursora myszki
font-family
font-size
font-style
font-weight
height
width
margin-left
margin-right
margin-top
margin-bottom
text-align
rodzaj oraz rodzina czcionki
wielkość czcionki
styl czcionki
grubość (waga) czcionki
wysokość elementu
szerokość elementu
marginesy zewnętrzne
vertical-align
wyrównanie pionowe tekstu
text-decoration
wygląd tekstu
Przykładowe wartości
red
#ff0000
url('rys.gif')
#CCFF33
2px
dotted
dashed
solid
3px solid green
7px dotted #AA3399
... albo osobno każda krawędź
kolor czcionki tekstu
wyrównanie poziome tekstu
yellow
#669933
hand
crosshair
Arial sans-serif
14px
italic
bold
23mm
5cm
10cm
100px
left
center
right
justify
top
middle
bottom
none
underline
blink
Dla każdego znacznika można określić jego styl. Należy robić to sensownie, np. obrazek może mieć
obramowanie, szerokość, a nie ma sensu dawać mu rozmiar czcionki.
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 – pusty znacznik <HR />
<HR style="width:800px;height:4px;color:red" />
Style czcionki (dla krótkich tekstów)
<B> </B>
<I> </I>
<U> </U>
<SUP> </SUP>
<SUB> </SUB>
pogrubiona (albo <STRONG>)
kursywa
podkreślona
indeks górny(superscript)
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
lime
red
fuchsia
purple
teal
olive
blue
black
yellow
navy
maroon
green
lub
#336699 - czyli red: 33h green: 66h blue: 99h
- liczba określająca w systemie szesnastkowym (h – heksadecymalnym) nasycenie barw RGB (3 liczby w
zakresie od 00 do FF dla każdej barwy – czerwony, zielony, niebieski)
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 znacznik całej tabeli
TR
znacznik wiersza
TD
znacznik komórki
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 wewnątrz bloku <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 – pusty znacznik <IMG>
<IMG src="ścieżka/plik_graficzny" />
Przykład:
<IMG src="obrazki/p1.gif" style="width:55px;height:45px" />
Uwaga na lokalizację pliku graficznego – tu w folderze obrazki, podrzędnym do foldera z naszym plikiem html.
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>
Ć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>.
Dowolny element HTML na stronie, który ma należeć do klasy naglowek (posiadać cechy klasy), 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;
colo: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ć własny dokument HTML o dowolnej treści. Zadbać o treść i wygląd odpowiednio
projektując stronę. Wzbogacić go o funkcjonalny arkusz stylów CSS w osobnym pliku. Sprawdzić
jego działanie po modyfikacjach definicji stylów dla znaczników i klas w pliku CSS.
