HTML страница создается с применением тегов, поэтому сначала я объясню, что такое тег. Тег – это команда на веб-странице, которая говорит браузеру что необходимо сделать. Тег состоит из знаков < и >. Примером тега является <html>, о котором вы узнаете ниже.

Содержание

Создайте свою первую веб-страницу с помощью HTML

Откройте Блокнот, Notepad++ или любой другой текстовый редактор и напишите или скопируйте в него следующий код:

<!DOCTYPE HTML> 
<html lang="ru"> 
  <head> 
    <meta charset="UTF-8"> 
    <title>Моя первая веб-страница</title> 
  </head> 
  <body>
    Привет, мир!
  </body> 
</html>

Рассмотрим код построчно

Мы только что создали страницу, и написали написали на ней “Привет, мир!” с помощью HTML разметки. Давайте рассмотрим этот код построчно.

<!DOCTYPE HTML> Первое, что нужно сделать – это сообщить браузеру, какую версию HTML вы используете. В нашем случае, это последняя версия – HTML5. Вы должны всегда использовать этот тег.
<html lang=”ru”> Все это говорит о том, что в HTML-документе указан язык, который является русским. Если вы будете создавать сайт на другом языке, то необходимо будет указать соответствующий язык.
<head> Отмечает начало документа HTML, так называемой головой. Этот раздел не отображается на веб-странице, но содержит важную информацию о странице.
<meta charset=”UTF-8″> Обозначает кодировку символов: UTF-8
<title>Моя первая веб-страница</title> Заголовок страницы, можно увидеть на вкладке браузера и при добавлении закладки сайта в избранное. Вы можете написать любое название, между тегами заголовка. Последний тег </title> (является завершающим) и означает, что заголовок тега тут заканчивается. Вы можете завершить любой тег, поставив косую черту / между знаками <>.
</head> Закрытие тега головы.
<body> Тут начинается раздел тела. Тут вы будете размещать все, что будет отображаться на видимой части страницы.
Привет, мир! Видимая часть в веб-браузере.
</body> Закрывающий тег тела.
</html>  Завершающая часть нашей страницы.

Находясь на любой веб-странице нажмите Ctrl + U в Google Chrome, и вы увидите HTML-код. Откройте несколько веб-сайтов и посмотрите их HTML-код.

Откройте ваш HTML-документ в веб-браузере

Следующее, что нужно сделать, это сохранить первую веб-страницу на жестком диске. Нажмите Файл, затем Сохранить. Измените расширение .txt вашего нового файла на .html, например index.html. Можно создать специальную папку, чтобы все ваши веб-страницы были организованы.

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

веб-страница-html

Поздравляю! Вы создали свою первую локальную веб-страницу, отображающую статическое сообщение в браузере!

Использование HTML-тегов

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

<u>Текст с подчеркиванием.</u>

Как вы видите, когда мы добавляем тег <u>, он начинает подчеркивание. А тег </u>, заканчивает подчеркивание. Как я и писал выше, если вы добавляете в тег обратную косую черту /, то она закроет этот тег.

Как сделать текст жирным

<strong>Жирный текст</STRONG>

Как сделать текст курсивом

<em>Курсив</em>

Вложенные HTML-теги

Вы можете даже поставить все 3 тега одновременно!

<b><u><em>Курсив, подчеркнутый, жирный.<em/></u></b>

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

Это пример вложенных тегов:

<strong><em><u>Привет!</u></em></strong>

Теперь пример перекрывающихся тегов:

<strong><em><u>Привет!</strong></em></u>

Вы видите разницу? Хорошее правило, которому нужно следовать: это то, что тэг, который ты начинаешь первым – заканчиваешь последним. А тэг, который ты начинаешь последним, ты заканчиваешь первым. Все еще в замешательстве? Не беспокойся, ты привыкнешь к этому, продолжай практиковаться.

HTML-теги синглтона

Мы узнали, что каждый HTML-тег должен быть закрыт после открытия: <tagname> … </tagname>.

Есть несколько специальных элементов, которым не нужен закрывающий тег, потому что они никогда не содержат ничего другого. Например, горизонтальная линия <hr/> никогда не содержит абзаца, изображений или чего-либо еще. Мы называем эти тэги Singleton, и закрывающий слеш пишется так: <tagname attribute = “parameter”/>

Список одноэлементных HTML-тегов: area, base, br, col, embed, hr, img, input, link, meta, param, source.

Список всех тегов HTML

Посмотрите в списке все HTML-теги с примерами. Это поможет вам понять, какие теги использовать, а какие избегать, так как некоторые устарели.