Учебные материалы для 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
