Урок 2. Первая страница на HTML

Урок 2. Первая страница на HTML

Что же, в прошлом уроке вы узнали что такое теги и что они бывают открывающиеся и закрывающиеся. Теперь давайте используем эти знания на практике. Честно скажу, тут все просто. Браузер ведет себя как человек – он читает страницу и отображает ее. Читает сверху вниз, ничего не пропуская. Достаточно лишь описать страничку в соответствии с некоторыми правилами и все будет хорошо.

Страница же тоже очень похожа на нас. Нет, она не кушает плюшки с чаем и не ходит в магазин, но она имеет голову, и тело! Соответственно они имеют свои теги:

<!—голова—> <head> </head> <!—тело—> <body> </body>

При этом, чтобы браузер понимал, что имеет дело с html страницей, мы должны в самом начале страницы показать ему это тегами html, которые тоже бывают открывающими и закрывающими.

Переходим, наконец-то, к практике! Создаем новый текстовый файл, называем его index.html (название может быть любое, главное чтобы в конце было правильное расширение файла .html) и собираем воедино все что узнали за последние 5 минут. Получаем страницу, которая будет шаблоном для всех ваших последующих экспериментов!

<html> <head></head> <body></body> </html>

Поздравляю! Вы только что написали свою первую простую, пусть бесполезную, но все-таки страницу! Она будет началом вашего будущего сайта. На самом деле осталось только наполнить ее текстом и все! Я же обещал что в HTML все просто и быстро, а вы не верили.

Но, сперва давайте добавим немного текста в наш шаблон.

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

Сверьтесь с моим кодом ниже, чтобы проверить, все ли понятно:

<html> <head> <title>Заголовок страницы</title> </head> <body> Текст на моей странице. </body> </html>

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

← Урок 1. HTML теги | Содержание | Урок 3. Наполняем страницу текстом →

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>