zachet_html_(2010-02-13).
реклама
Подготовка к зачёту по курсу HTML Подготовка к сдаче зачета по языку HTML Примеры и упражнения <H1>Шрифт H1</H1> <I>Курсив</I> <H3>Шрифт H3</H3> <U>Подчеркнутый</U> <H4>Шрифт H4</H4> <S>Перечеркнутый</S> <H2>Шрифт H2</H2> <B>Жирный</B> <H6> Шрифт H6 </H6> <H5>Шрифт H5 </H5> HREF 1. Создать гипертекстовую ссылку в виде изображения b.gif, которая осуществляет переход к просмотру изображения a.gif. <a href="а.gif"><img src="b.gif" border="3"></a> гипертекстовая ссылка в виде изображения b.gif, переход к просмотру изображения a.gif. 2. Создать гипертекстовую ссылку в виде текста на адрес электронной почты. <a href="mailto: [email protected]">[email protected]</a> - гиперссылка на адрес электронной почты. При нажатии происходит вызов почтовой программы и указанный адрес вводится в пункт Кому. 3. Создать гипертекстовую ссылку, которая осуществляет переход в Интернете к Web-странице http://www.mail.ru <a href="http://www.mail.ru">http://www.mail.ru</a> гипертекстовая ссылка в виде текста, переход в Интернете к Web-странице. 4. Создать гипертекстовую ссылку a.htm. в виде текста, которая осуществляет переход к файлу <a href="a.htm">a.htm</a> - гипертекстовая ссылка, переход к файлу a.htm. BODY 1. Задать цвет текста (text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link) для всей Web-страницы. <BODY bgcolor="blue" text="black" link="red"> - задает цвет текста (text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link). Задают еще alink="" и vlink="" -цвета активной и посещенной ссылки. Центр компьютерного обучения “Кит” 7-177-424 Подготовка к зачёту по курсу HTML 2. Задать фоновый рисунок (обои) на Web-странице в файле a.jpg. <BODY background="a.jpg"> - задает фоновый рисунок (обои) на Web-странице в файле a.jpg. 3. Задать цвет символов текста (атрибут color) и их размер (атрибут size), используя тег <font>. <font color="yellow" size=5> - задает цвет символов текста (атрибут color) и их размер (атрибут size). HR 1. Задать цвет (атрибут color ) и товщину (атрибут size ) горизонтальной линии <hr color="green"> - задает цвет горизонтальной линии. <hr color="red" size=3 width=220 align=center> - атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линии в пикселах; атрибут align=center (или left, или right) задает смещение линии (ее размещение в центре, или смещение влево, или вправо). Изображение 1. Bставить графическое изображение в виде файла a.gif. <IMG SRC="a.gif"> - вставка графического изображения в виде файла a.gif. Есть и анимационные gifфайлы. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp. 2. Bставить графическое изображение в виде файла a.gif с использованием атрибутов размера ( width и height ). <IMG SRC="a.gif" width="403" height="263"> - если при вставке изображения использованы атрибуты width и height, то при загрузке изображения броузер покажет сперва рамку, где должно быть изображение, а затем уже само изображение, поскольку оно загружается дольше. Таким образом резервируется место на экране под изображение. Атрибут width задает ширину изображения в пикселах. Атрибут height задает высоту изображения в пикселах. 3. Bставить графическое изображение в виде файла a.gif с использованием атрибутов рамки ( границы ) и альтернативного текста ( текста на месте рамки если изображения нет ( border и alt ). <img src="a.jpg" border=3 alt="Автомобиль"> - атрибут border задает рамку по периметру изображения толщиной 3 пиксела. Атрибут Alt дает текст на месте рамки, если изображения нет. Атрибут border=0 используется, чтобы убрать рамку вокруг рисунка. Это необходимо, например, при использовании анимированных *.gif на прозрачной основе. 4, Bставить графическое изображение в виде файла a.gif слева относительно текста , задав ширину незаполненного пространства справа и слева от рисунка в пикселях с использованием атрибутов выравнивания align и hspace . <img src="a.jpg" border=0 width="85" height="130" align="left" hspace=5 alt="Автомобиль"> Здесь атрибут hspace=5 обеспечивает плавное обтекание рисунка текстом. Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях. Атрибут align="left" обеспечивает размещение рисунка слева. Центр компьютерного обучения “Кит” 7-177-424 Подготовка к зачёту по курсу HTML Создание таблиц в HTML Таблицы являются удобным средством форматирования данных в HTML. Таблицу задает и определяет ее общие свойства тег <table></table>. По горизонтали, например по центру, таблицу можно выровнять с помощью тега <p align="center">, размещаемого перед <table>. Тег <table> может иметь атрибуты: <table border="5" width="100" cellpadding="10" cellspacing="10">, где border="5" - ширина боковой грани в пикселях. При нулевом зачении рамка исчезает совсем. width="100" - ширина таблицы в пикселях или width="50%" -ширина таблицы в % по отношению к ширине страницы в окне. cellspacing="10" - ширина фронтальной грани в пикселях.( расстояние между ячейками таблицы) cellpadding="10" - задает размер пустого пространства в пикселях, окружающего данные в ячейке. Тег <caption></caption> задает заголовок таблицы. Тег <tr> задает строку таблицы. Следующий тег <tr> задает следующую строку таблицы. Конечный тег необязателен. Тег <td> задает ячейку таблицы. Следующий тег <td> задает следующую ячейку таблицы. Конечный тег необязателен. Цвет фона ячейки задается в теге <td>: <td bgcolor="yellow"> Непарный тег <th> - задает элемент ячейки, которая является заголовком таблицы. Этот тег должен находиться внутри тега <tr>. Ячейка-заголовок отличается от обычной тем, что текст внутри нее выделяется полужирным шрифтом. Цвет фона заголовка задается: <tr><th bgcolor="yellow">Заголовок. Создание таблиц в HTML дано в следующих примерах. Пример 1. Задание цвета фона страницы. Создание таблицы 1 строка, 1 столбец, в ячейку вставить текст и свой фон . <html> <head> <title>Таблица 1</title> </head> <body bgcolor="c0c0c0" text="navy" link="0000ff"> <p align="center"> <table border="4" cellpadding="10" cellspacing="3"> <tr> <td bgcolor="yellow"><b>Фамилия И.О. </td> </table> </body> </html> Пример 2. Создание таблицы 3 строки, 3 столбца, в каждую ячейку вставить текст и свой фон. Центр компьютерного обучения “Кит” 7-177-424 Подготовка к зачёту по курсу HTML <html> <head> <title>Таблица</title> </head> <body bgcolor="navy" text="red"> <center><table border="12" width="1" cellpadding="10" cellspacing="10"> <tr> <td bgcolor=”red”>11</td> <td bgcolor=”green”>12</td> <td bgcolor=”yellow”>13</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> </table></center> </body> </html> 11 12 13 21 22 23 31 32 33 Пример 3. Создание таблицы 2 строки, 3 столбца, в каждую ячейку вставить картинку. <html> <head> <title>Таблица</title> </head> <body bgcolor="navy" text="red"> <center><table border="12" width="1" cellpadding="10" cellspacing="10"> <tr> <td> <img src="a.jpg"></td> <td><img src="b.jpg"></td> <td><img src="c.jpg"></td> </tr> <tr> <td><img src="d.jpg"></td> <td><img src="e.jpg"></td> <td><img src="g.jpg"></td> </tr> </table></center> </body> </html> Центр компьютерного обучения “Кит” 7-177-424 Подготовка к зачёту по курсу HTML Создание простейших Web-страниц дано в следующих примерах: Пример 4. Задание цвета фона страницы Форматирование текста. <HTML> <HEAD> <TITLE>Название документа</TITLE> </HEAD> <BODY bgcolor="teal" text="aqua"> Содержимое Web- документа. <CENTER><H1><font color="yellow">Фамилия Имя Отчество</H1></CENTER> </font><P> <CENTER><font color="red" size=4>Моя первая страница!</CENTER></font> </BODY> </HTML> Содержимое Web- документа. Фамилия Имя Отчество Моя первая страница! Пример 5. Создание главной страницы сайта. <HTML> <HEAD> <TITLE>Мой сайт</TITLE> </HEAD><BODY bgcolor="navy" text="yellow" link=”white”> <center><big><i><U>Мой персональный сайт</i></big></U></center> <hr color="aqua"> <font color="white">Фамилия Имя Отчество <br></font> Просмотрите страницы сайта: <a href="a.htm">a.htm</a> <a href="b.htm">b.htm</a> <a href="c.htm">c.htm</a> <hr color="red"> Это мои изображения: <p> 1.<img src="a.gif"> 2.<img src ="b.gif"> 3.<img src ="c.gif"> 4.<img src ="d.gif"><P> 5.<img src ="e.gif"> 6.<img src ="g.gif"><hr color="lime"> Центр компьютерного обучения “Кит” 7-177-424 Подготовка к зачёту по курсу HTML <tt><big><U><font color="aqua">Группа </tt></big></U></font> </BODY> </HTML> Мой персональный сайт Фамилия Имя Отчество Просмотрите страницы сайта: a.htm b.htm c.htm Это мои изображения: 1. 2. 5. 6. 3. 4. Группа Пример 6. Задание цвета фона и текста Web- страницы, ,Форматирование текста. Создание изображения. Вставка гиперссылки на страницу в Интернете. <HTML> <HEAD> <TITLE>Создание Web-страницы.</TITLE> </HEAD> <BODY bgcolor="purple" text="lime" link="yellow"> <CENTER><u><font color="yellow">Вставьте изображение</u></font><br> Мои любимые фотографии! <font color="aqua">Фотография 1<p></font> <IMG SRC="a.gif" width="403" height="263"><p> <i><big><font color="white">Фамилия Имя Отчество<br></i></big></font> Адрес в Интернете: <a href="http://www.mail.ru">http://www.mail.ru</a></CENTER> </BODY> </HTML> Вставьте изображение Мои любимые фотографии! Фотография 1 Фамилия Имя Отчество Адрес в Интернете: http://www.mail.ru Центр компьютерного обучения “Кит” 7-177-424 Подготовка к зачёту по курсу HTML Вопросы 1. Что такое Web-страница и какие существуют способы ее создания? 2. Дайте определения следующим терминам языка HTML: тег, гиперссылка. 3. Какова общая структура документа HTML? 4. Какие теги форматирования текстового потока и абзацев Вы знаете? 5. Как задать цвет текста, цвет фона, цвет гиперссылки? 6. Как вставить в документ HTML графическое изображение? 7. Как вставить в документ HTML фоновый рисунок? 8. Как вставить в документ HTML горизонтальную линию, прямоугольную рамку? Как изменить их цвет и размеры? 9. Как создать гипертекстовую ссылку в виде текста или картинки в документе HTML? 10. Как создать таблицы в документе HTML? Задания 1. Создайте в редакторе Блокнот простейший документ HTML на основе приведенных выше примеров и просмотрите его в Web-броузере. 2. Вставьте в Web-страницу фоновый рисунок, графическое изображение, gif-анимацию и просмотрите в Web-броузере. 3. Вставьте в документ HTML ссылки на адрес в Интернете и E-mail. 4. Создайте документ HTML, содержащий таблицы. 5. Создайте документы HTML, связанные между собой гипертекстовыми ссылками. Центр компьютерного обучения “Кит” 7-177-424
