MacWin - HTML & CSS

MACWIN

HTML (HyperText Markup Language) и CSS (Cascading Style Sheets) — два ключевых инструмента разработки веб-сайтов, выполняющие разные роли, но тесно взаимодействующие друг с другом.

Что такое HTML?

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

Что такое CSS?

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

HTML5

Стандартный шаблон для HTML страницы

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Описание стандартного шаблона для HTML страницы

Основные виды тегов

Основные типы тегов по назначению

Блочное и строчное расположение элементов HTML

HTML-теги классифицируются на два основных типа элементов: блочные и строчные. Каждый тип имеет свою специфику отображения и поведения в разметке страницы.

Блочные элементы

Блоковые элементы занимают всю доступную ширину родительского контейнера и начинаются с новой строки. Они предназначены для структурирования содержимого документа и обычно используются для крупных блоков текста, изображений и другого контента.

Основные характеристики блочных элементов:

Всегда начинайте с нового абзаца.
По умолчанию занимают всю ширину экрана.
Могут содержать внутри себя другие блочные и строчные элементы.

Примеры блочных элементов:

<div></div> <!-- Контейнер -->
<p></p>   <!-- Абзац -->
<h1>-h6> <!-- Заголовки -->
<ul><ol> <!-- Списки -->
<li>     <!-- Элемент списка -->
<form>  <!-- Форма -->

Строчные элементы

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

Основные характеристики строчных элементов:

Расположены последовательно в одном ряду.
Ширина соответствует размеру своего содержимого.
Используются для выделения фрагментов текста или небольших частей интерфейса.

Примеры строчных элементов:

<a href="#"></a> <!-- Гиперссылка -->
<span></span>  <!-- Обобщенный контейнер для текста -->
<strong></strong> <!-- Жирный шрифт -->
<em></em>      <!-- Курсив -->
<img src="" alt=""> <!-- Изображение -->
<input type="text"> <!-- Поле ввода -->

Задание 1 Создание шаблона web-страницы:

Создайте папку Страница на Рабочем столе. Все последующие файлы сохраняйте в данной папке;
Откройте текстовый редактор Блокнот;
Напечатайте теги в текстовом редакторе для создания стандартной web-страницы(стандартный шаблон web-страницы выше по тексту).
Измените заголовок страницы <title>«Дизайн отделка»</title>
В тело документа введите текст <body>«Первая web-страница будет посвящена стилям оформления квартир»</body>
Просмотрите результат работы в браузере.
Сохраните файл с именем index.html
Также создайте пустой файл с именем style.css в папке с файлом index.html

Задание 2 Создание заголовков разных уровней:

Создайте различные заголовки с использованием шести уровней:
Теги: <h1></h1> ....<h6></h6>

Откройте текстовом редакторе Блокнот файл index.html;
Сохраните как в текущей папке под именем headers.html;
Поменяйте заголовок окна страницы на "Заголовки разных уровней";
Заголовок 1 уровня - "Первая web-страница будет посвящена стилям оформления квартир!";
Заголовок 2 уровня - "Заголовок второго уровня";
Заголовок 3 уровня - "Заголовок третьего уровня";
Заголовок 4 уровня - "Заголовок четвёртого уровня";
Заголовок 5 уровня - "Заголовок пятого уровня";
Заголовок 6 уровня - "Заголовок шестого уровня";
Сохраните и закройте файл.