Теоретическая справка

Основные теги, которые используются в HTML

<h1> - <h6>: Заголовки, где <h1> — это заголовок первого уровня (самый крупный), а <h6> — заголовок шестого уровня (самый мелкий).

<h1>Основной заголовок</h1>
<h2>Подзаголовок 1</h2>
<h3>Подзаголовок 2</h3>

<p>: Тег для создания абзацев текста.

<p>Это мой первый параграф.</p>
<p>Это второй параграф, который описывает больше деталей.</p>

<img>: Используется для вставки изображений. Основные атрибуты:
- src — путь к изображению.
- alt — альтернативный текст, который будет отображаться, если изображение не загрузилось.

<img src="images/photo.jpg" alt="Мое фото" width="200">

<ul> и <li>: Ненумерованный список (unordered list). Тег <ul> создаёт список, а <li> определяет элементы списка. Для создания нумерованного списка используется тег <ol>.

<ul>
	<li>Первый пункт</li>
	<li>Второй пункт</li>
	<li>Третий пункт</li>
</ul>

<a>: Тег для создания гиперссылок. Основной атрибут href указывает URL, куда будет направлен пользователь при нажатии на ссылку.

<a href="https://www.example.com" target="_blank">Посетить мой сайт</a>

<table>: Используется для создания таблиц. Содержит строки <tr>, а каждая строка — столбцы <td>.

<table border="1">
	<tr>
		<th>Категория</th>
		<th>Описание</th>
	</tr>
	<tr>
		<td>Технические навыки</td>
		<td>HTML, CSS, JavaScript</td>
	</tr>
	<tr>
		<td>Управленческие навыки</td>
		<td>Коммуникация, тайм-менеджмент</td>
	</tr>
</table>

Создание файла `index.html`

Основной файл HTML имеет следующую базовую структуру:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Сайт</title>
</head>
<body>
	<!-- Код сайта -->
</body>
</html>

Описание основных тегов

<!DOCTYPE html>: Определяет тип документа как HTML5. Этот элемент нужен для того, чтобы браузер понял, что ему предстоит работать с HTML5.
<html lang="ru">: Корневой элемент документа. Атрибут lang="en" определяет основной язык страницы как английский.
<head>: Этот тег содержит метаданные о странице: информацию, которая не видна напрямую пользователю, но необходима для правильной работы страницы.

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Моя визитка</title>
</head>

<meta charset="UTF-8">: Устанавливает кодировку символов для страницы, чтобы поддерживать различные языки, в том числе кириллицу.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Эта строка позволяет странице быть адаптивной, то есть корректно отображаться на мобильных устройствах.
<title>: Устанавливает название страницы, которое отображается на вкладке браузера.
<body>: Основное содержимое страницы, видимое пользователям, располагается между открывающим и закрывающим тегом <body>. Пример:

<body>
	<h1>Привет! Это моя веб-страница.</h1>
	<p>Здесь вы узнаете обо мне и моих навыках.</p>
</body>

Базовая структура проекта

Для организации файлов и ресурсов проекта рекомендуется использовать следующую структуру директорий и файлов: `

assets/
	css/
	js/
	images/
	fonts/
index.html

Папка assets/: Хранит ресурсы, используемые на сайте, такие как CSS, JavaScript, изображения и шрифты.
- Папка css/: Содержит файлы стилей, которые управляют внешним видом веб-страницы.
- Папка js/: Содержит JavaScript-файлы, которые добавляют интерактивность на страницу.
- Папка images/: Хранит изображения, используемые на веб-странице.
- Папка fonts/: Используется для шрифтов, если они загружаются локально.
index.html: Главный файл веб-страницы, который содержит разметку страницы и ссылки на внешние ресурсы (CSS, JS).

Практическое задание: Создание веб-страницы визитки

Тема: Создание личного сайта-визитки.
Цель: Освоить базовые HTML-теги и создать веб-страницу, которая будет представлять информацию о вас: ваши навыки, образование и контакты.
Задание. Создайте личный сайт-визитку с разделами:

О себе — краткое описание вашей личности или биографии.
Навыки — перечень ваших ключевых навыков.
Образование — список учебных заведений или курсов, которые вы окончили.
Контакты — информация о ваших контактных данных и ссылки на социальные сети.

Требования:

Использовать теги для организации страницы:
- Заголовки: <h1> и <h2> для создания разделов.
- Параграфы: <p> для текста.
- Изображения: <img> для вставки фотографии или логотипа.
- Списки: <ul> и <li> для организации информации в виде списка.
- Ссылки: <a> для гиперссылок на внешние ресурсы.
В разделе "Навыки" необходимо использовать таблицу для структурирования информации о ваших технических и управленческих навыках. Таблица должна иметь две колонки: "Категория" и "Навыки".
Добавьте изображение на страницу с выравниванием по центру и альтернативным текстом, если изображение не загрузится.
Добавьте ссылки на социальные сети.

Пример структуры HTML-документа

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя визитка</title>
</head>
<body>
    <h1>О себе</h1>
    <p>Привет! Я веб-разработчик с опытом работы в создании современных и адаптивных веб-сайтов.</p>

    <h2>Навыки</h2>
    <table border="1">
        <tr>
            <th>Категория</th>
            <th>Навыки</th>
        </tr>
        <tr>
            <td>Технические навыки</td>
            <td>HTML, CSS, JavaScript</td>
        </tr>
        <tr>
            <td>Управленческие навыки</td>
            <td>Управление проектами, коммуникации</td>
        </tr>
    </table>

    <h2>Образование</h2>
    <ul>
        <li>Университет XYZ, Бакалавр в области информатики</li>
        <li>Курсы веб-разработки на платформе ABC</li>
    </ul>

    <h2>Контакты</h2>
    <p>Email: myemail@example.com</p>
    <p>Социальные сети: 
        <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>, 
        <a href="https://www.github.com" target="_blank">GitHub</a>
    </p>
</body>
</html>

Лабораторные для студентов Прикладной Информатики