Как сделать сайт - "Академия педагогических проектов Российской Федерации"

автор: Хромов Артём Вячеславович

Преподаватель ТХТК

Как сделать сайт

Как написать сайт не плохо.

Предисловие

Данный документ является вводным руководством по языкам 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(255, 255, 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>

<b>жирный</b>

<i>курсив</i>

<!— Следующий тег это ссылка. Ссылку можно поместить куда угодно. URL это адрес объекта (страничка, картинка) в интернете или на сервере.—>

<a href=»URL» alt=”объект на случай потери объекта”>

текст ссылки

</a>

<!— Следующими тегами мы добавляем картинки, аудио и видео. Значения атрибутов картинки могут быть в px, cm или процент от ширины и высоты элемента, страницы. —>

<img src=»URL» align

width=»Ширина картинки»

height=»Высота картинки»

vspace=»Вертикальный отступ от изображения до окружающего контента»

hspace=»Горизонтальный отступ от изображения до окружающего контента»>

<audio

controls <!— Добавляет панель управления к аудиофайлу —>

loop <!— Повторяет воспроизведение звука сначала после его завершения —>>

<!— Запустится первый поддерживаемый —>

</audio>

<!— Так же уместна сокращенная форма записи →

<audio src=»адрес»/>

<video autoplay controls loop width height

poster=»Адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.»>

<!— Сейчас на многих браузерах кодеки не обязательны, однако есть пользователи старых версий. —>

<source src=»адрес» type=’video/ogg;

codecs=»theora, vorbis» ‘>

</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>

Глава 4 Замечания

<!— Раскрывающийся список ссылок →

<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’)»/>

</p>

<!— Блок размером со страницу —>

<!— Баннер —>

</a>

</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>

Как сделать сайт