Практические работы
Знакомство с HTML (в примерах)
Создаем простую web-страницу для сети Internet
1. В папке Мои документы►9N класс создайте папку Сайт Иванова Коли (Ваша фамилия и имя).
2. Откройте Блокнот (Пуск►Программы►Стандартные►Блокнот).
3. Наберите пример 1.
4. Сохраните файл в папку Сайт Иванова Коли с именем файла index.html
5. Закройте блокнот.
6. Откройте папку Мои документы►9N класс►Сайт Иванова Коли.
7. 
Откройте файл index.html в браузере Internet Explorer (см. рис. 1).
8. Разверните окно браузера Internet Explorer во весь экран 
.
Пример 1. Вывод на страницу простого текста.
<HTML>
<HEAD>
<TITLE> Пробная страница </TITLE>
</HEAD>
<BODY>
Это моя первая web-страница для сети Internet
</BODY>
</HTML>
9. Откройте HTML-код страницы (Вид►Просмотр HTML-кода).
10. Измените HTML-код, используя пример 2.
11. Сохраните файл (Файл►Сохранить).
12. Обновите содержимое web-страницы кнопкой 
в браузере Internet Explorer.
Пример 2. Заголовок красного цвета в центре.
<HTML>
<HEAD>
<TITLE> Пробная страница (пример 2) </TITLE>
</HEAD>
<BODY>
<H2 ALIGN = " CENTER " >
<FONT COLOR = "# FF0000 " >
Я и мои друзья
</FONT>
</H2>
</BODY>
</HTML>
Пример 3. Заголовок и текст абзаца.
…
<BODY>
<H2 ALIGN = "CENTER">
<FONT COLOR = "#FF0000">
Я и мои друзья
</FONT>
</H2>
<P ALIGN = “LEFT”>
Меня зовут Иванов Коля. Я ученик 7 “Д” класса. У меня
много друзей: Попов Вася, Петров Коля, Фёдорова Аня.
</P>
</BODY>
</HTML>
Вставка и размещение изображений на web-странице.
13. В папке Мои документы►9N класс► Сайт Иванова Коли создайте папку images (для изображений).
14. В любом графическом редакторе создайте рисунок и сохраните в папку images ( имя файла - 1, форматфайла – jpg или gif).
Пример 4. Вставка изображения.
…
<BODY>
<H2 ALIGN = "CENTER">
<FONT COLOR = "#FF0000">
Я и мои друзья
</FONT>
</H2>
<P ALIGN = “LEFT”>
Меня зовут Иванов Петя. Я ученик 7 “Д” класса. У меня
много друзей: Попов Вася, Петров Коля, Фёдорова Аня.
</P>
<IMG SRC = "images/1.jpg">
</BODY>
</HTML>
Пример 5. Изменение цвета фона web-станицы.
<HTML>
<HEAD>
<TITLE> Пробная страница (пример 5) </TITLE>
</HEAD>
<BODY BGCOLOR= "#90EE90">
<H2 ALIGN = "CENTER">
…
</BODY>
</HTML>
Создание фонового изображения web-страницы.
15.
|
16. Измените HTML-код, используя пример 6.
17. Обновите содержимое web-страницы кнопкой в браузере Internet Explorer.
Пример 6.
<HTML>
<HEAD>
<TITLE> Пробная страница (пример 6) </TITLE>
</HEAD>
<BODY BACKGROUND = "images/fon1.jpg">
<H2 ALIGN = "CENTER">
…
</BODY>
</HTML>
Связь с другими страницами сайта (ссылки).
18. 
Откройте новый лист Блокнота (Пуск►Программы►Стандартные►Блокнот).
19. Наберите пример 2, изменяя текст «Я и мои друзья» на «Обо мне».
20. Файл сохраните как file1.html в папку Сайт Иванова Коли.
21. Измените текст «Обо мне» на текст «О моих друзьях».
22. Файл сохраните как file2.html в папку Сайт Иванова Коли.
23. Измените текст «О моих друзьях» на «Наше фото».
24. Файл сохраните как file3.html в папку Сайт Иванова Коли.
25. Закройте блокнот.
26. Откройте HTML-код страницы файла index.html (Вид►Просмотр HTML-кода).
27. Измените HTML-код, используя пример 7.
28. Сохраните файл (Файл►Сохранить).
29. Обновите содержимое web-страницы кнопкой в браузере Internet Explorer.
Пример 7. Связь с другими страницами сайта (ссылки).
<HTML>
<HEAD>
<TITLE> Пробная страница (пример 7) </TITLE>
</HEAD>
<BODY BACKGROUND= "images/fon1.jpg">
<H2 ALIGN = "CENTER">
<FONT COLOR = "#FF0000">
Сайт Иванова Коли
</FONT>
</H2>
<A HREF = "file1.html"> Обо мне </A> <BR>
<A HREF = "file2.html"> О моих друзьях </A> <BR>
<A HREF = "file3.html"> <IMG SRC = "images/button1.jpg" BORDER = NO> </A> <BR>
</BODY>
</HTML>
30. В графическом редакторе (Adobe Photoshop) создайте рисунок кнопки 
(150x25) для ссылки на файл file3.html.
31. Графический файл сохраните как button1 в папку images, форматфайла - jpg.
32. Обновите содержимое web-страницы файла index.html кнопкой в браузере Internet Explorer.
33. Откройте HTML-код страницы файла file1.html (Вид►Просмотр HTML-кода).
34. Измените HTML-код (см. рис. 7а).
35. Сохраните файл (Файл►Сохранить). Обновите содержимое web-страницы данного файла.
36. Откройте HTML-код страниц файлов file2.html, file3.html. Измените HTML-код (см. рис. 7абв). Сохраните. Обновите web-страницы.
 |
Пример 8. Изменение размера шрифта.
…
<FONT SIZE = 2> Последнее изменение содержания сайта 7.12.2004. </FONT>
</BODY>
</HTML>
37. Измените HTML-код файла index.html, используя пример 8.
Пример 9. Горизонтальная линия (горизонтальный разделитель).
…
<HR SIZE = 3>
<FONT SIZE = 2> Последнее изменение содержания сайта 7.12.2004. </FONT>
</BODY>
</HTML>
38. Измените HTML-код файла index.html, используя пример 9.