Продолжаем разрабатывать наше приложение.
В прошлом уроке мы создали файл, что-то в него записали, сохранили и смогли открыть его в браузере. На этом уроке мы напишем уже что-то посерьезнее, наш браузер уже начнет что-то отображать.
Так выглядит наш файл в настоящий момент
Теперь давайте допишем в конец следующее:
Мы дописали строку <html></html>. Эта строка состоит из двух тегов <html> и </html>, первый тег называется открывающим тегом, а второй закрывающим. Я думаю, вы поняли чем они отличаются. Теги позволяют нам структурировать содержимое html файла. Давайте немножко теории.
HTML-документ представляет собой дерево, подобно структуре файлов и папок на вашем компьютере. Элементарная сущность HTML-документа - элемент. Элемент состоит из открывающего тега, закрывающего тега и содержимого элемента, которое заключается между тегами. Содержимым тега может быть текст или другие элементы, так и строится дерево документа.
В HTML-документе должен быть один элемент - html. Все остальное является содержимым этого элемента. В нашем случае элемент html - пустой, поскольку у него нет содержимого - ни текста, ни других элементов. Канонически, внутри элемента html должны находиться два элемента - head и body. Первоначальный смысл этих элементов в том, что в первом - head - содержится служебная информация, а во втором - body - содержится отображаемая и полезная нам информация.
Давайте расположим эти обязательные элементы внутри элемента html:
В корневой элемент html мы вставили два элемента - head и body. Теперь элемент html не пустой. К элементу head мы еще вернемся позже. А теперь давайте займемся элементом body.
Прежде, проверьте, чтобы ваш файл выглядел так же как у меня в предыдущей картинке. Сохраните его и откройте в браузере. Вы должны увидеть чистую страницу. А теперь давайте добавим содержимое для элемента body:
Сохраните файл, перезагрузите страницу. Вот, что должно получиться:
На этом урок закончим, в следующем уроке мы узнаем, что такое атрибуты и сделаем что-нибудь серьезное.
Предыдущий урок | Содержание курса | Следующий урок
Подпишитесь на наш канал, чтобы не пропустить следующие уроки. Другие курсы и навигация по каналу
Новые уроки, новые курсы будут на моем блоге здесь: keklik.me.