Pewnie wielu z Was chciało by napisać swoją własną stronę. Napiszę dla Was krótki tutek, taki na początek.
Na sam pierw polecam kilka lekcji CSS oraz HTML:
Kurs HTML- http://www.kurshtml.boo.pl/
Kurs CSS- http://pl.html.net/tutorials/css/
No to zaczynamy
Utwórz folder na ( najlepiej na pulpicie ) i nazwij go np. 'strona'. Teraz włącz notatnik. Utwórz plik index.html ( jest to główny plik każdej strony ), zapisz go używając opcji 'wszystkie pliki' z listy 'zapisz jako'. Plik zapisz w folderze- 'strona'.
Następnie zrób plik style.css ( postępuj tak samo jak z plikiem 'index.html' ).
Do pliku index.html wklei następujący tekst:
KOD
- Kod: Zaznacz cały
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
<title>Moja pierwsz strona</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="glowna">
<div id="logo"></div>
<div id="naglowekmenu">
<div id="menu">
<ul>
<li><a href="#">Strona Główna</a></li>
<li><a href="#">O mnie</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Koncerty</a></li>
<li><a href="#">Linki</a></li>
</ul>
</div>
</div>
<div id="poledotekstu">
<div id="tekst">
<p>
Hello Word!
</p>
</div></div>
<div id="stopka">Copyright (c) AniolSmierci</div>
</div>
</body>
</html>
Teraz przetłumaczmy główne opcje:
KOD
- Kod: Zaznacz cały
<title>To jest moja pierwsza strona</title>
Tekst 'To jest moja pierwsza strona' to tekst który się pokazuje na górze przeglądarki.
KOD
- Kod: Zaznacz cały
<ul>
<li><a href="#">Strona Główna</a></li>
<li><a href="#">O mnie</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Koncerty</a></li>
<li><a href="#">Linki</a></li>
</ul>
Tutaj jest całe menu strony. W miejsce # należy wpisać nazwe pliku który ma się wyświetlać po kliknięci na pozycje w menu.
KOD
- Kod: Zaznacz cały
<p>
Hello Word!
</p>
Jest to tekst który się wyświetla na stronie.
KOD
- Kod: Zaznacz cały
<div id="stopka">Copyright (c) Michal16ns</div>
Stopka strony, czyli tekst który się wyświetla na samym dole.
Teraz poniższy tekst wklei do stylów:
KOD
/* Główny układ strony */
- Kod: Zaznacz cały
#glowna { background-image: url(tlo.jpg);
margin:0 auto;
padding:0 0px 0 0px;
position:relative;
width:1000px;
height:100%;
text-align:center;
}
#logo { width:900px;
margin-left:50px;
height:350px;
background-image: url(logo.jpg);
}
#naglowekmenu {
background: url(menu.jpg) no-repeat;
float:center;
height:50px;
margin: -16px 0 5px 50px;
font-size:16px;
height:50px;
}
#stopka{
background: url(menu.jpg) no-repeat;
width:auto;
height:50px;
margin: -16px 0 5px 50px;
font-size:16px;
float:center;
}
#tekst {height:auto;
width:900px;
text-align:left;
margin: 0 50px 50px 50px;
}
#poledotekstu{ background-image: url(tlo.jpg);
width:900px;
margin-bottom:5px;
}
#menu{ padding-left:20px;
padding-right:20px;
height:55px;
}
#menu ul {
list-style: none;
}
#menu li {
float: left;
padding-left:55px;
padding-top:5px;
font-size: 18px;
}
#menu a {
display: block;
line-height: 20px;
padding: 0 tease.gifx;
color: #00FFFF;
font-weight: bold;
}
#menu a:hover {
background: #e8f2cd;
color: #56710es;
}
/* Pomocnicze */
body { background-color: #555555;
margin: 0 auto 0 auto;
}
a {
text-decoration: none; }
img {border:0px;
}
#glowna { background-image: url(tlo.jpg);
Grafika w stronach WWW to bardzo ważny element. Pamiętajcie jednak, że jeśli wgracie dużo grafiki, to strona będzie się długo otwierać.
Aby strona ładnie wyglądała użyj podanej niżej grafiki ( pamiętaj, musisz je nazwać tak jak podam i zapisać w folderze 'strona'! )
Logo ( zapisz 'logo.jpg' ): http://images37.fotosik.pl/104/0da05ac7d4a49e1e.jpg
Tło ( zapisz 'tlo.jpg' ): http://images45.fotosik.pl/108/8c77c4d5371981b4med.jpg
Menu ( zapisz 'menu.jpg' ): http://images48.fotosik.pl/108/1514c86b580c8d2d.jpg
I to już koniec, strona skończona
Wynik swojej pracy możesz oglądać poprzez otwarcie pliku 'index.html' w przeglądarce sieciowej.
W razie problemów piszcie na:
PW!
Tutek znaleziony w necie.
Pozdrawiam
Michal16ns



