Поделиться
Практическое занятие по тем2.docx
Практическое занятие по теме: Создание гипертекстовых документов
Цели занятия:
1. Ознакомить обучающихся с понятием гипертекстовых документов.
2. Научить создавать простые гипертекстовые документы с использованием HTML.
3. Развить навыки работы с гиперссылками, изображениями и структурированием контента.
### Теоретический материал:
#### 1. Что такое гипертекст?
Гипертекст — это текст, содержащий ссылки на другие тексты или документы. Он позволяет пользователю переходить от одного элемента информации к другому, создавая нелинейные структуры.
#### 2. Основы HTML
HTML (HyperText Markup Language) — язык разметки, используемый для создания веб-страниц. Основные элементы HTML:
- **Тег `<html>`**: корневой элемент HTML-документа.
- **Тег `<head>`**: содержит метаданные о документе, такие как заголовок.
- **Тег `<title>`**: задает заголовок страницы, отображаемый на вкладке браузера.
- **Тег `<body>`**: содержит содержимое веб-страницы.
- **Тег `<a>`**: создает гиперссылку.
- **Тег `<img>`**: вставляет изображение.
#### 3. Структура гипертекстового документа
Простой гипертекстовый документ может выглядеть следующим образом:
```html
<!DOCTYPE html>
<html>
<head>
<title>Мой гипертекстовый документ</title>
</head>
<body>
<h1>Добро пожаловать на мою страницу!</h1>
<p>Это пример гипертекстового документа.</p>
<a href="https://www.example.com">Перейти на example.com</a>
<img src="image.jpg" alt="Пример изображения">
</body>
</html>
```
### Примеры и обоснованные решения:
#### Пример 1: Создание гиперссылки
Чтобы создать гиперссылку, используйте тег `<a>`. Например, если вы хотите создать ссылку на сайт Wikipedia, код будет выглядеть так:
```html
<a href="https://www.wikipedia.org">Перейти на Wikipedia</a>
```
**Обоснование**: Атрибут `href` указывает URL, на который будет вести ссылка. Текст между тегами `<a>` и `</a>` будет отображаться как кликабельный.
#### Пример 2: Вставка изображения
Для вставки изображения используйте тег `<img>`. Например:
```html
<img src="logo.png" alt="Логотип">
```
**Обоснование**: Атрибут `src` указывает путь к изображению, а `alt` — текст, который будет отображаться, если изображение не загрузится.
### Самостоятельная работа:
#### Задача 1:
Создайте гипертекстовый документ, который включает:
1. Заголовок страницы "Моя первая веб-страница".
2. Основной заголовок (h1) с текстом "Привет, мир!".
3. Абзац (p) с описанием вашего хобби.
4. Гиперссылку на ваш любимый сайт.
5. Изображение, связанное с вашим хобби.
**Подробное объяснение решения**:
1. Откройте текстовый редактор (например, Notepad или любой другой).
2. Напишите код, используя элементы HTML, которые вы изучили.
3. Сохраните файл с расширением `.html` (например, `index.html`).
4. Откройте файл в веб-браузере, чтобы увидеть результат.
#### Пример решения:
```html
<!DOCTYPE html>
<html>
<head>
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Я люблю рисовать и заниматься спортом.</p>
<a href="https://www.artist.com">Перейти на сайт о искусстве</a>
<img src="hobby.jpg" alt="Изображение моего хобби">
</body>
</html>
```
### Итог:
На этом занятии обучающиеся узнали о гипертекстовых документах, основах HTML, а также создали свой первый гипертекстовый документ. Практические навыки, полученные на занятии, помогут им в дальнейшем изучении веб-разработки и создании более сложных веб-страниц.
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
