Лабораторная работа №3 Введение в HTML(XHTML). Структура HTML-документа. Элементы разметки. Цель
Изучить структуру документа HTML. Ознакомиться с элементами разметки. Закрепить полученные знания на практике.
Быстрый старт
Пример 1.1. Первая веб-страница
Заголовок страницы
Основной текст.
Тело документа предназначено для размещения тегов и содержательной части веб-страницы.
Важно!
Весь текст, который Вы хотите отобразить должен находиться внутри тегов! Иными словами, весь текст должен быть размечен. Кроме того, все (парные) теги должны быть закрыты - этого требует овременный стандарт.
Почти все теги имеют открывающую и закрывающую части, т.е. являются двойными:
<имя-элемента>Содержимое элемента
Важно!
Важно всегда соблюдать вложенность элементов и не допускать их пересечения.
<элемент-1><элемент-2> - неверно
<элемент-1><элемент-2> - верно
Параграфы
Параграфы вводятся тэгом:
текст
Параграфы могут быть центрированы:
текст
Текст в них можно выровнять по левому краю:
текст
или правому краю документа:
текст
атак же по обоим краям документа:
текст
Делается это, как Вы уже успели заметить с помощью атрибута "align".
Подробнее мы будем изучать атрибуты в Лабораторной работе №2
Заголовки в HTML
В html для создания заголовков используются тэги: , , , , , .
- имеет самый крупный шрифт, - поменьше, - еще меньше, и, наконец, - самый мелкий.
Заголовки также можно выравнивать с помощью атрибута "align", например,
- выравнивание по левому краю
- выравнивание по правому краю
- выравнивание по центру
- выравнивание по ширине
Важно!
Попробуйте создать свою WEB-страницу с помощью блокнота и поработать с тегами
и и атрибутом "align". Однако, атрибут "align" считается устаревшим и не рекомендуется к использованию. Центрирование осуществляется с помощью отступов marging таблиц CSS или иными методами, о которых будет сказано позже.
Списки в HTML
В HTML используются упорядоченные, неупорядоченные списки и списки определений.
Неупорядоченные списки (маркированные)
Неупорядоченный список — это перечень элементов. Элементы списка обозначаются буллетами (обычно черные закрашенные кружочки - диски).
Неупорядоченный список начинается с тега . Каждый элемент списка начинается с тега .
- Во-первых
Элемент списка-->
- Во-вторых
Элемент списка-->
- В-третьих
Элемент списка-->
В списке непременно должен присутствовать закрывающий тег , иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.
Кстати, В приведенном выше примере Вы впервые встретились с комментарием: Элемент списка--> - это комментарй, он заключается в тег ...--> и на странице браузера не отображается.
Упорядоченные списки (нумерованные)
Упорядоченный список — это тоже перечень элементов. Элементы списка обозначаются числами.
Упорядоченный список начинается с тега
. Каждый элемент списка начинается с тега
- Январь
- Февраль
- Март
Если не указывать никаких дополнительных атрибутов и просто написать тег
, то по умолчанию применяется список с арабскими числами (1, 2, 3,...), как показано в примере выше.
Список определений
Список определений — это не просто список элементов. Это список элементов с описанием каждого элемента.
Список определений начинается с тега
. Каждый элемент списка определений начинается с тега . Каждое описание элемента списка начинается с тега .
- Термин 1
- Определение 1
- Термин 2
- Определение 2
Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д.
Таблицы Создание таблицы
Всем известно, что таблица состоит из строк и столбцов. В HTML столбцы представляют из себя ячейки, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег . Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов (table row) и | (table data). Таблица должна содержать хотя бы одну ячейку (рис. 1.4). Допускается вместо тега | использовать тег | (table header). Текст в ячейке, оформленной с помощью тега | , отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги | и | нет.
Пример создания таблицы
<--! Основной атрибут таблицы border говорит о том,
что нужно нарисовать рамку толщиной 1 пксель-->
Ячейка 1 | <--! Эти ячейки оформлены как заголовок-->
Ячейка 2 |
|---|
Ячейка 3 | <--! Эти ячейки оформлены обычно-->
Ячейка 4 |
атрибут background="fon.gif", рисунком fon.gif будет залито все окно браузера.
Задавая фоновый рисунок документа, не забывайте указывать также атрибут bgcolor="цвет фона". Это нужно в том случае, если у пользователя может отключена загрузка изображений и Вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр фоbgcolor.
Встраивание изображений
ВHTML изображения вставляются с помощью тега ![]() .
Тег ![]() — одиночный, что означает, что он содержит только атрибуты и не имеет закрывающего тега.
Синтаксис тега ![]()
URL указывает на адрес ресурса, где хранится изображение, например:
Браузер вставляет изображение в то место, где встречается тег ![]() .
Атрибуты тега ![]()
Основные атрибуты изображения показаны в таблице. Также для этого тега доступны универсальные атрибуты.
|
|
Атрибут
|
Описание
|
align
|
задает выравнивание рисунка и способ обтекания текстом
bottom — нижняя граница картинки выравнивается по окружающему тексту (по умолчанию)
left — по левому краю окна. Текст обтекает справа
middle — центр картинки по базовой линии текущей строки
right — по правому краю окна. Текст обтекает слева
top — верх картинки выравнивается по самому высокому элементу строки
Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
| |
|
alt
|
альтернативный текст
| |
|
border
|
толщина рамки
Не проходит валидацию XHTML 1.0 Scrict, XHTML 1.1, HTML 4.01 Strict
| |
|
height/width
|
задает высоту/ ширину рисунка
| |
|
src
|
URL графического файла, отображаемого на странице
| |
|
hspace/vspace
|
Горизонтальный/ вертикальный отступ от изображения до окружающего контента.
|
Атрибут alt
Атрибут alt используется для вставки альтернативного текста для изображения.
Этот текст определяется автором страницы:
Значение атрибута alt отображается вместо изображения, если браузер не может отобразить его. Вставка атрибута alt является стандаром, потому что он помогает узнать пользователям текстовых браузеров, какие изображения вставлены в страницу.
Размеры изображений
Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно Вам понадобиться изменить (чаще уменьшить) размер исходной картинки.
Для этого у тега ![]() существуют атрибуты width - ширина и height - высота. Они задаются в пикселах в процентах (процент от ширины экрана) или в других единицах. Размеры графического изображения желательно всегда указывать явно.
При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению.
Отделение изображения от текста
vspace и hspace - соответственно вертикальный и горизонтальный отступы от внешней границы вокруг изображения. Отступы задаются в пикселах.
Рамка вокруг изображения
Атрибут border тега ![]() позволяет заключить изображение в рамку, цвет которой совпадает с цветом текста на странице, а толщина задается в пикселях. По умолчанию рамка отсутствует.
Размещение изображения на странице
Если вы вставите изображение между двух параграфов, тогда браузер отобразит первый параграф, затем изображение и после него второй параграф.
Для того, чтобы наши изображения выглядели так, как нам хочется их надо выровнять. И поможет нам в этом атрибут align.
Рисунок по центру
Код
|
Результат
|
...
Paragraph 1
Paragraph 2
...
|
|
Обтекание рисунка текстом
Код
|
Результат
|
 Paragraph ... bla-bla-bla
Header
left Content
Main Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum
Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien.
Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.
Donec nec libero.
Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque ornare risus quis ligula Phasellus tristique
purus a augue condimentum adipiscing. Aenean sagittis.
Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
Footer
| | |
Скачать 0.96 Mb.