Flood

Как начать верстать (html)

15 October, 2011

HTMLИ так, я вам поведаю о волшебстве верстки на языке html, а именно о создании каркаса сайта и создании его, в общем, через этот простой язык программирования (ну если с размаху) и уже через пару часов вы сможете создать свой первый сайт.

Как правило, сайты пишутся не на чистом html, а с дополнениями (css, flash, java, php и т.д.), но есть несколько секретов, с помощью которых можно написать простой, но достойный сайт без этих самых дополнений. А иногда больше и не надо!

Знакомство:

Для начала нужно ознакомиться с азами “хтмл” , к примеру, возьмем текст и его вид, теги:

<b> текст </b> – жирный текст;
<u> текст </u> – подчеркнутый текст;
<i> текст </i> – курсивный текст;

Остальные теги для работы с текстом (форматированием) можно узнать на специализированных сайтах-энциклопедиях, теги не тяжелые, их должен знать каждый блогер, а теперь будете знать и вы. Про работу с линиями <hr> и отступами типа: <br> и <p></p> тоже рассказывать не буду, аналогично форматированию, сейчас нас интересует сама основа сайта, а именно таблицы – это некий “каркас” сайта.

“Каркас” сайта:

И вот мы сталкиваемся с нашей первой проблемой: сайт пишется на голом html, без помощи таблицы стилей css, как же сделать таблицы ровными и корректно вставить в них картинки? Ответ прост! К примеру, возьмем обычную таблицу с картинкой внутри:

<table>
  <tbody>
    <tr>
      <td>
        <img src="/1.gif">
      </td>
    </tr>
  </tbody>
</table>

– в этом случае картинка будет адаптировать таблицу под себя, так что мы зададим таблице размер:

<table style="width: 200px; height: 200px;">

– это мы задали ширину и высоту по 200 пикселей (их еще можно задавать способом width= “200” ; height= “200” – более древним способом), также значения пикселей можно менять на процентное соотношение или сантиметры. Размеры то мы задали, но картинка по-прежнему тянет таблицу, либо болтается внутри, так впишем ее в саму таблицу:

<table style="width: 200px; height: 200px; background-image: url(/1.gif);">

– со временем можно будет менять положение ее в таблице и центрировать. По сути, мы сделали фон таблицы, а это и есть самое идеальное вкладывание картинки в таблицу html.

Заполнение:

Вот мы сделали каркас сайта и довольно привлекательный дизайн из хорошо наложенных одна на другую таблиц, что же делать дальше? А вот дальше нам предстоит работа с гиперактивным текстом. Всегда на сайт можно добавить меню с помощью тегов:

<ul>
  <li>
    <a href="ссылка">пункт меню</a>
  </li>
</ul>

Вид ссылок меню можно менять точно так же как и текст, теми же тегами. Положим для вида еще парочку плагинов написанных за нас другими сайтами (vk, skype, icq и т.д.) и наш первый сайтик готов!

Оттачивание этих навыков и познание новых и новых тегов и дает возможность делать качественные сайты!