Урок 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. Наполняем страницу текстом →