HTML - макеты
Макет веб-страницы очень важен для лучшего внешнего вида вашего сайта. На разработку макета веб-сайта с отличным внешним видом уходит много времени.
В настоящее время все современные веб-сайты используют фреймворк на основе CSS и JavaScript для создания адаптивных и динамических веб-сайтов, но вы можете создать хороший макет, используя простые таблицы HTML или теги деления в сочетании с другими тегами форматирования. В этой главе вы найдете несколько примеров того, как создать простой, но рабочий макет для вашей веб-страницы, используя чистый HTML и его атрибуты.
Макет HTML - Использование таблиц
Самый простой и популярный способ создания макетов - использовать тег HTML <table>. Эти таблицы упорядочены по столбцам и строкам, поэтому вы можете использовать эти строки и столбцы по своему усмотрению.
пример
Например, следующий пример макета HTML достигается с использованием таблицы с 3 строками и 2 столбцами, но столбец верхнего и нижнего колонтитула охватывает оба столбца с использованием атрибута 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>Это даст следующий результат -
Макет с несколькими столбцами - Использование таблиц
Вы можете создать свою веб-страницу так, чтобы веб-контент размещался на нескольких страницах. Вы можете оставить свой контент в среднем столбце, и вы можете использовать левый столбец для использования меню, а правый столбец можно использовать для размещения рекламы или некоторых других вещей. Этот макет будет очень похож на тот, что есть на нашем веб-сайте tutorialspoint.com.
пример
Вот пример создания трехколоночного макета -
<!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>Это даст следующий результат -
Макеты HTML - Использование DIV, SPAN
Элемент <div> - это элемент уровня блока, используемый для группировки элементов HTML. Хотя тег <div> является элементом уровня блока, элемент HTML <span> используется для группировки элементов на встроенном уровне.
Несмотря на то, что с помощью HTML-таблиц мы можем добиться довольно хороших макетов, таблицы на самом деле не были разработаны как инструмент макета. Таблицы больше подходят для представления табличных данных.
Note - В этом примере используется каскадная таблица стилей (CSS), поэтому, прежде чем разбираться в этом примере, вам необходимо лучше понять, как работает CSS.
пример
Здесь мы попытаемся достичь того же результата, используя тег <div> вместе с CSS, чего бы вы ни достигли с помощью тега <table> в предыдущем примере.
<!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>Это даст следующий результат -
Вы можете создать лучший макет, используя DIV, SPAN вместе с CSS. Дополнительные сведения о CSS см. В руководстве по CSS.