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.