Рабочие листы
к вашим урокам
Скачать
1 слайд
создаем Web-странички
Создание Web-сайта
2 слайд
создаем Web-странички
Создание Web-сайта «Компьютер»
HTML-код страницы помещается внутрь контейнера <HTML> </HTML>
Web-страница разделяется на две логические части: заголовок и содержание.
Заголовок заключается в контейнер <HEAD></HEAD>
Название содержится в контейнере <TITLE></TITLE >
3 слайд
создаем Web-странички
Назовем нашу страницу «Компьютер»:
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
Основное содержание страницы помещается в контейнер <BODY></BODY> и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и так далее.
Поместим на страницу текст «Все о компьютере»:
<BODY>
Все о компьютере
</BODY>
4 слайд
создаем Web-странички
В окне приложения Блокнот ввести HTML-код Web-страницы. Сохранить файл под именем index.htm(html) в папке сайта. Загрузить этот файл в окно браузера для просмотра.
<HTML>
<HEAD>
<TITTLE>Компьютер</TITTLE>
</HEAD>
<BODY>
Все о компьютере
</BODY>
</HTML>
5 слайд
создаем Web-странички
Форматирование текста
Размер шрифта для имеющихся в тексте заголовков задается тэгами от
<H1>(самый крупный) до <H6>(самый мелкий). Заголовок выдели крупным шрифтом:
<H1>Все о компьютере </H1>
6 слайд
создаем Web-странички
Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется присвоить определенное значение.
<H1 ALIGN=“center”>Все о компьютере </H1>
7 слайд
создаем Web-странички
С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста.
Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=“Arial”)
Атрибут SIZE- размер шрифта (например, SIZE=4)
Атрибут COLOR –цвет шрифта (например, COLOR = “blue”)
Таким образом, задать синий цвет заголовка моно с помощью тэга FONT с атрибутом COLOR :
<FONT COLOR = “blue”>
<H1 ALIGN=“center”>Все о компьютере </H1>
</FONT>
8 слайд
создаем Web-странички
Заголовок можно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга <HR>
Разделение текста на абзацы производится с помощью контейнера <P></P>
На титульной странице обычно размещается текст, кратко описывающий содержание сайта:
<P ALIGN=“left”>На самом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P>
<P ALIGN=“right”>Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>
9 слайд
создаем Web-странички
В окне приложения БЛОКНОТ в контейнер <BODY> вставить последовательность тэгов и просмотреть результат в браузере:
<FONT COLOR = “blue”>
<H1 ALIGN=“center”>Все о компьютере </H1>
</FONT>
<HR>
<P ALIGN=“left”>На самом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P>
<P ALIGN=“right”>Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>
10 слайд
Вставка изображений
Для вставки изображений используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:
<IMG SRC=“computer.gif”>
Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла. Например:
<IMG SRC=“С:\computer\computer.gif”>
Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например:
<IMG SRC=“http://www.server.ru/computer.gif”>
11 слайд
создаем Web-странички
Поясняющий текст
Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
<IMG SRC=“computer.gif” ALT=“Компьютер”>
Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга <IMG>, который может принимать 5 различных значений: TOP(верх), MIDDLE(середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:
<IMG SRC=“computer.gif” ALT=“Компьютер” ALIGN=“right”>
12 слайд
создаем Web-странички
В окне приложения БЛОКНОТ в контейнер<BODY> вставить перед абзацами текста тэг вставки изображения, просмотреть результат в браузере.
<IMG SRC=“computer.gif” ALT=“Компьютер” ALIGN=“right”>
13 слайд
Практическое задание
Создать титульную страницу вашего сайта. Поэкспериментировать с форматированием текста и размещением графики. Задайте для страницы фон.
Используемые тэги :
Фоновое изображение <BODY BACKGROUND=“URL”>
Цвет фона <BODY BGCOLOR=“#RRGGBB”>
14 слайд
Гиперссылки на Web-страницах
Каждая страница будет содержать следующий HTML-код:
<HTML>
<HEAD>
<TITLE>Заголовок станицы</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
15 слайд
создаем Web-странички
Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранить их с именами software.htm, glossary.htm, hardware.htm и anketa.htm в каталоге сайта
16 слайд
создаем Web-странички
Гиперссылка состоит из двух частей:
Указателя ссылки
Адресной части ссылки
Указатель ссылки – это то, что мы видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.
URL-адрес может быть абсолютным и относительным.
Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера Интернета, путь к файлу и имя файла, например:
http://www.host.ru/Web-сайт/filename.htm
Абсолютный адрес документа, находящегося на локальном компьютере, будет включать в себя путь к файлу и имя файла, например:
С:/Web-сайт/filename.htm
17 слайд
создаем Web-странички
Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ):
<P ALIGN=“center”>
[Программы]   [Словарь]   [Комплектующие]   [Анкета]
</P>
Теперь для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки <A></A> с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки:
<A HREF=“URL”> Указатель гиперссылки</A>
18 слайд
создаем Web-странички
Вставить в титульную страницу код, создающий панель навигации:
<P ALIGN=“center”>
[<A HREF=“software.htm”> Программы</A>]  
[<A HREF=“glossary.htm”> Словарь</A>]  
[<A HREF=“hardware.htm”> Комплектующие</A>]  
[<A HREF=“anketa.htm”> Анкета</A>]
</P>
Полезно на титульной странице сайта создать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить URL-адрес электронной почты и вставить её в контейнер
<ADDRESS> </ADDRESS>, который задает стиль абзаца, принятый для указания адреса.
19 слайд
создаем Web-странички
Вставить в титульную страницу код, создающий ссылку на адрес электронной почты:
<ADDRESS>
<A HREF=mailto:mailbox@provaider.ru>E-mail:mailbox@provaider.ru</A>
</ADDRESS>
20 слайд
Практическое задание
Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.
21 слайд
создаем Web-странички
22 слайд
создаем Web-странички
Рабочие листы
к вашим урокам
Скачать
6 663 551 материал в базе
Настоящий материал опубликован пользователем Куликова Ольга Петровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
600 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
6 ч.
Мини-курс
4 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.