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.  Выводы о проделанной работе.


 

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

36476. Древняя Персия 27 KB
  За помощь в осуществлении контроля над обществом им предоставлялась наибольшая политическая самостоятельность Частный интерес работает на общественный Внешняя политика Восточное побережье Эгейского моря Греция – колонии господство над торговлей в средиземном море Внешняя политика обусловлена экономической структурой: цель – экономически важные регионы.
36477. Древние Шумеры 30.5 KB
  долина рек Тигр и Ефрат Неблагоприятные условия сухой климат мало полезных ископаемых Тростник и рыба – самые доступные ресурсы Население сосредоточено в предморье и не углублялось во влажные равнины Увеличение численности населения перенаселение Технологии Сельскохозяйственные культуры ячмень эммера Одомашнен ряд животных быки овцы козы свиньи и ослы Примитивные технологии обработки меди Колесо Первые постройки из сырого глиняного кирпича Шумеры пытаются вести с х на новых землях строят системы очищения почвы....
36478. Понятия «цивилизация». Подходы к толкованию термина. Цивилизационная теория 93.5 KB
  Понятия цивилизация впервые употребил Виктор Мирабо в 1757 году в значении общего уровня культурного развития. Среди деятелей просвещения цивилизация ассоциировалась с концепцией прогресса стала идеалом интеллектуального и социального развития человечества. Отсюда ясно что цивилизация носила отрицательный оттенок.
36479. Структура цивилизация, ее основные элементы 73 KB
  технологический способ производства: орудия труда источники энергии предметы труда природные ресурсы технологии организация производства в плане технологий экономический способ производства структура воспроизводства обмен распределение экономическое управление социальнополитические отношения: социальные отношения национальные отношения политические отношения государственные отношения правовые духовный мир: наука культура образование мораль идеология или религия Все элементы цивилизационной...
36480. Динамика развития цивилизации, этапы ее развития на историческом примере 46.5 KB
  В истории человечества выделяют следующие глобальные цивилизации: неолитическую раннеклассовую античную средневековую индустриальную и наконец постиндустриальную цивилизации. Условия формирования античной цивилизации. Безусловно их наследие оказало определенное влияние на становление античной цивилизации тем не менее античный период в истории человечества дал рождение совершенно новым экономическим политическим и духовным институтам.
36481. Переходный период (смена цивилизаций): основные этапы и итоги 35 KB
  Механизм смены цивилизации Основные причины: внутренние противоречия в которых центральное место занимают потребности человека. Для производства материальных и духовных благ цивилизации приходится привлекать новые ресурсы средства труда источники энергии реализовывать новые экономические и политические схемы подавлять социальные конфликты и предлагать новый духовный продукт. Попытки удовлетворения потребностей нарушают сложившийся в цивилизации баланс и она не может удовлетворить потребности всех. Духовный мир чутко реагирует на эти...
36482. Переходный этап в развитии цивилизации на историческом примере перехода от раннеклассовой к античной 27.5 KB
  Переход между цивилизациями происходит в четыре этапа: латентный этап обвального хаоса патовая ситуация завершающий этап. На первом этапе происходит падение эффективности старого общества: возникают социальные противоречия разногласия между управленцами и исполнителями экономической функции и непрерывные войны которые с одной стороны истощали материальные ресурсы а с другой обогащали правящую элиту. Происходит возращение к родоплеменному типу отношений формирование общинного строя предполагающего управление общества вождем советом...
36483. Основные особенности и достижения неолитической цивилизации 32 KB
  Начало неолитической цивилизации связывают с неолитической революцией. Достижения неолитической цивилизации: Возникла первая форма собственности общинная собственность на землю; Появляется объекты собственности сельскохозяйственные земли пастбища охотничьи и рыболовные угодья; Возникает частная собственность при необходимости – защита частной собственности; Формирование первых политических институтов крупные межобщинные объединения; Духовный мир выходит на новый уровень возрастает уровень познания окружающего мира;...
36484. Основные особенности и достижения раннеклассовой цивилизации 32.5 KB
  Если в неолитическую эпоху основные изменения были связаны с технологиями то для раннеклассовой цивилизации характеры значительные изменения в экономическом способе производства и социальнополитические отношения. Происходит городская революция создания центров локальной цивилизации в сети крупных городов. Города не только служили центрами ремесла но и позволяли сконцентрировать материальные и духовные ресурсы цивилизации для ее развития.