Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Браузеры «понимают» три графических формата | ||
Формат GIF | Формат JPG | Формат PNG |
GIF (Graphics Interchange Format) Картинки в этом формате поддерживают 28=256 цветов. Некоторые GIF-файлы содержат не одну картинку, а небольшой мультик. | JPG (Joint Photographic Experts Group) Этот формат специально разработан для передачи фотографий. Он поддерживает 224= цветов и позволяет получать изображения высокого качества. | PNG (Portable Network Graphics) Этот формат поддерживает 248 цветов. Обладает высокой степенью сжатия и обладает всеми возможностями формата GIF. |
Для вставки рисунка используется непарный тег <IMG>, который не имеет закрывающего тега, но имеет много атрибутов!
Атрибут src = имя файла (URL-адрес изображения).
Атрибут alt = “текст надписи” (задает надпись, которая появляется на экране, если картинка не найдена).
Атрибут title (задает подсказку, всплывающую при наведении указателя мыши на изображение).
Атрибуты width = n, height = m (задают ширину и высоту рисунка в пикселях).
Атрибут border = n (задает рамку вокруг картинки толщиной n пикселей).
Атрибут hspace = n (задает ширину в пикселях пустого поля справа и слева от изображения).
Атрибут vspace = n (задает ширину в пикселях пустого поля сверху и снизу от изображения).
Атрибут align (определяет положение картинки по отношению к соседним элементам документа)
align = top выравнивание по верхнему краю;
align = middle выравнивание по центру;
align = bottom по нижнему краю;
align = left по левому краю;
align = right по правому краю.
Картинку можно использовать в качестве «обоев». То есть она будет занимать все окно браузера и по ней можно располагать текст так, как вам удобно. Для этого используется специальный атрибут тега
<BODY background =”имя файла с картинкой-фоном”>
<BODY background ="bg01.jpg">
В теге <BODY> можно также изменить цвет фона с помощью атрибута bgcolor = цвет.
<BODY bgcolor=black>
Коротко о главном
<IMG> - тег для вставки рисунка. Браузеры поддерживают графические форматы GIF, JPG, PNG Большое количество графических изображений замедляет загрузку Web-станицы
|
Упражнение 1.
Откройте любой HTML-документ. Измените цвет фона на желтый, а цвет шрифта задайте темно-синий. Просмотрите результат. Поэкспериментируйте с цветом, подберите лучшее на ваш взгляд сочетание цвета фона и шрифта.
Упражнение 2.
Создайте HTML-документ следующей структуры:
В качестве фона – рисунок Fon1.jpg;
Заголовок – бегущая строка с текстом:
“В документ можно вставлять рисунки формата JPG и GIF“;
Первый рисунок – Ris2.gif;
Текст к первому рисунку:
|
Второй рисунок – Ris1.gif;
Рисунок вставлен три раза с разными размерами.
Текст к второму рисунку: ” Размеры рисунков можно изменять”
(!!! Рисунки можно взять любые и сохранить в своей рабочей папке под нужными именами)
Упражнение 3.
Создайте HTML-документ следующей структуры:
В качестве фона – белый цвет. Заголовок –строка с текстом.
Первый рисунок – Ris1.gif;
Текст к первому рисунку:
В Гродно: гроза,
В Гомеле : гроза,
В Могилеве : гроза,
В Витебске : гроза”
Второй рисунок – Ris2.gif;
Текст ко второму рисунку:
На курортах Греции и Италии : ветер
Третий рисунок – Ris3.gif.
Текст ко третьему рисунку:
В Бресте : первый снег.
|
Упражнение 4.
Создайте следующие HTML-документы.
Вариант 1 Вариант 2
 |
|
|
Вариант 3
|
Урок 7. Вставка звука и видео
Звуковые эффекты на Web-страницах создаются с помощью аудио-файлов. Наиболее распространены следующие форматы:
Wav – стандартный формат Windows-приложений.
Midi – этот формат содержит запись нот и коды музыкальных инструментов по которым синтезируется звук.
MP3 – этот формат отличается высокой степенью сжатия.
Звук на страницах часто используется для озвучивания событий – нажатия кнопки, перехода по гиперссылке, открытия окна. Часто страницы сопровождаются звуковым фоном.
Для подключения звукозаписи в фоновом режиме используется тег <BGSOUND> со следующими атрибутами:
Src – задает URL-адрес звукового файла;
Loop – определяет количество повторений файла;
Volume – уровень звука. Может принимать значения от –10000 до 0. Т. е. звук можно только приглушать. Значение 0 – максимальный уровень звука.
В страницу можно «встроить» аудиоплейер с помощью тега
<EMBED> c атрибутами
src – URL-адрес звукового файла
width, height – размеры панели управления проигрывателя (в пикселях или процентах от полного размера)
autostart – может принимать два значения: true – начало воспроизведения сразу после загрузки страницы, false – включение звука пользователем.
На Web-страницах можно размещать видеофайлы следующих форматов:
MPEG – имеет расширение.mpg или.mpeg. Файлы этого формата обычно имеют большой размер и обеспечивают высокое качество цифрового видео.
AVI – имеет расширение.avi и применяется в ОС Windows для хранения аудио - и видео - файлов.
QuickTime – имеет расширение.mov и не требует длительной загрузки по сети.
Для вставки видеофайлов можно воспользоваться тегом <EMBED> c атрибутом src= URL-адрес видеофайла.
Или тегом <IMG> c атрибутом:
dynsrc=URL-адрес видеофайла;
Коротко о главном
<BGSOUND> - подключение звукозаписи в фоновом режиме <EMBED> - аудиоплейер <IMG dynsrc=URL-адрес видеофайла > - вставка видеофайлов |
Упражнение 1.
Откройте любой HTML-документ.
Подключите любое фоновое звуковое сопровождение. Просмотрите результат.
Создайте с помощью программы Фонограф небольшой звуковой файл. Поместите его на страничку с помощью тега <EMBED> .
ТЕМА 4. ГИПЕРССЫЛКИ
Урок 8. Создание гиперссылок.
Часть текста, название, участок изображения, имеющие ссылки на другой текст внутри этого же документа или на другой документ в сети Интернет, называются гипертекстовой связью (Hypertext link) или гипертекстовой ссылкой.
Изображение или участок текста, слово, с которым связаны гиперсвязи, называется якорем (anchor), линком (link) или ссылкой.
На экране якорь выделяется каким-либо образом на фоне остального текста — подчеркиванием и особым цветом, который устанавливается по умолчанию.
Чтобы превратить обычный документ в гипертекстовый, в него нужно вставить гипертекстовые связи.
Для этого используют парный тег <А href=" "> ... </А>.
Параметр HREF определяет URL-адрес ссылки (Uniform Resource Locator – унифицированный локатор ресурса), на которую будет совершен переход, если щелкнуть мышью по объекту, находящемуся между тегами (в данном случае объект обозначен многоточием).
<А href="http://www. *****"> Анекдоты </А>
Если ссылка производится на документ, находящийся в той же папке, что и исходный документ, достаточно указать только имя файла.
<А href="U2.html"> Устройство компьютера </А>
Для гиперссылки можно создать всплывающую подсказку с помощью атрибута title=”текст”.
<А href="U2.html" title=”Блоки ПК”> Устройство компьютера </А>
Якорем гиперссылки может быть не только текст, но и рисунок.
<A href=”new. htm”><IMG src=”ris. gif”></A>
Для перехода внутри одного документа используются два тега <A>. Первая команда с атрибутом href является источником перехода (якорем), вторая с атрибутом name – приемником.
<A href=#метка>Текст</A> Задание перехода по метке.
…
<A name=метка >Метка </A> . Сюда браузер переходит по ссылке.
На экране ничего не отображается.
Гиперссылки можно использовать для размещения звуковых или видео-файлов: <A href="Zvuk. wav"> Послушайте песенку (90K)</A>
Размер звукового файла указан в килобайтах! Работая со звуковыми файлами, не забывайте, что фрагменты звука должны быть короткими.
Обычно браузер устанавливает цветовое оформление ссылок по умолчанию. Можно изменить эти настройки специальными атрибутами тега <BODY>:
Link – цвет неактивированных ссылок;
Vlink – цвет посещенных ссылок;
Alink – цвет активной ссылки.
<BODY link=”green” alink=”lime” vlink=”gray”>
Коротко о главном
<А href=" "> ... </А> - гиперссылка на другой документ <A href=#метка>Текст</A> <A name=метка >Метка </A> - гиперссылка внутри документа <BODY link=”green” alink=”lime” vlink=”gray”> - задание цвета ссылок |
Упражнение 1.
Создайте гипертекстовый документ.
|
Для этого в своей папке создайте новую папку с именем Гиперссылки. Скопируйте в нее рисунки Fon. jpg, Tigr. gif, Horse. jpg, Slon. gif. (Рисунки с изображением слона, тигра, лошадки и любую фоновую картинку). Создайте следующие документы и свяжите их гипертекстовой связью.
Документ Start. htm
В качестве фона – рисунок Fon. jpg;
Заголовок «Мой зоопарк» - синим цветом;
Горизонтальная линия произвольной ширины.
Маркированный список:
· Тигр
· Лошадь
· Слон
На каждый элемент списка – гиперссылка соответственно на документы ZOO1.htm, ZOO2.htm, ZOO3.htm
Документ ZOO1.htm
В качестве фона - цвет lime;
Заголовок «Тигр» - синим цветом;
Горизонтальная линия произвольной ширины.
Картинка Tigr. gif прижата к правому краю. Ширина и высота равны 200 пикселей.
Текст с авторским форматированием: «Не подходите близко. Я тигренок, а не киска!»
Под горизонтальной линией текст «Вернуться назад», с гиперссылкой на документ Start. htm.
Документ ZOO2.htm
В качестве фона - цвет teal. Рисунок – Horse. gif
Текст: «Я люблю свою лошадку. Причешу ей шерстку гладко. Гребешком приглажу хвостик. И верхом поеду в гости»
Под горизонтальной линией текст «Вернуться назад», с гиперссылкой на документ Start. htm.
Документ ZOO3.htm создайте самостоятельно, по аналогии с предыдущими документами.
Упражнение 2.
На основе стихотворения «Что такое хорошо и что такое плохо?» создайте гипертекстовый документ. Создайте ссылки на слова ХОРОШО и ПЛОХО. Вставьте рисунки. Сохраните документ под именем Index. html.
 | |
 | |
|
Урок 9 . Структура HTML-приложения.
ЦЕПОЧКА
Это самая простая структура. Странички просматриваются последовательно. На каждой страничке предусмотрены ссылки на следующую страничку и на предыдущую страничку.
ПРОСТОЕ МЕНЮ
 |
ИЕРАРХИЯ
Это зависимость по подчинению, или включению одних объектов в другие.
Упражнение 1.
Создайте небольшой HTML-справочник по предложенной выше структуре:
|
ТЕМА 5. ФРЕЙМЫ
Урок 10. Создание фреймов
Фреймы (Frame – кадр или рамка) — мощный механизм представления информации на Web-страницах. С помощью рамок экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы.
Фреймы часто используют для организации навигации по сайту. В один фрейм загружается список гиперссылок. При щелчке по любой из них содержимое новой страницы отображается в другом фрейме.
Создание фреймов
Так как документ с фреймами состоит из нескольких документов, для создания фреймовой структуры тег <BODY> не используют.
Вместо него необходим тег <FRAMESET> и парный ему тег </FRAMESET>.
Этот тег имеет следующие атрибуты:
Cols – количество фреймов-столбцов. Значением этого атрибута является список размеров каждого из фреймов.
Например, тег <FRAMESET cols=”20%, 60%, 20%”> - задает три вертикальных фрейма соответствующих размеров. Размер последнего фрейма можно задавать с помощью символа *, означающего оставшуюся часть экрана. Размеры фреймов можно задавать не только в процентах, но и в пикселях.
Rows – количество фреймов-строк.
Например, тег <FRAMESET rows=”10%, *”> задает два горизонтальных фрейма, причем первый занимает 10% экрана, второй – всю оставшуюся часть.
Если указать эти два атрибута одновременно, каждый горизонтальный фрейм будет разбит на указанное число вертикальных фреймов.
Border –толщина рамки между фреймами. При border=0 границы будут отсутствовать.
Bordercolor – цвет рамки.
Для описания каждого из фреймов используется тег < FRAME > с атрибутом src= «имя файла»
Если содержимое станицы не помещается во фрейм, можно задать атрибут scrolling со следующими значениями: “yes” – линейки прокрутки отображаются всегда, “no” – не отображаются, “auto” – появляются в случае необходимости.
<HTML>
<FRAMESET rows=”50%, *” cols=”35%,65%”>
<FRAME src=”a. htm”>
<FRAME src=”b. htm”>
<FRAME src=”c. htm”>
<FRAME src=”d. htm”>
</FRAMESET>
</HTML>
|
Коротко о главном
<FRAMESET> - создание фреймовой структуры <FRAME> - описание каждого из фреймов |
Упражнение 1.
Создайте два маленьких HTML-документа. Сохраните их как файлы a. htm и b. htm. Эти страницы будут отличаться названиями и цветом фона
| |
Файл a. htm: <HTML> <HEAD> <TITLE>Синий цвет</TITLE> </HEAD> <BODY bgcolor=blue text=yellow> <H1>Cтраничка А </H1> </BODY> </HTML>
| Файл b. htm: <HTML> <HEAD> <TITLE>Желтый цвет</TITLE> </HEAD> <BODY bgcolor=yellow text=blue> <H1>Cтраничка В</H1> </BODY> </HTML>
|
Создайте базовую страницу, на которой будут отображаться фреймы и сохраните ее в файле с именем baza. htm: <HTML> <HEAD> <TITLE>Рамки.</TITLE> </HEAD> <FRAMESET COLS="50%, 50%"> <FRAME SRC="A. htm"> <FRAME SRC="B. htm"> </FRAMESET> </HTML>
|
Упражнение 2.
Создайте базовую страницу BazaG. htm, на которой будут отображаться горизонтальные рамки.
Упражнение 3.
Создайте базовую страницу BazaBl. htm, на которой будут отображаться как горизонтальные, так и вертикальные фреймы одновременно.
|
Упражнение 4.
Создайте базовую страницу BazaCol. htm, на которой будет отображена фреймовая структура с вложенными фреймами.
|
Урок 11. Создание «плавающих» фреймов
Разместить фрейм в обычном HTML-документе можно с помощью тега <IFRAME>. Фреймы, которые создаются с помощью этого тега, называются «плавающими».
Тег - контейнер <IFRAME> может располагаться в любом месте документа (внутри тега-контейнера <BODY>).
Атрибуты тега:
src – задает URL - адрес HTML - документа, который будет располагаться в плавающем фрейме;
width, height – ширина и высота плавающего фрейма;
align – выравнивание относительно окна браузера;
marginwidth – размеры свободных полей слева и справа от фрейма;
marginheight – размеры свободных полей сверху и снизу от фрейма;
frameborder – вывод рамки фрейма;
name –имя фрейма;
scrolling – вывод полос прокрутки.
Создание гиперссылок с учетом фреймов
Чтобы при гиперссылке страничка открывалась в нужном фрейме, необходимо:
ü При создании фреймов задать им имена с помощью атрибута name= «имя фрейма»
ü При вставке гиперссылки указать в каком фрейме необходимо открыть страничку с помощью атрибута target= «имя фрейма»
Коротко о главном
<IFRAME> - создание плавающего фрейма Атрибут target тега <A> задает имя фрейма, в котором нужно открыть вызванный по гиперссылке HTML-документ. |
Упражнение 1.
Создайте папку Фреймы. Скопируйте в нее рисунки компьютерной мыши, монитора, клавиатуры, компьютера. Создайте четыре маленьких HTML-документа. Сохраните их как файлы Процессор. htm, Мышь. htm, Монитор. htm, Клавиатура. htm. Эти страницы будут отличаться названиями, цветом фона и картинкой. Они будут отображаться в плавающем фрейме при щелчке по соответствующей гиперссылке.
Создайте HTML-документ Компьютеры. htm по следующему образцу:
<HTML>
<HEAD>
<TITLE>Компьютеры</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=center> Компьютеры </H1>
<HR>
<IFRAME src="Монитор. htm" width=200 height=200 align=right name="a"> </IFRAME>
<UL>Компьютер состоит из четырёх основных частей:
<LI>
<A href="Процессор. htm" target="a"> Главная из них - процессор</A>
< LI ><A href ="Монитор. htm" target="a">монитор</A>
< LI ><A href ="Клавиатура. htm" target="a">клавиатура</A>
< LI ><A href ="Мышь. htm" target="a">мышь</A>
</ UL >
<IMG src="computer. gif" widht=150 heigh=150>
</BODY>
</HTML>
Рис. 24
Упражнение 2.
Используя странички, созданные на предыдущих занятиях, (ZOO1.htm, ZOO2.htm, ZOO3.htm, Start. htm) создайте следующий мини-сайт:
А) Создайте вспомогательную страничку с именем Start1.htm на которой разместите заглавие «Стихи Агнии Барто» и установите нужный фон.
Б) Создайте исходную страничку с именем Index. htm.
<HTML>
<HEAD><TITLE>Рамки</TITLE>
</HEAD>
<FRAMESET COLS="40%, 60%">
<FRAME SRC="start. htm" name="a">
<FRAME SRC="start1.htm" name="b">
|
</HTML>
В) Внесите изменения в документы ZOO1.htm, ZOO2.htm, ZOO3.htm, таким образом, чтобы при гиперссылке страничка открывалась во фрейме с именем “b”
<A href=”ZOO1.HTM” target=”b”>
|
ТЕМА 6. ТАБЛИЦЫ
Урок 12. Создание таблиц.
Таблицы — это сетка для показа данных в строках и столбцах. Однако таблицы можно применять как средство структурирования документов. Например, в HTML трудно точно разместить элементы по горизонтали, но, используя таблицы, можно добавлять столбцы для перемещения элементов.
Создание таблиц вручную — одна из наиболее сложных задач в HTML. Сначала Вы формируете таблицу, затем первую строку, затем каждую ячейку с ее содержимым. Каждый элемент требует открывающего и закрывающего тегов.
Таблица вставляется в HTML-документ парными тегами <TABLE> и </TABLE >. Тег имеет следующие атрибуты:
border — ширина рамки;
width —ширина таблицы;
align – положение таблицы относительно боковых границ окна;
bgcolor — цвет фона под таблицей.
Внутри могут располагаться следующие элементы:
<CAPTION> Название таблицы </CAPTION>,
Этот тег имеет атрибут align, определяющий положение названия таблицы. Он может принимать два значения:
top— над таблицей;
bottom — под таблицей.
<TH>Заголовок столбца</TH>
Содержимое заголовка автоматически размещается по центру ячейки и отображается полужирным шрифтом. Данный тег можно вставлять в любом месте таблицы.
<TR> Строка таблицы </TR>
У этого тега есть следующие атрибуты:
аlign — выравнивание внутри строки:(LEFT, RIGHT, CENTER);
valign — вертикальное выравнивание(ТОР, BOTTOM, MIDDLE);
bgcolor — цвет фона внутри строки.
<TD> Столбец таблицы </TD>
Атрибуты align, valign и bgcolor аналогичны атрибутам тега<TR>;
widht - ширина ячейки;
colspan - растягивание клетки нa несколько столбцов;
rowspan — растягивание клетки нa несколько строк.
Пример создания простой таблицы:
<H2> Самая простая таблица</H2>
<TABLE border=4>
<TR>
<TD>ячейка A</TD>
<TD>ячейка В </TD> Первая строка
<TD>ячейка C</TD>
</TR>
<TR>
<TD>ячейка D </TD>
|
|
<TD>ячейка F </TD>
</TR>
</TABLE>
Пример создания таблицы с названиями столбцов.
<TABLE BORDER=10 width=100% >
<CAPTION> Название таблицы </CAPTION>
<TR>
<TH>Заголовок1</TH>
<TH>Заголовок2</TH>
<TH>Заголовок3</TH>
</TR>
<TR>
<TD>ячейка таблицы A </TD>
<TD>ячейка таблицы В </TD>
<TD>ячейка таблицы С </TD>
</TR>
|
<TD>ячейка таблицы D</TD>
<TD>ячейка таблицы Е </TD>
<TD>ячейка таблицы F </TD>
</TR>
</TABLE>
Коротко о главном
<TABLE> - Таблица вставляется в HTML-документ <CAPTION> - Название таблицы <TR> - Строка таблицы <TD> - Столбец таблицы <TH> - Заголовок столбца |
Упражнение 1.
|
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 |
