- •«Мурманский государственный технический университет»
- •Методические указания к лабораторным работам Основы создания Web-документа Мурманск
- •Введение
- •Лабораторная работа №1 Основы html
- •Раздел 1. Структура документа
- •Раздел 2. Обязательные метки
- •Раздел 3. Непарные метки
- •Раздел 4. Форматирование шрифта
- •Раздел 5. Списки
- •5.4. Вложенные списки
- •Лабораторная работа №2 Создание гиперссылок, работа с изображениями
- •Раздел 1. Гиперссылки
- •1.1. Локальные ссылки
- •1.2. Ссылки на ресурсы
- •Раздел 2. Цветовая гамма html-документа
- •Раздел 3. Бегущая строка Задание. Бегущая строка
- •Раздел 4. Изображения в html-документе
- •4.1. Обтекание графики текстом в документе html
- •4.2. Выравнивание текста html-страницы
- •4.3. Пустая область вокруг изображения html-страницы
- •4.4. Списки с графическими маркерами html-страницы
- •4.5. Задание размеров изображения html-документа
- •Лабораторная работа №3 Работа с таблицами.
- •Раздел 1. Создание таблиц
- •1.1. Фон таблицы
- •1.2. Задание высоты и ширины ячеек
- •1.3. Задание выравнивния в ячейке. Объединение ячеек
- •Раздел 2. Вложенные таблицы
- •Раздел 3. Границы таблицы.
- •Лабораторная работа №4 Работа с формами
- •Раздел 1. Форма.
- •Тип элемента radio
- •Тип элемента checkbox
- •Тип элемента text
- •Тип элемента password
- •Тип элемента reset
- •Тип элемента submit
- •Тип элемента image
- •Элемент select
- •Элемент textarea
- •Лабораторная работа №5
- •Раздел 1. Работа с фреймами
- •Задания для самостоятельного выполнения:
- •Раздел 3. Зарезервированные имена фреймов
- •Лабораторная работа №6 Работа с картой изображений
- •Раздел 1. Карта-изображение
- •1.1. Основные теги для создания карты
- •Лабораторная работа №7 Заголовок html-документа
- •Раздел 1. Заголовок html-документа
- •Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. Цвет и фон
- •Раздел 1. Способы применения правила css к Html-документу
- •Метод 1: Инлайн/In-line (атрибут style)
- •Метод 2: Внутренний (тэг style)
- •Метод 3: Внешний (ссылка на таблицу стилей)
- •Раздел 2. Цвет и фон
- •2.1. Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Лабораторная работа №9 Шрифты. Ссылки
- •Раздел 1. Свойства шрифтов
- •Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Сокращенная запись font
- •Раздел 2. Текст
- •Свойство text-indent
- •Раздел 3. Ссылки
- •Лабораторная работа№10 Идентификация и группирование элементов (class и id) Группирование элементов (span и div)
- •Раздел 1. Группирование элементов с помощью class
- •Раздел 2. Идентификация элемента с помощью id
- •Лабораторная работа№11 Боксовая модель
- •Раздел 1. Боксовая модель
- •Заполнение элемента
- •Установка ширины блока[width]
- •Установка высоты блока[height]
- •Размещение элементов на странице
- •Всплывающие элементы (поплавки)
- •Свойство float
- •Свойство clear
- •Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Раздел 3. Работа со слоями
- •Рекомендуемая литература
4.3. Пустая область вокруг изображения html-страницы
Графические изображения в Вэб-браузере имеют, по умолчанию, пустую рамку в несколько пикселей, которая отделяет их от текста. Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга <IMG>.
Текст, отделенный от графики лучше усваивается, а пустая область между соседними изображениями предотвращает толкование их в виде единого целого.
Атрибут HSPACE задает ширину чистой области СЛЕВА И СПРАВА от изображения.
Атрибут VSPACE задает ширину чистой области СВЕРХУ И СНИЗУ от изображения.
Задание 2.8
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>
Пример 2_8
</title>
</head>
<body>
<p><img src="птичка.jpg" align="left" hspace="20" vspace="20">Чародейкою зимою околдован лес стоит<br>
И под снежной бахромою, <br>
Неподвижной и немою,<br>
Чудной жизнью он блестит<br></p>
</body>
</html>
Сохраните документ с именем пример2_8.htm, откройте в браузере.
4.4. Списки с графическими маркерами html-страницы
С помощью маленьких изображений можно строить списки. Такие списки с графическими маркерами заметно оживляют внешний вид страницы. Размеры изображений должны соответствовать параметрам форматирования текста.
Чтобы воспользоваться графическими маркерами, надо применить атрибут ALIGN, присвоив ему одно из значений - top, middle, bottom, позволяющих соответствующим образом выровнять строку текста элемента списка по вертикали относительно границ маркера.
Улучшить внешний вид данных посредством задания ширины чистой полосы, отделяющей маркер от текста элемента списка, поможет атрибут HSPACE.
Задание 2.9
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>
Пример 2_9
</title>
</head>
<body>
<ul>
<br><img src="english.gif" align="middle" hspace="5">Глава 1
<br><img src="english.gif" align="top">Глава 2
<br><img src="english.gif" align="middle" hspace="15">Глава 3
</ul></body>
</html>
Сохраните документ с именем пример2_9.htm, откройте в браузере.
Уберите атрибут hspace и снова просмотрите документ
4.5. Задание размеров изображения html-документа
Задание размеров графического изображения явно (с помощью атрибутов WIDTH, HEIGHT) позволяет браузеру загружать картинку с большей скоростью, т.к. он не тратит время на дополнительные вычисления.
Чтобы задать размер изображения, его, понятное дело, надо знать. Узнать размер можно, практически, в любом графическом редакторе. Если вы пользуетесь хорошим html-редактором, то он автоматически вставляет размер изображения в текст страницы при выборе соответствующего графического файла.
Еще одним существенным плюсом задания размеров "вручную" есть тот факт, что пользователи, отключившие в своих браузерах средства обработки графики, увидят ваше творение именно в том виде, в каком оно замышлялось, поскольку область Вэб-страницы, предусматривающие размещение в них графических изображений определенных размеров, останутся в неприкосновенности.
Задавая явно размеры изображения можно увеличить его размеры. Таким образом можно получить большое изображение не увеличивая объем графического файла и времени, требуемого для его загрузки. Задавая размеры изображения, указывайте нужные значения в пикселях или процентах относительно текущих габаритов окна браузера. Следует заметить, что не следует злоупотреблять увеличением размеров, т.к. в этом случае картинка становится "зернистой" и теряет свое качество.
Если значение новых размеров задавать в пикселях, надо использовать оба атрибута WIDTH, HEIGHT. Чтобы избежать искажений, необходимо соблюдать пропорцию. Если же значения вводятся в процентах относительно размеров окна браузера, достаточно задать любое значение (ширину или высоту), - остальное браузер пересчитает автоматически.
Аналогичным способом можно уменьшать изображения. Однако здесь существует немаловажный недостаток. Время, необходимое для загрузки картинки остается то же. Т.е. картинка грузится своего "настоящего" размера, просто она "вжимается" в те рамки, которые вы явно указываете атрибутами WIDTH, HEIGHT. Таким образом, чтобы уменьшить размеры изображения, надо воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint. После завершения редактирования рекомендую сохранить внесенные изменения в новом файле. Таким образом, вы всегда сможете воспользоваться исходным изображением.
Задание 2.10
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>
Пример 2_10
</title>
</head>
<body>
<img src="фрукт.jpg" width="50" height="41">
<br>
<img src="фрукт.jpg" width="100" height="82">
<br>
<img src="фрукт.jpg" width="10%">
</body>
</html>
Сохраните документ с именем пример2_10.htm, откройте в браузере.
Уменьшение разрешения изображения позволяет сократить объем графического файла, а значит и время его загрузки браузером. Однако, следует учитывать тот факт, что уменьшение разрешения ведет к потере качества изображения. Большинство мониторов отображают графику с разрешением 72 пикселя на дюйм. Такое разрешение вполне приемлемо, если пользователи не собираются получать с изображения печатные копии.
Чтобы уменьшить разрешение изображения можно воспользоваться средствами одной из программ редактирования графики, например Adobe Photoshop или Corel PhotoPaint.
Атрибут LOWSRC позволяет воспроизвести в окне браузера изображение низкого разрешения в течение времени пересылки на компьютер пользователя исходного высококачественного изображения.
Прежде чем воспользоваться данным атрибутом, вы должны создать картинку с низким разрешением. В html-коде надо использовать атрибуты WIDTH, HEIGHT для задания высоты и ширины изображения высокого разрешения, т.к. в противном случае в окне браузера оба изображения будут воспроизведены в формате, отвечающем упрощенной версии.
<IMG SRC="высокое разрешение.jpg"
LOWSRC="низкое разрешение.jpg"
WIDTH="500" HEIGHT="400">
Реализуйте данную процедуру на примере любого изображения из текущей папки.
Контрольные вопросы:
Как создать локальную гиперссылку?
Как вставить в документ изображение?
Как создать бегущую строку?
Как изменить разрешение вставленного изображения?