Практические работы по WEB-программирование / Лаба 1 / Web Лаб 1
.docxПрактическая работа № 1
Основы разметки гипертекста HTML
Цель работы: Изучение основ стандартного языка разметки НТМL для создания статических Web–страниц.
Задание:
1. В текстовом редакторе набрать Web-страницу и сохранить как текст
в файле.
Посмотреть
этот файл в Internet Explorer. Находясь в браузере,
посмотреть исходный текст.
2. Для Web-страницы HTMLSimpl задать атрибуты тэга <body>, описанные в теоретической части ("Основы разметки гипертекста HTML"), и выяснить какие из них поддерживаются браузером Internet Explorer.
Атрибуты тега <body>
Атрибут Описание
alink Определяет цвет активных ссылок
background Определяет фоновое изображение для документа
bgcolor Определяет цвет фона элемента
link Определяет цвет для не посещенных ссылок
text Определяет цвет текста документа
vlink Определяет цвет посещенных ссылок
3. Для Web-страницы HTML Simpl изменить цвет фона, используя
константы, описанные в теоретической части (п.4.1 "Основы разметки гипертекста HTML"), а также задать фон в виде картинки из файла.
4. С помощью графического редактора создать изображение и вставить его в Web- страницу, используя тэг <img> и указав в атрибуте <src> этого тэга полный путь файла, содержащего созданное изображение. В эту же страницу вставить заголовки всех шести уровней и использовать тэг <br/> для размещения текста и изображения на экране. Вставить также текст с несколькими параграфами (абзацами), выделяя каждые параграф тэгами <p> и </p>. Вставить гиперссылку с помощью тэгов <a> и </a>:
5. Изучить назначение атрибутов тэга <a>: accesskey, class, datafld, datasrc, href, id, lang, langvage, methods, name, rel, rev, style, taget, title, vrn.
Атрибут |
Описание |
charset |
Определяет кодировку символов документа, на который ведет ссылка |
coords |
Определяет координаты ссылки в карте изображений |
download |
Определяет, что документ, на который указывает ссылка, будет загружаться |
href |
Определяет URL страницы, на которую ведет ссылка |
hreflang |
Определяет язык документа, на который указывает ссылка |
media |
Определяет устройство вывода, для которого оптимизирован документ, на который ведет ссылка |
name |
Определяет имя анкора |
rel |
Определяет отношение с документом, на который ведет ссылка |
rev |
Определяет отношение с документом, на который ведет ссылка |
shape |
Определяет форму ссылки в карте изображений |
target |
Определяет, где открывать документ, на который ведет ссылка |
type |
Определяет медиа-тип документа, на который указывает ссылка |
6. Разместить на
Web-странице
несколько фрагментов текста и несколько
изображений, располагая их последовательно
или мозаикой и изменяя атрибуты тэга
<font>:
class,
color,
face,
id,
lang,
language,
size,
style,
title,
point_size,
weight.
Убедиться, что действие тэга <font>
прекращаются тэгом </font>.
7. Ввести фрагмент HTML и посмотреть на экране вид таблицы:
Листинг программы:
</head>
HTMLSimpl.
<html>
<head> <title> Добро пожаловать в Web – страницу
</title> </head>
<body allign="center" alink="tomato" link="green"background="https://celes.club/uploads/posts/2022-10/thumbs/1667216607_2-celes-club-p-krasivii-belii-fon-vkontakte-3.jpg">
Добро пожаловать в Web – страницу
<body>
<div><font size="6" color="orange" face="Times New Roman">Orange!</font>слово выделено с помощью тега font.</div>
</body>
<h1>Заголовок 1</h1>
<p>Параграф 1</p><br/>
<p>Параграф 2</p>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
<img src="http://www.krgv.ru/icon/news2/465x310/371762_1644826231.jpg" alt="Фон">
<a href=“http.//www.microsoft.com” Microsoft>
Нажмите на ссылку microsoft
</a>
<table border="1">
<tr align="center">
<th colspan="3"> Это таблица </th>
</tr>
<tr align="center">
<td> Маркерованные </td>
<td> Нумерованные </td>
<td> Смешанные </td>
</tr>
<tr align="center">
<td> <ul>
<li>Один</li>
<li>Два</li>
<li>Три</li>
</ul>
</td>
<td> <ol>
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
<li>Четвертый</li>
</ol> </td>
<td> <ol>
<li>Задача 1</li>
<li>Задача 2</li>
<li>
Задача 3
<ul>
<li>Подзадача 1</li>
<li>Подзадача 2</li>
</ul>
</li>
<li>Задача 4</li>
</ol> </td>
</tr>
</table>
</body>
</html>