2015-03-22
216
ЗАДАНИЕ 25
1. На диске Z:\ в папке с Вашей фамилией создать папку ПЗ_25. Создать в папке ПЗ_25 папку с именем Фамилия_25.
2. В папке Фамилия_25 создать четыре текстовых документов:
• index.html (главная);
• interests.html (мои увлечения);
• aboutme.html (обо мне);
• contacts.html (контакты).
3. Используя Образец и Приложение 25.1, с помощью программы Блокнот создать Web-страницы. На каждой странице должны быть картинки, фотографии, краткий рассказ о себе. Цвет фона и параметры шрифта настроить по своему желанию. В каждом файле создать гиперссылку на страницу Главная. Картинки должны быть сохранены в папке Фамилия_25.
4. Заархивировать папку Фамилия_25 в файл Фамилия_25_n.rar, где n – номер варианта задания.
5. Письменно ответить на контрольный вопрос, соответствующий номеру Вашего варианта.
Образец
<html>
<head>
<title>Фамилия </title>
</head>
<body bgcolor="#12676530">
<h1 align="center"> Заголовок </h1>
<br>
<p align="center" > <font size="+3"; color="#1234567">Текст</font> </p>
<img src="my.jpg">
|
|
|
<p align="center">
<br>
<a href=" interests.html "> Мои увлечения</a>
<br>
<a href=" aboutme.html " > Обо мне </a>
<br>
<a href=" contacts.html " > Контакты </a>
</p>
</body>
</html>
Ход выполнения практического занятия 25.
1. На диске Z:\ в папке с Вашей фамилией создать папку ПЗ_25. Открыть папку ПЗ_25. Нажать правую кнопку мышки и выбрать команду Создать – Папку. Назвать папку Фамилия_25.
2. Открыть папку Фамилия_25 и создать текстовый документ, выбрав Файл – Создать – Текстовый документ. Имя документа – index, расширение – html. Аналогично, создать еще три файла: interests.html; aboutme.html; contacts.html.
3. Открыть файл index.html с помощью программы Блокнот. Для этого на файле нажать правую кнопку мышки и выбрать команду Открыть с помощью – Блокнот. Используя образец создать главную web-страницу сайта. На каждой странице должны быть картинки, фотографии, краткий рассказ о себе. Цвет фона и параметры шрифта настроить по своему желанию. В каждом файле создать гиперссылку на страницу Главная. Картинки должны быть сохранены в папке Фамилия_25. Аналогично, создать все файлы.
4. Открыть папку ПЗ_25. На папке Фамилия_25 нажать правую кнопку мышки и выбрать команду Добавить в архив. Заархивировать папку в файл – Фамилия_25_n.rar, где n – номер варианта задания.
5. Письменно ответить на контрольный вопрос, соответствующий номеру Вашего варианта.
Приложение 25.1
<head> </head> - голова документа
<body> </body> - тело документа
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации. Как правило, здесь располагается только тег:
<title>- заголовок</title>
|
|
|
Все тэги, расположенные между <body> </body> - непосредственное содержание документа
Тег шрифта: <font></font>
Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта.
<font color="#CC0000"> текст </font>
Цвет фона bgcolor устанавливается в тэге <body>:
<body bgcolor="#000000">
16 стандартных цветов с названиями
и шестнадцатеричными кодами
| black = “#000000” | silver = “#C0C0C0” |
| gray = “#808080” | white “#FFFFFF” |
| maroon = “#800000” | red = “#FF0000” |
| purple = “#800080” | fuchsia = “#FF00FF” |
| green = “#008000” | lime = “#00FF00” |
| olive = “#808000” | yellow = ““#FFFF00” |
| navy = “#000080” | blue = “#0000FF” |
| teal = “#008080” | aqua = “#00FFFF” |
Тег <br>, который осуществляет принудительный перевод текста на другую строку (т.е. аналогичен нажатию клавиши Enter, когда мы форматируем текст в обычном текстовом редакторе).
Параграфы вводятся тэгом:
<p> текст </p>
В параграфе можно использовать атрибут align для выравнивания текста :
по центру: <p align="center">текст</p>
по левому краю: <p align="left">текст</p>
по правому краю: <p align="right">текст</p>
по ширине: <p align="justify">текст</p>
Заголовки текста:
<H1> текст </H1>
<H2> текст </H2>
<H3> текст </H3>
<H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6>
Размер шрифта :
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>
Начертание текста
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<u> Подчеркнутый текст </u>
<s> Перечеркнутый </s>
Верхний индекс <sup> sup </sup>
Нижний индекс <sub> sub </sub>
Вставка картинки в документ: <img src="my.jpg">
Атрибут align можно использовать и для картинок:
картинка прижата к левому краю экрана, а текст обтекает ее справа
<img src="pr1.png" align="left">
картинка справа, текст слева <img src="pr1.png" align="right">
текст располагается внизу картинки <img src="pr1.png" align="bottom">
текст располагается посередине <img src="pr1.png" align="middle">
текст располагается вверху <img src="pr1.png" align="top">
Для тэга <img> можно использовать еще несколько атрибутов:
атрибут vspace задает (в пикселах) расстояние между текстом и рисунком (по вертикали)
<img src="pr1.png" vspace="10">
атрибут hspace задает (в пикселах) расстояние между текстом и рисунком (по горизонтали)
<img src="pr1.png" hspace="30">
атрибут alt предлагает краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, появится описание картинки. Если параметр alt не задавать, описания не будет.
<img src="pr1.png" alt="моя фотография">
атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так можно ее сделать или уже, или шире).
<img src="pr1.png" width="100">
атрибут height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать.
<img src="pr1.png" height="200">
атрибут border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если надо ее убрать, то выставляйте атрибут border равным нулю
<img src="pr1.png" border="5">
Гиперссылка на файл :
<a href="имя файла" title="Ваша подсказка"> текст-ссылка </a>
Атрибут можно не использовать.
<a href="имя файла"> текст-ссылка </a>
