- •Раздел 5: Создание и публикация веб-ресурсов.
- •Тема 5.1: Основы веб-дизайна.
- •Тема 5.1: Основы веб-дизайна.
- •Все документы html имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры.
- •Базисные теги языка html.
- •Основные теги заголовка html-программы.
- •Основные атрибуты в теге body.
- •Задание базового шрифта.
- •Создание списков
- •Ссылки в html-документах.
- •Размещение графики. Вставка картинки.
- •Гиперссылка-картинка.
- •Вставка бегущей строки
Размещение графики. Вставка картинки.
Использование рисунков делает веб-страницы более интересными. Как уже говорилось, картинка - это файл с расширением GIF, JPG (JPEG), PNG. Возможна вставка анимированных картинок (GIF). Так как, каждая картинка требует времени на её обработку и замедляет загрузку документа, поэтому не стоит включать в документ большое количество иллюстраций или иллюстрации большого размера.
|
Тег IMG |
Тег вставки картинки на веб-страницу; не требует закрывающего тега. |
|
Атрибуты тега IMG: |
|
|
SRC |
Обязательный атрибут, указывающий URL картинки |
|
ALIGN |
С помощью данного атрибута можно расположить картинку слева (LEFT), по центру (CENTER), справа (RIGHT). Также с помощью команды ALIGN Вы можете расположить картинку слева (LEFT), по центру (CENTER), справа (RIGHT) относительно текста, также можете выравнить картинку: по верхнему краю (TOP), посередине (MIDDLE), по нижнему краю (BOTTOM) текста |
|
HEIGHT |
Используется для указания высоты рисунка в пикселях. По умолчанию используется оригинальная высота рисунка. |
|
WIDTH |
Используется для указания ширины рисунка. Задается либо в пикселях, либо в процентах относительно высоты. |
|
ALT |
Вставляет альтернативный текст, которой помещается вместо изображения, если браузер не может отобразить картинку. Также командой ALT можно задать краткое описание картинки, которое выскочит, если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд. |
Гиперссылка-картинка.
Для того, чтобы использовать в качестве гиперссылки картинку, достаточно заключить тег IMG в тег <A>. Например, <a href="File.htm"><img src="image.jpg" width="96" height="67"></a>
Вставка бегущей строки
Для вставки на веб-страницу бегущей строки используют парный тег: <MARQUEE>…</MARQUEE>.
Например, <MARQUEE bgcolor=”white” HEIGHT=40>Наша группа 2С-22</MARQUEE>
|
Таблица 16-и стандартных цветов |
|||||||
|
Название |
Код RGB |
Имя |
Цвет |
Название |
Код RGB |
Имя |
Цвет |
|
черный |
#000000 |
black |
|
серебряный |
#C0C0C0 |
silver |
|
|
темно-бордовый |
#800000 |
maroon |
|
красный |
#FF0000 |
red |
|
|
зеленый |
#008000 |
green |
|
известь |
#00FF00 |
lime |
|
|
оливковый |
#808000 |
olive |
|
желтый |
#FFFF00 |
yellow |
|
|
темно-синий |
#000080 |
navy |
|
синий |
#0000FF |
blue |
|
|
фиолетовый |
#800080 |
purple |
|
фуксия |
#FF00FF |
fuchsia |
|
|
чирок |
#008080 |
teal |
|
аква |
#00FFFF |
aqva |
|
|
серый |
#808080 |
gray |
|
белый |
#FFFFFF |
white |
|
Лабораторная работа 4.
Тема: Создание веб-сайта.
Цель занятия: изучить основные теги и атрибуты языка HTML;
создать простейшую веб-страницу средствами языка HTML.
Ход работы:
Постановка задачи: средствами языка HTML создать простейшую веб -страницу в текстовом редакторе Блокнот.
Предварительная работа.
-
Создайте предварительно папку по адресу С:\Мои документы или на диске D: под именем Ваша фамилия.
-
Создайте с помощью текстового редактора Блокнот небольшой текстовый файл с информацией об успеваемости вашей учебной группы. Сохраните его в вашей папке под произвольным именем (только латинскими буквами !!!).
-
Также поместите в вашу папку файлы, содержащие картинки или рисунки соответствующего формата (можно фотографии).
-
Создайте HTML-файл с основными структурными тегами. Между тегами <BODY> и </BODY> напишите несколько слов о себе (можно добавить вашу фотографию в этот файл). В меню Файл (File) выполните команду Сохранить как. В диалоговом окне Сохранения файла найдите созданную папку, укажите тип файла Все файлы и сохраните файл, назвав его своим именем (фамилией), и указав расширение html или htm. Например, D:\IVANOVA\Ivanova.html.
-
Создайте подобные файлы (2-3) с короткой информацией о 2-3 ваших друзьях-одногруппниках. Основная часть.
Создайте с помощью Блокнота основную вашу html-страницу. В содержание html-страницы средствами языка HTML включите всё нижеперечисленное:
-
Заголовок «Наша группа - …». (выравнивание по центру, заголовок первого уровня)
-
«Наша специальность - …». (выравнивание по центру, заголовок второго уровня)
-
«Общая характеристика группы: …(несколько слов о вашей группе)». (выравнивание по левому краю, заголовок третьего уровня)
-
Создайте список ваших друзей с группы (тех, о которых вы создавали HTML-файлы). Каждую фамилия размещайте на новой строке, а перед ней пустую строку.
-
Включите на вашу веб-страницу графическое изображение, рисунок или фотографию группы (которые вы сохранили в своей папке).
-
Создайте гиперссылки на вашей странице:
-
при щелчке на фамилии студента (вашего друга) должен осуществляться переход к просмотру сведений об этом студенте, то есть на соответствующий HTML-файл;
-
при щелчке на слове «успеваемость» (создайте сначала точку привязки этой гиперссылки), должен открываться сохранённый вами текстовый файл;
-
в конце страницы создайте внутреннюю гиперссылку (можно в виде картинки или слова), при щелчке на которой будет осуществляться переход на Специальность группы.
-
Добавьте бегущую строку с названием вашего техникума.
* можно задавать фон вашей страницы и цвет текста любой (на ваше усмотрение).