Структура HTML страницы
Всем Привет, с Вами на связи Денис Булыга и в этом уроке мы с Вами начнем разбирать основы языка HTML и создадим первый HTML сайт, хотя это сложно назвать сайтом, но на самом деле это так и есть.
Начнем с того, что же такое язык HTML (HyperText Markup Language — «язык гипертекстовой разметки») при помощи него написаны все наши сайты - это все, что мы видим в окне браузера, весь текст, картинки - все это является HTML кодом, который браузер преобразует для нас в удобный вид, привычный нам для восприятия.
HTML является базовым языком, который должен знать абсолютно каждый, кто хочет научиться создавать свои собственные сайты. Язык HTML состоит из множества HTML тегов, но лучше все рассматривать на примере. Для того чтобы создать простейшую HTML страничку, мы воспользуемся текстовым редактором Notepad++, который я считаю прекрасно подходит для написания HTML кода.
Для того чтобы скачать и установить данный редактор перейдите по ссылке: http://www.notepad-plus-plus.org/download/v6.6.6.html. Устанавливаем и запускаем редактор, сохраняем наш файл под названием index.html (прошу Вас внимательно посмотреть на расширение под которым вы сохраняете файл, оно должно быть обязательно .html, но не .txt) в котором пишем следующий код:
<html>
<head>
<title>Первая HTML страница</title>
</head>
<body>
<h1>Это моя первая HTML страница</h1>
</body>
</html>
Примечание: Заметьте, что все теги помещаются в специальные символы, можно сравнить их с символами больше и меньше (< >). Открываем браузер и видим там следующее:
Как видите, никаких HTML тегов, которые мы написали, браузер не отображает, а потому что он их обработал и вывел нам на экран только то, что мы и хотели увидеть. Итак, поясню еще раз, что мы здесь написали.
Тег <html> - является открывающим и означает начало HTML страницы. Далее у нас идет тег <head> - который также является открывающим и означает начало заголовков страницы. В данный тег, как вы видите, мы поместили тег <title> в котором мы написали Первая HTML страница и далее мы закрыли тег </title>. Тег <title> - отвечает за заголовок страницы, который будет выводится в заголовке окна браузера. Далее у нас идет закрывающий тег </head>. Ну и наконец, тег <body></body> в который мы помещаем все содержимое нашего сайта. Это так называемое содержимое, которое будет видеть пользователь. В тег <body> мы поместили тег <h1> который отвечает за заголовок первого уровня на нашей странице, этот тег выводит отформатированный текст на нашу страницу с определенным шрифтом и степенью жирности, об этом мы еще будем говорить в других наших статьях. И в конце нашего документа мы закрываем наш тег </html>.
Как видите, мы также можем вкладывать одни теги в другие, пример этому в тег <body></body> мы вложили наш тег <h1></h1> и так далее. Т.е тег <body> является родительским по отношению к тегу <h1>. А тег <h1> является дочерним тегом по отношению к тегу <body>. И напоследок я хотел бы вам показать, как выглядит код, который вы написали и браузер его обработал и выдал нам лишь, то что мы хотели увидеть. А если вы нажмете клавишу CTRL+U вы увидите весь исходный код который вы написали.
Думаю на сегодня все, спасибо за внимание, до скорой встречи!
