Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Тема 1. 1 структура HTML – документа

⇐ ПредыдущаяСтр 2 из 14Следующая ⇒

HTML (Hyper Text Markup Language) – язык гипертекстовой разметки документов, который отвечает за структуру сайта. С помощью HTML текстовый документ разбивают на блоки смысловой информации (заголовки, параграфы, таблицы, рисунки и т.п.).

Гипертекстовый документ – это документ, содержащий переходы (гиперссылки) на другие документы. При использовании гиперссылки происходит перемещение от одного документа к другому.

Создать HTML документ можно в любом текстовом редакторе Notepad++, Sublime Text, Brackets и другие. Главный HTML – документ принято называть index.html.

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

Дескриптор HTML – это чаще всего два тега (открывающий и закрывающий) и часть документа между ними.

Тег – в переводе с английского – ярлык, этикетка. Тег определяет тип выводимого элемента HTML (например, заголовок, таблица, рисунок и т.п.). Сам тег не отображается браузером. Тег представляет собой последовательность элементов, заключенные в угловые скобки (< и >). Символ / используется для обозначения закрывающегося тега.

Атрибуты – необязательный набор параметров, определяющих дополнительные свойства элемента HTML (например, цвет или размер).

Пример элемента HTML:

<h1 align= "center"> Глава 1</h1>

В этом примере:

<h1 align= "center"> – открывающий тег

</h1> – закрывающий тег

h1 – имя тега

align= "center" – атрибут

align – имя атрибута

"center" – значение атрибута

Глава 1 – содержание элемента HTML

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

Последняя версия языка считается HTML5.

Для создания документа HTML5 нужно в первую очередь прописать два элемента: doctype и html.

Doctype – указывает на версию документа (html5), а элемент html между своими открывающим и закрывающим тегами содержит весь документ. Внутри элемента html размещаются два других элемента:

Head – содержит метаданные веб – страницы- заголовок веб – страницы, тип кодировки, ссылки на внешние ресурсы – стили, скрипты, если они используются;

Body – определяет содержимое html – страницы.

Базовая структура HTML – документа будет выглядеть следующим образом:

<!DOCTYPE HTML>

<html>

<head>

<title>Заголовок</title>

</head>

<body>

<div>Документ HTML5</div>

</body>

</html>

В элементе head определено два элемента:

- title - представляет заголовок страницы;

- meta - определяет метаинформацию страницы. Для корректного отображения символов русского алфавита предпочтительно указывать кодировку utf-8.

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

Поскольку выбрана кодировка utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Также необходимо чтобы сам текст документа соответствовал выбранной кодировке, для этого в различных текстовых редакторах есть соответствующие настройки для установки кодировки. Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM. Сохраняется HTML – документ с расширением *.html.

В разделе документа body располагается та информация, которая отображается в окне браузера. Данный тег имеет ряд атрибутов, определяющих внешний вид документа. Ниже приводится спецификация тега <BODY>.

< body

text ="цвет текста"

bgcolor ="цвет фона"

background ="адрес фонового рисунка"

link ="цвет непосещенной гиперссылки"

vlink ="цвет посещенной гиперссылки"

alink ="цвет активной гиперссылки">

- Атрибут text задает цвет шрифта для всего документа в формате RGB или в символьной нотации;

- Атрибут bgcolor задает цвет фона окна браузера документа в формате RGB или в символьной нотации;

- Атрибут background позволяет указать адрес и имя рисунка, используемого в качестве фона. Этот рисунок будет размножен и распределен на заднем плане документа;

- Атрибуты link, vlink и alink задают цвета гиперссылок в формате RGB или в символьной нотации.

Пример использования фонового рисунка:

Задание цвета на Web - страницах

Для определения цвета различных элементов HTML-документа необходимо указать значение соответствующих атрибутов. Указывать значения этих атрибутов можно двумя способами:

- определять цвет в формате RGB;

- определять цвет, используя символьную нотацию

Формат RGB – это система указания цвета, которая базируется на смешении трех основных цветов: красном (RED), зеленом (GREEN) и синем (BLUE). Итоговый цвет определяется цифрами в шестнадцатеричном коде. Для каждого цвета задается шестнадцатеричное значение в пределах от 0 до FF, что соответствует диапазону 0-255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, число #800080 обозначает фиолетовый цвет. Указывая цвет в формате RGB, можно определить более шестнадцати миллионов цветовых оттенков.

Задание цвета в формате RGB имеет один недостаток – необходимо помнить совокупности цифр для указания цвета. Этого недостатка лишена символьная нотация. Можно указывать название цвета на английском языке. Но у этого способа указания цвета тоже есть недостаток – определено всего шестнадцать имен цветов.

Ниже приведена таблица соответствий указания цвета в символьной нотации и формате RGB.

Символьная нотация	Формат RGB	Цвет
Black	#000000	Черный
Silver	#C0C0C0	Серебро
Gray	#808080	Серый
White	#FFFFFF	Белый
Maroon	#800000	Темно-бордовый
Red	#FF0000	Красный
Purple	#800080	Фиолетовый
Fuchsia	#FF00FF	Розовый
Green	#008000	Зеленый
Lime	#00FF00	Известь
Olive	#808000	Оливковый
Yellow	#FFFF00	Лимонный
Navy	#000080	Темно-синий
Blue	#0000FF	Синий
Teal	#008080	Темно-бирюзовый
Aqua	#00FFFF	Бирюзовый

Таким образом, строка text ="#008000" и строка text ="green" в теге body одинаково определяют цвет шрифта – зеленый.

Основные правила синтаксиса HTML:

- HTML – документ обязательно должен начинаться с DOCTYPE;

- Все теги и атрибуты должны записываться строчными буквами;

- Любые значения атрибутов необходимо заключать в кавычки;

- Все парные теги должны иметь закрывающий тег;

- Каждый тег должен быть корректно вложен в другой;

- Сокращенные атрибуты (без значения) запрещены;

- Для обозначения цели в тегах a, frame, iframe, img, map вместо атрибута name необходимо использовать атрибут id.

Элементы группировки

Элемент div служит для структуризации контента на веб – странице. Он создает блок, который по умолчанию растягивается по всей ширине браузера, а следующий после div элемент переносится на новую строку:

<!DOCTYPE html>

<html>

<head>

<title>Документ HTML5</title>

</head>

<body>

<div>Заголовок документа HTML5</div>

<div>Текст документа HTML5</div>

</body>

</html>

Параграфы

Параграфы создаются с помощью тегов < p > и </ p >, которые заключают некоторое содержимое. Каждый параграф располагается на новой строке. Если в рамках одного параграфа надо выполнить перевод текста на другую строку, используется элемент < br >.

<!DOCTYPE html>

<html>

<head>

<title>Документ HTML5</title>

</head>

<body>

<div>Заголовок документа HTML5</div>

<div>

<p>Первый параграф</p>

<p>Второй параграф</p>

</div>

</body>

</html>

Элемент pre

Выводит предварительно отформатированный текст так, как он определен.

<!DOCTYPE html>

<html>

<head>

<title>Документ HTML5</title>

</head>

<body>

<pre>

Первая строка

Вторая строка

Третья строка

</pre>

</body>

</html>

Элемент span

Обтекает некоторый текст по всей его длине и служит для стилизации заключенного в него текстового содержимого. В отличии от блоков div и p, span не переносит содержимое на следующую строку.

<!DOCTYPE html>

<html>

<head>

<title>Документ HTML5</title>

</head>

<body>

<div>Заголовок документа HTML5</div>

<div>

<p><span style="color:red;">Первый</span> параграф</p>

<p><span>Второй</span> параграф</p>

</div>

</body>

</html>

Сам по себе элемент span ничего не делает. Во втором параграфе он никак не повлиял на внутреннее текстовое содержимое. А в первом параграфе элемент содержит атрибут стиля style =" color: red;", который устанавливает для вложенного текста красный цвет.

Div и p – являются блочными элементами. Div может содержать любые элементы, p – только строчные элементы. Элемент span – является строчным, но встраивает свое содержимое во внешний контейнер – в div или p. При этом нельзя помещать блочные элементы в строчный элемент span.

⇐ Предыдущая 123 4 5 6 7 8 9 10 Следующая ⇒

Читайте также:

Формы дистанционного обучения

Передача мяча двумя руками снизу

Значение правильной осанки для жизнедеятельности человека

Основные ошибки при выполнении передач мяча на месте

Последнее изменение этой страницы: 2021-04-05; просмотров: 112; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.217.220.114 (0.033 с.)