Как создать html страницу? Что такое атрибут и теги html?

Скачать материалы:

Скачать 2-ой видеоурок по HTML Размер: 6.15 MB, скачали: 582 раз.
Скачать Notepad++ Размер: 5.16 MB, скачали: 2424 раз.

Как запустить видеоурок:

Разархивировать скачанный файл.
Открыть папку index.
Запустить файл index.html в браузере.

Создание папки сайта.

Открываем нужную нам директорию (папку, каталог), то есть ту директорию, где будет располагаться папка нашего сайта. В моем случае — это рабочий стол.
Для того что бы создать папку нажимаем правой клавишей мыши. Нажимаем в выпадающем меню «Создать», и нажимаем «Папка».
Папка создана. Вводим ей название, допустим «Site». Жмем «Enter».

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

Для этого переходим в блокнот или в программу Notepad++ .
Для того чтобы создать html документ, жмем в верхнем левом углу вкладку «Файл», далее «Новый». Либо Ctrl+N.
Теперь я введу структуру данной html страницы, а вы повторяйте за мной.

<html>
<head>
<title>Главная страница </title>
</head>
<body>
<p align="center"> Добро пожаловать на мой сайт </p>
<p><h2><font></font></h2></p>
<br>
<h1> Рад вас видеть. </h1>
</body>
</html>

После того как мы переписали структуру этого документа, давайте сохраним его. Нажимаем «Файл», далее «Сохранить как...». Либо Ctrl+Alt+S.
Выходит окно сохранения, и выбираем нужную нам папку, ту, куда будем сохранять. В нашем случае это папка «Site».
Вводим имя файла, «index.html», не забываем вводить расширение файла, сейчас расширение «html», иначе файл сохранится в текстовом формате. Жмем «Сохранить».
Теперь перейдем в папку нашего сайта, откроем нашу страницу в браузере, и проверяем. Видим, что все работает.

Что такое атрибут и теги html?

Что такое теги html?

Грубо говоря, тег это все, что находится между открывающей и закрывающей треугольными скобками — < и >. В данном случае, это тег html. Тег <html> является обязательным тегом, а так же для него требуется закрывающий тег </html>.

Большинство тегов имеют закрывающие теги, но есть и исключения. Как, например тег <br> - что означает перенос на следующую строку. Теги будем разбирать по ходу курса пока что их вам не нужно запоминать. Например тег <p> означает параграф. Перейдем в наш код:

Тег <br> означает перенос на следующую строку. Можем перейти в браузер и посмотреть (скрины находятся в галерее, внизу статьи). Переходим обратно в код.
Тег <h1> отвечает за заголовки. Чем меньше число в теге, тем больше заголовок. Как видно в браузере заголовок «Рад вас видеть» самый большой.

Что такое атрибут html?

Атрибут (лат. attribuo — придаю, наделяю) наделяют дополнительными свойствами наши теги. Атрибут «align» имеет значение «center». Это значит, что текст, находящийся между открывающимся тегом <p> и закрывающимся </p> будет находиться по центру. Если изменим значение атрибута «align» и вместо «center» поставим «right», жмем кнопку «Сохранить», и открываем браузер. Нажимаем кнопку обновить. Как видите текст «Добро пожаловать на мой сайт» располагается справа. Как вы уже поняли, атрибут «align» отвечает за расположение текста на нашей html странице.

Тег html. Структура тега html

А сейчас мы разберем структуру html документа (тега <html>). Думаю, вы знаете, что у всех, почти у всех людей есть голова :). У головы есть глаза, рот, нос, уши. Также у всех людей есть тело. Из тела исходят руки, ноги. Так же как и у html документа. Голова, в нашем случае, это тег <head> и закрывающий тег </head>, также в свою очередь туда входит тег <title> и другие. Эти теги можно принимать за нос, уши, глаза то есть то, что находится на голове. У html документа, как говорилось, есть тело. Тело документа находится между тегами <body> и закрывающим тегом </body>. У него тоже есть свои теги: <p>, <br>, <font>, <h1>, <h2> и другие, их очень много. В html документе тело и голова заключены в обязательный тег <html> и </html>

Забыл сказать, что тег <title> отвечает за название нашей страницы. Это можно посмотреть в одном из браузеров, которые мы разбирали в прошлом видеоуроке.
Переходим в html код и рассмотрим последний пункт – порядок расположения тегов. Сейчас вы видите на экране теги и закрывающие теги <p><h2><font></font></h2></p>. Нужно соблюдать порядок тегов, например, если мы переместим <p><h2><font></h2></font></p>, то страница будет отображаться некорректно. Поэтому, нужно соблюдать чтобы одни теги были внутри других, и не менять этот порядок.

На этом, мы заканчиваем урок, подводя итог тому, чему научились:

Научились создавать папку для сайта.
Создавать, сохранять и изменять html страницы.
Разобрались с тем, что такое атрибут и теги html.
Узнали, что есть обязательные теги.
Каждые теги имеют закрывающие теги, но есть и исключения.
Разобрали структуру html документа, проведя аналогию с человеком.
Узнали, что нужно соблюдать порядок расположения тегов.

До встречи в следующем видеоуроке, в котором мы разберем элемент DOCTYPE и раздел HEAD! 🙂

Как создать html страницу - пожалуй, первый вопрос будущих веб-мастеров. Что такое атрибут и теги html — второй вопрос. Заходите к нам и мы ответим Вам!