Основы языка Hypertext Markup Language (HTML)
Общие сведения о языке Hypertext Markup Language (HTML). Структура и форматирование HTML-документа, работа с графикой и таблицами в нем. Реализация гипертекстовых связей между web-страничками, создание форм, использование фреймов, каскадных таблиц стилей.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | учебное пособие |
| Язык | русский |
| Дата добавления | 23.10.2015 |
| Размер файла | 4,3 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Создайте документ file.html с формой, позволяющей отправлять на сервер файлы.
Для этого:
· Создайте HTML-документ с текстом «Выберите файл для загрузки на сервер».
· Создайте в этом документе форму.
· Добавьте в нее элемент <INPUT>, позволяющий выбрать файл (type=file)
<INPUT type=file name="Отправка файла">
и кнопку «Отправить».
Примечание. Для отправки файла в параметре action тэга <FORM> вводится адрес специальной программы, осуществляющей пересылку файла на сервер (в примере адрес указывать не надо).
Элемент <TEXTAREA>
Тэг <TEXTAREA> используется для ввода большого количества текстовой информации (в несколько строк).
Атрибуты тэга <TEXTAREA>:
· name- имя поля;
· cols- число колонок (символов) в текстовой области;
· rows- число видимых строк в текстовой области.
Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов <TEXTAREA> и </TEXTAREA>.
Упражнение 7.6
Создайте документ otziv.html, с формой, предлагающей написать отзыв о статье (рис. 7.6).
Для этого:
· Создайте HTML-документ с текстом «напишите отзыв о прочитанной статье»
· В HTML-документе создайте форму.
· Добавьте в нее элемент <TEXTAREA> с 6 строками и шириной 64 символа, в котором будет выедена подсказка «Здесь введите свой отзыв»:
<TEXTAREA NAME="otziv" COLS=64 ROWS=6>Здесь введите свой отзыв</TEXTAREA>
· В конце формы добавьте кнопку «Отправить».
Элемент <SELECT>
Элемент <SELECT> позволяет пользователю выбрать значение из фиксированного списка значений. Обычно этот элемент представлен выпадающим списком.
Для определения списка пунктов используются тэги <OPTION> между < SELECT > и </SELECT>.
<SELECT ….>
<OPTION>…
<OPTION>…
…
</SELECT>
Параметры тэга <SELECT>:
· name - имя объекта SELECT;
· multiple - позволяет выбрать более чем одно наименование;
· single - из списка можно выбрать только один вариант (этот параметр задан по умолчанию);
· size - определяет число пунктов, видимых для пользователя. Если этот параметр не указан, то список на экране отображается в виде выпадающего списка (видно одно наименование), если size>1, то браузер представляет на экране обычный список (число - количество видимых наименований).
Параметры тэга <OPTION>:
· selected - указывает, какой пункт выбран по умолчанию.
· value - значение, которое передается на сервер для обработки. По умолчанию значение value равно элементу <OPTION>.
Упражнение 7.8
Создайте документ fruit.html. Поместите в него форму, предлагающую пользователю выбрать любимый фрукт из предложенного списка (см. рис. 7.8). Для этого:
· Для создания списка используйте элемент <SELECT>.
· Обязательно задайте у тэга <SELECT> параметр name - в переменной с этим именем с будут переданы данные на сервер.
· Каждый элемент списка опишите с помощью тэга <OPTION>.
· Не забудьте закрыть элемент <SELECT> тэгом </SELECT>.
· Добавьте в форму кнопку «Отправить данные»
Задание 7.3
В форме, созданной в упражнении 7.8, измените элемент <SELECT> таким образом, чтобы список фруктов отображался в виде выпадающего списка. Установите значение, выбранное из списка по умолчанию - «Яблоки» (рис. 7.9).
Вопросы для повторения
1. Для чего при создании web-страничек используют формы?
2. С помощью какого тэга задают форму?
3. Какие элементы могут находиться на форме?
Контрольное задание
Создайте форму, согласно образцу.
Глава 8. Каскадные таблицы стилей
Используя тот или иной тэг из стандартного набора, мы задаем стандартный (определенный по умолчанию) внешний вид абзацу, символам, рисунку и т.д. Если же мы хотим получить иной вид, то нужно использовать дополнительные тэги.
Например, чтобы создать абзац с полужирным начертанием, красного цвета и с подчеркиванием, нужно использовать 3 тэга - <FONT>, <B> и <U>:
<P><font color="red"><B><U>Абзац с красным полужирным подчеркнутым шрифтом </U></B></FONT></P>
Если подобный стиль нужно использовать не один, не два, а десятки раз, то использование такого набора тэгов становится нерациональным и неудобным для разработчика.
Решается такая проблема с помощью CSS (Cascading Style Sheets - каскадные таблицы стилей). CSS позволяют задать шаблон стиля и применять его в дальнейшем.
Использование каскадных таблиц стилей имеют ряд преимуществ:
1. CSS предоставляет гораздо больший объем параметров форматирования объектов HTML Подробный перечень параметров, доступных при использовании CSS смотрите в Приложении 3 в разделе «Приложения» данного пособия..
2. Используя CSS, зачастую можно легко сократить размер исходного HTML-документа.
3. CSS позволяет "настраивать" такие объекты HTML, как таблицы, списки, гиперссылки и т.д.
Первые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны старые.
Способы задания CSS.
Существует 3 способа задания стилей, применение каждого из которых обусловлено конкретной задачей.
1 способ - cтрочный (внутренние таблицы стилей - Inline Style Sheets) - стили вставляются прямо в описание тэгов HTML с помощью специального параметра style.
<ТЭГ style="описание стиля">текст</ТЭГ>
Этот способ обычно используется, если стиль нужно применить единожды к конкретному тэгу и требуется использование параметров, доступных только через CSS.
Упражнение 8.1
Создайте HTML-документ inline.html, содержащий абзац с разреженным шрифтом и таблицу с жирной верхней границей (см. рис. 8.1).
Для этого:
· Во-первых, без использования CSS здесь не обойтись, потому что разреженный интервал невозможно создать стандартными средствами HTML, следовательно, прибегнем к использованию CSS. Создаем стиль у тэга <P>:
<P style="letter-spacing:12">Разреженный текст в абзаце задан с помощью CSS</P>
Аналогично создаем стиль у тэга <TABLE> (параметры, доступные без CSS описывает вне «style»):
<TABLE style="border-top-width:10px; border-color:blue;" border=1 cellspacing=0 cellpadding=0 bordercolor=blue >
· Во-вторых, будем использовать строчный способ задания CSS, т.к. стиль у каждого элемента (абзац и таблица) нужно применить единожды.
В данном примере описаны 2 стиля: стиль абзаца и стиль таблицы. При описании каждого стиля использовались стандартные и новые атрибуты.
Например, letter-spacing задает разреженность текста, border-top-width - толщину верхней границы, а border-color - цвет границы таблицы.
Примечание. Если в описании стиля используются несколько атрибутов, то они должны быть перечислены через «;».
2 способ - вложенный (глобальные таблицы стилей - Global Style Sheets): стили описываются все в одном месте между тегами <STYLE> и </STYLE> (обычно этот раздел размещается в разделе <HEAD> </HEAD>).
<STYLE>
тег1 {описание стиля}
тег2 {описание стиля}
...
тег{описание стиля}
</STYLE>
Используя этот способ, мы переназначаем форматирование тэгов. Этот способ обычно применяется, если стиль тэга в документе используется несколько раз. Тогда описав стиль один раз в разделе <STYLE>, при указании тэга в тексте уже не нужно стиль описывать повторно.
Упражнение 8.2
Создайте HTML-документ seti.html по образцу (рис. 8.2). Названия классификаций заданы тэгом <P>, перечисления - элементы маркированного списка (тэг <LI>).
Элементы имеют следующие параметры форматирования:
|
Тэг <P> |
межсимвольный интервал - 10 пикселей, начертание - полужирное, размер шрифта - 20 пикселей |
|
|
Тэг <LI> |
Начертание - нежирный курсив, размер шрифта - 18 пикселей |
Для этого:
· Так как в числе описанных параметров встречаются нестандартные, то опять же прибегнем к использованию CSS.
· При описании стиле будем использовать вложенный способ, так как в тексте примера один и тот же стиль будет применяться несколько раз.
· Описываем стили в разделе <STYLE> </STYLE>:
P {letter-spacing:10px;font-style:normal;font-weight:bold;font-size:20px;}
LI {font-style:italic; font-size:18px;font-weight:none;}
· Теперь создаем текст HTML-документа, указывая нужные тэги (стили описывать не нужно).
3 способ - Внешний (связанные таблицы стилей - Linked Style Sheets): отличается от предыдущего тем, что описания стилей помещаются не в разделе <STYLE>, а вносятся в отдельный тестовый файл с расширением *.css (например, style.css). Если мы хотим использовать описанные стили на страничке, мы должны включить ссылку на этот файл в наш html-документ между тэгами <head> и </head> с помощью тэга <LINK>.
<LINK rel=stylesheet type=text/css href=”имя файла с описанными стилями”>
Такой способ используется, если описанные стили используются не в одном документе, а сразу в нескольких - мы просто вставляем ссылку на файл с описаниями стилей в каждый HTML-документ.
Упражнение 8.3
Создайте HTML-документ inform.html (рис. 8.3). Оба HTML-документа - seti.html и inform.html должны использовать одни и те же параметры форматирования, описанные в упражнении 8.2.
Для этого:
· Будем использовать внешний способ задания стилей, так как у нас имеются две странички, использующие один и тот же набор параметров форматирования.
· Создайте файл style.css.
· Переместите описание стилей из HTML-документа seti.html в css-файл. Сохраните изменения.
· В обоих HTML-документах в разделе <HEAD> </HEAD> добавьте ссылку на созданный css-файл с описанными стилями.
<link rel=stylesheet type=text/css href=”style.css”>
Задание 8.1
Создайте html-документ по образцу (рис. 8.4), используя наиболее подходящий способ задания стиля:
Примечание. Для задания границы слева используйте таблицу. Цвета выберите на Ваше усмотрение.
Задание 8.2
Создайте html-документ по образцу (см. рис .8.5), используя подходящий способ задания стилей.
Примечание. При выполнении упражнения используйте следующие параметры форматирования:
|
стиль |
параметры форматирования |
|
|
Заголовок |
выравнивание: по центру; Courier New, полужирный, 18 пт, цвет красный |
|
|
Подзаголовок |
нумерованный список, цвет шрифта - зеленый, межсимвольный интервал - разреженный на 5пт, начертание - жирный |
|
|
Текст абзацев |
шрифт Verdana, размер шрифта - 11пт |
|
|
Выделяемые слова внутри абзацев |
подчеркнутый курсив, цвет синий |
Задание 8.3
Создайте еще один HTML-документ, отформатированный в том же стиле, что и в задании 8.2. При форматировании используйте подходящий способ задания стилей.
Классы.
Итак, используя шаблоны стилей можно настраивать тэги по своему усмотрению. Благодаря стилям тэг приобретает новые параметры форматирования.
Но иногда требуется использование нескольких вариантов отображения одного и того же элемента в HTML-документе. Например, несколько абзацев (тэг <P>) имеют вид, отличающийся от других.
Спецификация HTML позволяет использовать для одного и того же элемента несколько стилевых правил, интерпретируемых браузером последовательно, каскадом.
Для этого используются классы стилей (вложенные каскады). Каждое новое отображение тэга представляется новым классом с уникальным именем, которое начинается с точки:
P.zagolovok {text-align: center; font-weight: bold; font-size:16px;},
В данном примере задан класс zagolovok, который описывает набор параметров форматирования тэга <P>: выравнивание, полужирное начертание, размер шрифта 16 px.
Если задается несколько классов одного тэга, принадлежность класса определенному тэгу определяется в первом описании, а в последующих описаниях тэга можно не указывать. Например,
P {text-align: center; font-weight: bold; font-size:16px;}
.text {text-align: left; font-weight: normal; font-size: 12px;}
.right {text-align:right}
Способы задания классов
Существует 2 способа задания классов:
1. внутренний - в разделе <style></style>
2. внешний - в отдельном файле с расширением .css
Применение класса в HTML-документе осуществляется с помощью параметра class. Например,
<P class=zagolovok>
Можно задать универсальный класс - класс, который можно применять не к одному, к нескольким тэг гам. Этот класс описывается самым первым или после описания классов тэга <BODY>, и при его задании тэг не указывается. Например,
.left {text-align: left}
Созданный в примере класс left можно будет применить к тэгу <P>, <td>, <Hх> и другим тэгам, где этот параметр форматирования применим.
Упражнение 8.4.
Работа по созданию и применению классов.
Создайте HTML-документ class.html (см. рис. 8.6). Для форматирования текста создайте 2 класса тэга <P> с различными параметрами форматирования.
Для этого:
· Введите текст странички.
· В разделе <STYLE></STYLE> создайте 2 класса у тэга <P>: heading - для заголовков и text - для основного текста.
P .heading {font-family:Arial; background:yellow; font-weight:bold}
.text {font-family:Times New Roman; padding-left:130}
Задание 8.4
Создайте HTML-документ по образцу (см. рис. 8.7), задав классы у тэга <FONT> для выделения элементов окна и пунктов меню.
Позиционирование элементов HTML
Все элементы языка разметки HTML выводятся в той последовательности, в какой размещены тэговые конструкции. С помощью средств CSS можно прибегнуть к позиционированию необходимых объектов в пределах web_странички. Позиционирование - это пространственное размещение элементов HTML-документа.
Существует два типа визуального позиционирования элементов:
· абсолютное;
· относительное.
Позиционирование элемента задается с помощью CSS через параметр style, где параметры перечисляются через точку с запятой:
<ЭЛЕМЕНТ style=”параметры позиционирования”>
В параметры позиционирования входит:
1. Параметры размещения элемента:
· position - устанавливает, каким образом вычисляется положение слоя на странице. Возможные значения:
- absolute -- координаты позиции элемента будут вычисляться от верхнего левого угла странички;
- relative -- координаты будут вычисляться от верхнего левого угла родительского элемента, т.е. элемента, в котором находится позиционируемый элемент;
- static -- элемент всегда будет находиться в зафиксированной месте окна браузера при прокручивании странички.
· top - устанавливает вертикальную координату элемента (в пикселях: px, в процентах: % - от ширины родительского элемента);
· left - устанавливает горизонтальную координату элемента (в пикселях: px, в процентах:% - относительно ширины родительского элемента);
· width - устанавливает ширину элемента (в пикселях: px, в процентах: % - от ширины родительского элемента);
· height - устанавливает высоту элемента (в пикселях: px, в процентах: % -- от ширины родительского элемента).
2. Параметры «видимости» элемента:
· visibility -- устанавливает, будет ли виден элемент. Возможные значения:
- visible -- слой будет виден;
- hidden -- слой не будет виден.
· z-index -- указывает, в каком порядке слои будут перекрываться. Слои с бульшим z-index будут перекрывать слои с меньшим z-index. Возможны любые значения, включая отрицательные. В случае отрицательных значений элементы данного слоя будут закрыты обычным текстом; с положительным значением -- будут лежать «перед» обычным текстом, перекрывая его. По умолчанию z-index=0.
Упражнение 8.5
Создайте HTML-документ position.html, содержащий абзац «Позиционирование в HTML» с тенью (рис. 8.8).
Для этого:
· Создайте в HTML-документе абзац с заданным текстом. Отформатируйте его: измените цвет текста, шрифт, размер шрифта.
· Для создания тени используйте копию абзаца, но со смещением. Для этого у тэга <P> через CSS задайте координаты размещения второго абзаца:
<P style="position:absolute;top:20px;left:20px;”>
· Посмотрите страничку в окне браузера.
· Чтобы «тень» была на втором плане задайте z-index у «тени» меньший, чем у основного текста (у которого z-index по умолчанию равен нулю). Например, -1.
<P style="position:absolute;top:20px;left:20px; z-index:-1”>
Слои
Обычно в позиционировании используют слои.
Слой - это объект HTML-документа, который объединяет несколько элементов, расположенных на HTML-документе (таблицы, текст, картинки) в одну группу.
Использование слоев позволяет управлять группой элементов в целом, в том числе и позиционировать. Слои делают web_страницу компактной, динамичной, неожиданной и неотразимо привлекательной.
Слой задается тэгами <DIV> и </DIV>:
<DIV>элементы слоя</DIV>
Таким образом, чтобы сгруппировать несколько элементов в слой, нужно поместить их между тэгами <DIV> и </DIV>.
Упражнение 8.6
Создайте HTML-документ sloi.html (рис. 8.9). При позиционировании
используйте слои.
Для этого:
· Создайте три слоя: для слова «HTML», слова «Учебник» и основного текста.
· Разместите слои в HTML-документе, используя позиционирование через CSS (параметры размещения каждого слоя определите сами):
<DIV style=”position:absolute; top=…; left:…”>'элементы слоя</DIV>
· Определите порядок расположения слоев, задав у каждого слоя z-index.
· Просмотрите результат в окне браузера.
Вопросы для повторения
1. Каковы преимущества использования стилей в HTML?
2. Назовите и опишите способы задания стилей, когда рекомендуется тот или иной способ?
3. Что такое классы? Когда необходимо задавать классы?
4. Назовите и опишите способы задания классов.
5. Что такое позиционирование? Возможно ли работа с позиционированием без CSS?
6. Дайте понятие слоя, для чего используются слои?
Контрольное задание
Создайте HTML-документ по образцу, используя классы, слои и позиционирование.
Проектное задание
Разработка сайта «Моя личная страничка».
Примерное техническое задание на разработку сайта «Моя личная страничка»
I. Описание сайта
Сайт относится к категории «личная страничка». На сайте размещена информация о владельце сайта: его биография, увлечения, фотографии и т.д.
II. Структура сайта
Посетитель сайта вначале попадает на главную (титульную) страницу, затем по ссылке переходит на второстепенную страницу (макеты титульной и второстепенной страниц см. п.III «Макеты страниц»). Второстепенная страница имеет фреймовую структуру, состоящую из 4-х фреймов: левый фрейм - меню_список всех разделов сайта, верхний фрейм - бегущая строка, нижний фрейм - ссылка на адрес электронной почты автора странички, центральный фрейм - содержание изменяется в зависимости от выбранного раздела в меню.
Сайт включает в себя следующие разделы:
1. «Биография»: краткая биография о себе, сопровождаемая фотографиями разных лет.
2. «Моя семья»: небольшой рассказ о членах семьи, сопровождаемый фотографиями.
3. «Мои друзья»: фотографии друзей и подписи к ним.
4. «Мои увлечения»: перечисление увлечений и краткий рассказ об одном из них.
5. «Анкета»: форма, предлагающая внести личную информацию посетителя и пожелания по сайту.
III. Макеты страниц
Образец главной страницы (index.html):
Образец второстепенной страницы (main.html).
IV. Форматирование сайта
1. Страницы всех разделов оформлены в едином стиле: одинаковое форматирование основного текста, заголовков разделов, текста ссылок, используется один фоновый рисунок на страницах всех разделов.
2. Текст главной страницы сайта расположен по центру по горизонтали и по вертикали.
3. Меню выровнено по центру по вертикали.
Примечания по выполнению проектного задания
1. Используйте интересное поведение бегущей строки. Например, достигнув края фрейма, она меняет свое направление на противоположное.
2. Используйте альтернативный текст у фотографий и рисунков.
3. При перечислении увлечений используйте список.
4. Параметры форматирования, используемые на всех страничках, опишите в файле style.css.
5. На сайте должны быть задействованы все изученные параметры форматирования текста.
6. В разделе «Мои друзья» фотографии разместите в несколько рядов (используйте таблицу). При этом на страничке разместите только уменьшенные фотографии, которые являются ссылками на большие фотографии, открывающиеся в новом окне.
Библиографический список
1. CSS - Cascading Style Sheets // Internet: http://londomalary.chat.ru/css2.html
2. HTML // Internet: http://web-script.narod.ru/articles/HTML/HTML.html
3. HTML для начинающих// Internet: http://www.wsa.ru/enc/web/html/ok/lesson0.htm
4. М. Браун, Д. Ханикатт HTML в подлиннике: электронный учебник.
5. Спецификация HTML 4.01 (W3C Recommendation 24 December 1999) HTML 4.01 Specification. - Internet: http://www.w3.org/TR/1999/REC-html401-19991224
6. Учебник HTML // Internet:
http://excellentweb.amillo.net/index.php?page=html/index.php
7. Учебник HTML// Internet: http://srez.ru/index.php?n=teach/html/index
Приложение 1. Web-палитра цветов
|
Цвет |
Имя цвета |
Значение |
|
|
Аквамарине |
Aquamarine |
#7FFFD4 |
|
|
Античный белый |
Antiquewhite |
#FAEBD7 |
|
|
Бежевый |
Beige |
#F5F5DC |
|
|
Белый |
White |
#FFFFFF |
|
|
Белый дымчатый |
Whitesmoke |
#F5F5F5 |
|
|
Бирюзовый |
Turquoise |
#40E0D0 |
|
|
Бисквитный |
Bisque |
#FFE4C4 |
|
|
Бледно красно-фиолетовый |
Palevioletred |
#DB7093 |
|
|
Бледно розово-лиловый |
Lavenderblush |
#FFF0F5 |
|
|
Бледно-бирюзовый |
Paleturquoise |
#AFEEEE |
|
|
Бледно-зеленый |
Palegreen |
#98FB98 |
|
|
Бледно-золотой |
Palegoldenrod |
#EEE8AA |
|
|
Бледно-лиловый |
Lavender |
#E6E6FA |
|
|
Блекло серо-голубой |
Cadetblue |
#5F9EA0 |
|
|
Блекло-голубой |
Aliceblue |
#F0F8FF |
|
|
Болотный |
Moccasin |
#FFF4B5 |
|
|
Васильковый |
Cornflowerblue |
#6495ED |
|
|
Весенний зеленый |
Springgreen |
#00FF7F |
|
|
Голубовато-стальной |
Steelblue |
#4682B4 |
|
|
Голубой |
Blue |
#0000FF |
|
|
Грязно-серый |
Navajowhite |
#FFDEAD |
|
|
Дыни |
Papyawhip |
#FFEFD5 |
|
|
Желтовато-коричневый |
Tan |
#D2B48C |
|
|
Желто-зеленый |
Yellowgreen |
#9ACD32 |
|
|
Желтый |
Yellow |
#FFFF00 |
|
|
Зеленовато-известковый |
Limegreen |
#32CD32 |
|
|
Зелено-желтый |
Greenyellow |
#ADFF2F |
|
|
Зеленый |
Green |
#008000 |
|
|
Зеленый травы |
Lawngreen |
#7CFC00 |
|
|
Золотой |
Gold |
#FFD700 |
|
|
Индиго |
Indigo |
#4B0082 |
|
|
Коралловый |
Coral |
#FF7F50 |
|
|
Коричневый |
Brown |
#A52A2A |
|
|
Коричневый |
Peru |
#CD853F |
|
|
Королевский голубой |
Royalblue |
#4169E1 |
|
|
Красного золота |
Goldenron |
#DAA520 |
|
|
Красно-оранжевый |
Orangered |
#FF4500 |
|
|
Красный |
Red |
#FF0000 |
|
|
Лазурь |
Azure |
#F0FFFF |
|
|
Лесной зелени |
Forestgreen |
#228B22 |
|
|
Лимонный |
Lemonchiffon |
#FFFACD |
|
|
Льняной |
Linen |
#FAF0E6 |
|
|
Малиновый |
Crimson |
#DC143C |
|
|
Морской волны |
Seagreen |
#2E8B57 |
|
|
Морской пены |
Deashell |
#FFF5EE |
|
|
Мятно-кремовый |
Mintcream |
#F5FFFA |
|
|
Небесно-голубой |
Skyblue |
#87CEEB |
|
|
Ночной синий |
Midnightblue |
#191970 |
|
|
Огнеупорного кирпича |
Firebrick |
#B22222 |
|
|
Оливковый |
Olive |
#808000 |
|
|
Оранжево-розовый |
Maroon |
#800000 |
|
|
Оранжево-розовый |
Salmon |
#FA8072 |
|
|
Оранжевый |
Orange |
#FFA500 |
|
|
Орхидейный |
Orchid |
#DA70D6 |
|
|
Охра |
Sienna |
#A0522D |
|
|
Персиковый |
Peachpuff |
#FFDAB9 |
|
|
Пурпурный |
Purple |
#800080 |
|
|
Пшеничный |
Wheat |
#F5DEB3 |
|
|
Розово-коричневый |
Rosybrown |
#BC8F8F |
|
|
Розовый |
Pink |
#FFC0CB |
|
|
Рыже-коричневый |
Sandybrown |
#F4A460 |
|
|
Свежего меда |
Honewdue |
#F0FFF0 |
|
|
Светло-голубой |
Lightbkue |
#ADD8E6 |
|
|
Светло-желтый |
Lightyellow |
#FFFFED |
|
|
Светло-зеленый |
Lightgreen |
#90EE90 |
|
|
Светло-коралловый |
Lightcoral |
#F08080 |
|
|
Светло-кремовый |
Blanchedalmont |
#FFEBCD |
|
|
Светло-розовый |
Lightpink |
#FFB6C1 |
|
|
Светло-серый |
Lightgray |
#D3D3D3 |
|
|
Светло-стальной |
Lightsteelblue |
#B0C4DE |
|
|
Светло-фиолетовый |
Blueviolet |
#8A2BE2 |
|
|
Светло-циановый |
Lightcyan |
#E0FFFF |
|
|
Светлый красно-золотистый |
Lightgoldenrodyellow |
#FAFAD2 |
|
|
Светлый морской-волны |
Lightseagreen |
#20B2AA |
|
|
Светлый небесно-синий |
Lightskyblue |
#87CEFA |
|
|
Светлый оранжево-розовый |
Lightsalmon |
#FFA07A |
|
|
Светлый серо-фиолетовый |
Gainsboro |
#DCDCDC |
|
|
Светлый синевато-серый |
Lightslategray |
#778899 |
|
|
Серебристый |
Silver |
#C0C0C0 |
|
|
Серовато-синий |
Slateblue |
#6A5ACD |
|
|
Серый |
Gray |
#BEBEBE |
|
|
Синевато-серый |
Slategray |
#708090 |
|
|
Синий |
Aque |
#00FFFF |
|
|
Сливовый |
Plum |
#DDA0DD |
|
|
Слоновой кости |
Ivory |
#FFFFF0 |
|
|
Снежный |
Snow |
#FFFAFA |
|
|
Старого дерева |
Burlywood |
#DEB887 |
|
|
Старого коньяка |
Oldlace |
#FDF5E6 |
|
|
Старой кожи |
Saddlebrown |
#8B4513 |
|
|
Темно красно-синий |
Darkgoldenron |
#B8860B |
|
|
Темно-бирюзовый |
Darkturquoise |
#00CED1 |
|
|
Темно-голубой |
Darkblue |
#00008B |
|
|
Темно-зеленый |
Cornsilk |
#FFF8DC |
|
|
Темно-зеленый |
Darkgreen |
#006400 |
|
|
Темно-красный |
Darkred |
#8B0000 |
|
|
Темно-оливковый |
Darkolivegreen |
#556B2F |
|
|
Темно-оранжево-розовый |
Darksalmon |
#E9967A |
|
|
Темно-оранжевый |
Darkorange |
#FF8C00 |
|
|
Темно-орхидейный |
Darkorchid |
#9932CC |
|
|
Темно-розовый |
Deeppink |
#FF1493 |
|
|
Темно-серый |
Darkgrey |
#A9A9A9 |
|
|
Темно-синий |
Navy |
#000080 |
|
|
Темно-фиолетовый |
Darkviolet |
#9400D3 |
|
|
Темный морской волны |
Darkseagreen |
#8FBC8F |
|
|
Темный небесно-синий |
Deepskyblue |
#00BFFF |
|
|
Темный серовато-синий |
Darkslategrey |
#483D8B |
|
|
Темный синевато-серый |
Darkslategray |
#2F4F4F |
|
|
Темный фуксин |
Darkmagenta |
#8B008B |
|
|
Темный хаки |
Darkkhaki |
#BDB76B |
|
|
Темный циан |
Darkcyan |
#008B8B |
|
|
Томатный |
Tomato |
#FF347 |
|
|
Туманно-белый |
Ghostwhite |
#F8F8FF |
|
|
Туманно-голубой |
Powderblue |
#B0E0E6 |
|
|
Туманно-розовый |
Mistyrose |
#FFF4E1 |
|
|
Тускло-васильковый |
Dodgerblue |
#1E90FF |
|
|
Тускло-коричневый |
Olivedrab |
#6B8E23 |
|
|
Тускло-серый |
Dimgray |
#696969 |
|
|
Умеренно-аквамариновый |
Mediumaquamarine |
#66CDAA |
|
|
Умеренно-бирюзовый |
Mediumturquoise |
#48D1CC |
|
|
Умеренно-голубой |
Mediumblue |
#0000CD |
|
|
Умеренно-орхидейный |
Mediumorchid |
#BA55D3 |
|
|
Умеренно-пурпурный |
Mediumpurple |
#9370DB |
|
|
Умеренный красно-фиолетовый |
Mediumvioletred |
#C71585 |
|
|
Умеренный морской волны |
Mediumseagreen |
#3CB371 |
|
|
Умеренный серовато-синий |
Mediumslateblue |
#7B68EE |
|
|
Умеренный синевато-серый |
Mediumspringgreen |
#00FA9A |
|
|
Фиолетовый |
Violet |
#EE82EE |
|
|
Фисташковый |
Chartreuse |
#7FFF00 |
|
|
Фуксин |
Magenta |
#FF00FF |
|
|
Фуксия |
Fuchsia |
#FF00FF |
|
|
Фуксия |
Fuchsia |
#FF00FF |
|
|
Хаки |
Khaki |
#F0D58C |
|
|
Цвет извести |
Lime |
#00FF00 |
|
|
Цветочно-белый |
Floralwhite |
#FFFAF0 |
|
|
Циан |
Cyan |
#00FFFF |
|
|
Чайный |
Teal |
#008080 |
|
|
Черный |
Black |
#000000 |
|
|
Чертополоха |
Thistle |
#D8BFD8 |
|
|
Шоколадный |
Chocolate |
#D2691E |
|
|
Ярко-красный |
Indianred |
#CD5C5C |
|
|
Ярко-розовый |
Hotpink |
#FF69B4 |
Приложение 2. Таблица замены специальных символов
В спецификации HTML указано большое количество спецсимволов, но только некоторые из них используются. Наиболее часто используемые спецсимволы приведены в этой таблице.
При замене символов, указанных в первом столбце, можно использовать имя, указанное во третьем столбце либо код, указанный в четвертом столбце.
|
символ |
описание |
имя |
код |
|
|
пробелы и тире |
||||
|
|
неразрывный пробел |
|
  |
|
|
? |
узкий пробел (еn-шириной в букву N) |
  |
  |
|
|
? |
широкий пробел (em-шириной в букву M) |
  |
  |
|
|
- |
узкое тире (en-тире) |
– |
– |
|
|
-- |
широкое тире (em -тире) |
— |
— |
|
|
- |
мягкий перенос |
­ |
­ |
|
|
кавычки |
||||
|
? |
штрих (минуты, футы) |
′ |
′ |
|
|
? |
двоиной штрих (секунды, дюймы) |
″ |
″ |
|
|
" |
прямая кавычка |
" |
" |
|
|
“ |
кавычка-лапка левая |
“ |
“ |
|
|
” |
кавычка-лапка правая верхняя |
” |
” |
|
|
„ |
кавычка-лапка правая нижняя |
„ |
„ |
|
|
« |
кавычка-елочка открывающая |
« |
« |
|
|
» |
кавычка-елочка закрывающая |
» |
» |
|
|
‹ |
одинарная угловая кавычка открывающая |
‹ |
‹ |
|
|
› |
одинарная угловая кавычка закрывающая |
› |
› |
|
|
` |
левая верхняя одинарная кавычка |
‘ |
‘ |
|
|
' |
правая верхняя одинарная кавычка |
’ |
’ |
|
|
‚ |
правая нижняя одинарная кавычка |
‚ |
‚ |
|
|
знаки валют |
||||
|
ў |
знак цента |
¢ |
¢ |
|
|
Ј |
знак фунта |
£ |
£ |
|
|
€ |
знак евро |
€ |
€ |
|
|
Ґ |
знак йены и юаня |
¥ |
¥ |
|
|
¤ |
знак валюты |
¤ |
¤ |
|
|
ѓ |
знак флорина |
ƒ |
ƒ |
|
|
прочие символы |
||||
|
§ |
параграф |
§ |
§ |
|
|
° |
градус |
° |
° |
|
|
… |
многоточие |
… |
… |
|
|
© |
копирайт |
© |
© |
|
|
® |
знак зарегистрированной торговой марки |
® |
® |
|
|
™ |
знак торговой марки |
™ |
™ |
|
|
µ |
знак микро |
µ |
µ |
|
|
‰ |
тысячная доля |
‰ |
‰ |
|
|
& |
амперсант |
& |
& |
|
|
? |
надчеркивание |
‾ |
‾ |
|
|
ґ |
знак ударения |
´ |
´ |
|
|
¦ |
вертикальный пунктир |
¦ |
¦ |
|
|
¶ |
знак абзаца |
¶ |
¶ |
|
|
Ў |
перевернутый восклицательный знак |
¡ |
¡ |
|
|
ї |
перевернутый вопросительный знак |
¿ |
¿ |
|
|
маркеры |
||||
|
* |
простой маркер |
• |
• |
|
|
· |
средняя точка |
· |
· |
|
|
† |
крестик |
† |
† |
|
|
‡ |
двойной крестик |
‡ |
‡ |
|
|
¦ |
пики |
♠ |
♠ |
|
|
¦ |
трефы |
♣ |
♣ |
|
|
¦ |
червы |
♥ |
♥ |
|
|
¦ |
бубны |
♦ |
♦ |
|
|
? |
ромб |
◊ |
◊ |
|
|
стрелки |
||||
|
< |
стрелка влево |
← |
← |
|
|
^ |
стрелка вверх |
↑ |
↑ |
|
|
> |
стрелка вправо |
→ |
→ |
|
|
v |
стрелка вниз |
↓ |
↓ |
|
|
- |
стрелка влево и вправо |
↔ |
↔ |
|
|
знаки арифметических и математических операций |
||||
|
Ч |
знак умножения |
× |
× |
|
|
ч |
знак деления |
÷ |
÷ |
|
|
? |
дробная черта |
⁄ |
⁄ |
|
|
? |
знак минус |
− |
− |
|
|
< |
знак меньше |
&il; |
< |
|
|
> |
знак больше |
> |
> |
|
|
? |
меньше или равно |
≤ |
≤ |
|
|
? |
больше или равно |
≥ |
≥ |
|
|
? |
приблизительно равно (асимптотически равно) |
≈ |
≈ |
|
|
? |
не равно |
≠ |
≠ |
|
|
? |
совпадает с |
≡ |
≡ |
|
|
± |
плюс-минус |
± |
± |
|
|
ј |
одна четвёртая |
¼ |
¼ |
|
|
Ѕ |
одна вторая |
½ |
½ |
|
|
ѕ |
три четверти |
¾ |
¾ |
|
|
№ |
единица в верхнем индексе |
¹ |
¹ |
|
|
І |
два в верхнем индексе (квадрат) |
² |
² |
|
|
і |
три в верхнем индексе (куб) |
³ |
³ |
|
|
v |
квадратный корень (радикал) |
√ |
√ |
|
|
? |
знак бесконечность |
∞ |
∞ |
|
|
? |
знак суммирования |
∑ |
∑ |
|
|
? |
знак произведения |
∏ |
∏ |
|
|
? |
частичный дифференциал |
∂ |
∂ |
|
|
? |
интеграл |
∫ |
∫ |
|
|
ѓ |
знак функции |
ƒ |
ƒ |
|
|
буквы латинского алфавита |
||||
|
ж |
латинские строчные буквы ae |
æ |
æ |
|
|
р |
латинские строчные символы eth |
ð |
ð |
|
|
И |
заглавная тета |
Θ |
Θ |
|
|
У |
заглавная сигма |
Σ |
Σ |
|
|
Щ |
заглавная омега |
Ω |
Ω |
|
|
б |
строчная альфа |
α |
α |
|
|
в |
строчная бета |
β |
β |
|
|
г |
строчная гамма |
γ |
γ |
|
|
д |
строчная дельта |
δ |
δ |
|
|
е |
строчная эпсилон |
ε |
ε |
|
|
ж |
строчная дзета |
ζ |
ζ |
|
|
з |
строчная эта |
η |
η |
|
|
и |
строчная тета |
θ |
θ |
|
|
й |
строчная иота |
ι |
ι |
|
|
к |
строчная каппа |
κ |
κ |
|
|
л |
строчная лямбда |
λ |
λ |
|
|
м |
строчная мю |
μ |
μ |
|
|
н |
строчная ню |
ν |
ν |
|
|
о |
строчная кси |
ξ |
... |
Подобные документы
Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Суть и составные части Web технологии, ее базовые элементы. Стандартный язык, предназначенный для создания гипертекстовых документов: HyperText Markup Language (HTML). HTML-тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.
реферат [19,4 K], добавлен 01.04.2010Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010Термин HTML (HiperText Markup Language) и его реализация. Программы просмотра страниц написанных на зыке манипулирования гипертекстами. Характеристика специальных программ – браузеров: Google Chrome, Opera, Mozilla Firefox. Структура HTML-страницы.
контрольная работа [118,8 K], добавлен 05.04.2015Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Значение атрибута TITLE тега HTML-документа. Возможности HTML для разработчиков Web-страниц. Параметры тега
, регулирующие отступы вокруг изображения. Оформление комментариев в CSS. Теги логического форматирования текста (phrase elements).
тест [19,9 K], добавлен 11.10.2012История возникновения интернета. Первый интернет-браузер, способный отображать не только текст, но графику, разработанный группой студентов из штата Иллинойс. Тим Бернерс-Ли - разработчик языка гипертекстовой разметки HTML (HyperText Markup Language).
презентация [423,5 K], добавлен 14.11.2013История Hyper Text Markup Language, таблицы стилей, уровни Cascading Style Sheets. Описание средств разработки шаблона. Верстка элементов шаблона и создание стилей. Требования к качеству html-верстки и тестирование сайта. Листинг html и css-кода.
курсовая работа [237,5 K], добавлен 28.12.2014Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.
методичка [1,9 M], добавлен 06.07.2011Цели, задачи и компоненты информационной технологии управления. Разработка структуры сайта и программный код работы в HTML–редакторе: создание титульной страницы, документа с фреймами, связь информационных документов с помощью гипертекстовых ссылок.
курсовая работа [34,3 K], добавлен 11.08.2011Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
контрольная работа [29,4 K], добавлен 12.09.2010История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Создание Web-документов (от простейших статических до документов на основе динамического HTML): форматирование текста, создание списков, таблиц, встраивание различных объектов, использование средств интерактивного общения с пользователем.
методичка [45,5 K], добавлен 27.10.2010Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Разработки британского учёного Тима Бернерсом-Ли. HTML как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Структура HTML-документов и основные теги на языке HTML.
курсовая работа [820,3 K], добавлен 03.03.2011Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.
контрольная работа [16,0 K], добавлен 19.06.2014Понятие и функциональные особенности фреймов, внутренняя структура и атрибуты. Мультимедийные возможности HTML, их исследование и оценка эффективности. Формы в соответствующих документах, их назначение, классификация и типы, нестандартное использование.
контрольная работа [130,2 K], добавлен 09.08.2014Java Script как язык управления сценарием отображения документа. Отличие world wide web от остальных инструментов для работы с Internet. Использование каскадных таблиц стилей в рамках разработки спецификации HTML. Элементы программы Netscape Navigator.
контрольная работа [1,1 M], добавлен 02.12.2009Знакомство с основными принципами построения Web-сайтов. Рассмотрение этапов создания простой страницы HTML. Анализ способов форматирования сайтов. Общая характеристика видов списков: маркированные, нумерованные. Особенности таблиц каскадных стилей.
курсовая работа [2,5 M], добавлен 18.07.2014
