- •Учреждение образования «Гомельский государственный технический университет имени п.О. Сухого»
 - •Проектирование и разработка web – сайтов
 - •Html. Язык разметки гипертекста
 - •1. Глобальные компьютерные сети
 - •1.1 Интернет. Основные понятия, принципы функционирования
 - •1.2 Адресация в Интернете
 - •1.3 Архитектура web-приложений
 - •1.4 Современные web - технологии
 - •2. Язык гипертекстовой разметки страниц html
 - •2.1 Язык гипертекстовой разметки страниц html
 - •2.2 Структура html-документа
 - •2.2 Задание типа html-документа
 - •2.3 Основные элементы заголовка html-документа
 - •2.4 Теги форматирования html-документа
 - •2.5 Графические объекты html-документа
 - •2.6 Задание ссылок
 - •2.7 Структурированные данные. Списки
 - •2.8 Структурированные данные. Таблицы
 - •3. Язык гипертекстовой разметки страниц html. Фреймы
 - •4. Язык гипертекстовой разметки страниц html. Формы
 - •4.1 Задание формы
 - •4.2 Элементы пользовательского интерфейса
 - •4.3 Задание кнопок. Тег button
 - •4.4 Раскрывающийся список. Тег select
 - •4.5 Текстовая область. Тег textarea
 - •Css. Каскадные таблицы стилей
 - •5. Назначение стилевых таблиц
 - •5.1 Встраивание таблиц стилей в html-документ
 - •5.2 Типы селекторов
 - •5.2.1 Универсальный селектор
 - •5.2.2 Селектор типа
 - •5.2.3 Селектор класса
 - •5.2.4 Селектор идентификатора
 - •5.2.5 Селектор атрибутов
 - •5.2.6 Селектор псевдоклассов
 - •5.2.7 Селекторы псевдоэлементов
 - •5.2.8 Составные селекторы. Комбинаторы
 - •5.2.9 Селектор потомка
 - •5.2.10 Селектор дочерних элементов
 - •5.2.11 Селекторcестринского элемента
 - •5.2.12 Селектор обобщенных родственных элементов
 - •5.3 Иерархия стилей
 - •5.4 Единицы измерения
 - •5.5 Описание шрифтов
 - •5.6 Оформление списков
 - •5.7 Задание цвета и фона
 - •5.8 Блочная модель документа. Размеры, поля, отступы, границы
 - •5.9 Блочная модель документа. Позиционирование, обтекание, управление видимостью
 - •1. Вариант
 - •2. Вариант
 - •3. Вариант
 - •6.1 Описание языкаHtml5
 - •6.2 Структурные элементыHtml5
 - •6.3Html5 и старые браузеры
 - •6.4 Пример сайта наHtml5
 - •7. Этапу разработки сайта
 - •7.1 Этапы верстки веб-страниц
 - •7.2 Особенности верстки веб-страниц
 - •7.3 Макет сайта. Табличная верстка
 - •7.4 Применение таблиц для верстки сайта. Макет из двух колонок
 - •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
 - •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
 - •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
 - •7.5 Применение таблиц для верстки сайта. Макет из трех колонок
 - •Vertical-align: top; /* Вертикальное выравнивание в ячейках */
 - •Vertical-align: top; /* Выравнивание по верхнему краю ячейки */
 - •Vertical-align: top; /* Выравнивание по верхнему краю ячейки */
 - •7.6 Применение таблиц для создания рамок
 - •7.7 Применение таблиц для склейки изображений
 - •Литература
 - •Содержание
 
2. Язык гипертекстовой разметки страниц html
2.1 Язык гипертекстовой разметки страниц html
Основу WWW составляет гипертекстовый документ, создаваемый с помощью языка разметки гипертекстовых документов. Гипертекст– это расширенный текст, элементы которого могут храниться на различных ресурсах в сети, связь с которыми осуществляется с помощью гиперссылок.
HTML(Hyper Text Markup Language) ‑ стандартный язык разметки документов во Всемирной паутине. Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме. HTML является описательным языком. В состав языка входят развитые средства для создания различных уровней заголовков, шрифтовых стилей, различные списки, таблицы, иллюстраций, аудио- и видеофрагментов и др. Современная версия языка 5.0.
Основной единицей языка HTML является тег. Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами. Общая структура контейнера:
<"имя тега" "список атрибутов">
содержание контейнера
</"имя тега">
Большинство тегов спарены т.е. за открывающим тегом следует соответствующий закрывающий тег, а между ними содержится текст или другие теги. В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом. Некоторые теги являются элементами HTML сами по себе, и в рамках спецификации HTMLдля них соответствующий конечный тег необязателен, однако для спецификацииXHTMLзакрывать тег обязательно для валидностиWEBдокумента.
Пример:
<I>Текст курсивом</I>
<p>обычный текст <b>Текст жирный</b> обычный текст </p>
<BR> разрыв строки <BR /> разрыв строки
Для большинства тегов определяется множество возможных атрибутов, однако атрибутов может и не быть. Конечные тегиникогда не содержат атрибутов. Общий вид задания атрибута:
имени атрибута = значения атрибута
Пример: Задание таблицы шириной 570 пикселов, с выравниванием по центру, ширина бордюра 5 пикселов.
<TABLE WIDTH=570 ALIGN=center BORDER=5>
Кроме тегов, элементами HTML являются специальные символы CER (Character Entity Reference). Спецсимволы могут задаваться трехзначным кодом – &#nnnили именем элемента –&имя.
Таблица 2.1 – Специальные символы
| 
				 Числовой код  | 
				 Имя символа  | 
				 Символ  | 
				 Описание  | 
| 
				 "  | 
				 "  | 
				 "  | 
				 Кавычка  | 
| 
				 &  | 
				 &  | 
				 &  | 
				 Амперсанд  | 
| 
				 <  | 
				 <  | 
				 <  | 
				 Меньше  | 
| 
				 >  | 
				 >  | 
				 >  | 
				 Больше  | 
| 
				 
  | 
				 
  | 
				 
  | 
				 Неразрывный пробел  | 
| 
				 ¢  | 
				 ¢  | 
				 ¢  | 
				 Цент  | 
| 
				 £  | 
				 £  | 
				 £  | 
				 Фунт  | 
| 
				 ¤  | 
				 ¤  | 
				 ¤  | 
				 Валюта  | 
| 
				 ¥  | 
				 ¥  | 
				 ¥  | 
				 Йена  | 
| 
				 ¨  | 
				 ¨  | 
				 ¨  | 
				 Умляут  | 
| 
				 ©  | 
				 ©  | 
				 ©  | 
				 Копирайт  | 
| 
				 «  | 
				 «  | 
				 «  | 
				 Левая угловая кавычка  | 
| 
				 ®  | 
				 ®  | 
				 ®  | 
				 Торговая марка  | 
| 
				 ±  | 
				 ±  | 
				 ±  | 
				 Плюс или минус  | 
| 
				 »  | 
				 »  | 
				 »  | 
				 Правая угловая кавычка  | 
Все теги НТМL по их назначению и области действия можно разделить на следующие основные группы:
определяющие структуру документа;
задающие оформление элементов документа;
гипертекстовые ссылки и закладки;
формы для организации диалога;
вызов программ.
