Примеры HTML-кода для создания веб-страниц в блокноте

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Введение в HTML и текстовые редакторы

HTML (HyperText Markup Language) — это основной язык разметки для создания веб-страниц. Он используется для структурирования контента на веб-странице и определения его элементов, таких как заголовки, абзацы, изображения и ссылки. Для написания HTML-кода можно использовать любой текстовый редактор, включая стандартный "Блокнот" (Notepad) в Windows.

HTML является основой веб-разработки, и его знание необходимо для создания статических веб-страниц. В отличие от других языков программирования, HTML не требует компиляции или сложных инструментов для разработки. Достаточно простого текстового редактора и веб-браузера для просмотра результатов.

Кинга Идем в IT: пошаговый план для смены профессии

Создание первой HTML-страницы в блокноте

Начнем с создания простой HTML-страницы. Откройте "Блокнот" и введите следующий код:

HTML

Скопировать код

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая веб-страница</title>
</head>
<body>
    <h1>Добро пожаловать на мою первую веб-страницу!</h1>
    <p>Это мой первый абзац текста на веб-странице.</p>
</body>
</html>

Этот код создает базовую структуру HTML-документа. Давайте разберем его подробнее.

Основные HTML-теги и их использование

DOCTYPE и корневой элемент

HTML

Скопировать код

<!DOCTYPE html>
<html>

<!DOCTYPE html> указывает браузеру, что документ написан на HTML5. Тег <html> является корневым элементом, который содержит весь контент страницы.

Заголовок документа

HTML

Скопировать код

<head>
    <title>Моя первая веб-страница</title>
</head>

Тег <head> содержит метаданные о документе, такие как его заголовок, который отображается на вкладке браузера. Тег <title> задает заголовок страницы.

Тело документа

HTML

Скопировать код

<body>
    <h1>Добро пожаловать на мою первую веб-страницу!</h1>
    <p>Это мой первый абзац текста на веб-странице.</p>
</body>

Тег <body> содержит весь видимый контент веб-страницы. Тег <h1> используется для заголовков первого уровня, а тег <p> — для абзацев текста.

Добавление стилей и форматирование текста

Чтобы сделать вашу страницу более привлекательной, можно добавить стили. В HTML это делается с помощью CSS (Cascading Style Sheets). Давайте добавим немного стилей к нашей странице:

HTML

Скопировать код

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая веб-страница</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
    </style>
</head>
<body>
    <h1>Добро пожаловать на мою первую веб-страницу!</h1>
    <p>Это мой первый абзац текста на веб-странице.</p>
</body>
</html>

В этом примере мы добавили тег <style> внутри тега <head>, чтобы задать стили для элементов на странице. Мы изменили шрифт, цвет фона и текстовые цвета.

Сохранение и просмотр HTML-страницы в браузере

Теперь, когда наш HTML-код готов, давайте сохраним его и откроем в браузере:

В "Блокноте" выберите "Файл" -> "Сохранить как...".
В поле "Имя файла" введите index.html и выберите "Все файлы" в поле "Тип файла".
Нажмите "Сохранить".

Теперь откройте сохраненный файл index.html в любом веб-браузере (например, Google Chrome, Firefox или Edge). Вы увидите вашу первую веб-страницу с заголовком и абзацем текста.

Добавление изображений и ссылок

Для того чтобы сделать вашу веб-страницу более интересной, вы можете добавить изображения и ссылки. Давайте рассмотрим, как это сделать.

Добавление изображения

Для добавления изображения используется тег <img>. Вот пример:

HTML

Скопировать код

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая веб-страница</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
    </style>
</head>
<body>
    <h1>Добро пожаловать на мою первую веб-страницу!</h1>
    <p>Это мой первый абзац текста на веб-странице.</p>
    <img src="example.jpg" alt="Пример изображения">
</body>
</html>

В этом примере мы добавили тег <img>, который указывает на файл изображения example.jpg. Атрибут alt задает альтернативный текст, который будет отображаться, если изображение не загрузится.

Добавление ссылки

Для добавления ссылки используется тег <a>. Вот пример:

HTML

Скопировать код

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая веб-страница</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
    </style>
</head>
<body>
    <h1>Добро пожаловать на мою первую веб-страницу!</h1>
    <p>Это мой первый абзац текста на веб-странице.</p>
    <a href="https://www.example.com">Посетите мой любимый сайт</a>
</body>
</html>

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

Работа с таблицами и списками

Таблицы и списки — это важные элементы для организации информации на веб-странице. Давайте рассмотрим, как их использовать.

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

Для создания таблицы используется тег <table>. Вот пример:

HTML

Скопировать код

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая веб-страница</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Добро пожаловать на мою первую веб-страницу!</h1>
    <p>Это мой первый абзац текста на веб-странице.</p>
    <table>
        <tr>
            <th>Имя</th>
            <th>Возраст</th>
        </tr>
        <tr>
            <td>Алиса</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Боб</td>
            <td>30</td>
        </tr>
    </table>
</body>
</html>

В этом примере мы создали таблицу с двумя столбцами и двумя строками данных. Теги <th> используются для заголовков столбцов, а теги <td> — для ячеек данных.

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

Для создания списка используется тег <ul> для ненумерованных списков и <ol> для нумерованных списков. Вот пример ненумерованного списка:

HTML

Скопировать код

<!DOCTYPE html>
<html>
<head>
    <title>Моя первая веб-страница</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
    </style>
</head>
<body>
    <h1>Добро пожаловать на мою первую веб-страницу!</h1>
    <p>Это мой первый абзац текста на веб-странице.</p>
    <ul>
        <li>Пункт 1</li>
        <li>Пункт 2</li>
        <li>Пункт 3</li>
    </ul>
</body>
</html>

В этом примере мы создали ненумерованный список с тремя пунктами. Теги <li> используются для каждого элемента списка.

Заключение

Поздравляю! Вы создали свою первую веб-страницу с помощью HTML и "Блокнота". В этой статье мы рассмотрели основные HTML-теги, добавили стили и научились сохранять и просматривать HTML-документы в браузере. Мы также узнали, как добавлять изображения, ссылки, таблицы и списки. Продолжайте экспериментировать и изучать HTML, чтобы создавать более сложные и красивые веб-страницы. 😉

Примеры HTML-кода для создания веб-страниц в блокноте

Пройдите тест, узнайте какой профессии подходите

Введение в HTML и текстовые редакторы

Создание первой HTML-страницы в блокноте

Основные HTML-теги и их использование

DOCTYPE и корневой элемент

Заголовок документа

Тело документа

Добавление стилей и форматирование текста

Сохранение и просмотр HTML-страницы в браузере

Добавление изображений и ссылок

Добавление изображения

Добавление ссылки

Работа с таблицами и списками

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

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

Заключение

Читайте также