Как создать html страницу сайта?

Во втором уроке «Как стать web разработчиком?» рассмотрим пример создания страницы сайта с помощью html кода, а также дополнительно выведем сообщение «Hello, world!» при загрузке этой веб-страницы.

Создание html страницы

Для начала работы понадобится специальный редактор для работы с кодом, например Nodepad++ или Visual Studio Code. Нужно его установить и создать новый документ.

Структура страницы будем задавать с помощью html разметки. Для этого используются специальные тэги.

Тег – оформленная единица HTML-кода. Например, <html >, <body>,<h1>,<h2> и так далее. Все тэги имеют одинаковый формат: они начинаются знаком «<» и заканчиваются знаком «>».Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что в закрывающем имеется слэш «/». Желательно вводить все теги в нижнем регистре(маленькими буквами), хотя не обязательно.

Так вот — в редакторе кода, пропишем следующие строчки:

html страница сайта

Дальше сохраните получившийся файл в любом месте, но обязательно в формате HTML, например — test.html. Это уже и есть готовая web страница.

Теперь перейдём к объяснению тэгов в этом примере страницы:

  • <!DOCTYPE html> — первое что видит браузер на вашей странице. Этот тэг нужно всегда указывать на страницах, он определяется тип документа будет «html».
  • <html> </html> — эти теги обозначают границы документа в формате html.
  • <head> </head> — эти теги содержат в себе техническую составляющую. Здесь обычно подключают стили, шрифты, плагины, кеш и прочее. Эта часть страницы визуально не отображается на странице.
  • <body> </body> — т.н. «тело» страницы. Именно содержимое этих тегов мы видим с помощью браузера.
  • <header> </header> — это верхняя часть тела страницы, называемая «шапкой». Обычно здесь находится логотип, название сайта, навигационное меню, поиск.
  • <footer> </footer> — это самая нижняя часть тела страницы, именуемая «подвалом». Сюда также размещают навигацию по сайту, поиск и другие элементы.
  • <h1> </h1> — этими тегами обозначаются заголовки 1 уровня. Он обычно такой один на одну страницу.
  • <b> </b> — выделение текста жирным шрифтом.

Чтобы проверить результат, найдите сохраненный файл и откройте с помощью любого браузера. Должно выйти так:

Пример html страницы сайта

Никакого оформления нет, поскольку не используются никакие CSS стили.

Hello, world!

Считается хорошей практикой при изучении любого языка программирования или профессии связанной с web технологиями запустить показ фразы «Hello, world!».

Можно было бы просто написать текст, как пример, но давайте добавим немножко динамики и используем javascript. Для этого добавьте такой код в любом месте страницы, чтобы он был внутри тегов <html> </html> :

       <script>
            alert(‘Hello, world!’)
        </script>
<script> </script> — эти теги обозначают границы, внутри которых находится код написанный на языке javascript.
Сохраните изменённый файл и обновите браузер, где он открыт.

Добавить комментарий

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

  bigmir)net TOP 100  - .  E-mail: sitesnulyaru@gmail.com