Tło
strony z divami
| 
| Odsłony: 134Dla początkujących webmasterów prawdziwą zmorą jest zbudowanie solidnego szablonu strony WWW, opartego o CSS oraz elementy blokowe <div> </div>. Zazwyczaj początkujący programiści budują strony za pomocą tabelek co jest nierozsądne oraz niedopuszczalne! Po pierwsze taka konstrukcja, jest sprzeczna ze standardami W3C, a po drugie znacznie utrudnia przebudowywanie witryny.
W niniejszym artykule, pokarzę w jaki sposób stworzyć szablon strony WWW oparty o elementy blokowe DIV oraz style CSS o stałej szerokości.
Stały szablon
Stały szablon (ang. fixed layout), zawiera stałą odgórnie ustaloną szerokość wyrażoną w pikselach. Szerokość ta jest identyczna zarówno na monitorze 27-calowym jak i smartphonie posiadającym 4-calowy ekran. Przy tworzeniu takiego szablonu należy zadbać o komfort internauty i ustalić taką szerokość, aby nie trzeba było przewijać strony poziomo. Domyślnie zakłada się, że internauci korzystają z monitorów pracujących w rozdzielczości 1024×768 oraz 1366×768 (są one najpopularniejsze). Wobec tego, tworzony przez nas szablon powinien mieć 1004 piksele szerokości (od 1024px odejmujemy 20px na pasek przewijania w dół) lub 1346.
Szablon dwukolumnowy
Przygotujmy pierwszy szablon, zawierający dwie pionowe kolumny (jedna jest przeznaczona na menu nawigacyjne, a druga na treść). Graficznie będzie on prezentował się tak:
A jego kod będzie wyglądał tak:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
html {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
padding: 0;
display: block;
width: 1004px;
overflow: auto;
}
#header {
width: 100%;
float: left;
background-color: #888;
}
#nav {
width: 250px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#content {
width: 554px;
float: left;
overflow: hidden;
background-color: #fff;
}
#footer {
clear: both;
width: 100%;
background-color: #888;
}
|
Kod HTML:
|
1
2
3
4
5
6
7
8
9
10
11
|
<html>
<head>
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
< body>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>
< /body>
</html>
|
listy wypuntkowanie tip
| | Odsłony: 153Wypunktowanie (podstawowy) - lista nieuporządkowana
<ul> <li>Punkt pierwszy</li> <li>Punkt drugi</li> <li>Punkt trzeci</li> </ul>
- Lista uporządkowana (numerowana)
- z ang. ordered list – jest definiowana przez znacznik
<ol></ol>, zaś pojedynczy element takiej listy również zamknięty jest w znacznikach<li></li>
Widok w kodzie HTML:
<ol>
<li>Królestwa Północy</li>
<li>Scoia'tael</li>
<li>Cesarstwo Nilfgaardu</li>
<li>Skellige</li>
</ol>
Oczywiście w niektórych przypadkach zajdzie potrzeba tzw. zagnieżdżenia list, czyli stworzenia listy wewnętrznej wewnątrz znaczników <li></li> listy zewnętrznej. W poniższym przykładzie lista zewnętrzna to lista numerowana, a wewnętrzna to lista nienumerowana (choć równie dobrze można by zagnieździć je odwrotnie):
<ol>
<li>Królestwa Północy
<ul>
<li>Sigismund Dijkstra</li>
<li>Keira Metz</li>
</ul>
</li>
<li>Scoia'tael
<ul>
<li>Iorveth</li>
<li>Isengrim Faoiltiarna</li>
</ul>
</li>
</ol>
Rezultat w przeglądarce:
- Królestwa Północy
- Sigismund Dijkstra
- Keira Metz
- Scoia'tael
- Iorveth
- Isengrim Faoiltiarna
podstawowe znaczniki
| | Odsłony: 137http://zsebraniewo.neostrada.pl/HTML.pdf
Wszystko jest podane na tej stronie <3
Formularze
| | Odsłony: 160Jeśli jeszcze niezbyt dobrze rozumiesz formularze, specjalnie dla Ciebie napisałem ten przykład. Myślę, że po jego przeczytaniu, wyjaśni się wiele niezrozumiałych dotąd rzeczy.
Wyróżnione fragmenty, można (a nawet trzeba) zastąpić innym tekstem. Są to np. pytania, poszczególne odpowiedzi, wartości parametrów i inne. Czcionką pogrubioną (pomiędzy znakami <!-- a -->) zaznaczono komentarze. Nie są one oczywiście konieczne (możesz je pominąć). Natomiast pozwalają zorientować się, czego dotyczy fragment kodu poniżej nich.
.
Struktura strony
| | Odsłony: 143<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Tytuł strony</title>
</head>
<body>
<header></header>
<section>
<p>To jest nasza nowa strona internetowa HTML5 CSS3.</p>
</section>
<footer></footer>
</body>
</html>
Na samej górze dokumentu HTML definiujemy typ dokumentu (w naszym przypadku HTML).
Pomiędzy znacznikami head umieszczamy deklaracje odpowiedzialne m.in. za wygląd strony, pozycjonowanie, kodowanie znaków (charset=utf-8) - dzięki temu zapisowi polskie znaki będą poprawnie interpretowane przez przeglądarkę internetową.
Właściwa część strony będzie zawierać się pomiędzy znacznikami body.
Dodatkowo stronę podzielimy na 3 główne boksy. Pierwszy header, w nim możemy umieścić logo, menu. Niżej section - właściwa zawartość strony. Na samym dole footer, w którym może znaleźć się powtórzone menu, informacje kontaktowe.
W HTML5 dodatkowo możemy zastosować więcej niż jeden nagłówek H1 (w HTML4 na stronie mógł znaleźć się jeden nagłówek najwyższego poziomu - H1).