- •Лабораторная работа №1 Язык гипертекстовой разметки html
- •Основные понятия
- •Структура html документа
- •Блочные и инлайновые элементы
- •Основные теги Тег html
- •Тег head
- •Тег body
- •Параметры
- •Атрибут background
- •Параметр border
- •Параметр rules
- •Параметры
- •Задание к лабораторной работе:
- •Каждый отчет должен содержать:
Лабораторная работа №1 Язык гипертекстовой разметки html
Цель работы: ознакомиться с основными тегами и атрибутами языкаHTML, структурой документа, получить практические навыки создания веб-страниц.
Основные понятия
Веб-страница— гипертекстовый ресурс, обычно написанный на языке HTML.
Обычно файл Веб-страницы имеет расширение .htmlили.htm.
Структура html документа
Любой HTML-файл состоит из трех разделов — элемента <!DOCTYPE>, заголовка (<head>) и тела документа (<body>).
Пример 1. Простейший HTML-документ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
</head>
<body>
<!-- А здесь надо размещать все, что хочется увидеть на странице. -->
</body>
</html>
Блочные и инлайновые элементы
Блочные элементыотображаются в виде прямоугольников, выстраивающихся друг под другом и, обычно, занимают всю доступную область по ширине. Типичным примером блочного элемента является абзацp или простой тегdiv.
Инлайновые элементыотображаются в общем потоке текста и имеют минимальные размеры, которые допускает их содержание. Примерами инлайновых элементов являются тегиb, i, a, span.
В отличнии от блочных элементов, инлайновые не имеют жестких линейных размеров, не могут иметь границы, а также внутренних и внешних отступов. То есть конструкция типа <b style="border: 1 solid red">не приведет к появлению границы у элемента. При этом инлайновые элементы складываются на странице построчно, и если очередной инлайновый элемент не помещается в остаток строки, то его контент частично переносится на следующую строку. Блочные элементы складываются "в столбик".
Основные теги Тег html
Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование.
Тег head
Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.
Тег body
Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера body. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Вставка изображений
Тег <img> предназначен для отображения на веб-странице изображений в графическом формате gif, jpeg или png. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>
Разметка текста
br- устанавливает перевод строки в месте, где этот тег встречается.
div- является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
h1...h6- HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег H1 представляет собой наиболее важный заголовок первого уровня, а тег H6 служит для обозначения заголовка шестого уровня и является наименее значительным.
hr- рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера.
marquee- создает бегущую строку на странице. На самом деле содержимое контейнераmarqueeне ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д.
p- определяет текстовый параграф. Тегpявляется блочным элементом, перед ним всегда добавляется пустая строка, параграфы текста идущие друг за другом разделяются между собой вертикальным промежутком.
pre - определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами.
span - предназначен для определения встроенных элементов документа.
Форматирование текста
b- устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
big- увеличивает размер шрифта на единицу по сравнению с обычным текстом.
blockquote- предназначен для выделения длинных цитат внутри документа. Текст отображается как выровненный блок с отступами слева и справа, а также с отбивкой сверху и снизу.
code- предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Сюда относятся имена переменных, ключевые слова, тексты функции и т.д.
em- предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
font- представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитуры. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
i- устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
small- уменьшает размер шрифта на единицу по сравнению с обычным текстом.
strike- отображает текст как перечеркнутый. Этот тег аналогичен тегу S, который имеет сокращенную форму записи.
strong- предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
sub- отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
sup- отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
Списки
dd - входит в тройку элементовdl, dt, dd, предназначенных для создания списка определений.
dl - входит в тройку элементовdl, dt, dd,предназначенных для создания списка определений.
dt - входит в тройку элементовdl, dt, dd,предназначенных для создания списка определений.
li- определяет отдельный элемент списка. Внешний тегul илиol устанавливает тип списка — маркированный или нумерованный.
ol - определяет нумерованный список. Каждый элемент списка должен начинаться с тегаli.
ul - определяет маркированный список. Каждый элемент списка должен начинаться с тегаli.
Ссылки
a- является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметровidили href тегaустанавливает ссылку или якорь.
Таблицы
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов<tr> и<td>.Внутри<table>допустимо использовать следующие элементы:<caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и<tr>.