Лабораторная работа № 1. Знакомство с HTML Ознакомиться с работой следующих тегов и параметров: html, head,
title, body (bgcolor, background, text, link), p (align), b, em, u, i, font, ol/ul, li, a.
Обратить внимание на то, что теги бывают парные и непарные, а также
на то, что у многих тегов имеются параметры.
Задание 1.1. Создать в Блокноте следующую web-страничку (Название
в title указать «Знакомство с HTML»):
Название страницы
Эпиграф
Кратко о себе несколько строчек. Описание должно содержать использование нескольких шрифтов, несколько слов выделить цветом. Страничка
должна содержать все перечисленные теги с разными параметрами.
Число
Что-то вроде подписи в виде графического файла
Работа с таблицами, рисунками, гиперссылками
Для работы с таблицами используются теги table (border), tr (width,
height), td/th (align, valign, width, colspan, rowspan)
Задание 1.2. Добавить к своей странице 2 таблицы с осмысленной информацией. Одна таблица — обычная, вторая должна содержать объединенные ячейки.
Для вставки рисунка используется тег img (alt, align, width, height,
vspace, hspace, border).
Задание 1.3. Добавить к своей странице один рисунок три раза с разными размерами. Все используемые рисунки должны храниться в отдельной
папке.
Гипертекстовые связи задаются при тега a (href, target, name).
Связи бывают трех видов: ссылки на ресурсы Internet, ссылка на сервис электронной почты, ссылки внутри документа.
Задание 1.4. Реализовать все три типа гиперссылок.

Ирина15123010 Ирина15123010    3   04.04.2021 19:29    76

Ответы
Анна26112004 Анна26112004  06.01.2024 20:26
Добрый день, я буду выступать в роли школьного учителя для выполнения лабораторной работы по знакомству с HTML. Давайте разберем все задания поэтапно.

Задание 1.1. Создание web-странички:
1. Откройте текстовый редактор (например, Блокнот) и создайте новый файл.
2. На первой строке напишите следующий код: "". Этот тег указывает, что мы начинаем работать с HTML.
3. После этого, на следующей строке, напишите "". Тег "head" предназначен для включения мета-информации о странице и других важных элементов.
4. На новой строке напишите "Знакомство с HTML". Здесь мы указываем заголовок страницы, который будет отображаться на вкладке браузера.
5. После этого, на следующей строке, напишите "". Тег "" закрывает раздел "head".
6. Далее, на новой строке, напишите "". Тег "body" определяет содержимое страницы, которое будет отображаться в окне браузера.
7. После этого, на следующей строке, напишите следующий код:

```

Название страницы


Эпиграф

Кратко о себе несколько строчек. Описание должно содержать использование нескольких шрифтов, несколько слов выделить цветом.



```

В этом коде мы использовали теги "h1", "blockquote" и "p" для создания заголовков, цитаты и параграфа. Тег "p" имеет параметр "align", который задает выравнивание текста (в данном случае "justify").
8. На новой строке напишите следующий код:

```
Страничка


  1. Число

  2. Что-то вроде подписи в виде графического файла

  3. Работа с таблицами, рисунками, гиперссылками



```

Здесь мы использовали теги "b" для выделения жирным шрифтом, "br" для переноса строки, а также создали нумерованный список с помощью тегов "ol" и "li".

9. На новой строке напишите следующий код:

```







Таблица 1
Ячейка 1


```

Здесь мы использовали теги "table", "tr" и "td" для создания таблицы. Значение параметра "border" равное "1" указывает на то, что нужно отобразить рамку вокруг таблицы.

10. На новой строке напишите следующий код:

```








Объединенная ячейка
Ячейка 1 Ячейка 2


```

Здесь мы добавили вторую таблицу с объединенной ячейкой с помощью параметра "colspan". Значение "2" говорит о том, что нужно объединить две ячейки в одну.

11. На новой строке напишите следующий код:

```
Рисунок 1

```

Здесь мы использовали тег "img" для вставки рисунка. Значение атрибута "src" указывает путь к изображению, "alt" задает альтернативный текст (отображается, если изображение не загружено), "align" выравнивание, а "width" и "height" размеры изображения.

12. На новой строке напишите следующий код:

```
Рисунок 2

```

Здесь мы добавили второй рисунок с другими размерами и выравниванием.

13. На новой строке напишите следующий код:

```
Рисунок 3

```

Этот код добавляет третий рисунок с еще большими размерами.

14. На новой строке напишите следующий код:

```
Ссылка на ресурс

Ссылка на почту

Ссылка внутри документа


```

В этом коде мы использовали тег "a" для создания гиперссылок. Значение атрибута "href" задает адрес ресурса или почты. Для ссылок внутри документа, добавлено значение атрибута "href" в виде якоря.

15. На новой строке напишите следующий код:

```
Якорь

```

Этот код задает якорь, на который ссылается третья гиперссылка.

16. На новой строке напишите следующий код:

```



```

Здесь мы закрываем раздел "body" и весь документ "html".

Теперь у вас есть готовая web-страничка с использованием различных тегов и их параметров.

Задание 1.2. Добавление таблиц:
1. Для добавления обычной таблицы, продолжите код вашей страницы следующим образом:

```
















Заголовок 1 Заголовок 2 Заголовок 3
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6


```

2. Для добавления таблицы с объединенными ячейками, использовать следующий код:

```














Название Производитель
Телефон Apple Samsung
Huawei Xiaomi


```

Здесь мы использовали параметр "colspan" для объединения двух ячеек заголовка, а "rowspan" для объединения двух ячеек в первом столбце.

Задание 1.3. Добавление рисунков:
1. Создайте папку с названием "images" и поместите в нее изображения рисунок1.jpg, рисунок2.jpg и рисунок3.jpg (должны быть предварительно загружены в папку).
2. Добавьте следующий код к вашей странице:

```
Рисунок 1
Рисунок 1
Рисунок 1

```

Здесь мы использовали путь "images/рисунок1.jpg" для указания местоположения изображений. Размеры изображений заданы атрибутами "width" и "height".

Задание 1.4. Реализация гиперссылок:
Мы уже добавили гиперссылки в задании 1.1, но здесь указаны все три типа гиперссылок.
1. Дополните код вашей страницы следующим образом:

```
Ссылка на ресурс Internet

Ссылка на почту

Ссылка внутри документа


```

Здесь мы использовали значение атрибута "href" в виде URL-адреса для ссылки на ресурс Internet ("https://www.example.com"), значение "mailto:адрес_электронной_почты" для ссылки на адрес электронной почты, и значение "#якорь" для ссылки внутри документа, где "#якорь" соответствует идентификатору созданного якоря в задании 1.1.

Поздравляю, теперь ваша web-страница содержит все требуемые теги, параметры и гиперссылки. Вы можете сохранить файл с расширением .html и открыть его в любом браузере для просмотра результата. Удачи в выполнении лабораторной работы!
ПОКАЗАТЬ ОТВЕТЫ
Другие вопросы по теме Информатика