Мой основной проект: Боевые искусства в кинематографе! (fight-films.info)

Свеженькое
Реакция публики
Облако пометок
css Google html SEO WordPress Яндекс видео графический дизайн заработок индексация интернет ключевые слова контент партнерка поисковые системы посещаемость продвижение раскрутка реклама сайт статья хостинг

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

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 и т.д.) и наш первый сайтик готов!

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

Комментировать эту запись запрещено :(