HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
Язык HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.
Язык XHTML является более строгим вариантом HTML, он следует всем ограничениям XML и, фактически, XHTML можно воспринимать как приложение языка XML к области разметки гипертекста.
Во всемирной паутине HTML-страницы, как правило, передаются браузерам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.
| Основные теги | |
| ;; | Указывает программе просмотра страниц что это HTML документ. |
| ;; | Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. |
| ;; | Определяет видимую часть документа |
| Теги оглавления | |
| ;; | Помещает название документа в оглавление программы просмотра страниц |
| Атрибуты тела документа | |
| ; | Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB – пример: FF0000 – красный цвет. |
| ; | Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB – пример: 000000 – черный цвет. |
| ; | Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB – пример: 00FF00 – зеленый цвет. |
| ; | Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB – пример: 333333 – серый цвет. |
| ; | Устанавливает цвет гиперссылок при нажатии. |
| Теги для форматирования текста | |
| ;; | Обрамляет предварительно отформатированный текст. |
| ;; | Создает САМЫЙ БОЛЬШОЙ заголовок |
| ;; | Создает самый маленький заголовок |
| ;; | Создает жирый текст |
| ;; | Создает наклонный текст |
| ;; | Создает текст – имитирующий стиль печатной машинки. |
| ;; | Используется для цитат, обычно наклонный текст. |
| ;; | Используется для выделения из текста слова (наклонный или жирный текст) |
| ;; | Устанавливает размер текста в пределах от 1 до 7. |
| ;; | Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
| Гиперссылки | |
| ;; | Создает гиперссылку на другие документы или часть текущего документа. |
| ; ; |
Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу. |
| ;; | Отмечает часть текста как цель для гипперссылок в документе. |
| ;; | Создает гиперссылку на часть текущего документа. |
| Форматирование | |
| ; | Создает новый параграф |
| ; | Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center |
| ; | Вставляет перевод строки. |
| ; ; |
Создает отступы с обеих сторон текста. |
| ;; | Создает список определений. |
| ; | Определяет каждый из терминов списка |
| ; | Описывает каждое определение |
| ;; | Создает нумерованный список |
| ; | Определяет каждый элемент списка и присваивает номер |
| ;; | Создает ненумерованный список |
| ; | Предваряет каждый элемент списка и добавляет кружок или квадратик. |
| ; | Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей |
| Графические элементы | |
| ; | Добавляет изображение в HTML документ |
| ; | Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle |
| ; | Устанавливает толщину рамки вокруг изображения |
| ; | Добавляет в HTML документ горизонтальную линию. |
| ; | Устанавливает высоту(толщину) линии |
| ; | Устанавливает ширину линии, можно указать ширину в пикселах или процентах. |
| ; | Создает линию без тени. |
| ; | Задает линии определенный цвет. Значение RRGGBB. |
| Таблицы | |
| Создает таблицу. | |
| Определяет строку в таблице. | |
| Определяет отдельную ячейку в таблице. | |
| Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом) | |
| Атрибуты таблицы | |
| ; | Задает толщину рамки таблицы. |
| ; | Задает расстояние между ячейками таблицы. |
| ; | Задает расстояние между содержимым ячейки и ее рамкой. |
| ; | Устанавливает ширину таблицы в пикселах или процентах от ширины документа. |
| ; или ; | Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. |
| ; или ; | Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. |
| ; | Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1) |
| ; | Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1) |
| ; | Не позволяет программе просмотра делать перевод строки в ячейке таблицы. |
| Фреймы | |
| ;; | Предваряет тег ; в документе, содержащем фреймы; |
| ; | Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов. |
| ; | Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов. |
| ; | Определяет единичный фрейм или область в таблице фреймов. |
| ;; | Определяет, что будет показано в окне браузера если он не поддерживает фреймы. |
| Атрибуты фреймов | |
| ; | Определяет какой из HTML документов будет показан во фрейме. |
| ; | Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фреймр или область из других фреймов. |
| ; | Определяет величину отступов по левому и правому краям фрема; должно быть равно или больше 1. |
| ; | Определяет величину отступов по верхнему и нижнему краям фрейма; должно быть равно или больше 1. |
| ; | Указывает будет-ли выводится линейка прокрутки во фрейме; значение value может быть “yes,” “no,” или “auto”. Значение по умолчанию для обычных документов – auto. |
| ; | Препятствует изменению размеров фрейма. |
| Формы | |
| Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы. | |
| ;; | Создает формы |
| ;; | Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки. |
| ; | Указывает каждый отдельный элемент меню |
| ;; | Создает ниспадающее меню |
| ; | Указывает каждый отдельный элемент меню |
| ;; | Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту. |
| ; | Создает checkbox. За тегом следует текст. |
| ; | Создает radio кнопку. За тегом следует текст. |
| ; | Создает строку для ввода текста. Параметром Size указывается длина в символах. |
| ; | Создает кнопку “Принять” |
| ; | Создает кнопку “Принять” – для этого используется изображение |
| ; | Создает кнопку “Отмена” |
FleetMaster Driver App Tutorial (how to use)
Создание оглавления в WORD! Как сделать содержание в ворд за несколько минут?
- ← Глоссарий WEB терминов
- Установка XAMPP →
Источник: vavik96.com
Теги, атрибуты, значения
Тег может иметь атрибуты и значения атрибутов. Атрибуты добавляют в тег для расширения или модификации его действий. Наборы допустимых атрибутов для тега описаны в спецификации языка HTML. Правила записи атрибутов и значений:
после имени тега через пробел могут следовать атрибуты
атрибуты отделяют друг от друга пробелами
порядок следования атрибутов произволен
атрибуты не нужно повторно описывать в закрывающем теге
значения атрибутов записывают в кавычках «» после знака равенства
названия тегов не должны содержать пробелов
Спецификация html позволяет опускать кавычки, если значение атрибута состоит из одного слова (букв a—z) или числа (цифр 0—9)
Если значение содержит несколько слов, разделенных запятыми или пробелами, либо специальные символы, то кавычки обязательны
В языке HTML безразлично, в каком регистре вы записываете названия тегов и их атрибуты
Результат будет идентичен. Кроме того, в одном документе вы можете использовать для написания тегов и верхний, и нижний регистр
Чувствительными к регистру являются только некоторые значения атрибутов
Поэтому сразу возьмите за правило писать значения атрибутов в нижнем регистре
Структура html-документа
Любой html-документ (страница) заключается между тегами и , т.е. тег открывает документ, а тег закрывает его
Между этими двумя основными распологается головная часть документа и его тело
В головной части документа (между тегами и ) описываются общие правила отображения документа в браузере и содержится вспомогательная информация о документе. В головной части документа всегда между парой тегов и располагается имя документа, которое показывается в заголовке окна браузера
Между тегами и (в теле документа) распологаются команды, следуя которым в окне браузера выводится текст, картинки, таблицы и т. д.
Например, могут использоваться команды:
.
— заголовок
Таблица основных тегов языка HTML
Указывает программе просмотра страниц, что это HTML документ. Данные тэги обрамляют документ
Определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин
Помещает название документа в оглавление программы просмотра страниц
Определяет видимую часть документа
Для создания своей первой страницы недостаточно знать основные тэги. Необходимо научиться форматировать текст соответствующим образом. Для этого используются тэги для форматирования текста. Они представлены в следующей таблице:
Таблица тэгов для форматирования текста
Задает размер заголовка
Обрамляет предварительно отформатированный текст
Жирное начертание шрифта
Имитация стиля печатной машинки
Используется для цитат, обычно наклонный текст
Используется для выделения наиболее важных частей текста (наклонный или жирный текст)
Начало нового абзаца
Выравнивает абзац относительно одной из сторон документа, значения: left, right, или center
Вставляет перевод строки
Создает отступы с обеих сторон текста.
Создает нумерованный список
Определяет каждый элемент списка и присваивает номер
Создает ненумерованный список
Создает гиперссылку на другие документы или часть текущего документа
Устанавливает размер текста в пределах от 1 до 7
Устанавливает цвет текста, используя значение цвета в виде RRGGBB
Тэги состоят из ключевых слов и могут быть дополнены атрибутами, разделенными пробелами. Описание атрибутов без использования ключевых слов не допускается.
Источник: studfile.net
Описание средств реализации
Язык HTML, или универсальный язык разметки гипертекста, используется для создания самых разных интерактивных документов с гиперссылками и элементами мультимедиа — Web-страниц, интерфейсов, презентаций, электронных книг и учебных пособий. Файлы с HTML-кодом — это обычные текстовые файлы, доступные для чтения как программе, так и человеку. Благодаря этому HTML-страницы можно редактировать и просматривать на любом компьютере и в любой операционной системе.
HTML подразумевает некую стандартизированную структуру построения программы — в данном случае, HTML-документа. Такая структура описывает даже не последовательность команд, а очередность следования ряда обязательных блоков, которые содержат непосредственно программный код.
В отличие от иных языков программирования, директивы HTML называются не «командами», «процедурами» или «операторами», а имеют собственное наименование — «теги» (от английского tag — отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как . Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые элементы, отображая их на экране компьютера «как есть». Каждый HTML-документ содержит в себе две части: заголовок и тело страницы. В заголовке размещается название и некоторая специальная информацию о странице. Для реализации проекта использовались тэги описанные ниже (таблица 3).
| Название тега (пример) | Назначение тега |
| Основные теги | |
| Указывает программе просмотра страниц что это HTML документ. | |
| Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин. | |
| Определяет видимую часть документа | |
| Помещает название документа в оглавление программы просмотра страниц | |
| Создает гиперссылку на другие документы или часть текущего документа. | |
| Теги форматирования | |
| Обрамляет предварительно отформатированный текст. | |
| Создает самый большой заголовок | |
| Создает самый маленький заголовок | |
| Создает жирый текст | |
| Создает наклонный текст | |
| Вставляет перевод строки | |
| Создает нумерованный список | |
| Определяет каждый элемент списка и присваивает номер | |
| Создает ненумерованный список |
Продолжение таблицы 3
| Теги для работы с графикой | |
| Добавляет изображение в HTML документ | |
| Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle | |
| Устанавливает толщину рамки вокруг изображения | |
| Добавляет в HTML документ горизонтальную линию | |
| Теги для работы с таблицами | |
| Создает таблицу | |
| Определяет строку в таблице | |
| Определяет отдельную ячейку в таблице | |
| Задает толщину рамки таблицы | |
| Задает расстояние между ячейками таблицы. | |
| Задает расстояние между содержимым ячейки и ее рамкой | |
| Устанавливает ширину таблицы в пикселах или процентах от ширины документа |
При реализации ресурса, создаваемого в рамках данного проекта, использовалась технология каскадных таблиц стилей (CSS).
Для создания HTML-страниц можно пользоваться любым текстовым редактором, например Блокнотом. Существуют и специализированные программы. Эти HTML-редакторы делятся на два типа: визуальные и невизуальные. Визуальные HTML-редакторы обладают интуитивно понятным интерфейсом и автоматизируют работу разработчика. Невизуальные редакторы требуют тэгов «вручную».
В данном проекте использован визуальный редактор Macromedia Dreamweaver. Macromedia Dreamweaver (сейчас — Adobe Dreamweaver) — профессиональный редактор HTML для проектирования, написания кода и поддержки сайтов, web-страниц и приложений сети. Dreamweaver включает в себя много инструментов и средств для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, отладчик JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет вам, редактировать JavaScript, XML и другие текстовые документы, которые поддерживаются в Dreamweaver. Возможность визуального редактирования в Dreamweaver также позволяет быстро создавать или менять дизайн проекта.
Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:
Источник: studopedia.ru