docĆw.1 – tworzenie podstawowego dokumentu w
download 
Reklamacja Transkrypt
Ćw.1 – tworzenie podstawowego dokumentu w
XHTML/CSS – Laboratorium 1
Ćw.1 – tworzenie podstawowego dokumentu w XHTML (plik p1.xhtml)
Na dysku E: utworzyć folder XHTML do
przechowywania tworzonych dokumentów
xhtml.
Utworzyć dokument xhtml o postaci
widocznej na rysunku obok (moŜna
wykorzystać edytor Ked i utworzyć szablon
dokumentu xhtml). W części body umieścić
trzy znaczniki <div> zawierające kolejno:
a) <div id="baner"> <h1>Element
tytułowy strony i logo</h1></div>
b) <div id="tresc"> <p>Element
zawartości strony</p></div>
c) <div id="stopka"> <hr/>Stopka
strony</div>
Przeprowadzić validację dokumentu xhtml.
Ćw.2. Wykorzystanie CSS do
formatowania dokumentu
Do pliku z ćw.1 dołączyć plik CSS, w
którym naleŜy:
a) dla elementu <body>: ustawić kolor tła
dokumentu na Ŝółty, czcionkę na
granatową, wielkość podstawową
czcionki na small
b) dla nagłówka <h1> ustawić
wyrównanie tekstu do środka i rozmiar
czcionki na 150% czcionki
podstawowej
c) zdefiniować wyjątek #stopka i ustawić
dla niego rozmiar czcionki 80%
czcionki podstawowej
Arkusz styl1.css powinien wyglądać
następująco (z uwzględnieniem
odmiennych interpretacji w IE):
body { font-size:small;
background:yellow;
color:navy;}
* html body{ font-size:x-small; /* dla IE5/Win */
f\ont-size:small: /*dla pozostałych IE*/
}
h1 { text-align:center;
font-size:150%;}
#stopka { text-align:center;
font-size:85%;}
1
XHTML/CSS – Laboratorium 1
Ćw.3 – Modyfikacja arkusza styl1.css
Zmodyfikować arkusz CSS:
a) Usunąć Ŝółte tło dla
elementu body
b) Dodać tła:
dla #stopka - tło Ŝółte
dla #tresc - tło jasnoŜółte
dla #baner - tło
pomarańczowe,
c) Ustawić marginesy:
div,h1,h3,p {margin:0}
Wynik działania przedstawia
rysunek obok.
Dodać kolejne modyfikacje
arkusza css:
jako tło dla #stopka i #baner
ustalić plik bg.gif:
#stopka
{background:url(image/bg.gif)
;}
#baner
{background:url(image/bg.gif)
;}
2
XHTML/CSS – Laboratorium 1
Ćw.4 – tworzenie i formatowanie tabel (plik
tabela.xhtml)
Na bazie dokumentu z poprzedniego ćw.4
utworzyć dokument tabela.xhtml postaci jak na
rys.1 (nagłówek i stopka pozostają niezmienione,
element zawartości będzie tabelą). Tabelę
utworzyć w oparciu o strukturę znaczników:
<table>
<caption>Wiodące serwery WWW</caption>
<tbody>
<tr><th>Serwer</th><th>Udzial %</th></tr>
<tr><td>Apache</td><td>64.76</td></tr>
...
<tr><td colspan="2">Źródło:
<a href="http://news.netcraft.com">
Netcraft</a>, maj 2006</td>
</tr>
</tbody></table>
Utworzyć nowy plik styl2.css ustawiający
formatowanie poszczególnych elementów tabeli:
a) Szerokość tabeli:100% okna przeglądarki,
krawędzie o grubości 1, tło - białe:
table {width:100%; border:1px solid;
background:white }
b) Tytuł tabeli pogrubić
table caption{font-weight:bold}
c) Ustalić obramowanie komórek:
td th{border:1px solid}
d) Szerokość kolumny 1 określić na 50%
szerokości tabeli
th.kolumna1 {width:50%;
border:1px solid}
Po dołączeniu arkusza CSS rezultat przedstawia
rys.2.
Do styl2.css dodac kolejne reguły ustalające:
e) tło komórek <th> granatowe, czcionka biała
pogrubiona:
th {background:navy; color:lightyellow; }
f) tło wiersza ostatniego - granatowe, czcionka
biała pochylona, wielkość 90%, wyrównanie
tekstu - wyśrodkowane w poziomie
tr.ostatni {background:navy;
color:lightyellow;size:90%;text-align:center}
g) tło wierszy nieparzystych - jasnoŜółte
tr.niepar {background:lightyellow}
h) wyrównanie w 1 kolumnie (szer. 70%)- do
lewej, w drugiej kolumnie do prawej
kolumna1 {width:70%;border:1px solid}
kolumna2 {text-align:right}
Ostateczny rezultat przedstawia rys.3.
3
Rys.1.
Rys.2.
Rys.3.
