Оформить список, сохраняя стиль и вложенность пунктов:
Продукты питания Фрукты
Яблоки Зеленые
Красные
Апельсины
Груши
Овощи Картофель
Морковь
Капуста Брокколи
Цветная
Свекла
Слова «Продукты питания» оформить как заголовок 2 уровня, красного цвета и 4 размера. После слова вставить линию красного цвета и толщины 3 пикселя. Оформить список, сохраняя стиль и вложенность пунктов:
Устройства персонального компьютера
Системный блок
Материнская плата
Сетевая карта
Аудио карта
Видео карта
Процессор Оперативная память Винчестер (жёсткий диск)
Устройства вывода информации
Монитор
Принтер
Аудио колонки
Устройства ввода информации
Клавиатура
Мышь
Сканер
Микрофон
Планшет
Слова «Устройства персонального компьютера» оформить как заголовок 2 уровня, красного цвета и 4 размера. После слова вставить линию красного цвета и толщины 3 пикселя. Вставить бегущую строку с текстом «Виды списков в HTML» с произвольными параметрами.
Графика на Web – страницах
Добавление рисунка на web – страницу
Рисунки, фотографии и декоративные элементы очень часто используются на web – страницах. В интернет используется только три графических формата:
JPEG
GIF
PNG
Чтобы добавить графический объект в текст Web – страницы, используется тэг: <imgsrc=’имя файла’>
Атрибутуsrc присваивается путь к файлу на диске или URL – адрес файла рисунка в интернет. Рисунки, могут находиться в той же папке в которой находится файл web – страницы, но лучше их размещать в отдельную папку и указывать путь доступа к ней.
Пример:
В данном примере рисунок должен находиться в той же папке где и web – страница.
Атрибуты тэга
Границы вокруг рисунка создаются с помощью атрибута BORDER тэга . По умолчанию обозреватель отображает рисунок без границ. Чтобы нарисовать границы вокруг рисунка нужно атрибуту BORDER указать значение толщины границы в пикселях.
Пример:
С помощью атрибута ALT рисунок можно снабдить альтернативным текстом. Альтернативный текст отображается во время загрузки изображения или когда отображение рисунков отключено. Альтернативный текст также можно использовать как подсказку: при наведении курсора мыши на рисунок текст отобразится.
Пример:
С помощью атрибутов WIDTH и HEIGHT можно изменить размер изображения, увеличив или уменьшив его. При указании новой ширины и высоты необходимо помнить о пропорциональности исходных и новых размеров.
Пример:
Отступ текста от рисунка задается при помощи атрибутов HSPACE и VSPACE тэга . Первый атрибут устанавливает отступы слева и справа, а второй снизу и сверху. Отступы указываются в пикселях.
Пример:
Любой текст
Выравнивание рисунка в тексте документа
Для выравнивания рисунка в тексте используется атрибут ALIGN. В зависимости от присвоенных данных атрибут можно использовать для выполнения двух задач. Для выравнивания рисунка относительно текста документа атрибуту ALIGN присваиваются следующие значения: left – рисунок выравнивается влево, свободное пространство справа от рисунка заполняется текстом.
right - рисунок выравнивается вправо, свободное пространство слева от рисунка заполняется текстом.
Для выравнивания текста абзаца, в который добавлен рисунок, атрибуту ALIGN присваиваются следующие значения: top – текст выравнивается по верхнему краю рисунка;
middle – текст выравнивается по средней линии рисунка;
bottom – текст выравнивается по нижнему краю рисунка.
Пример: Выравнивание рисунка и текста страницы
Рисунок на web – странице
Рисунок на web – странице< img src=’ris1.jpg’ align=’middle’>
> Рисунок на web – странице
Фоновый рисунок Web-страницы
Рисунки можно использовать в качестве фона web – страницы. Фон страницы устанавливается в тэге при помощи атрибута BACKGROUND.
Атрибуту BACKGROUND можно присвоить следующие значения:
Значение цвета;
Путь и имя графического файла на диске:
Адрес URL на графический файл в интернете.
Пример:
По умолчанию фоновый рисунок прокручивается вместе с текстом документа. Чтобы зафиксировать фон нужно установить в тэге атрибут BGPROPERTIES равный “fixed”.
Пример:
Практические задания
Создать в графическом редакторе изображение, для фонового рисунка Web-страницы. Оно должно удовлетворять следующим требованиям: Подходить под разрешение экрана, без дублирования по ширине и высоте
Не содержать нарисованных объектов, хорошо подойдет «приятный глазу» градиент не ярких цветов
Далее установить это изображение на фон предыдущих Ваших страниц, без повторения при пролистывании страницы. Картинку фрукты-овощи.jpg установить на страницу Виды списков.html перед надписью «Продукты питания» следующим образом: Задать ширину=200, высоту =150
Рамку толщиной 3 пикселя
Выравнивание по левому краю
Отступ справа и слева 50
Картинку системный блок.jpg установить на страницу Виды списков.html перед надписью «Устройства персонального компьютера» следующим образом: Задать ширину=200, высоту =150
Рамку толщиной 3 пикселя
Выравнивание по правому краю
Отступ справа и слева 50
Связывание web – страниц при помощи гиперссылок
Гиперссылки создаются на web – страницах для быстрого перехода внутри одной страницы (якорь), а также перехода с одной страницы на другую.
Гиперссылки создаются следующим образом:
гиперссылка
При создании гиперссылки нужно установить два важных элемента, от которых зависит тип гиперссылки. Адрес. В качестве адреса, назначаемого атрибуту HREF, можно использовать: Адрес URL на другой странице или путь на диске к другому документу HTML – наиболее часто используемый тип гиперссылок;
самостоятельная работа - это текстовая гиперссылка.
- это графическая гиперссылка.
Почта - ссылка на ресурс в Интернет.
Установка целевого окна открытия документа по гиперссылке
По умолчанию гиперссылка открывает документ в текущем окне обозревателя. Но иногда необходимо открывать документы в новом окне, в другой рамке и т.д. для этого в ссылку добавляют атрибут TARGET со следующими параметрами. ‘_blank’ – в новом окне
‘_self’ – в текущей рамке;
‘_parent’ – в рамке предыдущего уровня, если используется набор вложенных рамок.
‘_top’ – в текущем окне обозревателя (по умолчанию)
‘имя_рамки’ в рамке с указанным именем
Модифицируйте предыдущий пример следующим образом:
самостоятельная работа
Проверьте, что произойдет при нажатии на ссылку.
Гиперссылки на закладки в тексте web – страницы (Якоря).
Гиперссылки на закладки внутри страницы предназначены для быстрого перехода по содержимому документа.
_top — отменяет все фреймы и загружает страницу в полном окне браузера
Практические задания
На каждой странице создать гиперссылку на следующую по тексту «Далее» и обратно по тексту «Назад». При переходе по тексту «Далее» страница должна открываться в новом окне.
Внизу первой странице создать якорь, который будет возвращать вверх к заголовку страницы.
Создать якорь, который будет возвращать со страницы с Списками к концу первой страницы.
Создать навигатор, используя карты ссылок. Изображение для реализации 1.jpg в папке с заданиями. Стрелки вправо и влево должны переводить вперед и назад по Вашим страницам, центральная область должна обновлять текущую страницу. Карту ссылок разместить на всех страницах.
Разметка web – страниц при помощи таблиц
Таблицы в Web –страницах имеют более широкое применение, чем в обычных документах. В документах HTML – таблицы часто используются для разметки структуры web –страницы на функциональные блоки: панель управления, панель заголовка, верхний и нижний колонтитулы, основной раздел и т.д..
Создание таблиц в коде HTML
Перед тем как вы приступите к вводу кода таблицы, нарисуйте макет на листе бумаги. Подсчитайте необходимое количество строк и столбцов, число ячеек в каждой строке и их размеры. Определите ячейки, которые необходимо объединить. После этого приступайте к написанию кода HTML.
Таблица создается при помощи пары тэгов
…
. У тэга
есть ряд атрибутов: WIDTH – ширина таблицы (либо в px, либо в %)
HEIGHT – высота таблицы (либо в px, либо в %)
BORDER – граница вокруг таблицы в px
ALIGN- горизонтальное выравнивание таблицы
CELLSPACING - устанавливает расстояние между ячейками (по умолчанию два пикселя);
CELLPADDING - устанавливает отступ текста от края ячейки (по умолчанию один пиксель)
Теперь нужно добавить в таблицу строки и ячейки. Для этого используются следующие тэги:
В следующем примере показана простейшая таблица, состоящая из двух строк и двух столбцов, причем ячейки первой строки отведены на заголовки столбцов.
Пример простейшей пустой таблицы:
<TABLE>
<TR>
Создаемдвеячейкизаголовков-->
<TR>
TR>
TABLE>
Но такие простые встречаются достаточно редко. В связи с этим, возникает необходимость в объединение строк или столбцов таблицы. Для объединения ячеек в тэгах
и
устанавливаются следующие параметры. COLSPAN – число объединённых столбцов
ROWSPAN - число объединённых строк
Для тэгов
и
также определены следующие атрибуты: ALIGN: горизонтальное выравнивание внутри ячейки left – влево;
center – по центру;
right – вправо;
VALIGN: вертикальное выравнивание внутри ячейки top – вверх;
middle – по центру;
bottom – вниз;
BACKGROUND – картинка на фон к ячейке
BGCOLOR – цвет фона ячейки
Практические задания
Создайте новую страницу, назовите ее Таблицы.html
Создайте следующие таблицы:
1
2
3
1
2
3
1
2
3
4
1
2
3
4
5
Для каждой таблицы задать ширину и высоту по 200Px, границы вокруг таблицы по 2px, выравнивание внутри ячеек по центру. Выполнить задания из файла Задания по теме Таблицы.doc
Разметка макета страницы с помощью таблицы
В большинстве случаев данные на web – странице располагаются не по порядку сверху вниз, а размещаются блоками. Например, самый распространенный макет страницы это когда сверху шапка, слева меню, а справа основной текст страницы. Попробуем выполнить такой макет, причем размеры каждого блока будем указывать в процентах от всего размера окна. Создайте страницу по следующему образцу:
Ширина 100% высота 10%
Ширина 15 % высота 80 %
Ширина определится автоматически
высота 80 %
Ширина 15 % высота 80 %
Ширина 100% высота определится автоматически
Практические задания
Создать шаблон при помощи таблицы:
Размеры задать самостоятельно Создайте следующие шаблоны для оформления страниц
Отрисовать в графическом редакторе Photoshop макет сайта на свободную тему. С помощью преподавателя, нарезать его на составные части (шапка, меню, блок новостей, контент и т.д) и реализовать табличную верстку для него. Сайт должен быть заполненный, все ссылки рабочими. Пример отрисовки макета Вы найдете в файле Отрисовка сайта макета в Photoshop.doc. В папке Примеры макетов, можете посмотреть варианты отрисовки, но реализовать их придется самостоятельно
Разметка web – страниц при помощи фреймов
Технология фреймов позволяет разделить Web – страницу на секции для отображения в окне обозревателя сразу нескольких документов HTML. Под каждым фреймом понимается некая часть страницы. Например, шапка сайта или блок меню. Главное отличие фреймовой верстки от табличной в том, что в каждом фрейме отображается отдельная Web-страница. Фреймовая верстка предоставляет разработчикам Web – страниц ряд преимуществ: Документы, отображаемые в фреймах, независимы друг от друга. Прокручивание содержимого в одном фрейме не влияет на содержимое в другого.
Гиперссылки в одном фрейме могут изменять содержимое другого.
В документах HTML, где используются фреймы, отсутствует основной раздел …. В качестве основного раздела здесь используется раздел .
Шаблон страницы будет выглядеть следующим образом:
Скачать 0.95 Mb.
Любой текст
- это графическая гиперссылка.
