![]() Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ: ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву ![]() Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Тема 1. 1 структура HTML – документа
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> <meta charset="UTF-8"> </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.
Таким образом, строка text ="#008000" и строка text ="green" в теге body одинаково определяют цвет шрифта – зеленый. Основные правила синтаксиса HTML: - HTML – документ обязательно должен начинаться с DOCTYPE; - Все теги и атрибуты должны записываться строчными буквами; - Любые значения атрибутов необходимо заключать в кавычки; - Все парные теги должны иметь закрывающий тег; - Каждый тег должен быть корректно вложен в другой; - Сокращенные атрибуты (без значения) запрещены; - Для обозначения цели в тегах a, frame, iframe, img, map вместо атрибута name необходимо использовать атрибут id. Элементы группировки Элемент div служит для структуризации контента на веб – странице. Он создает блок, который по умолчанию растягивается по всей ширине браузера, а следующий после div элемент переносится на новую строку: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Документ HTML5</title> </head> <body> <div>Заголовок документа HTML5</div> <div>Текст документа HTML5</div> </body> </html> Параграфы Параграфы создаются с помощью тегов < p > и </ p >, которые заключают некоторое содержимое. Каждый параграф располагается на новой строке. Если в рамках одного параграфа надо выполнить перевод текста на другую строку, используется элемент < br >. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Документ HTML5</title> </head> <body> <div>Заголовок документа HTML5</div> <div> <p>Первый параграф</p> <p>Второй параграф</p> </div> </body> </html> Элемент pre Выводит предварительно отформатированный текст так, как он определен. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Документ HTML5</title> </head> <body> <pre> Первая строка Вторая строка Третья строка </pre> </body> </html> Элемент span Обтекает некоторый текст по всей его длине и служит для стилизации заключенного в него текстового содержимого. В отличии от блоков div и p, span не переносит содержимое на следующую строку. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Последнее изменение этой страницы: 2021-04-05; просмотров: 118; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.117.192.121 (0.021 с.) |