04:06:2014

Основы верстки HTML #1 Введение в HTML и расшифровка “Верстка”

основы верстки htmlДобрый вечер друзья, сегодня мы начинаем погружаться в сказочную страну магии и тайн – Html-верстку. Это, так сказать, цикл статей от Введения в основы HTML-верстки, до полноценного урока верстки сайта. Это первый урок и, как следствие, он является введением HTML. Если вы не знаете, что это такое, или знаете, но не очень то с ним и дружите, со советую вам хорошенько изучить этот урок. Потому что последующий окажутся бесполезными, если вы не усвоите основы.

Начнем с маленькой теории насчет того, что такое “Верстка” вообще! Как пишет “ВИКИ”, Верстка – это процесс формирование веб-страниц в текстовом или WYSIWYG(страшная абревиатура, которая на самом деле выглядит во так: What You See IWhat You Get, «что видишь, то и получишь»)-редакторе, следующий этап после создания дизайна сайта. Пока что я не буду рассказывать(а может и не пока что) о том, как стать крутым веб-дизайнером, поэтому давайте учиться HTML-верстке.

Основы верстки HTML #1 Введение в HTML

 


Нам понадобится  любой текстовый редактор, или можете поискать в Google какой-нибудь специальный редактор для Html. Я буду пользоваться notepad’ом, о котором я расскажу в следующей статье, так что подписывайтесь на обновления блога, чтобы не пропустить выход уроков. Итак, сегодня мы создадим простую веб-страницу, без какой-либо крутой фишки, это будет наше первое, вводное занятие. Создаем обычный, текстовый документ и назовем его как нам захочется, я назвал его “Vvedenie”:основы верстки html

Открываем его и начинаем писать. Наш HTML код должен быть элегантен, красив и грамотен, а грамотные документы начинаются с DOCTYPE HTML, хотя наши браузеры уже научились считывать код и без этого начала, все же, советую вам всегда начинать хтмл документ именно так! Пишем: основы верстки html

Заметьте, мы заключили наш DOCTYPE в специальные скобочки, слева <! , справа >. Прошу не забывать об этом, если вы не напишите, на первый взгляд, бесполезные скобки, то код может отказаться работать. Теперь сразу пишем тег <html> и закрывающий тег </html>, потому что в html есть парные и непарные теги. Если используются парные теги, то они должны как открываться, так и закрываться:основы верстки html

Этим тегом мы открыли, как бы, глобальную часть нашей страницы, т.е тег <html> это как бы основной тег, в котором содержаться все компоненты веб-страницы. Первым делом, после того как мы открыли тег <html> нам нужно создать себе(дословно) голову. То есть <head> сайта, это место куда прописываются META теги, о которых я рассказывал в этой статье – “Как раскрутить сайт самостоятельно” – , советую ознакомиться, различные скрипты и т.д. Сюда же мы впишем название нашей страницы под тегом <title>:основы верстки html

Помните, что тег <head> и <title> нужно закрывать тегами </head> и </title>, так как они являются парными, а название сайта вписывается между <title> и </title>. Теперь, сформировав нашу голову, мы должны создать тело сайта, за которое отвечает тег <body>, который так же является парным и содержит в себе все содержимое нашего сайта:основы верстки html

Теперь мы проверим, что у нас получилось, как мы справились с нашим вводным уроком, для этого мы сохраняем наш текстовый документ, как документ html:основы верстки html

 

 

основы верстки html

 

После названия нашего документа добавьте .html, измените тип файла на “Все файлы” и поменяйте кодировку на UTF-8, все как на картинке. Нажимаем сохранить и теперь у нас есть вот такой файл:основы верстки html

Открываем его и получается вот что:основы верстки html

В адресной строке указан путь к файлу на ПК, при наведении на вкладку отображается то, что мы указали под тегом <title> и на самой страничке указано то, что мы указывали под <body>.

Мои поздравления друзья, мы с вами стали ближе на шаг к крутым парням из Google, можем гордиться собой, мы выполнили первое, вводное задание. Чтобы не пропустить выход всех остальных подписывайтесь на обновления блога и будьте всегда в курсе выхода статей! Удачи вам, до следующей статьи :)

Ответить


 Seogeeks.ru