- •Язык разметки гипертекста html порядок создания html-документа с помощью текстового редактора блокнот:
- •Правильно правильно не правильно лабораторная работа №1. Форматирование текста
- •Создать текстовый документ
- •Сохранить и проверить результат.
- •Сохранить и проверить результат.
- •Сохранить и проверить результат.
- •Задание для самостоятельной работы
- •Лабораторная работа №2. Создание списков
- •Задания для самостоятельной работы:
- •Лабораторная работа №3. Создание таблиц
- •Лабораторная работа №3. Вставка графических изображений
- •Лабораторная работа №4. Создание таблиц
- •Задания для самостоятельной работы:
- •Лабораторная работа №5. Создание гиперссылок
- •Задание для самостоятельной работы
Лабораторная работа №2. Создание списков
Задание:
-
Создать HTML-документ со следующим HTML-кодом:

Рис.6. Html-код для лабораторной работы №2
-
Сохранить документ под именем lab2.html
-
Просмотреть результат созданного HTML-документа в браузере

Рис.7. Просмотр результата
-
Изменить тип нумерации списка, сохранить, посмотреть результат.
<ol type=I> ….. </ol>
-
Изменить тип списка на маркированный, сохранить, посмотреть результат.
<ul type=square> … элементы списка ... </ul>

Рис.8. Нумерация римскими цифрами.
Задания для самостоятельной работы:
Оформить комбинированный (сложный) список, представленный на рисунке.

Рис.9. Комбинированный (сложный) список
……………………………….. <ol>
<li>
Первый элемент нумерованного списка
<li>
Второй элемент нумерованного списка
<li>
Третий элемент нумерованного списка
<li>
Четвертый элемент нумерованного списка
<li>
Пятый элемент нумерованного списка
<li>
Шестой элемент нумерованного списка
<ol
type=a>
<li>
Первый элемент второго нумерованного
списка
<li>
Второй элемент второго нумерованного
списка
<li>
Третий элемент второго нумерованного
списка
</ol>
<li>
Седьмой элемент нумерованного списка
………………………………………………………………………………………
Лабораторная работа №3. Создание таблиц
Рис.10. Html-код для самостоятельной работы
Лабораторная работа №3. Вставка графических изображений
Задание:
-
Найти графическое изображение (формата jpg, gif или png), скопировать в вашу папку (где хранятся ранее созданные файлы).
-
Создать HTML-документ со следующим HTML-кодом:
<html> <head> </head> <body> <center> <font
face=arial color=blue size=4>
На
страницу можно помещать графические
изображения </font> <br>
<br>
<img
src=animal.jpg>
</center>
</body>
</html>
-
Вместо выделенного текста укажите имя вашего графического изображения, обязательно с указанием расширения.
Примечание: Если HTML-документ и графическое изображение хранятся в разных папках, то для графического изображения необходимо указать полный путь.
<img src=1.gif> или <img src=C:\Документы\Для лаб_Html\1.gif>
-
Если изображение большое (или маленького) масштаба, то можно указать его размеры для отображения, в процентах или пикселах.
<img src=animal.jpg width=50%> ширина указана в % (от общей ширины окна браузера)
<img src=animal.jpg width=200> ширина указана в пикселах

Лабораторная работа №4. Создание таблиц
Задание:
-
Создать HTML-документ со следующим HTML-кодом:

Рис.14. HTML-код для лабораторной работы №4
-
Сохраните и сравните результат.

Рис.15. Результат
-
Задайте ширину таблицы не в процентах, а в пикселах.
<table width=200 border=1>
-
Заполните таблицу необходимыми данными.
-
Добавьте две строки в таблицу, заполните соответствующим содержимым:
-
CTRL+A
ALT+F4
-
Для фона ячеек заголовочной части использовать зеленый цвет.
<th bgcolor=green> ... </th>
-
Для фона ячеек основной части использовать желтый цвет.
<td bgcolor=……> ... </td>
