В этой статье мы рассмотрим из чего состоит HTML страница, какая у неё структура, основные теги и т.д., короче будет интересно.
Также, если вы захотите больше узнать о HTML или просто что-то не поймёте, то тогда почитайте наш учебник по HTML.
Из чего состоит HTML страница:
Язык гипертекстовой разметки является стандартом для документов во всемирной паутине. HTML-файл содержит:
Файл HTML состоит из текста, то есть слов, которые вы хотите отобразить в документе, и встроенных инструкций, называемых тегами HTML. Теги дают браузеру инструкции, которые включают форматирование, отображение изображений и гиперссылки. Техническое название типа данных в файле HTML — текст ASCII.
HTML-теги начинаются с символа <и заканчиваются />. Например, файл HTML начинается с <html>
и заканчивается </html>
. Буквы внутри тегов могут быть в нижнем или верхнем регистре.
Теги <html>
и </html>
являются примерами парных тегов. Второй похож на первый, за исключением того, что начинается с символа. Пара тегов влияет на то, как браузер будет отображать текст между первым и вторым тегами. Отсутствие второго тега обычно меняет отображение остальной части документа.
Стандартный формат файла HTML состоит из головы и тела. Теги для них:
Произошла ошибка. Попробуйте ещё раз позднее. |
Самый распространенный тег для заголовка HTML-файла — это тег заголовка. Он используется для размещения информации о документе в строке заголовка. Примечание. Обычно в HTML-документ включают большой эффектный заголовок, который можно назвать заголовком, но на техническом языке HTML заголовок — это текст, который отображается в строке заголовка в верхней части браузер.
1 | <title> Мой первый HTML-файл </title> |
В этом примере фраза «Мой первый файл HTML» будет отображаться в строке заголовка.
Теперь мы опишем четыре распространенных типа HTML-тегов, которые входят в основной раздел файла.
- Теги
<h>
определяют размер текста (h означает заголовок). - Тег
<img src>
используется для включения изображений. - Тег
<p>
создает новый абзац. - Тег
<a>
указывает ссылку на другую часть того же документа или на другой документ (a для привязки).
Вы можете контролировать размер текста, помещая фрагмент текста между одним из тегов заголовка, как в следующем примере:
1 | <h1> Новости </h1> |
Теги <h1>
и </h1>
сделают текст большим. Некоторые браузеры могут даже использовать другой шрифт. H1 создает самый большой текст, а H7 — самый маленький. Имейте в виду, что система не ожидает и не проверяет согласованность. После смены заголовка автоматические переводы строки не выполняются. Вы можете вкладывать разные заголовки.
Чтобы вставить изображение, вы используете единственный тег img
, как в следующем примере:
1 | <img src = "name.ext"> |
Здесь name.ext — это имя и расширение файла изображения. Расширение может быть либо .jpg, либо .gif. Это два типа изображений. Вы также можете создавать свои собственные изображения, используя такие продукты, как Paint Shop Pro или Adobe Photo Shop. Вам просто нужно сохранить файл в формате .gif или .jpg. Точно так же вы можете использовать эти инструменты, а также Microsoft Photo Editor для обрезки или изменения размера изображения.
Чтобы создать то, что кажется новым абзацем, используйте единственный тег <p>
.
Также есть тег <br>
, который создает разрыв строки. В некоторых браузерах они могут иметь такой же эффект. В других случаях тег абзаца вставляет пустую строку, а тег разрыва строки — нет.
Тег <a>
создает ссылку на другой документ или веб-сайт. Они бывают парами. Текст между <a>
и </a>
образует интерактивную часть. Если URL-адрес сайта, на который нужно сделать ссылку, — http://www.nytimes.com, то следует использовать следующий формат:
1 | <a href = "http://www.nytimes.com"> Интернет-сайт известной газеты. </a> |
Обратите внимание, что текст после href
заключен в кавычки. Вы также можете использовать теги <a>
для ссылки на локальные файлы или файлы HTML в том же каталоге на сервере. Формат
<a href = "secondfile.htm"> дополнительная информация </a>
где secondfile.htm — это имя другого файла. Если браузер не читает http: //, он знает, что нужно перейти в тот же каталог, что и HTML-файл, чтобы найти этот новый файл. Еще одно использование тега <a>
— для маркировки, а также ссылки на разные части одного и того же документа. Это делается следующим образом:
1 | <a name = "details"> Подробности </a> |
Такое использование тега <a>
дает имя позиции в HTML-файле.
Вывод:
В этой статье вы прочитали из чего состоит HTML страница, о его структуре и о основных тегах, также если вам что-то не понятно, то можете прочитать наш учебник по этой теме.