WEB

Наш первый HTML документ. С чего начинать веб-программисту.

13 Ноября 2016
1603

Привет друзья. Частенько, молодые студенты или школьники, начинают интересоваться программированием сайтов. Кто-то просто слышит от кого-то, что существует такое ремесло, кому-то просто нравится творить «техническое произведение». Лично у меня, студенты, которые на занятиях прошли работу с базами (sql), научились базовым навыкам программирования, не однократно интересовались - как же начать изучение разработки сайтов.

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

И так, начнем!
Давайте откроем любой текстовой редактор, например – блокнот. Напишем туда любой текст:

А теперь сохраним его, при сохранении необходимо поменять расширение файла с «txt» на расширение «html», и назвать его, например, «index». В итоге, мы сохранили файл «index.html», изменив тип файла с текстового на HTML файл или HTML документ.

Если теперь мы откроем этот файл, он по умолчанию должен открыться через программу для просмотра веб-страниц или более простыми словами, через браузер. Как пишут в книгах, «поздравляем, это ваш первый html документ!».

Давайте рассмотрим, что же такое HTML. HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов в Интернете. Веб-страницы содержат описание разметки на языке HTML (или XHTML). Простыми словами, это язык для формирования контента, который далее обрабатывается браузером для вывода.

В предыдущем примере, мы открыли html документ с помощью браузера и получили результат. Но данный пример не совсем отображает всю «мощь» html разметки. Давайте поставим задачу, вывести на веб-странице произвольное название, ниже картинку и ниже не большой текст. При это первый текст должен отличаться от второго текста своим видом.

Открываем наш html документ с помощью редактора и меняем содержимое на следующее:

Теперь открываем наш файл с помощью браузера и видим совсем не то, что мы написали в содержимое в файле. Исчезли теги

«<h1>», «<img>» и «<p>». Вместо этого мы видим, что первый текст у нас по жирнее и крупнее чем второй текст, а между ними отобразилось изображение.

Таким образом браузер интерпретировал (вывел), html разметку в нормальный, удобно читаемый вид для пользователя. Для этого были использованы html теги. HTML тег – это основные структурные единицы html языка. С помощью тегов формируется веб-страница. В это статье, мы не будем рассматривать описание html тегов. Про html теги будут отдельные статьи.

Мы увидели, как работает HTML разметка, поняли для чего нужны html теги. На примере увидели как браузер обрабатывает html документ.