Связь с другими страницами сайта (ссылки).




Практические работы

Знакомство с 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.

В графическом редакторе создайте фоновый рисунок (200x100) и сохраните в папку images ( имя файла – fon1, формат - jpg).

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.

 

 



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2017-11-22 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: