Урок 1. Привет мир на HTML

Сегодня мы с вами пройдём первый урок из тридцати. Кстати, уроки сделаны таким образом, что нужно проходить по один на день, не больше и не меньше, и за месяц вы уже будете неплохо верстать. Далее лишь практика, и еще раз практика!

Итак, день первый!

С чего начать?
Нужно создать html документ. Для этого запускаем обычный блокнот, в меню жмем «Файл», затем «Сохранить как…» и в строчке «Имя файла» пишем вместо «*.txt» имя «index.html» ну и сохраняем в пустой папке.
Почему index? Так заведено. Когда браузер открывает сайт он ищет файл index.php или index.html, то есть главную страницу. Ну а html это формат веб-документа.

kak_sozdatj_html_dokument
Теперь у нас есть файл index.html и мы можем приступать к работе.

Правой кнопкой по файлу, «открыть с помощью» и выбираете «Блокнот». Файл открыт и он пустой.Сейчас немного о синтаксисе html. Верстка состоит из написания «тегов». Теги бывают парными (например <html> и </html>) один открывающий, второй закрывающий. Непарными, например <br> (его не нужно закрывать таким тегом </br> ). И самозакрывающиеся, например мета-теги (выглядит так <meta charset=”utf-8” />  он сам закрывает себя косой полосой в конце).

Теперь немного о первой странице. Во всех языках программирования первым заданием всегда является «Привет мир!». Мы тоже не исключение, и наша задача правильно написать на странице «Привет мир!»
Файл index.html открыт в блокноте, и мы приступаем.

Первая строка:

<!doctype html> – мы указываем браузеру тип документа, то есть html. Раньше эта строчка записывалась намного длиннее, но в html5 она записывается так. Кстати тег этот непарный, и его не нужно закрывать.
Далее пишем открывающийся тег <html>, и закрыть его нужно будет в самом-самом конце документа, закрывающимся тегом </html>.

Всё что находится между этими двумя тегами и будет формировать нашу первую страницу, да и все остальные.
После открывающегося <html>, у нас всё разделится на две части, а именно head и body.

Вот так оно выглядит:

html_razmetka

Если сказать по простому, то в head в основном находится то, чего не видно визуально, а в body находится то, что видно в браузере (еще раз акцентирую на том, что это очень по простому, а более подробно вы поймете по ходу учебы).

Внутри тегов head запишем заголовок страницы, то есть её название. Записывается это в тегах title, которые являются парными.

И укажем тип кодировки страницы вот так: <meta charset=”utf-8” />. Сильно не заморачивайтесь над этим, просто так нужно писать =) Почему так нужно делать, скоро сами поймёте, а сейчас вернемся к более важному.

Сейчас сама надпись «Привет мир!».

После тегов head у нас есть теги body. Между первым и вторым нужно написать «Привет мир!».

privet_mir

Теперь сверяемся с моим документом, и сохраняем то что написали, нажатием в меню «Файл» и пунктом «Сохранить» или на клавиатуре Ctrl+S, что гораздо удобнее и быстрее.

Закрываем текстовый документ (не обязательно) и с помощью браузера открываем свою первую страницу.

Ура! У нас получилось! (я надеюсь конечно же :) )

На счет Блокнота: “Привет мир!” всегда делают на блокноте (так заведено), но дальше мы будем писать код на Sublime Text 2 Build, потому что он удобнее и код выглядит аккуратнее и красивее.

Вот так кстати:

privet_mir_na_sublime

Мы прошли первый урок! Надеюсь, я доступно расписал. После усвоения данного урока, завтра переходите к дню второму.

Pin It

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

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>