Перейти к основному содержимому

Текст в веб-технологиях - HTML, Markdown, шаблоны

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ
Всем

Веб-технологии​

HTML​

HTM, HTML (HyperText Markup Language) – язык разметки веб-страниц, состоящий из тегов и атрибутов. Очень похож на XML, но они отличаются тем, что в HTML имеется стандартизированный набор тегов и атрибутов с установленной целью, допустим <head> для заголовка, и <a href=”” /> для ссылки, тогда как в XML можно создать свой, произвольный элемент <Element123>.

Язык разметки — это система обозначений, встроенная в текст и предназначенная для описания структуры и назначения его частей. Такой язык использует специальные последовательности символов (например, теги или управляющие команды), чтобы указать, где заголовок, абзац, список, ссылка или другая смысловая единица.

Тег — это обозначение, выделяющее фрагмент текста и придающее ему определённую роль в структуре документа. Тег записывается в угловых скобках, например <p> для абзаца или <h1> для главного заголовка. Некоторые теги имеют пару: открывающий (<section>) и закрывающий (</section>), между которыми размещается содержимое.

Атрибут — это дополнительная характеристика тега, задаваемая внутри открывающего тега в виде пары «имя = значение». Атрибут уточняет свойства элемента: например, href="https://example.com" указывает адрес ссылки, alt="Картинка" задаёт альтернативный текст изображения, class="button" назначает элементу категорию для стилизации.

Гипертекст — это текст, содержащий встроенные ссылки на другие фрагменты того же документа или на внешние ресурсы. Такие ссылки позволяют пользователю переходить между разделами, страницами или сайтами одним щелчком, формируя нелинейную структуру навигации.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример структуры HTML</title>
    <!-- Подключение стилей -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Вселенная IT</h1>
        <nav>
            <a href="#Основы">Основы</a>
            <a href="#code">Код</a>
        </nav>
    </header>

    <main>
        <section id="Основы">
            <h2>Базовые принципы</h2>
            <p>Это пример текстового контента.</p>
        </section>

        <section id="code">
            <h2>Пример кода</h2>
            <pre><code>console.log("Hello");</code></pre>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Тимур Тагиров</p>
    </footer>

    <!-- Подключение скриптов -->
    <script src="script.js"></script>
</body>
</html>

CSS​

CSS (Cascading Style Sheets) – файл языка стилей для веб-страниц, который позволяет добавить оформление (кнопок, цветов, шрифтов, таблиц) элементов в HTML, и состоит из селекторов, свойств и значений.

Пример:

selector {
  property: value;
}

Стиль — это набор правил оформления, определяющий внешний вид элементов веб-страницы: цвет фона, размер шрифта, отступы, границы, анимации и другие визуальные характеристики. Стили описываются отдельно от содержания и применяются к элементам по их типу, классу, идентификатору или другим признакам.

Селектор — это запись в стилевом правиле, указывающая, к каким именно элементам HTML будет применено оформление. Селектор может ссылаться на тег (p), класс (.header), идентификатор (#menu), атрибут ([type="submit"]) или комбинацию признаков (nav ul li a).

Свойство — это название характеристики оформления, например color, font-size, margin.

Значение — это конкретная величина или параметр, который присваивается свойству, например red, 16px, 10px 20px.

Вместе свойство и значение образуют пару, записываемую внутри фигурных скобок после селектора: color: blue;.

/* Базовый сброс и настройки */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f9;
}

/* Шапка */
header {
    background-color: #2c3e50;
    color: #fff;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav a {
    color: #fff;
    text-decoration: none;
    margin-left: 1.5rem;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #3498db;
}

/* Основной контент */
main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

section {
    background: #fff;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h2 {
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

pre {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
}

JS​

JS (JavaScript) – файл клиентского языка программирования для веб-страниц и приложений, который обрабатывается в браузере при помощи специального движка, и обеспечивает анимации, выполнение логики, связи и вычисления, словно «вдыхая душу» в пустые кнопки HTML/CSS.

Скрипт — это последовательность команд, встроенная в веб-страницу и предназначенная для выполнения определённых действий: обработки ввода пользователя, изменения содержимого, отправки запросов на сервер или управления анимациями. Скрипты выполняются интерпретатором браузера во время загрузки или взаимодействия.

Клиентский язык программирования — это язык, код которого выполняется на устройстве пользователя (в веб-браузере), а не на сервере. Такой язык управляет поведением страницы после её загрузки: реагирует на клики, прокрутку, ввод текста, обновляет интерфейс без перезагрузки и взаимодействует с локальными ресурсами (кэш, геолокация, камера — при согласии пользователя).

JavaScript — это стандартный клиентский язык программирования, изначально созданный для добавления интерактивности в веб-страницы и впоследствии ставший универсальным инструментом для фронтенд-разработки, мобильных и настольных приложений, серверных решений и автоматизации. JavaScript поддерживается всеми современными браузерами и работает в тесной связке с HTML и CSS.

// Функция инициализации
document.addEventListener('DOMContentLoaded', () => {
    console.log('Страница загружена');
    
    const buttons = document.querySelectorAll('button');
    
    // Обработчик событий с дегелегированием или прямым назначением
    buttons.forEach(btn => {
        btn.addEventListener('click', handleButtonClick);
    });
});

function handleButtonClick(event) {
    const target = event.target;
    const message = `Вы нажали кнопку: ${target.innerText}`;
    
    // Вывод в консоль и создание элемента
    console.log(message);
    
    const alertBox = document.createElement('div');
    alertBox.textContent = message;
    alertBox.style.cssText = 'background: #e74c3c; color: white; padding: 10px; margin-top: 10px; border-radius: 4px;';
    
    document.body.appendChild(alertBox);
    
    // Удаление через 3 секунды
    setTimeout(() => {
        alertBox.remove();
    }, 3000);
}

// Пример работы с данными (объект)
const projectInfo = {
    name: "Вселенная IT",
    year: 2026,
    active: true
};

function getProjectStatus(info) {
    return info.active 
        ? `${info.name} активен (${info.year})` 
        : `${info.name} неактивен`;
}

console.log(getProjectStatus(projectInfo));

CHM​

CHM (Compiled HTML Help) – формат справки Microsoft, компилируется из HTML-файлов и представляет собой собранный пакет веб-страниц, с оглавлением, предметным указателем и полнотекстовым поиском.

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

Ниже приведен пример индексного файла (.hhk), который является ключевым для сборки CHM. Без него структура книги не будет определена.

Файл: index.hhk

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<TITLE>Индекс проекта "Вселенная IT"</TITLE>
<META NAME="GENERATOR" Content="Microsoft® HTML Help Workshop">
<!-- Ссылка на основной файл TOC (Table of Contents) -->
<LINK REL="Contents" HREF="toc.hhp">
<style type="text/css">
    body { font-family: Arial, sans-serif; }
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<H1>Указатель к справке "Вселенная IT"</H1>
</CENTER>

<P>
<A HREF="html/Основы.html">Основы программирования</A>
</P>

<P>
<A HREF="html/csharp_intro.html">Введение в C#</A>
</P>

<P>
<A HREF="html/python_intro.html">Введение в Python</A>
</P>

<P>
<A HREF="html/sql_guide.html">Руководство по SQL</A>
</P>

<P>
<A HREF="html/deployment.html">Деплой и CI/CD</A>
</P>

</BODY>
</HTML>

См. также

Другие статьи этого же раздела в боковом меню (как на странице «О разделе»).

Освоение главы0%