HTML - układy
Układ strony internetowej jest bardzo ważny, aby zapewnić lepszy wygląd witryny. Zaprojektowanie układu strony internetowej o świetnym wyglądzie i działaniu zajmuje dużo czasu.
W dzisiejszych czasach wszystkie nowoczesne witryny internetowe używają struktury opartej na CSS i JavaScript do tworzenia responsywnych i dynamicznych witryn internetowych, ale możesz stworzyć dobry układ za pomocą prostych tabel HTML lub znaczników podziału w połączeniu z innymi znacznikami formatującymi. W tym rozdziale przedstawiono kilka przykładów tworzenia prostego, ale działającego układu strony internetowej przy użyciu czystego kodu HTML i jego atrybutów.
Układ HTML - przy użyciu tabel
Najprostszym i najpopularniejszym sposobem tworzenia układów jest użycie tagu HTML <table>. Tabele te są rozmieszczone w kolumnach i wierszach, dzięki czemu możesz wykorzystać te wiersze i kolumny w dowolny sposób.
Przykład
Na przykład poniższy przykład układu HTML został uzyskany przy użyciu tabeli z 3 wierszami i 2 kolumnami, ale kolumna nagłówka i stopki obejmuje obie kolumny za pomocą atrybutu colspan -
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>To da następujący wynik -
Układ wielu kolumn - przy użyciu tabel
Możesz tak zaprojektować swoją stronę internetową, aby treść była umieszczana na wielu stronach. Możesz zachować zawartość w środkowej kolumnie i możesz użyć lewej kolumny, aby użyć menu, a prawej kolumny możesz użyć do umieszczenia reklamy lub innych rzeczy. Ten układ będzie bardzo podobny do tego, co mamy na naszej stronie tutorialspoint.com.
Przykład
Oto przykład tworzenia układu trzech kolumn -
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>To da następujący wynik -
Układy HTML - przy użyciu DIV, SPAN
Element <div> jest elementem blokowym używanym do grupowania elementów HTML. Chociaż znacznik <div> jest elementem blokowym, element HTML <span> służy do grupowania elementów na poziomie wbudowanym.
Chociaż możemy osiągnąć całkiem niezłe układy za pomocą tabel HTML, ale tabele nie zostały tak naprawdę zaprojektowane jako narzędzie układu. Tabele lepiej nadają się do prezentowania danych tabelarycznych.
Note - Ten przykład wykorzystuje kaskadowy arkusz stylów (CSS), więc zanim zrozumiesz ten przykład, musisz lepiej zrozumieć, jak działa CSS.
Przykład
Tutaj postaramy się osiągnąć ten sam wynik używając tagu <div> wraz z CSS, niezależnie od tego, co osiągnąłeś używając tagu <table> w poprzednim przykładzie.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>To da następujący wynik -
Możesz stworzyć lepszy układ używając DIV, SPAN wraz z CSS. Więcej informacji na temat CSS można znaleźć w samouczku CSS.