HTML — макеты

В настоящее время все современные веб-сайты используют структуру на основе CSS и JavaScript для создания адаптивных и динамичных веб-сайтов, но вы можете создать хороший макет, используя простые HTML-таблицы или теги разделения в сочетании с другими тегами форматирования. В этой главе вы найдете несколько примеров того, как создать простой, но работающий макет для вашей веб-страницы, используя чистый HTML и его атрибуты.

Макет HTML — использование таблиц

Самый простой и популярный способ создания макетов — использование тега HTML.

<table>

Эти таблицы организованы в столбцы и строки, поэтому вы можете использовать эти строки и столбцы по своему усмотрению.

Но в настоящее время этот вид раскладки считается крайне устаревшим и не используется.

Макеты HTML — использование DIV, SPAN

Элемент

<div>

элемент уровня блока, используемый для группировки элементов HTML.

HTML-элемент

<span>

используется для группировки элементов на встроенном (внутри одной строки) уровне.

Хотя мы можем добиться довольно хороших макетов с помощью HTML-таблиц, таблицы на самом деле не были разработаны как инструмент макета. Таблицы больше подходят для представления табличных данных.

Примечание. В этом примере используется каскадная таблица стилей (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 © 2024 BasicIT.org
            </center>
         </div>
			
      </div>
   </body>

</html>

Это даст следующий результат:

Вы можете создать лучший макет, используя DIV, SPAN вместе с CSS. Дополнительную информацию о CSS см. в руководстве по CSS.

HTML — макеты

Оглавление

Макет HTML — использование таблиц

Макеты HTML — использование DIV, SPAN

Пример