Какие теги помещают название документа в оглавление программы просмотра веб страниц

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

после имени тега через пробел могут следовать атрибуты

атрибуты отделяют друг от друга пробелами

порядок следования атрибутов произволен

атрибуты не нужно повторно описывать в закрывающем теге

значения атрибутов записывают в кавычках «» после знака равенства

названия тегов не должны содержать пробелов

Спецификация html позволяет опускать кавычки, если значение атрибута состоит из одного слова (букв a—z) или числа (цифр 0—9)

Если значение содержит несколько слов, разделенных запятыми или пробелами, либо специальные символы, то кавычки обязательны

В языке HTML безразлично, в каком регистре вы записываете названия тегов и их атрибуты

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

Как сделать ОГЛАВЛЕНИЕ (ровное содержание) в ВОРДЕ?

Чувствительными к регистру являются только некоторые значения атрибутов

Поэтому сразу возьмите за правило писать значения атрибутов в нижнем регистре

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

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

Между этими двумя основными распологается головная часть документа и его тело

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

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

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

.

— заголовок

Таблица основных тегов языка HTML

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

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

Помещает название документа в оглавление программы просмотра страниц

Определяет видимую часть документа

Для создания своей первой страницы недостаточно знать основные тэги. Необходимо научиться форматировать текст соответствующим образом. Для этого используются тэги для форматирования текста. Они представле­ны в следующей таблице:

Таблица тэгов для форматирования текста

Задает размер заголовка

Обрамляет предварительно отформатированный текст

Жирное начертание шрифта

Имитация стиля печатной машинки

Используется для цитат, обычно наклонный текст

Используется для выделения наиболее важных частей тек­ста (наклонный или жирный текст)

Начало нового абзаца

УРОК 10-11. Создание веб страниц (11 класс)

Выравнивает абзац относительно одной из сторон доку­мента, значения: left, right, или center

Вставляет перевод строки

Создает отступы с обеих сторон текста.

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

Определяет каждый элемент списка и присваивает номер

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

Создает гиперссылку на другие документы или часть те­кущего документа

Устанавливает размер текста в пределах от 1 до 7

Устанавливает цвет текста, используя значение цвета в виде RRGGBB

Тэги состоят из ключевых слов и могут быть дополнены атрибутами, разделенными пробелами. Описание атрибутов без использования ключе­вых слов не допускается.

Источник: studfile.net

Таблица основных тегов html с примерами

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

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

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

Базовые теги

— тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

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

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

— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, или .

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

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

— цвет фона документа в формате RGB.

— цвет гиперссылок, по которым уже переходили.

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

— метатег, который задаёт название страницы, отображаемое на вкладке браузера.

— определяет содержимое блока с вводной информацией сайта или группой ссылок.

Форматирование текста

. . — теги заголовков, от самого большого к самому маленькому.

— жирный текст без придания важности выделенному фрагменту.

— расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.

— выделение текста курсивом без придания важности.

— зачёркивает текст, помечая его удалённым.

— отображает перечёркнутый текст.

— подчёркивает текст, визуально выделяя внесённые изменения.

— подчёркивание без дополнительного акцентирования внимания.

— расставление акцентов путём выделения фрагментов текста курсивом.

— выделение частей текста жёлтым маркером.

— имитация текста, набранного на печатной машинке.

— отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.

— подстрочное начертание символов.

— надстрочное начертание символов.

— добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.

— вывод неформатированного текста с сохранением пробелов и особенностей переносов.

— контейнер для абзаца.

— переносит текст на другую строку без создания абзаца.

— отступы с обеих сторон для оформления цитаты или врезки.

— контейнер для размещения термина и его определения.

— добавление определения понятия

— выделение термина курсивом. Последующий текст должен раскрывать понятие.

— указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.

— список с цифрами.

— список со значками.

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

— выделение фрагмента кода с помощью шрифта monospace.

Встраивание элементов

— вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:

— выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.

— позволяет настроить в пикселях толщину рамки вокруг изображения.

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

— вставка звукового контента.

— вставка видео (поддерживается Ogg, WebM и MP4).

— указывает местоположение файла для , и

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

— размещает на странице горизонтальную линию. Имеет несколько атрибутов.

— устанавливает высоту линии.

— устанавливает ширину линии.

— убирает тень у линии.

— определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.

— ограничивает фрагмент документа, в котором скрипт не выполняется.

Работа с таблицами

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

— отмечает тело таблицы.

— создаёт одну ячейку.

— указывает на заголовок ячейки.

— показывает нижний колонтитул.

— позволяет указать ширину и другие параметры одной или нескольких колонок.

Создание форм и кнопок

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

— создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.

— формирует меню с поддержкой скроллинга.

— создаёт ниспадающее меню.

— описывает каждый отдельный пункт меню.

— формирует поля для добавления пользовательских данных.

— выводит результаты вычислений, сделанных с помощью скрипта.

— оформляет пометку для поля, созданного тегом .

— создаёт большие поля для ввода текста.

Источник: uguide.ru

Структура html документа и страницы сайта — особенности

Вы узнаете какая должна присутствовать минимальная структура html документа.

Подробно и с примерами разберем каждый необходимый ее элемент.

Также поговорим о том, как правильно создавать файлы и страницы сайта.

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

Давайте разберем структуру html документа чтобы понимать, как все работает.

Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной).

Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены на примере ниже.

Браузер сам интерпретирует все эти теги и выводит их в одном для пользователя виде информации.

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

DOCTYPE html

Он всегда идет в самом начале веб-страницы.

Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.

В последней версии 5 он имеет такой вид:

Рекомендую его таким и использовать. С помощью данного элемента браузер дальше интерпретирует то, что мы ему напишем. То есть все теги в стандарте html 5.

Тег HTML

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

Однако хороший стиль требует их использования.

Как правило, открывающий тег html идет вторым после определения документа при помощи doctype . Закрывающий всегда идет на странице последним.

Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается.

Поэтому все остальные элементы (кроме doctype) должны быть вложены внутри этого контейнера.

Тег head

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

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

Содержимое head не отображается напрямую на веб-странице, кроме тега title . Он отвечает за заголовок страницы.

В общем, в этом элементе хранится вся техническая информация о странице. Например, тип кодировки html страницы.

Он будет говорить браузеру, как ему лучше декодировать документ. Также сюда мы можем подключать css стили и различные скрипты.

Тег title

У head есть один обязательный компонент. Это тег title .

Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.

Отнеситесь к этому серьезно!

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

И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.

Профессиональное создание сайта в интернете с примерами

Конечно же, при этом нужно вставлять ключевые слова и делать свое название более привлекательным. Иначе вы просто рискуете потерять трафик с поиска.

Тег meta

Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.

Таким образом, с помощью параметров и атрибутов, тег может хранить важную информацию о вашей странице.

Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.

Профессиональное создание сайта в интернете с примерами

Обратите внимание, как указывается параметр.

Его вставляем внутри тега и перед правой закрывающей скобкой. Далее ставим знак равно и в кавычках указываем кодировку документа.

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

Тег body

Чуть ниже идет тег body. Это основное тело документа.

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

Обратите внимание

Body всегда идет ниже тега head . То есть сначала идет техническая информация о странице и только потом основной контент для пользователя. Но никак не наоборот!

Внутри body обязательно должен присутствовать тег h1. Это заголовок материала. То есть, как будет называться ваша статья.

Рекомендую название делать не более 55 символов с пробелами.

Далее чуть ниже идут элементы текста. Это обязательно будет абзац (тег p), картинки, какие-то выделения и так далее.

Синтаксис html

Немного стоит упомянуть и про синтаксис html. Сразу старайтесь располагать теги в таком удобном виде, как на примере выше.

Конечно же, можно расположить их и в хаотичном порядке.

Браузеру будет все равно. Он по-любому отобразит страницу правильно.

Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.

Отдельные теги всегда располагайте в разных строчках. Причем соблюдайте правило вложенности.

Все вложенные теги делайте отступом в одну табуляцию от родительского элемента.

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

Название материала

Основной текст

То есть тег head должен идти отступом в одну табуляцию относительно тега html . Body идет на уровне с head поскольку он тоже вложен в контейнер html .

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

Исключение лишь могут составлять head и body .

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

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

Основной текст

При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.

Как вы знаете, теги можно вкладывать друг в друга.

Например, текст и картинка находятся в разных тегах. Однако при этом они имеют общий родительский элемент.

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

Важно четко соблюдать порядок!

Если в какой-то тег вкладывается другой, то сначала идет открывающая часть одного тега. Затем открывающая часть другого и так далее. Только потом их нужно закрывать.

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

Правильный пример:

Неправильный пример:

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

Сначала мы открываем его. Затем вкладываем туда несколько тегов и потом закрываем.

Для наибольшей удобности дополнительно можно использовать html комментарии в коде.

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

Сам комментарий может быть, как однострочным, так и многострочным.

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

Основной текст

Прописывается он между конструкциями .

Как создать файл html

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

• Brackets
• Блокнот
• Notepad++
• Sublime Text
• Atom и другие

Если у вас Windows, то Блокнот будет уже доступен по умолчанию. Но им не удобно пользоваться.

Рекомендую для начала использовать бесплатный редактор html страниц Notepad++.

В нем есть много возможностей для удобной работы с кодом.

Когда запустите редактор, то перед вами уже будет новый пустой файл.

Пропишите в нем тот скелет html страницы (каркас), который мы выше разбирали. Он должен всегда присутствовать.

Текст можете изменить под себя. В общем, это будет самая простая html страница.

HTML кодировка

При создании страниц всегда прописывайте кодировку в meta теге. Это служебный тег, который вставляют в head .

Вообще, этот meta элемент многогранный.

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

Сейчас у нас он играет роль указателя кодировки. Здесь есть специальная запись. Она говорит браузеру о том, что данный документ создан в кодировке utf-8.

Для чего вообще нужна кодировка?

Не секрет, что во всем мире пишут и разговаривают на разных языках.

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

В других странах уже свой язык.

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

Когда заходим на страницу, браузер уже понимает, на каком языке написан сайт.

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

К сожалению, это не всегда получалось.

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

То есть браузер просто не понимал, что это за символы.

Как решение этой проблемы была создана универсальная кодировка utf-8.

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

Достаточно было указать универсальную utf-8 и у вас сайт отображался бы нормально во всех браузерах.

При этом упрощается еще работа и с базой данных. Поэтому здесь имейте в виду, что кодировку мы всегда будем указывать в utf-8.

Но тут нужно обратить свое внимание еще на одну вещь.

Сохраняем html utf-8

Чтобы все работало и браузер отображал страницу, желательно сохранить сам html документ в utf-8.

В этом программа Notepad ++ нам очень хорошо помогает.

Здесь есть пункт «Кодировки». Если у вас сейчас кодировка не стоит (как у меня на нижнем рисунке), то щелкните по пункту «Преобразовать в UTF-8 без BOM».

В этом случае ваш html файл будет преобразован в кодировку utf-8.

В правом нижнем углу вы найдете надпись «DosWindows ANSI as UTF-8». Это значит, что документ создан в режиме utf-8 и отображение будет нормальным.

И сразу такой совет!

Зайдите в «Опции» —> «Настройки». Здесь есть вкладка «Новый документ».

Сразу поставьте галочку на «UTF-8 без метки BOM». Так у вас все новые документы будут сразу создаваться в этой кодировке.

Как сохранить html страницу правильно

После того, как задали кодировку и структуру html страницы, вам нужно нажать на «сохранение». Заходим во вкладку «Файл» —> «Сохранить как…».

Имя файла может быть любое.

Но по умолчанию и особенно если это главная страница сайта, то сохраняйте ее как index.html.

Когда набираем адрес сайта без указания конкретной страницы, это значит, что мы запрашиваем страницу index.html.

То есть, когда мы обращаемся к серверу, он развернет именно индексную страницу.

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

Но если адрес не указан, то будет возвращена индексная страница. Поэтому по умолчанию мы называем страницу index.html.

И как вы уже должны заметить, расширение файла должно быть html. То есть в типе файла выбираем «Hyper Text Markup Language» и нажимаем «Сохранить».

Как открыть html файл для просмотра страницы

Для этого используем любой браузер:

• Google Chrome;
• Opera;
• Edge;
• Mozilla Firefox;
• Safari и другие.

Не зря мы сохраняем файлы с расширением html. Ведь только этот тип документа воспроизводят браузеры. А сам HTML — это стандарт разметки страницы для последующего воспроизведения браузерами.

В общем, кликаем по файлу правой кнопкой мыши.

В меню наводим на «Открыть с помощью» и выбираем нужный вариант браузера.

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

Если же вам нужно отредактировать код, то выбираем подходящие редактор. Рекомендую использовать Notepad++.

Как посмотреть html код страницы в браузере

Это очень полезно на практике. Например, узнать, какую структуру html кода использует тот или иной сайт.

Посмотреть код очень просто. Достаточно нажать сочетание клавиш Ctrl + U. В новой вкладке вам откроется исходный код страницы сайта.

Еще можно в адресной строке прямо перед адресом страницы прописать:

view-source:

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

Еще в браузерах есть встроенный инструмент веб-разработчика.

Доступ к нему в меню у каждой программы будет разным. Однако клавишей F12 этот инструмент откроется в любом браузере.

Во вкладке «Elements» слева будет html код, а справа стили CSS.

Удобен такой инструмент тем, что в нем можно править код и сразу посмотреть результат.

Также при редактировании могут высвечиваться подсказки. Это тоже полезно.

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

Также я дал вам некоторые инструменты для удобной работы с кодом. Еще были важные правила по кодировке и работе с файлами. Обязательно их соблюдайте!

Источник: alzari.ru