50816

Язык гипертекстовой разметки HTML

Лабораторная работа

Информатика, кибернетика и программирование

На самом деле содержимое контейнера mrquee не ограничивается строками и позволяет перемещать скролировать любые элементы вебстраницы изображения текст таблицы элементы форм и т. Таблицы Элемент tble служит контейнером для элементов определяющих содержимое таблицы. Параметры lign Определяет выравнивание таблицы. bgcolor Цвет фона таблицы.

Русский

2014-01-31

85.5 KB

13 чел.

Лабораторная работа №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>.

Параметры

align - Определяет выравнивание таблицы.

background - Задает фоновый рисунок в таблице.

bgcolor - Цвет фона таблицы.

border - Толщина рамки в пикселах.

bordercolor - Цвет рамки.

cellpadding - Отступ от рамки до содержимого ячейки.

cellspacing - Расстояние между ячейками.

cols - Число колонок в таблице.

height - Высота таблицы.

width - Ширина таблицы.

Атрибут background

Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате gif, но они отвлекают внимание читателей.

Параметр border

Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <table>, то вид рамки меняется в зависимости от браузера. Когда в теге <table> используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.

Параметр bordercolor

Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <table> создают однотонную линию.

Параметр cellpadding

Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

Параметр cellspacing

Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет.

Параметр cols

Параметр cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого параметра таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование параметра cols позволяет несколько ускорить отображение содержимого таблицы.

Параметр frame

Сообщает браузеру, где отображать границы вокруг таблицы. Толщина границы указывается с помощью параметра border.

Возможные значения:

void - Не отрисовывать границы.

border - Граница вокруг таблицы.

above - Граница по верхнему краю таблицы.

below - Граница снизу таблицы.

hsides - Добавить только горизонтальные границы (сверху и снизу таблицы).

vsides - Рисовать только вертикальные границы (слева и справа от таблицы).

rhs - Граница только на правой стороне таблицы.

lhs - Граница только на левой стороне таблицы.

Параметр rules

Сообщает браузеру, где отображать границы между ячейками. Толщина границы и ее цвет указывается с помощью параметров border и bordercolor. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку.

Возможные значения:

all - Линия рисуется вокруг каждой ячейки таблицы.

groups - Линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>.

cols - Линия отображается между колонками.

none - Все границы скрываются.

rows - Граница рисуется между строками таблицы, созданных через тег <tr>.

Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.

Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.

Параметры

align - Определяет выравнивание содержимого ячеек по горизонтали.

bgcolor - Цвет фона ячеек.

bordercolor - Цвет рамки.

valign - Выравнивание содержимого ячеек по вертикали.

Тег <td> Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

Параметры

align - Определяет выравнивание содержимого ячейки по горизонтали.

background - Задает фоновый рисунок в ячейке.

bgcolor - Цвет фона ячейки.

bordercolor - Цвет рамки.

colspan - Объединяет горизонтальные ячейки.

height - Высота ячейки.

nowrap - Запрещает перенос строк.

rowspan - Объединяет вертикальные ячейки.

valign - Выравнивание содержимого ячейки по вертикали.

width - Ширина ячейки.

Параметр colspan

Устанавливает число ячеек, которые должны быть объединены по горизонтали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк.

Параметр nowrap

Добавление параметра nowrap к тегу <td> заставляет текст внутри ячейки отображаться без переносов, одной сплошной строкой. Неправильное использование этого атрибута может привести к тому, что таблица будет слишком широкой и не поместится целиком на веб-страницу. Как следствие, появится горизонтальная полоса прокрутки. В любом случае, пользоваться подобной таблицей будет неудобно, из-за чего применение параметра nowrap осуждается в спецификации HTML 4.

Параметр rowspan

Устанавливает число ячеек, которые должны быть объединены по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк.

 Элемент <tbody> предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.

Допускается применять несколько тегов <tbody> внутри контейнера <table>. Доступны и другие виды группировок строк — <tfoot> и <thead>, ни один из них не должен перекрываться с элементом <tbody>.

Элемент <thead> предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента <thead> в пределах одной таблицы, и он должен идти в исходном коде сразу после тега <table>.

Элемент <tfoot> предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег <tfoot> в исходном коде должен быть определен до тега <tbody>, браузеры отображают его в самом низу таблицы.

В пределах таблицы разрешается использовать только один элемент <tfoot>.

Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

Тег <colgroup> предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся параметров, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <colgroup> можно использовать в комбинации с тегом <col>, который определяет характеристики одной или нескольких колонок.

Обычно закрывающий тег не требуется, но если <colgroup> выступает как контейнер для элементов <col>, тогда следует добавить тег </colgroup> в конце группы.

Разница между свойствами тегов <colgroup> и <col> не очень велика и состоит в следующем. <colgroup> позволяет объединять колонки в определенные группы, также при добавлении параметра rules="groups" к тегу <table> браузер будет рисовать линию только между колонками, созданными с помощью <colgroup>. В остальных случаях поведение колонок назначенных через элементы <colgroup> и <col> идентично.

Тег <col> задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег <col> можно использовать совместно с тегом <colgroup>, который задает группу колонок, обладающих общими параметрами.

Пример простой странички:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Пример страницы</title>                 

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />  

</head>

<body>

<div width="300px" border="1">Блочный элемент</div>

<span><font color="orange">линейный элемент</font></span>

 <h2>Заголовок 2-го уровня</h2>

<!-- список -->

<ul>

 <li>Первый элемент списка</li>

 <li>Второй элемент списка</li>  

 </ul>      

<a href="ya.ru">ссылка</a>

<span>здесь <sup>верхний</sup> элемент а здесь <sub>нижний</sub></span>   

<img src="img1.jpg" />

</body>

</html>


Задание к лабораторной работе:

  1.  Создать web-сайт, который должен представлять собой несколько связанных между собой страниц на произвольную тематику. При создании структуры страницы использовать таблицы (табличная вёрстка).
  2.  Страницы должны содержать шапку с логотипом в виде картинки, меню (горизонтальное или вертикальное), основной контент.
  3.  Страницы должны включать в себя вставки рисунков, гипертекстовые ссылки, нумерованные и маркированные списки, заголовки, абзацы, отформатированный текст, фоновые рисунки, текст различного цвета. Должны иметься не менее трех взаимосвязанных страниц, содержащих объекты различного рода.
  4.  Связь между страницами должна осуществляться при помощи разнообразных ссылок, включая графические.
  5.  Предусмотреть различные значения атрибутов тегов как внутри одной страницы, так и в других документах.
  6.  Страницы должны иметь расширения *.html либо *.htm.
  7.  Страницы должны быть кросс-браузерными, возможны небольшие различия.

Каждый отчет должен содержать:

  1.  Заголовок лабораторной работы (название и цель работы).
  2.  Фамилия, инициалы и группа студента.
  3.  Задание к лабораторной работе.
  4.  Краткие теоретические сведения.
  5.  Описание алгоритмов, функций, примененных решений.
  6.  Экранные формы разработанных страниц.
  7.  Основные тексты страниц.
  8.  Выводы о проделанной работе.


 

А также другие работы, которые могут Вас заинтересовать

3344. Маятник Максвелла 537 KB
  Цель работы. На примере маятника Максвелла познакомиться с вычислением и экспериментальным измерением момента инерции цилиндрического твердого тела относительно оси симметрии. Оборудование. Маятник Максвелла. Темы для изучения. В лаборат...
3345. Сборник лабораторных по физике 730 KB
  Определение момента инерции тела при помощи крутильных колебаний Целью работы является определение момента инерции диска путем сравнения периода его крутильных колебаний с периодом колебаний системы, состоящей из этого же диска и кольца. ОПИСАНИЕ УС...
3346. Физика среды и ограждающих конструкций 167.29 KB
  Физика среды и ограждающих конструкций К ограждающим конструкциям относятся элементы зданий и сооружений, ограничивающие некоторое пространство для создания в нем заданного режима эксплуатации. К ограждающим конструкциям жилых и общественных зданий...
3347. Магнитное поле и его характеристики 673 KB
  Магнитное поле и его характеристики План лекции: Магнитное поле. Индукция и напряженность магнитного поля. Магнитный поток. Теорема Гаусса для магнитного потока. Закон Био-Савара-Лапласа и его применение для расчета магнитных полей. Теорема о циркул...
3348. Краткий курс физики 430 KB
  Методические указания содержат рабочую программу разделов «Классическая механика» и «Молекулярная физика и термодинамика» дисциплины «Физика» и краткое теоретическое изложение основных вопросов этих разделов. Приведены определения физических величин...
3349. Распределения Максвелла и Больцмана. Явления переноса 377.5 KB
  Распределения Максвелла и Больцмана. Явления переноса План лекции: Закон Максвелла о распределении молекул по скоростям. Характерные скорости молекул. Распределение Больцмана. Средняя длина свободного пробега молекул. Явления...
3350. Действие магнитного поля на проводники с током и движущиеся электрические заряды 496 KB
  Действие магнитного поля на проводники с током и движущиеся электрические заряды  Закон Ампера. Взаимодействие параллельных токов. Контур с током в магнитном поле. Работа перемещения проводника с током в магнитном поле. Сила Лоренца...
3351. Методические указания к лабораторным работам по механике 408.5 KB
  В методических указаниях приведены основные теоретические сведения и практические рекомендации по выполнению лабораторных работ по механике. Законы сохранения в механике. Изучение центрального столкновения шаров Цель работы: изучение законов уп...
3352. Исследование электростатического поля 196 KB
  Исследование электростатического поля Изучение электростатического поля; экспериментальное построение эквипотенциальных линий (эквипотенциалей) и линий напряженности; вычисление напряженности поля. Теоретические основы работы Как известно, взаимодей...