Podstawowe znaczniki

strony z divami

Opublikowano: 27 maj 2021 | Super User |

| Odsłony: 144

Dla 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:

szablon-dwukolumnowy

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:

 
 
 
 
XHTML
 



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>
 

Kategoria: Bez kategorii

listy wypuntkowanie tip

Opublikowano: 27 maj 2021 | Super User |

| Odsłony: 164

Wypunktowanie (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

Kategoria: Bez kategorii