Предисловие
Данный документ является вводным руководством по языкам HTML и CSS, разработанным Хромовым Артёмом Вячеславовичем с целью кратко показать основы этих языков. Он не является полным описание этих языков, и при его изучение желательно, но не обязательно, консультирование со стороны преподавателя или других дополнительных источников.
Увы, тут нельзя в табуляцию, позже (в зависимости от того, когда вы это читаете) в конце дам ссылку на более грамотно реализованную статью, если выйдет. Ну а вы лучше следите за скобками, теперь роляют только они :(
Введение
Писать сайт можно в любом текстовом редакторе, работающем с кодировкой UTF-8, таких как блокнот или notepad++. Для того чтобы такой документ был страницей, он должен быть с расширением php или html. Сильно рекомендую хотя бы по началу файл держать открытым и в редакторе, и в браузере для визуализации творческого процесса. Главы могут идти не совсем в порядке нумерации, т.к. они отражают внутреннюю архитектуру страницы, но читать их рекомендуется всё же в порядке нумерации.
Первое, что нужно сделать перед написание сайта, это разработать его карту (содержимое и их связи), а так же дизайн.
Глава 1 Голова
<!-- В таких скобках как те, в которые заключен этот текст, будут писаться комментарии в HTML. Они никак не влияют на код. -->
<!DOCTYPE html>
<!-- Первой строкой в этом файле мы объявили тип документа, т.к. некоторые программы не могут понять этого сами.-->
<html >
<!-- Это первый тег и им мы объявляем начало документа, а его закрытием объявим конец. -->
<head>
<!-- Этим тегом мы объявили начало головы. В ней хранится системная информация. -->
<meta content="перечисление; основного; контента; на; странице" charset="utf-8">
<!-- В этом теге присутствуют атрибуты, принимающие параметры основного контента и популярного формата кодировки документов. -->
<title>Заголовок. Он виден вверху браузера над страницей и в поисковых системах.</title>
<!-- Этот тег, как и большинство тегов, требуют закрытия для корректной работы, что мы и делаем. -->
<link href="имя картинки в заголовке страницы" rel="shortcut icon" type="image/x-icon">
Глава 3.1 Стильный фон
/* В таких скобках будут писаться комментарии в CSS. Они никак не влияют на код. */
<style type="text/css">
/* Собственно, тег style открыл элементы CSS (таблицу стилей). */
BODY {
/* Это имя того тега, который будем менять, или название стиля, который будем применять. */
background:
/* background вмещает в себя до 5 характеристик из следующих разделов, которые можно применять отдельно. В конце последнего пишут точку с запятой; */
background-image:
/* Фоновая картинка. */
url(URL);
/* Градиент можно задать следующими атрибутами. */
linear-gradient(поворот deg, от начало%, через точка%, до конец%);
radial-gradient(closest-side, closest-corner, farthest-side, farthest-corner …);
background-clip:
/* Что именно окрасится в цвет или изображение указанного в background-image */
padding-box, border-box, content-box, text;
background-size:
/* Значение в px или cm, задает размер картинки. Первое число ширина, второе высота. */
/* Проценты, задают размер фоновой картинки в процентах от ширины и высоты элемента, страницы. */
auto
/* Сохраняет пропорцию, например высоты или ширины. Пример: (auto 10%). */
cover
/* Масштабирует изображение с сохранением пропорций таким образом, чтобы полностью заполнить блок картинкой. */
contain
/* Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. */
background-repeat:
no-repeat
/* Устанавливает одно фоновое изображение в элементе без его повторений. */
repeat
/* Фоновое изображение повторяется по горизонтали и вертикали. */
space
/* Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удается, между картинками добавляется пустое пространство. */
round
/* Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются. */
background-color:
#rgb
#rgba
/* #номер цвета в формате RGB или RGBa. Номера от 000000 до ffffff или от 000 до fff*/
RGB(0-255, 0-255, 0-255)
/* Задает цвет фона. */
RGBa(255, 255, 255,255)
/* Задает цвет фона и прозрачность. */
background-attachment:
fixed
/* Делает фоновое изображение элемента неподвижным (не прокручиваемый). */
scroll
/* Позволяет перемещаться фону вместе с содержимым. */
background-position:
0% 0%
/* Определяет отступ слева и с сверху. */
border-radius:
/* Скругление рамок. */
}
Глава 3.2 Стильный текст
.style2 {
/* Это класс, который можно подключить к любому тегу. */
font:
/* font вмещает в себя до 5 характеристик из следующих разделов, которые можно применять отдельно. В конце последнего пишут точку с запятой; */
font-family:
/* Устанавливает шрифт в “”. Можно поставить несколько шрифтов через запятую, и включится первый существующий на устройстве. Также есть ряд универсальных шрифтов. */
serif, sans-serif, cursive, fantasy, monospace
font-size:
/* Устанавливает размер шрифта. */
font-stretch:
/* Незначительно растягивает буквы. */
ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded
font-variant: small-caps
/* Делает прописные заглавными. */
font-weight: 100*n<=900
/* Задает жирность линий. */
color:
/* Цвет */
}
Глава 3.3 Стильные блоки
.style3 {
/* Блочная система позволяет настроить размер и положение блоков и вложенных объектов. Разные браузеры по-разному воспринимают блочные системы, поэтому нужно сообщить всем браузерам, что ты реализуешь блочные системы. */
-moz-box-sizing: border-box; /* Для Firefox. */
-webkit-box-sizing: border-box; /* Для Safari и Chrome. */
box-sizing: border-box; /* Для IE и Opera. */
width:
height:
padding:
/* Поля, создают пустое пространство внутри или слева, сверху, справа, снизу (padding-left, padding-top, padding-right и padding-bottom соответственно). */
border:
/* Границы (или border-left, border-top, border-right, border-bottom). */
border-width:
border-color:
border-style:
dotted, dashed, solid, double, groove, ridge, inset, outset
border-radius:
/* Скругление углов. Можно указывать для каждого угла или пары через пробел и для каждой стороны через слеш. */
margin:
/* Отступ, создает пустое пространство снаружи (или margin-left, margin-top, margin-right и margin-bottom). Могут быть отрицательными и реализовать пересечение. */
overflow: auto
/* Добавляет полосы прокрутки для не помещающегося текста. */
float: left, right
/* Добавляет обтекание элемента. Это хорошо для картинок */
}
.style1 {
display:
/* Определение типа демонстрации. */
block
/* Поведение div по умолчанию. */
inline
/* Содержимое элементов начинается с того места, где окончился предыдущий элемент. */
inline-block
/* Сам строчный, но внутри блочный. */
none
/* Временно удаляет элемент из документа. */
Глава 3.4 Стильные позиции
.style4 {
position:
/* Определение типа позиционирования. */
absolute
/* Не влияет на отображение других элементов, свойствами left, top, right и bottom, задают положение в родительском элементе. */
relative
/* Располагает относительно его исходного места, свойств left, top, right и bottom изменяет позицию элемента от первоначального расположения. */
fixed
/* Привязывает к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. */
static
/* Использование свойств left, top, right и bottom не приводит к каким-либо результатам */
z-index:
/* Определяет уровень слоя. */
}
/* В случае реализации css отдельным файлом их надо связать, добавлением в head следующего кода */
<link rel="stylesheet" href="имя файла .css?v=циферки">
/* Циферки управляют версией, обновлением. Для того чтобы их постоянно не менять, рекомендуется обновлять страничку в разработке через Ctrl+F5*/
Глава 2.1 Тело
</head>
<!-- Пришло время закрыть голову и начать тело. -->
<body text="цвет основного текста" bgcolor="цвет фона" background="картинка фона">
<!-- Этим тегом мы объявили начало тела. В нем хранится содержимое страницы. Его атрибуты легко и часто заменяются стилями. -->
<!-- Следующие теги позволяют менять текст. -->
<h1> Главный заголовок </h1>
<!-- Цифра после h указывает на степень важности заголовка и помогает поисковым системам. Всего есть 6 степеней важности заголовков. -->
<font color="цвет текста" size="размер текста" face="стиль текста">
Текст. Список свободных стилей можно поискать в интернете, отчасти он различен на различных операционных системах.
</font>
<br> <!-- Это Enter. Он редко используется -->
<p align="выравнивание по одному из параметров: bottom, left, middle, right, top">
Абзац
</p>
<b>жирный</b>
<i>курсив</i>
<!-- Следующий тег — это ссылка. Ссылку можно поместить куда угодно. URL это адрес объекта (страничка, картинка) в интернете или на сервере.-->
<a href="URL" alt=”объект на случай потери объекта”>
текст ссылки
</a>
<!-- Следующими тегами мы добавляем картинки, аудио и видео. Значения атрибутов картинки могут быть в px, cm или процент от ширины и высоты элемента, страницы. -->
<img src="URL" align
width="Ширина картинки"
height="Высота картинки"
vspace="Вертикальный отступ от изображения до окружающего контента"
hspace="Горизонтальный отступ от изображения до окружающего контента">
<audio
controls <!-- Добавляет панель управления к аудиофайлу -->
loop <!-- Повторяет воспроизведение звука сначала после его завершения -->>
<source src="адрес ogg" type="audio/ogg; codecs=vorbis"/>
<source src="адрес mp3" type="audio/mpeg"/>
<source src="адрес wav" type="audio/mpeg"/>
<!-- Запустится первый поддерживаемый -->
</audio>
<!-- Так же уместна сокращенная форма записи -->
<audio src="адрес"/>
<video autoplay controls loop width height
poster="Адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.">
<!-- Сейчас на многих браузерах кодеки не обязательны, однако есть пользователи старых версий. -->
<source src="адрес" type='video/ogg;
codecs="theora, vorbis" '>
</source>
<source src="адрес" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '></source>
<source src="адрес" type='video/webm;
codecs="vp8, vorbis" '></source>
<!-- Разные браузеры поддерживают разные форматы видео, но большие видео лучше грузить через специальные плеера, например плеера стриминговых платформ, и брать их код себе на сайт. -->
</video>
Глава 2.2 Разметка
<!-- Разметка страниц нередко бывает в форме таблиц, так выходит намного быстрее, но это хуже подходит под разные разрешения экранов. -->
<tr>
<td>1-ый столб 1-ой строки</td>
<td>2-ой столб 1-ой строки</td>
</tr>
<tr>
<td>1-ый столб 2-ой строки</td>
<td>2-ой столб 2-ой строки</td>
</tr>
<!-- Как вы поняли, это была реализация таблицы. -->
<div>
<!-- Тег div является основой блочной системы, этот контейнер служит для модификации своего содержимого. С ним легко работает style и в него можно вложить другие div. -->
<div class="style1">
<!-- Атрибут class позволяет применить к этому блоку стиль о которым мы скоро поговорим. -->
<div lang="ru">
<!-- Атрибут lang позволяет браузеру распознавать где какой текст. Он так же применим к тегу html. -->
Содержимое
</div>
</div>
Глава 4 Замечания
<!-- Раскрывающийся список ссылок -->
<select size="количество видимых элементов" onchange="window.location.href = this.options[this.selectedIndex].value">
<option value="">Пункт 0</option>
<option value="ссылка 1">Пункт 1</option>
<option value="ссылка 2">Пункт 2</option>
</select>
<!-- Картинки в строку внутри тега p отображаются в строку -->
<p>
<img src="картинка 1"
style="width:начальная ширина;"
onclick="this.style.width='ширина после клика'"
onmouseout="this.style.width='ширина после того, как убрали курсор'"
или
onclick="this.style.width=(this.style.width=='200px'?'300px':'200px')"/>
<img src="картинка 2">
</p>
<!-- Блок размером со страницу -->
<div class="width: 100vw; height: 100vh;">
<!-- Баннер -->
<div id="имя1">
<a href="реклама">
реклама
</a>
<div cursor="default" onclick="document.getElementById('имя1').style.display='none'">
Х
</div>
</div>
<!-- Анимация изменения размеров блока. -->
<div class="width: 100pt; height: 100pt;
transition: all 3s ease-in-out 1s;
-webkit-transition: all 3s ease-in-out 1s;
-moz-transition: all 3s ease-in-out 1s;
-o-transition: all 3s ease-in-out 1s;">
<!-- А ещё в html есть SVG, но это совсем другая история -->
</body>
</html>