1. Создание простой HTML-страницы

Рассмотрим пример главной страницы портала университета.

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Портал университета</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<p>Это учебный портал университета.</p>

<p>Здесь студенты могут найти информацию о курсах.</p>

</body>

</html>

Объяснение:

<!DOCTYPE html> — объявляет тип HTML-документа.

<html> — корневой элемент страницы.

<head> — содержит служебную информацию.

<meta charset="UTF-8"> — устанавливает кодировку текста.

<title> — задаёт название вкладки браузера.

<body> — содержит видимую часть страницы.

<h1> — создаёт заголовок первого уровня.

<p> — создаёт текстовый абзац.

Результат: в браузере отображается страница с заголовком и двумя абзацами.

2. Создание списка и гиперссылки

На странице университета необходимо показать список учебных дисциплин.

<h2>Учебные дисциплины</h2>

<ul>

<li>WEB-технологии</li>

<li>Базы данных</li>

<li>Программирование</li>

</ul>

<a href="courses.html">Посмотреть все курсы</a>

Объяснение:

<h2> — заголовок второго уровня.

<ul> — создаёт маркированный список.

<li> — определяет элемент списка.

<a> — создаёт гиперссылку.

href — указывает адрес страницы для перехода.

Результат: браузер отображает список из трёх дисциплин и ссылку для перехода на страницу курсов.

3. Добавление таблицы и изображения

Создадим фрагмент страницы с расписанием занятий и изображением университета.

<h2>Расписание занятий</h2>

<table>

<tr>

<th>День</th>

<th>Предмет</th>

</tr>

<tr>

<td>Понедельник</td>

<td>WEB-технологии</td>

</tr>

<tr>

<td>Вторник</td>

<td>Базы данных</td>

</tr>

</table>

<h2>Наш университет</h2>

<img src="university.jpg"

alt="Здание университета"

width="300"

height="200">

Объяснение:

<table> — создаёт таблицу.

<tr> — определяет строку таблицы.

<th> — задаёт заголовочную ячейку.

<td> — задаёт обычную ячейку.

<img> — добавляет изображение.

src — указывает путь к изображению.

alt — содержит альтернативное описание изображения.

width и height — задают размеры изображения.

Результат: на странице отображаются расписание занятий и фотография университета, если файл изображения доступен по указанному пути.