Teory practic html

HTML (HyperText Markup Language) - это язык разметки, который используется для создания веб-страниц. HTML-документ состоит из элементов, которые определяют структуру и содержание страницы.

Элементы HTML

Элемент HTML состоит из открывающего и закрывающего тегов, содержащих внутри себя контент. Например, элемент

<p>

используется для создания абзаца:

<p>Это текст абзаца.</p>

Атрибуты HTML

Атрибуты HTML используются для изменения поведения и внешнего вида элементов. Атрибуты указываются в открывающем теге элемента. Например, атрибут

href

используется для задания ссылки на элемент

<a>

<a href="https://www.example.com">Ссылка на пример</a>

Структура HTML-документа

HTML-документ начинается с тега

<!DOCTYPE html>

который определяет тип документа. Затем следует элемент

<html>

который содержит все остальные элементы страницы. Элементы

<head>

и

<body>

используются для определения метаданных и содержимого страницы соответственно:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <p>Это текст абзаца.</p>
  </body>
</html>

CSS в HTML

CSS (Cascading Style Sheets) используется для задания стилей элементов HTML. Стили могут быть определены в отдельном файле CSS или внутри тега

<style>

внутри элемента

<head>

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <p>Это текст абзаца.</p>
  </body>
</html>

JavaScript в HTML

JavaScript используется для создания интерактивных элементов на странице. Скрипты могут быть определены в отдельном файле JavaScript или внутри тега

<script>

внутри элемента

<head>

или

<body>

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Заголовок первого уровня</h1>
    <p>Это текст абзаца.</p>
  </body>
</html>

Практические примеры использования html

Создание заголовка и абзаца:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <p>Это мой первый абзац на странице. Я учусь HTML!</p>
</body>
</html>

Вставка изображения:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <p>Это мой первый абзац на странице. Я учусь HTML!</p>
    <img src="https://www.example.com/image.jpg" alt="Описание изображения">
</body>
</html>

Создание ссылки:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <p>Это мой первый абзац на странице. Я учусь HTML!</p>
    <a href="https://www.example.com">Ссылка на пример</a>
</body>
</html>

Создание списка:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <ul>
        <li>Первый элемент списка</li>
        <li>Второй элемент списка</li>
        <li>Третий элемент списка</li>
    </ul>
</body>
</html>

Создание таблицы:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <table>
        <thead>
            <tr>
                <th>Фамилия</th>
                <th>Имя</th>
                <th>Возраст</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Иванов</td>
                <td>Иван</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Петров</td>
                <td>Петр</td>
                <td>30</td>
            </tr>
            <tr>
                <td>Сидоров</td>
                <td>Сидор</td>
                <td>35</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Создание формы:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница</title>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <form>
        <label for="name">Имя:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">Электронная почта:</label>
        <input type="email" id="email" name="email"><br><br>
        <label for="message">Сообщение:</label>
        <textarea id="message" name="message"></textarea><br><br>
        <input type="submit" value="Отправить">
    </form>
</body>
</html>

Использование фреймов:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница</title>
</head>
<frameset cols="25%,75%">
    <frame src="menu.html">
    <frame src="content.html">
</frameset>
</html>

Использование JavaScript:

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая страница</title>
    <script>
        function showDate() {
            document.getElementById("date").innerHTML = Date();
        }
    </script>
</head>
<body>
    <h1>Заголовок страницы</h1>
    <p>Нажмите на кнопку, чтобы увидеть текущую дату и время:</p>
    <button onclick="showDate()">Показать дату и время</button>
    <p id="date"></p>
</body>
</html>

Практические задания

Повторите премеры представленные выше. Разберите представленные теги
Создайте простую веб-страницу, содержащую заголовок, несколько абзацев текста, изображение и ссылку на другую страницу.
Создайте форму, содержащую несколько полей ввода (например, имя, электронная почта, сообщение) и кнопку для отправки формы.
Создайте таблицу, содержащую несколько строк и столбцов, и добавьте в нее некоторые стили (например, изменение цвета фона ячеек).
Создайте список, содержащий несколько элементов, и добавьте в него некоторые стили (например, изменение типа маркера и отступов).
Создайте навигационное меню, содержащее ссылки на различные страницы вашего сайта.
Создайте страницу с использованием фреймов, содержащую несколько разных веб-страниц.
Используйте JavaScript для создания интерактивного элемента на странице, например, для отображения текущей даты и времени.
Создайте адаптивную веб-страницу, которая будет корректно отображаться на различных устройствах и размерах экранов.