Skip to content

Instantly share code, notes, and snippets.

@catink123

catink123/1_html.md

Last active July 17, 2022 21:58
Show Gist options
  • Save catink123/5cf143cdd485169cb5226bcb1e79e05c to your computer and use it in GitHub Desktop.
Save catink123/5cf143cdd485169cb5226bcb1e79e05c to your computer and use it in GitHub Desktop.
Download ZIP
Краткое пособие по веб-разработке
Raw
1_html.md

Создание веб-страниц HTML

В этом документы мы рассмотрим основы HTML и базовые элементы, используемые для создания веб-страниц.

Основы

HTML основан на языке XML, в котором существуют элементы и атрибуты и коментарии. Выглядит это так:

<element attribute1="value1" attribute2="value2">
    <!-- Внутренняя часть элемента -->
</element>

Разберём всё по порядку:

  • element - название элемента
  • attribute1 и attribute2 - атрибуты или параметры для элемента.
  • value1 и value2 - значения атрибутов attribute1 и attribute2 соответственно.
  • Внутренняя часть элемента - всё, что находится внутри элемента (текст <p> внутри контейнера <div>). "<!--" является началом коментария и "-->" - концом.

У элемента всегда есть начало (<element>), но не всегда есть конец (</element>), однако это встречается только в тех элементах, в которых внутренее значение не применяется, как, например, в элементе <img>:

<img src="picture1.jpg" alt="Example picture">
<!-- Обратите внимание на отсутствие конца элемента -->

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

<element attribute3></element>

Из кода выше видно, что внутри элемента <element> написан коментарий. Коментарии видны только в коде, на странице они не отображаются. Коментарии нужны для пометки частей кода, добавления "временной затычки" на будущее заполнение.

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

Весь HTML-документ имеет общий элемент <html>, внутри которого есть только два элемента, <head> и <body> (в дальнейшем, блоки <head> и <body>). Блок <head> необязателен в некотрых случаях. Незаполненный HTML-документ выглядит так:

<html>
    <head>
        <!-- Невидимый контент, исполняется до прорисовки документа -->
    </head>

    <body>
        <!-- Видимый контент (или же всё, что мы видим) -->
    </body>
</html>

Блок <head>

В этом блоке происходит настройка документа, например его название, стили, скрипты (выполняемые до прорисовки, это важно), импорт различных компонентов из URL-а (скриптов, стилей, шрифтов и т. д.).

Разберём несколько элементов для блока <head>:

  • <title> - элемент для изменения названия документа (отображается, например, в названии вкладки).

    <title>Мой новый документ</title>

  • <link> - элемент для импорта почти всех типов компонента. Его атрибуты таковы:

    • rel - указывает какого типа компонент импортируется, для нескольких значений можно отделять пробелами. Пример: rel="shortcut favicon" или rel="stylesheet".
    • href - указывает URL к файлу компонента. Пример: href="assets/favicon.ico" или href="styles/main.css".
    • type - указывает тип файла, на который ссылается href. Если тип файла текстовый, то этот атрибут необязателен. Пример: type="image/x-icon".

    Примеры заполненных элементов <link>:

    <!-- Значок документа (отображается, например, в значке вкладки) -->
<link rel="shortcut favicon" href="assets/favicon.ico" type="image/x-icon">

<!-- Импортируемый стиль, заметьте, что атрибут type отстутствует, так как файлы стиля имеют текстовый тип. -->
<link rel="stylesheet" href="styles/main.css">

  • <meta> - элемент, который настраивает какие-либо особенности документа. Это пособие не будет затрагивать этот элемент в деталях. Примеры:

    <!-- Кодировка документа -->
<meta charset="UTF-8">
<!-- Режим работы докумета в Internet Explorer, все остальные браузеры игнорируют эту настройку -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Устанавливает относительный размер документа с размером устройства. Так, например, на мобильных устройствах документ будет выглядеть правильно, а не очень маленьким -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Блок <body>

Как уже говорилось ранее, в этом блоке пишется всё, что отображается на странице. Существует достаточно много элементов, которые пишутся в этом блоке, поэтому для них отведена целая часть этого пособия.

Основные элементы блока <body>

<p> - абзац

Элемент <p> отображает абзац текста, который имеет вертикальное расстояние от других элементов (стили margin-top: 16px и margin-bottom: 16px).

Пример:

<p>Съешь ещё этих мягких французских булок, да выпей чаю...</p>

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - заголовки

Эти элементы представляют собой заголовки, то есть жирный текст различного размера (от самого большого - 2em или 32px, до самого маленького - 0.67em или 10.72px)

Пример:

<h1>Самый большой (стандартный заголовок)</h1>
<h2>Заголовок поменьше...</h2>
<h3>И ещё меньше..</h3>
<h4>Маленький заголовок</h4>
<h5>Заголовок меньше маленького</h5>
<h6>Самый маленький заголовок</h6>

<img> - картинка

Этот элемент отображает картинку на веб-странице, которая загружается по адресу, указанному в атрибуте src (например: src="https://via.placeholder.com/150"). Не стоит забывать о тех случаях, когда просмотреть картинку невозможно (плохое интернет-соединение или веб-страница читается синтезатором голоса). Для этого существует атрибут alt, значение которого отображается на месте картинки в случае плохого интернет-соединения и читается синтезатором в случае использования читалок (например: alt="картинка с сайта placeholder.com").

Стоит отметить, что элемент <img> является одним из тех элементов, которому не нужен конечный тег (</img>).

Пример:

<img src="https://via.placeholder.com/150" alt="картинка с сайта placeholder.com">

<div> - контейнер или "отделитель" (впредь используется "контейнер")

Этот элемент используется для того, чтобы сгруппировать несколько элементов и по желанию стилизировать всю группу (используя, например, стили background и border). Также элемент <div> можно использовать для того, чтобы задать желаемую позицию на странице всей группе элементов (с помощью, например, стилей position, left и top).

Пример:

<div>
  <h1>Моя фотография</h1>
  <p>Красивая фотография, сделанная мной.</p>
  <img src="https://via.placeholder.com/300x150" alt="моя фотография">
</div>

<form>, <input> и <label> - форма для отправления и её элементы ввода

<form> - форма

Элемент <form> является контернером для элементов ввода, внутри него вписываются все нужные элементы <input>.

Главные атрибуты элемента <form>:

  • method - определяет тип HTTP-запроса (например, post или get). Значение по умолчанию - get.
  • action - адрес обработчика формы (может быть на внешнем сервере)

Пример:

<form action="example.php">

<input> - элемент ввода

Элемент <input> имеет атрибут type, который определяет тип элемента ввода. Атрибутом name задаётся имя поля, которое используется при отправлении запроса формы на сервер. Главные атрибуты элемента <input>:

  • type - определяет тип элемента ввода. Рассмотрим различные типы ниже.
  • name - имя поля, которое используется при отправлении запроса формы в обработчик (или сервер).
  • value - значение поля по умолчанию.

Также элемент <input> является ещё одним из ряда тех, которые не имеют тега конца (</input>).

Различные типы <input> и их примеры:

  • text - текстовое поле. 
    <input type="text" name="exampleName">
  • button - кнопка. Является аналогом элемента <button> с той же функцией. Чтобы задать надпись внутри кнопки, используется атрибут value 
    <input type="button" value="Кнопка">
  • checkbox - флажок. Используется для выбора нескольких вариантов ответа. 
    <input type="checkbox" name="flag1">
<input type="checkbox" name="flag2">
<input type="checkbox" name="flag3">
  • file - файл. Используется для выбора файла с устройства. 
    <input type="file" name="fileInput1">
  • password - максированное текстовое поле (для паролей). 
    <input type="password" name="userPassword">
  • radio - переключатель. Используется для выбора одного варианта ответа. Для того, чтобы переключатели работали правильно, необходимо для всех переключателей использовать один и тот же артибут name. 
    <input type="radio" name="choice1" value="first">
<input type="radio" name="choice1" value="second">
<input type="radio" name="choice1" value="third">
  • reset - кнопка сброса всех полей формы. 
    <input type="reset" value="Сброс">
  • submit - кнопка отправки формы. 
    <input type="submit" value="Отправить">
  • color - выбор цвета. 
    <input type="color" name="exampleColor">
  • date, datetime, time, month, week - время. 
    <input type="date" name="exampleDate">
<input type="datetime" name="exampleDateTime">
<input type="time" name="exampleTime">
<input type="month" name="exampleMonth">
<input type="week" name="exampleWeek">
  • range - ползунок для выбора чисел. Имеет необязательные атрибуты min (минимальное значение) и max (максимальное значение). 
    <input type="range" min="10" max="20" value="15">
  • number - ввод числа. 
    <input type="number" name="exampleNumber">

<label> - надпись для элементов управления

Элемент <label> имеет атрибут for, значением которого должно быть имя элемента управления в форме. Внутри элемента пишется текст, который является надписью для элемента ввода.

Пример:

<label for="personName">Имя: </label>
<input type="text" name="personName">

Пример формы

<form action="example.php">
  <label for="personName">Имя: </label>
  <input type="text" name="personName">

  <label for="personSurname">Фамилия: </label>
  <input type="text" name="personSurname">

  <label for="personAge">Возраст</label>
  <input type="number" name="personAge">

  <input type="submit" value="Отправить">
  <input type="reset" value="Сброс">
</form>
Raw
2_css.md

Создание стилей с помощью CSS

В этой части документа мы рассмотрим создание стилей с помощью CSS (Cascading Style Sheets).

Основы

Стили CSS могут писаться как в отдельном файле, так и внутри HTML-документа посредством элемента <style>. Также, стили могут вписываться в отдельные элементы на веб-странице с помощью атрибута style

Примеры:

<html>
<head>
  ...
  <style>
    /* Ваши стили.. */
  </style>
  ...
</head>
<body>
  ...
  <p style="Ваши стили..">Текст абзаца</p>
  ...
</body>
</html>

Как вы могли заметить, в примере элемент <style> размещён в блоке <head>, а это значит, что стили загружаются перед контентом страницы. Расположение элемента <style> не имеет значения, но для лучшего прочтения и правильного написания рекомендуется создавать один элемент <style>, и создавать его в блоке <head>.

Синтаксис стилей

Для задачи стиля элемента используются объявления стилей. Объявления имеют две части: свойство и значение.

Пример:

example-property: value;

Раберём пример по порядку:

  • example-property - свойство.
  • value - значение, их может быть несколько и они могут отделяться как запятой, так пробелом или даже символом '/'. Об этом позже.

Если стиль задаётся в элементе <style> HTML-документа или в отдельном файле, то вам потребуется использовать блоки (или группы) объявлений. Блок объявления имеет две части: селектор и блок с объявлениями. Пример:

element {
  first-property: value;
  second-property: value;
  third-property: value;
}

Разберём пример:

  • element - селектор.
  • { ... } - открывающая и закрывающая скобки блока объявлений.
  • first-property, second-property, third-property - объявления внутри блока

Блоки объявлений

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

Селекторы

Из примера выше мы видим селектор element. Это наипростейший селектор, который имеет в себе только тег.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment