Учебные материалы для 11х классов. HTML. 2

реклама
„Atbalsts vispārējās izglītības pedagogu nodrošināšanai prioritārajos mācību priekšmetos”
Vien. Nr. 2008/0001/1DP/1.2.1.2.2./08/IPIA/VIAA/002
РАЗДАТОЧНЫЙ МАТЕРИАЛ.
ЛЕКЦИИ ПО СОЗДАНИЮ HTML ДОКУМЕНТОВ.
№2
Цветовые настройки.
Мы научились делать простые HTML документы. Теперь самое время раскрасить их, добавить
графику. Под графикой понимаем цвет шрифта, фон и “обои”. Рассмотрим простой способ изменения
цвета.
У флага <BODY> есть несколько параметров:
BGCOLOR – цвет фона
TEXT – цвет текста
LINK – цвет гипертекстовой связи
VLINK – цвет гипертекстовой связи, уже посещенной в прошлом
ALINK – цвет активной гипертекстовой связи
Цвет связи указывается 16-тиричным числом, имеющим следующую структуру: RED – GREEN –
BLUE или RGB (красный – зеленый – синий). На каждый цвет отводится 256 значений, обозначающих
присутствие того или иного компонента в результирующем цвете. Например, максимум красного FF (в
16-тиричной системе), остальные 2 цвета – 00, Результат – “#FF0000”
Установка значения цвета фона выглядит следующим образом: BGCOLOR=”#Шестнадцатеричное
значение”. Так, чтобы установить красный цвет фона, нужно написать <BODY BGCOLOR =”FF0000”>
Чтобы покрасить текст в зеленый цвет, нужно использовать команду <BODY TEXT =”00FF00”>
(Цвета есть в графических редакторах; там же можно выбрать смешанные цвета, подобрать оттенки).
Пример 1.
<HTML>
<HEAD>
<TITLE> Моя страничка </TITLE>
</HEAD>
<BODY bgcolor=”#FFFFFF”>
<P> На данной страничке текст и изображение будут располагаться на белом фоне.
</P>
<P> Шрифт может быть
<FONT COLOR =”#0000A0”> разного </FONT> цвета. </P>
</BODY>
</HTML>
Цвет обоев. Обои представляют собой графический файл, обычно с расширением .GIF или .JPG. Это тот
фон, на котором будет располагаться вся Ваша информация. Обои могут рисоваться специально, с
изображением логотипа или названием фирмы. В других случаях, обои можно скопировать с множества
серверов. Для этого используйте во вспомогательном меню команду Save Picture As…
Пример 2.
<HTML>
<HEAD>
<TITLE> Моя страничка </TITLE>
</HEAD>
<BODY background =”bg01.jpg”>
<P><FONT SIZE =+3><B> На данной страничке текст и изображение будут располагаться на фоне “обоев” </B>
</FONT></P>
</BODY>
</HTML>
Варианты включения графического изображения в страничку. №3
1. Простейший вариант
N.Kučerenko
Rīgas 80. vidusskola
HTML. 2. stunda
1
„Atbalsts vispārējās izglītības pedagogu nodrošināšanai prioritārajos mācību priekšmetos”
Vien. Nr. 2008/0001/1DP/1.2.1.2.2./08/IPIA/VIAA/002
Если графический файл прописан на том же сервере и в том же каталоге, где и HTML документ, то можно указать только имя
этого файла:
<IMG SRC=”1.gif”>
2. Другой вариант
Если графический файл прописан на том же сервере, но в другом каталоге, то можно указать и имя каталога и имя этого файла:
<IMG SRC=”pics1.gif”>
3. Усложненный вариант
Если графический файл прописан на другом сервере, то необходимо указать URL, т.е. полный путь к этому файлу:
<IMG SRC=”URL”>
<IMG SRC=”http://www.belti.vega.ru./pic/belti.gif”>
Задание.
Найдите любую картинку и перепишите ее в каталог HTML. Затем разместите ее на “обоях”. Расположите картинку по центру.
Пример выполнения задания.
<HTML>
<HEAD>
<TITLE> Моя страничка </TITLE>
</HEAD>
<BODY background =”bg01.jpg”>
<center><img src=”kon.ipg”</center>
</BODY>
</HTML>
Дополнительные параметры графических изображений.
WIDHT – ширина
HEIGHT – высота
ALIGN – выравнивание:
ABSMIDDLE или CENTER - по центру
LEFT - слева
RIGHT – справа.
Если Вы располагаете изображение внутри параграфа, то Вы можете его выровнять:
1. По левому полю (ALIGN=left)
2. По правому полю (ALIGN=right)
3. По верхней границе (ALIGN=top)
4. По нижней границе (ALIGN=bottom)
5. По центру (ALIGN=middle center)
ОСОБЕННОСТЬ!!
Многие программы просмотра, втом числе Netscape Navigator, перед началом отображения пытаются спланировать размещение
текста, рисунков и таблиц на экране и не выводят изображение на экране до тех пор, пока не узнают точные размеры. Размеры
рисунка задаются в пикселях.
Задание. Найдите любую, имеющуюся в вашем распоряжении картинку и, используя имеющийся в Вашем
распоряжении графический редактор, определите ее размер. Запишите ее в каталог HTML, вставьте его в HTML
документ по следующему образцу:
Пример выполнения задания.
<HTML>
<HEAD>
<TITLE> Моя страничка </TITLE>
</HEAD>
<BODY bgcolor =”#FFFFFF”>
<center><img src=”froggie.gif”></center>
<P>Лягушка в натуральную величину –
WIDHT (ширина) = 131 пиксель и HEIGHT
(высота) 112 пикселей.
</BODY>
</HTML>
РАЗДАТОЧНЫЙ МАТЕРИАЛ
ЛЕКЦИИ ПО СОЗДАНИЮ HTML ДОКУМЕНТОВ.
N.Kučerenko
Rīgas 80. vidusskola
HTML. 2. stunda
№3
2
„Atbalsts vispārējās izglītības pedagogu nodrošināšanai prioritārajos mācību priekšmetos”
Vien. Nr. 2008/0001/1DP/1.2.1.2.2./08/IPIA/VIAA/002
Задание нумерации (списков).
<ol> - задание нумерации цифрами.
< li >
< li >
< li >
</ol >
<ul> - задание нумерации символами.
< li >
< li >
< li >
</ul >
<ol> - задание вложенной нумерации.
< li >
< ul >
< li >
< /ul >
< li >
</ol >
Пример различных видов нумерации:
<HTML>
<HEAD>
<TITLE>Советы по изготовлению страничек</TITLE>
</HEAD>
<BODY>
<H2 ALIGN =LEFT> Советы по изготовлению страничек</H2>
<OL>
<li>По возможности вовсе избегайте пиктограммы “В процессе производства”
<li>Используйте соответствующий язык
<li>Не перегружайте вашу страницу большими изображениями
<ol>
<ul>
<li>Избегайте драмматического эффекта!
<li>Проверяйте как можно чаще ссылки на вашей странице
<li>Не забывайте обновлять свою страничку!
</ul>
<ol>
<li>Перед тем как положить готовую страничку на сервер надо:
<ul>
<li>Проверить грамматические ошибки
<li>Просмотреть свою страничку в различных программах просмотра.
</ul>
<li>Для рекламы странички надо:
</ol>
</BODY>
</HTML>
N.Kučerenko
Rīgas 80. vidusskola
HTML. 2. stunda
3
„Atbalsts vispārējās izglītības pedagogu nodrošināšanai prioritārajos mācību priekšmetos”
Vien. Nr. 2008/0001/1DP/1.2.1.2.2./08/IPIA/VIAA/002
Задание номер 2 на уроке 16.04.2012.
Пополнить созданную страничку о себе следующим:
1. Указать вместо картинки для фона странички цвет, используя таблицу цветов HTML
2. Скачать из интернета галерею фотографий одного размера (размером не более 300х300 пикселей) о
себе или о Риге (3-5 фотографий), которые сохраните в своей папке, где расположен файл странички
(MY_Page)
3. Расположите фотографии на одной строке параграфа, соответственно подобрав размер каждой
фотографии в процентах (пропорционально). Используйте альтернативную подпись на каждой
фотографии (ALT=”xxxxxx”) Фотографии выровняйте по центру строки
4. Измените титульное название странички на новое
5. Дополнительно: создать нумерованный список предметов , который изучаете в этом году, расставив
их по приоритету максимального количества часов (наибольшее количество часов в неделю – 1 место,
чуть меньше – второе и т.д.)
6. Сохранить страницу в папке с названием my_page_2.html
7. Проверить страничку, используя F5 (Refresh) -
N.Kučerenko
Rīgas 80. vidusskola
HTML. 2. stunda
4
Скачать