Простейшая структура html программы представлена как совокупность следующих тегов

Содержание

От автора: приветствую вас на блоге webformyself. Язык html, как и многие другие вещи в нашей жизни, имеет определенную структуру. В нашем случае ее закладывают специальные команды. Какие теги определяют структуру html страницы и где их нужно прописывать? Об этом я постараюсь рассказать сегодня.

Теги структуры документа html

Любой, абсолютно любой html документ имеет какие-то одинаковые фрагменты. Количество заголовоков, абзацев и списков на веб-страницах может быть разным, но есть определенные теги, которые обязательно присутствуют в исходном коде любого сайта.

— с этого указания начинается любой html-файл. Этот фрагмент кода используется для указания типа документа. Зачем это нужно? Дело в том, что существует несколько версий языка html, также есть его модификация. Указав доктайп, вы помогаете браузеру точно определить тип и интерпретировать код без ошибок.

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

HTML5 #1 Базовая структура HTML документа (Base HTML Document Structure)

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний
4 месяца обучения
24 практических работы

Все, тип документа указан и можно двигаться дальше.

— главный элемент-контейнер на странице, в который помещаются теги заголовка и тела страницы. Он парный и закрывается в самом-самом конце документа.

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

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

— с точки зрения объема можно сказать, что этот блок включает в себя больше всего информации, потому что именно в нем формируется тело страницы. Это непосредственно то, что будет выведено на экран.

Рис. 1. Это типичный пример обязательных тегов, которые формируют структуру документа.

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

— — очень важные парные теги заголовков, которые выводятся на веб-страницу. Как правило, в h1 заключают название статьи или другой публикации, в h2 – подзаголовки, в h3 – подзаголовки подзаголовков и т.д. В крупном документе действительно могут понадобиться все эти теги.

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

Давайте сразу разберемся на примере.

Источник: webformyself.com

Структура html-документа

Язык HTML состоит из тегов. Каждый тег является элементом разметки гипертекста, и выполняет свою определенную функцию. Одни теги нужны для создания структуры html-документа, указания различной информации о веб-странице, другие – для форматирования и создания элементов на веб-странице, например, чтобы создать кнопку, необходим тег Кнопка , а чтобы перенести текст на новую строку – тег
.

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

Каркас html-документа

Название веб-страницы

Тип документа

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

При вёрстке веб-страниц мы будем использовать пятую версию языка – HTML5. Для этой версии тип документа записывается таким образом: .

Теги верхнего уровня

Каркас html-документа образуют теги верхнего уровня , и .

Теги и определяеют заголовок и тело html-документа.

Теги заголовка документа

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

Кодировка html-документа

Кодировку html-документа указывают при помощи тега и его атрибута charset .

Атрибуты тегов записываются как пара, состоящая из имени и значения. Значения атрибутов записываются в кавычках. У тега может быть несколько атрибутов, в этом случае они записываются через пробел.

В качестве значения атрибута charset , мы будем использовать кодировку utf-8, так как она включает в себя символы всех языковых групп.

Обратите внимание! Если вы указали в качестве кодировки веб-страницы значение utf-8, то и сохранить html-документ необходимо в этой кодировке.

Название html-документа

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

Содержимое тега отображается:

Теги тела документа

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

Видео к уроку

Источник: psd-html-css.ru

Основы HTML, язык разметки гипертекста Hyper Text Markup Language

основы HTML

Язык разметки гипертекста Hyper Text Markup Language, а проще говоря HTML это основной язык создания веб-страниц. В этой статье проведем самое общее знакомство с языком HTML.

Язык разметки гипертекста Hyper Text Markup Language

HTML–документ строится на основе тегов. Теги создают структуру документа. Основные теги парные. Это значит, что если есть открывающий тег типа <…>, то должен быть и закрывающий тег со слешем . Стоит отметить, что бывают и не парные теги.

Структура HTML документа

Пример: Основной каркас HTML 5 документа должен иметь следующую структуру:

Здесь место для заголовка Здесь текст документа

Структура заголовка

Тег title

Это заголовок документа, выводится в заглавной части страницы.

Тег meta

Тег мета, а вернее теги мета, потому что в одном документе таких тегов может быть несколько. содержит специальную информацию. Например, обязательно должен быть тег мета с указанием кодировки документа:

Для индексации веб страниц важны мета-теги description и keywords:

Замечу, что современные поисковики перестали «видеть» keywords, но это не отменяет их использования. Внутреннюю перелинковку никто не отменял.

Пример веб-страницы на HTML

Приведу элементарную веб-страниццу на HTML:

Моя любимая веб-страница Моя первая, а значит любимая веб-страница.

Изучая основы HTML, нельзя без изучения и использования специальных текстовых редакторов. Потому-что набирать любой текст страницы HTML нужно только в текстовом редакторе типа: NotePad++, Sublime Text2 и т.п. После набора документа его нужно сохранить с расширением htm или html.

Cозданный файл открываем в любом браузере, которым вы пользуетесь.

Статьи по теме: Концептуальная модель базы данных — диаграмма связи между объектами

Структура тела документа

Текст в документе (в тегах ) также разбивается на заголовки и части тегами.

Теги заголовка и абзаца

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

Заголовки разделов текста выделяется тегами

Организуются теги заголовков в иерархической форме, а число в теге указывает на степень вложенности заголовка.

Пример применения тегов

и :

Моя любимая веб страница

Обзац моей любимой веб-страницы

h1 Категория товара

h2 Категория товара

h3 Категория товара

h4 Категория товара

h5 Категория товара

h6 Категория товара

Атрибуты тегов

Один из основных атрибутов тегов это атрибут форматирования, под названием align. Значение атрибута align:

left – выравнить по левому краю,
center – выровнять по центру,
right – выровнять по правому краю,
justify – симметричное выравнивание по двум краям.

Моя любимая веб-страница

h1 align=»center»>h1 Товар

h2 Товар

h3 Товар

Такое форматирование называется физическим и в принципе устарело. Для форматирования лучше и рекомендовано использовать таблицы каскадных стилей (CSS).

Списки

Современный стандарт HTML предусматривает создание трех основных видов списков:

Списки маркированные (unordered list);
Списки нумерованные (ordered list);
Список определений терминов (definition list).

Рассмотрим каждый из видов списков.

Списки маркированные

Товар 1 из списка товаров
Товар 2 из списка товаров
Товар 3 из списка товаров

В список можно помещать теги загловков:

Маркеры, то есть видимые значки перед элементами списка, могут меняться, а их внешний вид задается атрибутами type. Атрибуты type могут быть: circle (не закрашенный кружок), disk(закрашенный кружок) и square( квадрат закрашенный). По умолчанию используется атрибут disc. Пример использования маркера с атрибутом disk:

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

В нумерованных списках используются пять атрибутов:

Статьи по теме: Устройство реляционной базы данных

1-Цифры арабские; i- Римские строчные цифры; I- римские прописные цифры; a-Латинские строчные буквы; A-Латинские прописные буквы.

Пример нумерованного списка.

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

Товар1 из списка
Товар2 из списка
Товар3 из списка

Пример нумерованного списка с маркерами латинских строчных букв:

Списки определений

Для создания списков по типу термин-определение термина, применяются теги … (definition list) и … (definition description). Причем сам термин заключается в парный тег , а определение (объяснение) термина заключается в парный тег .

Вложение списков

Любой тип списка, маркированный и нумерованный, можно друг в друга вкладывать. Вложение допустимо произвольное. Главное при создании вложенных списков не запутаться в парных тегах.

Пример вложенных списков:

Вложенные списки

Раздел товаров 1
Раздел товаров 1.1
Раздел товаров 1.2
Раздел товаров 2
Раздел товаров 2.1
Раздел товаров 2.2
Раздел товаров 2.3
Раздел товаров 3
Раздел товаров 3.1

Таблицы в HTML

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

Структура таблицы:

//- парные теги контейнера таблицы;//

//контейнер для создания строки таблицы//

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

Простая таблица

1-1	1-2	1-3
2-1	2-2	2-3

Объединение ячеек в HTML-таблице

Ячейки 1.1 и 1.2		Ячейка 1.3
Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Ячейки 3.1 — 3.3

Гиперссылки

Гиперссылки или просто ссылки это основной элемент документа HTML для связи документов, их оптимизации и продвижения в поисковых системах.

Статьи по теме: Индивидуальные разработки для электронной коммерции

Тег реализующий ссылки в документах HTML, это парный тег-контейнер …

Основной атрибут этого тега href. Этот тег содержит адрес ресурса, на который ведет ссылка. Внутри тега-контейнера пишется текст ссылки.

Ссылка на документ с абсолютным адресом ;

Как видите из примера, в ссылках можно использовать, как абсолютные, так и относительные URL. Относительный путь это адрес документа относительно текущей страницы, но которой ссылка создается.

Якорь

Для ссылки на конкретное слово страницы, используется якоря. Чтобы сделать ссылку на якорь, атрибуту href дается имя якоря со значком решетка впереди имени:

Чтобы сослаться на якорь, в другом документе, имя якоря с решеткой (#), пишется сразу после адреса стороннего документа, без пробела.

Рисунки в виде ссылок

Рисунки и фото также можно делать в виде ссылок. Для этого рисунок вставляется в текст с тегом . Атрибута src этого тега имеет значение файла картинки:

Затем, картинка «оборачивается» в тег ссылки:

На этом все! Конечно, основы HTML не включают все особенности этого языка, но дают представление о формировании HTML документа.

Другие статьи

Основы HTML, язык разметки гипертекста Hyper Text Markup Language
Что такое интернет браузер
Что такое социальные сети в интернет
Веб–технологии для разработчиков
Введение в web-технологии — понятия Интернет и всемирная паутина
35+ Ошеломляющих фактов про поисковую систему Google
Зачем нужен выделенный сервер (dedicated server) для вашего бизнеса
Что такое брендинговое агентство и зачем оно вам нужно?
Каталог компаний catalog.tools
Индивидуальные разработки для электронной коммерции
Как удалить чужой аккаунт в ютуб: услуга от Смосервиса
Что такое целевой рынок, как его найти и понять
Что такое и зачем нужно продвижение сайта до его запуска
Безопасность в сети: использование VPN
Онлайн игры для детей
Преимущества одноразовой электронной почты
Что такое линкбилдинг в продвижении сайта