С чего как правило начинаются html документы

С чего начинается HTML

Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.

Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа». Тип документа нужен, чтобы браузер мог определить версию HTML и правильно отобразить страницу.

Например, для старой версии HTML 4.01 доктайп выглядит так:

А для последней версии HTML уже намного проще:

Последнюю версию HTML ещё называют HTML 5 . Но так как эта версия уже принята как стандарт и распространена почти везде, мы будем называть её просто HTML.

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 12 декабря 2023. Всего от 4 130 ₽ в месяц.

Перейти к заданию

• index.html Сплит-режим
• style.css Сплит-режим

Структура HTML-кода

Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 1 показан код простого документа, содержащего основные элементы.

Пример 1. Исходный код веб-страницы

      
Заголовок
 
Первый абзац.
 
Второй абзац.
  

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Далее разберём отдельные строки нашего кода.

Элемент (жарг. доктайп) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях — современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре.

Открывающий тег определяет начало HTML-документа, внутри него хранится «голова» ( ) и «тело» документа ( ).

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента . Внутри могут располагаться следующие элементы: , , , , или .

Элемент является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

Элемент определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страниц в браузере

Элемент .

Закрывающий тег показывает, что «голова» документа завершена.

«Тело» документа предназначено для размещения элементов и содержимого веб-страницы.

Заголовок

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

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он всё равно будет передаваться в документе, так что, посмотрев его исходный код, можно обнаружить скрытые заметки.

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

Первый абзац.

Элемент

определяет абзац текста.

Второй абзац.

Элемент

является блочным, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 1.

Следует добавить закрывающий тег , чтобы показать, что «тело» документа завершено.

Последним элементом в коде всегда идёт закрывающий тег .

Разбираем HTML документ

Урок №3
Разбираем HTML код

Давайте разберём, что означает каждая часть нашего кода HTML-документа, введённого в Блокнот на прошлом уроке:

    
Заголовок статьи
 
Абзац статьи.
   

Но для начала узнаем, что такое HTML-тег или просто «тег»?

Тег — основа языка HTML

Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — :

— это один из множества, различных HTML-тегов, означает абзац.

Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /

— открывающий тег.

— закрывающий тег.

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

У тегов разные имена и каждое имя означает какой либо элемент HTML-страницы: заголовок статьи , абзац (параграф) статьи , фотографию , ссылку , кнопку и т.п.

Рассмотрим другие теги используемые в нашем HTML коде.

Теги — начало и конец HTML-документа

Возвращаемся к нашему HTML документу:

    
Заголовок статьи
 
Абзац статьи.
   

Каждый HTML-документ начинается с открывающегося тега и заканчивается закрывающимся тегом

Теги и — голова и тело HTML-документа

Между тегами располагаются два блока.
1. Первый блок начинается и заканчивается тегами — их называют головой HTML-документа.
2. Второй блок начинается и заканчивается тегами — их называют телом HTML-документа.

    
Заголовок статьи
 
Абзац статьи.
  

1. — голова HTML-документа .
2. — тело HTML-документа , между этими тегами располагается основная информация страницы: заголовки , абзацы , фотографии , ссылки , кнопки и т.д.

Теги — название HTML-страницы

    
Заголовок статьи
 
Абзац статьи.
  

В голове между тегами , располагаются теги
. Между тегами помещают текст, который выступает в качестве названия страницы .

В нашем примере, между тегами , находится текст:
Название страницы

Текст помещённый между тегами появляется в двух местах, в виде названия окна браузера и в виде названия вкладки браузера:

Название страницы, которую вы сейчас читаете, содержит следующий текст:
Разбираем код HTML-документа. Выясняем что такое тег.

Теги и — заголовок и абзац статьи

    
Заголовок статьи Абзац статьи.
  

В теле нашего HTML-документа, между тегами , располагаются два вида тегов:
— теги заголовока статьи,
— теги абзаца статьи.

— между этими тегами располагается текст, который является заголовком статьи.
Например, текст заголовока статьи, которую вы сейчас читаете содержит следующее:
Разбираем HTML код

— между этими тегами располагается текст, который является абзацем статьи.
Например, второй абзац статьи, которую вы сейчас читаете, содержит следующее:
Но для начала узнаем, что такое HTML-тег или просто «тег»?

Обобщаем материал по структуре HTML-документа:

Каждый HTML-документ начинается и заканчивается тегами Каждый HTML-документ состоит из двух блоков, головы и тела:
1. — голова HTML-документа,
2. — тело HTML-документа.

В голове HTML-документа между тегами , располагаются теги и некоторая служебная информация о странице (мета-теги) , которую мы изучим чуть позже.

В теле HTML-документа между тегами , располагается основной контент: тексты, изображения, формы, которые обрамлены тегами заголовков h1 , абзацев p , изображений img , ссылок a , кнопок input и т.д.

Информатика

HTML — это язык разметки, который представляет простые правила оформления и компактный набор структурных и семантических элементов разметки (тегов). HTML позволяет описывать способ представления логических частей документа (заголовки, абзацы, списки и т.д.) и создавать веб-страницы разной сложности.

HTML не является языком программирования, но веб-страницы могут содержать встроенные или загружаемые программы на скриптовых языках (в первую очередь Javascript) и программы-апплеты на языке Java.

HTML-документ состоит из текста, который представляет собой информационное содержимое и специальных средств языка HTML — тегов разметки, которые определяют структуру и внешний вид документа при его отображении браузером. Структура HTML-документа довольно проста:

1.Описание документа начинается с указания его типа (секция DOCTYPE).

2.Текст документа заключается в тег . Текст документа состоит из заголовка и тела, которые выделяются соответственно тегами и .

В заголовке () указывают название HTML-документа и другие параметры, которые браузер будет использовать при отображении документа.

Тело документа () — это та часть, в которую помещается собственно содержимое HTML-документа. Тело включает предназначенный для отображения текст и управляющую разметку документа (теги), которые используются браузером.

Наличие секции DOCTYPE позволяет указать браузеру, какой тип документа ему предстоит разбирать, т.е, какие требования нужно выполнять при обработке гипертекста.

Заголовок предназначен для размещения метаинформации, описывающей веб-документ как таковой.

Блок содержит то, что нужно показать пользователю: текст, изображения, внедренные объекты и пр.

Стандарт требует, чтобы секция DOCTYPE присутствовала в документе, т.к. это позволяет ускорить и улучшить обработку гипертекста. Это достигается за счет того, что браузер может не делать предположений о том, как интерпретировать теги, а свериться со стандартным определением (файлом .dtd).

Мета-тег HTML — это элемент разметки html, описывающий свойства документа как такового (метаданные). Назначение мета-тега определяется набором его атрибутов, которые задаются в теге . Мета-теги размещают в блоке . веб-страницы. Они не являются обязательными элементами, но могут быть весьма полезны.

Тег (html-тег, тег разметки) — управляющая символьная последовательность, которая задает способ отображения гипертекстовой информации. HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки <>:

Как правило, теги являются парными и состоят из начального и конечного тегов, между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (. ). Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например тег . Регистр символов для тегов не имеет значения.

Примеры часто используемых тегов HTML:
. — контейнер гипертекста
. — контейнер заголовка документа
— название документа (то, что отображается в заголовке окна браузера)
. — контейнер тела документа

— контейнер общего назначения (структурный блок)
. — заголовок N-ного уровня(N = 1. 6)

.

— основной текст
. — гиперссылка

.

— нумерованный список

.

— маркированный список

. — элемент списка

.

— контейнер таблицы

.

— строка таблицы

.

— ячейка таблицы
. — изображение

.

— форма
. — отображение текста курсивом
. — отображение текста полужирным шрифтом
. — выделение (курсивом)
. — усиление (полужирным шрифтом)
— принудительный разрыв строки

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

Атрибуты — это пары вида «свойство = значение», уточняющие представление соответствующего тега:<тег атрибут="значение">. Атрибуты указывают в начальном теге, несколько атрибутов разделяют одним или несколькими пробелами, табуляцией или символами конца строки. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Порядок записи атрибутов в теге не важен. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов.

Краткий список некоторых часто используемых атрибутов и их возможных значений:
style=»описание_стилей» — локальные стили
src=»https://psk68.ru/files/metod/uchebnik_Informatika/%D0%B0%D0%B4%D1%80%D0%B5%D1%81″ — адрес (URI) источника данных (например картинки или скрипта)
align=»left|center|right|justify» — выравнивание, по умолчанию left (по левому краю)
width=»число» — ширина элемента (в пикселях, пиках, поинтах и др.)
height=»число» — высота элемента (в пикселях, пиках, поинтах и др.)
href=»адрес» — гиперссылка, адрес (URI) на который будет выполнен переход
name=»имя» — имя элемента
id=»идентификатор» — уникальный (в пределах веб-страницы) идентификатор элемента
size=»число» — размер элемента
class=»имя_класса» — имя класса во встроенной или связанной таблице стилей
title=»строка» — название элемента
alt=»строка» — альтернативный текст

Гиперссылка — это особым образом помеченный фрагмент веб-страницы (текст, изображение и др.), который связан с другим документом. Для указания гиперссылок используется тег . Гиперссылки позволяют перемещаться между связанными веб-страницами.

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

Относительные ссылки, напротив, используют для перехода на внутренние страницы сайта. Для них нужно указывать путь относительно ссылающейся страницы:

Кроме тегов, в HTML-документах могут присутствовать и специальные символы. Например, © — знак авторского права. Для отображения специальных символов используется мнемонический или числовой код вида &имя; или &#NNNN;, где NNNN — код символа в Юникоде в десятеричной системе счисления. Например: & (числовой код ©) — амперсанд (&), < — символ «меньше» (<) и > — символ «больше» (>), « — левая типографская кавычка («) и т.д.

Разнообразие браузеров и различия в их функциональности, а также изначальная ориентация HTML на поддержку различных устройств вывода, приводит разработчиков веб-сайтов к необходимости решения вопроса о кросс-браузерности. Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентичн. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Термин «кросс-браузерность» начали использовать во время браузерных войн, начавшихся с серидины 90-х годов XXв. В этом контексте термин относился к сайтам, которые одинаково работают как в Internet Explorer, так и в Netscape Navigator. В то время производители стали внедрять собственные функции для браузеров, что привело к существенным отличиям отображения веб-содержимого и концептуальным различиям в разработке веб-сайтов. В настоящее время ситуация смягчилась (отчасти из-за ухода с рынка Netscape), но не настолько, чтобы можно было говорить о близком окончании браузерных войн.