Część 1
<?xml version="1.0" encoding="iso-859-2"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
<meta name="Description" content="opis strony" />
<meta name="Keywords" content=" słowa kluczowe " />
<meta name="Author" content="Autor" />
<meta name="Generator" content="kED" />
<title> Tytuł strony </title>
<link rel="stylesheet" href=" [nazwa_arkusza_stylów.css] " type="text/css"/>
</head>
<body>
<div id="top"></div> -1 element blokowy(góra strony)
</body>
</html>
Cz. 2 Zapisanie strony jako index.html
</head>
<body>
<div id="top"></div> -1 element blokowy(góra strony)
<div id="menu"></div> -2 element blokowy(menu strony)
<div id="tresc"></div> -3 element blokowy(treść strony)
<div id="stopka"></div> -4 element blokowy(stopka)
</body>
Cz. 3 Wstawienie elementów do Top
a)obrazka
<div id="top">
<img class="logo" src="ścieżka dostępu" alt="tekst alternatywny">
</div>
b)tekst po lewej stronie
między <div>:
<span class="slogan">Prezentacja mojej strony</span>
Cz. 4 Wstawienie elementów do menu
a)nagłówek h2
między <div>:
<h2>Menu</h2>
b)listy
<div id="menu">
<h2>Menu</h2>
<ul>
<li><a href="odnośnik">O mnie<a/></li>
<li><a href="odnośnik">Strona główna</a></li>
<li><a href="Zdjęcia">Moje zdjęcia</a></li>
<li><a href="kontakt">Kontakt</a></li>
<li><a href="moje strony www"</a></li>
</ul>
</div>
Cz. 5 Dodawanie elementów do Treści strony
<div id="tresc">
<h2>Zapraszam na moją stronę</h2>
<p>dodaj tutaj fragment przygotowanego tekstu</p>
<p>dodaj tutaj fragment przygotowanego tekstu</p>
</div>
Cz. 6 Dodawanie elementów do stopki
<div id="stopka">
<p>wszelkie prawa zastrzeżone 2011</p>
</div>
Tak stworzyliśmy podstawę strony w html.
II.Modyfikowanie strony w CSS
1. Zmiana sekcji body
body
{
margin: 0px; marginesy zewnętrzne
padding: 0px; marginesy wewnętrzne
}
#top
{
height: 50px; -wysokość dla logo
}
#top .logo
{
float: left; -logo po lewej stronie
margin-top: 5px; -odsuniecie loga od góry
margin-left: 5px; -odsuniecie od lewej strony
}
#top .slogan
{
float: right; -wyświetlany po prawej stronie
margin-top: 15px;
margin-right: 20px;
}
2. Zmiana sekcji menu
#menu
{
position: absolute;
top: 80px;
left: 40px;
}
3. Zmiana sekcji treści strony
#tresc
{
margin-left: 220px; -odsuniecie od lewej strony
margin-right: 40px; -odsuniecie od prawej strony
}
4. Zmiana pozycji dla stopki
a)
#stopka
{
position: absolute;
bottom: 0px; -stopka na samym dole
height: 23px; -wysokość stopki
widht: 100% -szerokość na całej stronie
}
b)położenie zawartości stopki
#stopka p
{
float: right; -przeniesienie na prawą stronę
}
III. Zmiana wyglądu strony
1. Zmiana tła strony
body
{
background-color: blue;
}
2. Zmiana koloru czcionki
body
{
color: #ffffff;
font-family: verdana, arial; -kolor dla wszelkich elementów blokowych
}
3. Zmiana tła w górnym elemencie blokowym
#top
{
background-color: black; -color tła dla górnego elementu blokowego
border-bottom:2px solid white; -obramowanie dla górnego elementu blokowego
}
#top .slogan
{
float: right; -wyświetlany po prawej stronie
margin-top: 15px;
margin-right: 20px;
color: red; -color tekstu dla sloganu na górze
font-size: 14px; -rozmiar dla tekstu
}
4. Zmiana elementu blokowego menu
#menu
{
position: absolute;
top: 80px;
left: 40px;
}
#menu ul
{
list-style: none; -usunięcie kropek
margin-left: 0px; -odsunięcie od lewej krawędzi
padding-left: 0px;
}
#menu li
{
border-bottom: 3px solid yellow; -podkreślenie w kolorze żółtym
margin-top: 7px; -odsunięcie od górnej krawędzi
}
#menu a:link, #menu a:visited
{
text-decoration: none; -usunięcie podkreślenia odnośników
color: brown; -zmiana koloru
}
#menu a:hover
{
color: blue; -kolor po najechaniu na odnośnik
}
5. Zmiana tła w dolnym elemencie blokowym(stopce)