Создание сайтов не такая сложная задача, но для того чтобы создать сайт реально классный нужны определенные навыки. В данной статье Вам хочу рассказать более детально о том, что такое html верстка. Это конечно же не обучение, но основные принципы и понятия у вас будут после прочтения данного материала. Так же вы уже сами сможете создать простую html страничку!

1. Самостоятельно сделать сайт

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

Итак, чтобы создать сайт необходимо:

  • Иметь готовый Psd шаблон. Купить уникальный шаблон для сайта можно у дизайнера, а можно выбрать бесплатные варианты шаблона в интернете. Чтобы сайт получился именно такой, как вы его представляете, его для начала рисуют в программе фотошоп.
  • Имеють навыки и знания html и css. Чтобы нарисованный шаблон перенести в браузер, т.е. сделать верстку по макету (шаблону).

2. Что такое html и css

Html – стандартизированный язык разметки документов во Всемирной паутине и без него не куда. Css – каскадные таблицы стилей. Они нужны для того чтобы внешний вид сайта привлекал пользователя: красивые кнопки, таблицы, выделенные словосочетания и многое другое может именно css. В дальнейшем мы рассмотрим все более подробно, но в данной статье рассмотрим именно верстку сайта.

3. Html верстка обучение

Обучение html верстке не простая задача, для него требуются время, усидчивость и терпение и у вас все обязательно получиться.

3.1 Структура html документа

Для начала разберем саму структуру html документа.

Каждый документ начинается с тега доктайп: <!DOCTYPE html> и продолжается такими тегами, как <html>, <title>, <head>, <body> обязательно.

Тег <html> всегда следует после доктайпа и содержит все остальные теги и содержимое страницы, <title> содержит название страницы сайта, <head> помогает браузеру работать с другими данными, т.е. дополнительными скриптами, которые мы подключаем по мере необходимости к сайту, <body> - тело документа, содержит сам текст с картинками, видео и другими данными, которые мы хотим отобразить на странице. То есть контент сайта.

Вот наша первая страница.


<!DOCTYPE html>
<html>
<title>Название страницы</title>
<head></head>
<body>
Текст сайта!
</body>
</html>

Скопируйте и сохраните себе данный код в блокнот под названием index.html в любое удобное для вас место на компьютере. А чтобы посмотреть, что же получилось просто кликните дважды по этому файлику и он откроется в браузере по умолчанию. Как вы видите, на белом экране появилась надпись: «Текст сайта!», как раз из тега <body>, а если обратить внимание в верху браузера, где прописан адрес сайта написано «Название страницы», как раз из тега <title>.

Прошу обратить внимание на то, что сохранять файл в блокноте нужно в кодировке UTF-8 без BOM. Могу предложить вам использовать самый обычный и простой блокнот notepad++. В ближайшем времени напишу статью о средах разработки, но на данном этапе и блокнота будет вполне достаточно.

Ну вот самое основное мы с вами выяснили. Итак, каждая страница начинается именно с этой структуры, а далее обрастает другими тегами, подключаются скрипты css, js и т.п.

3.2 Html ссылка

Например, давайте к нашему тексту добавим ссылку. Вот такую конструкцию добавим в наш файл - <a href="#" alt="" title="" >Ссылка</a>

Возьмем скопируем код выше и добавим в файлик перед закрывающим тегом </body>, получилось так:


<!DOCTYPE html>
<html>
<title>Название страницы</title>
<head></head>
<body>
Текст сайта!
<a href="#" alt="" title="" >Ссылка</a>
</body>
</html>

не забываем сохранить изменения. Вернемся в браузер и обновим нашу страницу, можно просто нажать на клавиатуре кнопку F5. Что вы видите? Да, добавилась ссылка по названию: Ссылка.

Теперь давайте вернемся к коду и смотрим


<a href="#" alt="" title="" >Ссылка</a>

Как вы уже поняли тег <a> передает браузеру информацию о то, что это ссылка, в атрибуте href мы указываем адрес ссылки, а между открывающем и закрывающим тегами вводим название самой ссылки. Прошу обратить внимание alt и title нужны при продвижении сайта, и чтобы браузер правильно понимал код, например, если не указать эти теги и посмотреть на валидность (правильность) html кода, то будет ошибка.

3.3 Заголовки

Все абзацы заключаются в теге <p>, заголовки: <h1><h2><h3><h4><h5><h6>… О заголовках можно много говорит, но вкратце скажу следующее - для seo (продвижения сайта) очень важно чтобы h1 присутствовал обязательно, но не больше 1 раза на странице, <h2> раскрывает мысль заголовка <h1> и т.д.<h1><h2><h3> часто используемые теги, поэтому начинайте пользоваться ими сразу, чтобы в будущем не допускать ошибок.

3.4 Как добавить картинку на html страницу

Чтобы загрузить картинку на страницу нужно использовать тег <img src="" alt="" /> в src=" записываем адрес, где хранится картинка" alt=" описание картинки" title=" название картинки". Прошу обратить внимание, что данный тег не имеет закрывающего, он сам по себе <img />.

Давайте создадим папку site-test в нее положим наш index.html. Создадим в папке site-test еще папку и назовем ее image и в нее положим любую картинку, которую покажем на нашей странице.

И обновим наш код в index.html вот так.


<!DOCTYPE html>
<html>
<title>Название страницы</title>
<head></head>
<body>
<h1>Заголовок страницы</h1> <h2> Подзаголовок страницы</h2> <p> Абзац страницы! Абзац страницы! <a href="http://....." alt="" title="" >Ссылка</a>Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! <img src="./image/1.jpg" alt="Альтернативный текст" /></p> <p>Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! </p> </body> </html>

Сохраняем и переходим в наш браузер, где отображается уже наша страничка. Снова обновляем ее и видим: появились заголовок и подзаголовок, 2 абзаца, ссылка и картинка.

Если картинка у вас не появилась, проверьте соответствия написанного адреса в файле index.html в теге <img> в атрибуте src="" и расположение самой картинки или ее названия. В данном примере картинка называется 1.jpg.

4. Табличная и блочная верстка

Теперь, я думаю, у вас есть общее понятие, что такое верстка сайта и что входит в обучение.

Верстка бывает табличная и блочная. В дальнейшем мы будем использовать блочную верстку, она более удобная. Табличной пользовались давно, но некоторые ей пользуются до сих пор, подробнее о ней я расскажу в другой статье. Почему же блочная верстка получила такое название, спросите вы? Все дело в том, что все элементы на странице в блочной верстке задаются блоками и заключаются в тег <div>, которые удобно двигать, менять как угодно, задавая параметры блокам. Давайте изменим наш код, добавим тег div и посмотрим, что получится:


<!DOCTYPE html>
<html>
<title>Название страницы</title>
<head></head>
<body>
<h1>Заголовок страницы</h1> <h2> Подзаголовок страницы</h2> <div>
<p> Абзац страницы! Абзац страницы! <a href="http://....." alt="" title="" >Ссылка</a>Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! <img src="c://decstop/site-test/image/1.jpg" alt="Альтернативный текст" /></p> </</span></span>div>
<div>
<p>Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! </p> </div>
</body>
</html>

Верно, визуально ничего. Но если подключить таблицу стилей css, то можно придать блоку привлекательный вид и расположить его где угодно на странице, если задать <div> class или id.

Вот и подошли к изучению css.

5.Как подключить стили (css) к html странице

Давайте добавим к нашему коду div и class="fon" и создадим пустой файл и назовем его style.css, это как раз и будет файл стилей. А в наш index.html вставляем такую строчку <link rel="stylesheet" href="c://decstop/site-test/style.css"> между тегами <head></head>, чтобы подключить стили к html странице. Должно получится так:


<!DOCTYPE html>
<html>
<title>Название страницы</title>
<link rel="stylesheet" href="c://decstop/site-test/style.css" >
<head></head>
<body>
<h1>Заголовок страницы</h1>
<h2> Подзаголовок страницы</h2>
<div class="fon">
<p> Абзац страницы! Абзац страницы! <a href="http://....." alt="" title="" >Ссылка</a>Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! <img src="c://decstop/site-test/image/1.jpg" alt="Альтернативный текст" /></p> </</span></span>div>
<div>
<p>Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! Абзац страницы! </p> </div>
</body>
</html>

Чтобы проверить все ли в порядке, в браузере можно кликнуть правкой кнопкой мыши и выбрать «просмотр кода». Если все в порядке, то в коде вы увидите подключение файла стилей.

5. Изменить цвет фона средствами css

И чтобы были видны изменения на странице в файл style.css пишем следующее:

.fon{background:grey;}

Не забываем сохранить изменение. Посмотрим, что изменилось в браузере. Обновляем страницу и видим, что блок, которому задали класс окрасился в серый цвет. В стилях как раз классу fon мы и задали серый фон.

6. Изменить цвет шрифта и разместить по центру заголовок при помощи css

Давайте еще, например, изменим цвет заголовка. Добавим к тегу h1 class="color" и добавим этот класс в файлик с нашими стилями .color{color:green;} и после обновления браузера видим, что заголовок стал зеленым. И расположим его по центру:


.color{
color:green;
margin:0 auto;
}

7. Как расположить блоки в одну линию с помощью css

А теперь давайте сделаем так, чтобы один блок располагался слева, а другой справа. Для этого возьмем все после тега body и до него и обернем в <div class="wrapp"></div>, первый абзац в <div class="block-left"> и второй в <div class="right-block">. В файле стилей пишем стили для наших новых блоков:


.wrapp{width:100%;}
.block-left{width:50%; padding:0; float:left;}
.block-right{width:50%; padding:0; float:right;}

То есть всему блоку wrap задаем 100% ширину, левому блоку указываем ширину 50%, отступов нет, т.е. 0 и располагаем слева, а правому блоку все тоже самое, но только справа. Обновляем страницу и видим, что блоки расположены, как и планировалось.

Итоги:

Теперь вы имеете представление о верстке сайтов. Для подробного изучения этого материала советую вам взять на заметку такой ресурс, как http://htmlbook.ru На нем собраны и подробно описаны все html теги с указанием в каких браузерах могут не отображаться те или иные. Он же очень хороший помощник CSS-справочник новичкам, да и не только.

Да, обязательно обращайте внимания на то, как отображает созданную вами верстку каждый браузер, ведь она должна быть одинаковой во всех браузерах!

Примеры работ

Комментарии:

Сообщение: Ааааа, ПОЛУЧИЛОСЬ, в адресе напутала сама. Все ВЫВОДИТСЯ. Прикольно, все получилось. Спасибо.

Верстка сайта. Обучение.

Сообщение: Не могу понять, у меня картинка не появляется?

Верстка сайта. Обучение.

Сообщение: Все получилось! Оказывается это так просто и увлекательно для меня было.

Верстка сайта. Обучение.




Оставьте Ваш комментарий:

Автор*:

E-mail*:
(не будет опубликован)

Текст сообщения:

*- обязательные поля для заполнения.