Планы HTML

План webpage очень важен для того чтобы дать более лучший взгляд к вашему вебсайту. Он принимает значительное время конструировать план вебсайта с большим взглядом и почувствовать.

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

План HTML - используя таблицы

Самый простой и самый популярный путь создавать планы использует бирку <table> HTML. Эти таблицы аранжированы в колонках и рядках, поэтому вы можете использовать эти рядки и колонки в любой путь вы любите.

Пример

Например, следующий пример плана HTML достиган используя таблицу с 3 рядками и 2 колонками но колонка коллектора и сноски spans обе колонки используя 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>

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

This is Web Page Main title
Main Menu
HTML
PHP
PERL... 		Technical and Managerial Tutorials
Copyright © 2007 Tutorialspoint.com

План колонок Multiuple - используя таблицы

Вы можете конструировать ваш webpage для того чтобы положить ваше веб-содержимое в множественные страницы. Вы можете держать ваше содержание в средней колонке и вы можете использовать левую колонку для использования меню и правую колонку можно использовать для того чтобы положить рекламу или некоторое другое вещество. Этот план будет очень подобен к чего мы имеем на нашем вебсайте tutorialspoint.com.

Пример

Здесь пример для того чтобы создать план 3 колонок:

<!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>

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

Main Menu
HTML
PHP
PERL... 		Technical and Managerial Tutorials Right Menu
HTML
PHP
PERL...

Планы HTML - используя DIV, ПЯДЬ

Элемент <div> элемент уровня блока используемый для собирать элементы HTML. Пока бирка <div> элемент блок-уровня, элемент <span> HTML использован для собирать элементы на встроенном уровне.

Хотя мы можем достигнуть довольно славных планов с таблицами 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 © 2007 Tutorialspoint.com
  </center>
  </div>
</div>
</body>
</html>

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

This is Web Page Main title

Main Menu
HTML
PHP
PERL...

Technical and Managerial Tutorials

Right Menu
HTML
PHP
PERL...
Copyright © 2007 Tutorialspoint.com

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

Advertisements