seobomb.ru
Во втором уроке «Как стать web разработчиком?» рассмотрим пример создания страницы сайта с помощью html кода, а также дополнительно выведем сообщение «Hello, world!» при загрузке этой веб-страницы.
Создание html страницы
Для начала работы понадобится специальный редактор для работы с кодом, например Nodepad++ или Visual Studio Code. Нужно его установить и создать новый документ.
Структура страницы будем задавать с помощью html разметки. Для этого используются специальные тэги.
Тег – оформленная единица HTML-кода. Например, <html >, <body>,<h1>,<h2> и так далее. Все тэги имеют одинаковый формат: они начинаются знаком «<» и заканчиваются знаком «>».Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что в закрывающем имеется слэш «/». Желательно вводить все теги в нижнем регистре(маленькими буквами), хотя не обязательно.
Так вот — в редакторе кода, пропишем следующие строчки:
Дальше сохраните получившийся файл в любом месте, но обязательно в формате HTML, например — test.html. Это уже и есть готовая web страница.
Теперь перейдём к объяснению тэгов в этом примере страницы:
- <!DOCTYPE html> — первое что видит браузер на вашей странице. Этот тэг нужно всегда указывать на страницах, он определяется тип документа будет «html».
- <html> </html> — эти теги обозначают границы документа в формате html.
- <head> </head> — эти теги содержат в себе техническую составляющую. Здесь обычно подключают стили, шрифты, плагины, кеш и прочее. Эта часть страницы визуально не отображается на странице.
- <body> </body> — т.н. «тело» страницы. Именно содержимое этих тегов мы видим с помощью браузера.
- <header> </header> — это верхняя часть тела страницы, называемая «шапкой». Обычно здесь находится логотип, название сайта, навигационное меню, поиск.
- <footer> </footer> — это самая нижняя часть тела страницы, именуемая «подвалом». Сюда также размещают навигацию по сайту, поиск и другие элементы.
- <h1> </h1> — этими тегами обозначаются заголовки 1 уровня. Он обычно такой один на одну страницу.
- <b> </b> — выделение текста жирным шрифтом.
Чтобы проверить результат, найдите сохраненный файл и откройте с помощью любого браузера. Должно выйти так:
Никакого оформления нет, поскольку не используются никакие CSS стили.
Hello, world!
Считается хорошей практикой при изучении любого языка программирования или профессии связанной с web технологиями запустить показ фразы «Hello, world!».
Можно было бы просто написать текст, как пример, но давайте добавим немножко динамики и используем javascript. Для этого добавьте такой код в любом месте страницы, чтобы он был внутри тегов <html> </html> :