создание гиперссылки на медиафайл:
<a href =" ссылка"> Поздравление</a>
внедрение мультимидийных данных:
<embed>
height:
Определяет высоту вложенного содержимого в пикселях (пример: height="100")
src:
Указывает адрес внешнего файла, который будет вставлен в элемент <embed>.
type:
Указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) содержимого элемента.
width:
Определяет ширину вложенного содержимого в пикселях (пример: width="200").
вставка аидуо видео роликоов
<audio src=". mp3"></audio>
<video src=".avi"></video>
34)Преимущества и недостатки использования фреймовой структуры для представления данных на веб-странице.
плюсы.1. Фреймы позволяют экономить на объеме пересылаемых пользователю файлов
2. Возможность перехода по другим ссылкам в пределах интернет-ресурса при неизменном доступе к панели навигации заметно облегчает навигацию по электронным документам.
3. Возможность работы сразу с несколькими информационными блоками в пределах одного
4. Использование правил описания фреймовых структур позволяет разработчику HTML-документов как угодно варьировать размеры полей фреймов,.
А теперь — недостатки фреймов:
1. Некоторые поисковые механизмы не в состоянии индексировать документы с фреймовой структурой.
2. Компоновка страниц с фреймами часто выглядит неуклюже и грубо, многие не понимают, куда можно перейти по ссылке, чтобы загрузилась нужная информация.
3. На Web-сайтах с использованием фреймовых структур при перемещении "назад-вперед" (с помощью соответствующих клавиш клавиатуры или кнопок браузера) в адресной строке ничего не меняется — там постоянно указан начальный адрес сайта.
4. Некоторые малоизвестные браузеры при попытке перейти к предыдущему документу, который вы просматривали, возвращаются в начало Web-сайта.
|
|
35. Организация веб-страницы на основе фреймов.
- Cоздайте набор фреймов и фреймы на вашей странице
- Cохраните каждый файл, используемый в сайте. Помните, что каждый фрейм и набор фреймов - независимая страница HTML, и каждая страница должна быть сохранена.
- Набор свойств для каждого фрейма и набора фреймов. Он включает обозначение каждого фрейма и набора фреймов, настройку прокрутки или непрокрутки и т.д.
- Удостоверьтесь, что все ваши ccылки включают цели, так что связанное содержание появляется в нужном фрейме.
На первом этапе выполняется маркетирование фреймов контейнером <frameset>, в старт-теге которого применяют атрибуты:
· rows – для организации фреймов горизонтальной ориентации;
· cols – для организации фреймов вертикальной ориентации.
Значения атрибутов имеют формат массива, элементы которого отделяются друг от друга запятыми с необязательным пробелом после них. Сколько в массиве введено элементов, столько будет в окне браузера образовано фреймов. Значения элементов, в свою очередь, задают размеры этих фреймов в окне браузера. Для указания размеров используются абсолютные, в пикселях или в процентах, значения. Используется также относительные значения – символ звездочка (*) – занять под фрейм оставшуюся часть экрана. Далее в теле контейнера <frameset> следует разместить ровно столько тегов <frame>, сколько было указано в атрибутах rows и cols. Причем фреймы следует располагать сразу после старт-тега <frameset>.
|
|
Тег <frame> является автономным элементом разметки, то есть не имеет закрывающего тега. Внешний вид и поведение фрейма определяются следующими шестью атрибутами:
· name – имя фрейма; является обязательным атрибутом для фрейма, в который будут загружаться несколько веб-страниц, при этом каждая новая страница при загрузке будет отменять предыдущую. Такой фрейм принято называть целевым, а ссылку на него сопровождают атрибутом target;
· marginwidth – задает поля в левой и правой частях фрейма. По умолчанию атрибут равен 6;
· marginheight – задает поля в верхней и нижней частях фрейма;
· scrolling – задает полосы прокрутки. Значение scrolling=yes означает, что в фрейме всегда будут полосы прокрутки. Значение scrolling=no убирает из фрейма полосы прокрутки, даже. когда они необходимы. Значение scrolling=auto принимается по умолчанию – браузер их устанавливает или снимает по своему усмотрению;
· noresize – запрещает пользователю перемещать границу фрейма;
· src – обязательный атрибут: задает URL начальной страницы, загружаемой в файл.
36) Преимущества и недостатки верстки веб-страницы на основе блоков (DIV).
Меньший объем кода. При использовании div-блоков все гораздо логичнее и понятнее, да и сам код страницы уменьшается в несколько раз – основная часть описания визуального вида выноситься в css-файл, который загружается одноразово,. Таким образом, не только уменьшается время загрузки страницы, но и снижается нагрузка на сервер.
Удобство изменения элементов. Изменить практически любой из элементов внешнего вида макета сайта можно путем правки файла стилей, например, чтобы перенести блок с правой стороны, достаточно заменить float:left на float:right.
Преимущества в плане SEO. В таблицах контент раскидан по разным ячейкам, что усложняет индексацию поисковыми роботами. С div-слоями такой проблемы не существует, поскольку вместо кода сначала распознается контент, и на странице он размечается семантически правильно. Это неоспоримое преимущество, которое должно учитываться владельцами современных сайтов.
|
|
Отсутствуют сложные конструкции из нагромождений тегов, код компактный и читабельный.
Реализация сложных задач. С помощью блоков реализовать различные задачи по нестандартному расположению и оформлению элементов сайта гораздо проще, чем при использовании таблиц. С помощью нескольких инструкций можно реализовать такие расширенные возможности как выпадающие списки меню, эффекты скругленных углов и теней, а также другие визуальные эффекты, которые делают сайт более выразительным и понятным для посетителя.
Возможность создания адаптивного дизайна. «Адаптивный дизайн» или responsive design, суть которого в создании макета, который одинаково корректно отображается на устройствах с различным разрешением экрана – от стационарных PC и до смартфонов или планшетов.
Ряд недостатков:
Сложности в освоении. Если начать работать с таблицами может начать и новичок в сайтостроении, то верстку слоями освоить сложнее, управление блоками требует хороших знаний не только HTML, но и CSS.
Вопрос кроссбраузерности. Один из минусов блочной верстки является следствием относительно новизны этого метода. Речь идет о том, что стандарты верстки div-ами еще не устоялись окончательно, поэтому, определенные инструкции сверстанной блоками страницы по-разному могут восприниматься разными браузерами.
37) Стилевое оформление веб-страниц. Задание свойств стиля.
CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
При использовании CSS, стилевое оформление применяется на странице одним из способов:
С помощью внешней связанной таблицы.
С помощью внутренней таблицы стилей.
С помощью внедренных стилевых правил.
Импорт стилевых правил
Внешней таблицей стилей называется файл, содержащий правила CSS. Он связывается с одной или несколькими web-страницами. При использовании внешних таблиц стилей, их необходимо подключить к вашей web-странице одним из способов:
<link href=”mainstyle.css” rel=”stylesheet” type=”text/css”>
или
<style type=”text/css”>
<! - -
@import url(“mainstyle.css”);
-- >
</style>
Внутренней таблицей стилей называется список всех CSS-стилей данной страницы. Все внутренние таблицы стилей помещаются между парой тегов <style>…</style>. Пример:
<style type=”text/css”>
<body> {
color: #545C66;
background: #FFFFFF;
}
h1 {
font-size: 1.5em;
font-weight: normal;
}
.small {
color: #8E9CAE;
}
Метод внедрения правил стилей заключается во внедрении стиля внутрь HTML-дискрипторов при помощи атрибута style. Пример:
<div style="width:100%;float:left;"></div>
<font style="text-align:center;top:62px; left:300px”></font>
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.
@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;
38) Назначение и способы контроля валидности html и css-кода веб-сайта.
Итак, валидность кода — это соответствие исходного кода сайта нормам и правилам, описанным Консоциумом Всемирной Паутины или сокращенно W3C.
Оффлайновые проверки - это, в большинстве случаев, проверки кода "вручную", т.е. перепроверка всех документов с кодом. Это достаточно длительный и кропотливый процесс, который требует серьезной концентрации внимания.
Наиболее понятным в использовании инструментом для оценки сайта на валидность является известный https://validator.w3.org. Благодаря данному ресурсу можно проверить сайт различными способами: по его адресу расположения или по "прогону" локального файла через проверку.