Организация структуры страницы

Данные теги ничем, кроме семантического значения, от тега <div>не отличаются (за исключением <address>). Но мы крайне рекомендуем размечать страницу с помощью них. Так ваши страницы смогут адекватно распознавать поисковые роботы, а люди, у которых есть проблемы со зрением, смогут читать ваши страницы с помощью браузеров для слепых.

	Верхние колонтитулы
<header>...</header>	Тип отображения по умолчанию block (блочный элемент). Используется для размещения вводного материала и/или навигационных элементов. Обычно это шапка сайта или вводный материал в начале страницы, раздела или статьи. На странице может встречаться несколько раз и в разных местах (не обязательно в начале страницы). Нельзя помещать внутрь тегов <footer>, <header>, <address>.
	Нижние колонтитулы
<footer>...</footer>	Тип отображения по умолчанию block (блочный элемент). Используется для размещения информации об авторе, копирайте, или как нижний колонтитул всей страницы, в который также можно поместить сведения об авторских правах, ссылки на связанное содержимое, контактную информацию и т.д. На странице может встречаться несколько раз и в разных местах (не обязательно в конце страницы). Нельзя помещать внутрь тегов <footer>, <header>.

	Основное содержимое документа
<main>...</main>	Тип отображения по умолчанию block (блочный элемент). Используется для выделения основного содержимого документа. Контент внутри этого элемента должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска и т.д.
	Группировка записей
<article>...</article>	Тип отображения по умолчанию block (блочный элемент). Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке этим элементом. Может быть внутри тега <section>.
	Группировка разделов
<section>...</section>	Тип отображения по умолчанию block (блочный элемент). Используется для группировки тематических разделов страницы. Обычно содержит заголовок. Обычно им разделяют страницу на блок с вводной информацией, новости, контакты и т.д. Может быть внутри тега <article>.

	Сноски
<aside>...</aside>	Тип отображения по умолчанию block (блочный элемент). Используется для группировки содержимого, связанного с окружающим его контентом напрямую, но которое можно счесть отдельным. Удаление этого блока не должно влиять на понимание основного содержимого. Это могут быть боковые сноски (как в книгах), группы элементов или цитаты. Не подходит для блоков, которые используются как сайдбары. Обычно содержится внутри тега <article>.
	Навигация
<nav>...</nav>	Тип отображения по умолчанию block (блочный элемент). Используется для создания блока навигации по сайту. Может находиться внутри тега <header>, но не обязательно. На странице может быть несколько элементов <nav>. Нельзя использовать его как обёртку группы ссылок, не связанной с навигацией по сайту. Также не приветствуется использование этого тега внутри <footer>. Если нужно расположить карту сайта внутри <footer>, то воспользуйтесь тегом<div>.

Контактная информация

Тип отображения по умолчанию block (блочный элемент). Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. Имеет дополнительный стиль по умолчанию — курсивное начертание текста внутри этого элемента.

Формы

Формы в языке HTMLиспользуются для сбора информации, которую пользователь вводит в специально отведённые поля этой формы. После того, как пользователь введёт свои данные и нажмет кнопку «Отправить», все эти данные будут отправлены на сервер. Затем эти данные будут обработаны и сервер отправит ответ пользователю. Данные на сервер можно отправить двумя разными методами - GETили POST.

Когда вы вводите в адресной строке браузера какой-либо адрес, и переходите по нему, вы отправляете серверу запрос, называемый GET. Эти запросы могут как содержать, так и не содержать в себе данные. Например запрос https://www.google.ru/не содержит в себе никаких данных. А вот запрос https://www.google.ru/search?q=it+center содержит в себе переменную "q", которая имеет значение "it center". Если разобрать подробнее, то если отправить GETзапрос на адрес https://www.google.ru/search, браузер просто подставит в конце знак "?" и перечислит все данные полей и их названия через знак "&" предварительно кодируя данные в URLкод (т.к. не все символы допустимо использовать в строке адреса). Сервер, увидев подобный запрос, просто берёт данные из этой адресной строки. Метод GETне является безопасным, т.к. все данные, которые вы отправляете, содержаться в адресной строке. Если её содержимое попадет в чужие руки, то не составит труда декодировать от туда данные. Поэтому не используйте его для отправки паролей или какой-либо конфиденциальной информации. Обычно данный метод используется для поисковых запросов.

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

Создание формы

Элемент формы создаётся двойным тегом <form>. Внутри этого элемента размещаются поля, которые необходимо заполнить и которые впоследствии будут отправлены на сервер. Поля, которые будут размещены за пределами данного элемента, отправлены не будут. Внутри тега <form>допустимо использовать стороннюю разметку, если это необходимо. Тип отображения по умолчанию block (блочный элемент). Данный тег имеет два обязательных атрибута: actionи method.

В атрибуте actionуказывается ссылка на обработчик формы. Обработчиком формы является PHPфайл (или файл, написанный на других языках программирования), который будет обрабатывать данные этой формы.

Атрибут methodпредназначен для указания метода отправки данных на сервер (GETили POST).

Пример разметки элемента формы:

1. <formaction="/search.php">
2. ...
3. </form>

Поля формы

Для добавления полей в форму используют тег <input>. Данный тег стилизуется браузерами по разному. Обычно данный тег имеет рамку, содержимое тега имеет белый фон, иногда подсветку в виде синей или красной тени вокруг элемента, когда вы поставили курсор на элемент или же поле заполнили неправильно. Тип отображения по умолчанию inline (встроенный элемент). Чаще всего подобный тип отображения неудобен, т.к. каждое поле должно находиться на новой строке. Поэтому, чтобы это исправить, используют стили. Пока у вас такой возможности нет, используйте тег <br>после каждого <input>. Но учтите, что это не самое хорошее решение, поэтому когда мы начнем изучать CSS, откажитесь от данного приёма. У него есть два обязательных атрибута: typeи name.

Атрибут typeговорит браузеру о типе формы. В данной таблице будут описаны самые распространённые из них:

<inputtype="text">
<inputtype="password">

<inputtype="checkbox">
<inputtype="radio">

<inputtype="file">
<inputtype="reset">

<inputtype="submit">
<inputtype="button">

<inputtype="email">
<inputtype="search">

<inputtype="tel">
<inputtype="url">

<inputtype="number">
<inputtype="range">

1.9.11 Canvas, video, audio

CSS

Чтотакое CSS?

CSS расшифровывается как «каскадные таблицы стилей». Этот язык отвечает за внешний вид HTML-страницы. Если нам нужно поменять расположение, цвет, фон, шрифт... на странице, то в этом нам поможет CSS. Синтаксис языка достаточно прост: он состоит из селекторов и свойств.

С помощью селекторов можно сказать браузеру какие именно элементы мы хотим оформить. Свойства описывают как именно мы хотим оформить эти элементы.

Подключение стилей.

Стили можно подключать двумя способами:

1. В самом документе HTML, мы просто пишем стили внутри тега <style></style>. Такие стили называют встроенными или инлайновыми. Тег со стилями обычно размещают внутри <head></head>. Инлайновые стили используют для оптимизации скорости загрузки страницы, обычно же используют внешний способ подключения.

2.Внешний. Для этого, для начала создаем файл с расширением .css. Затем внутри тега <head></head>нашего основного HTMLдокумента пишем одиночный тег <link>с атрибутом href, значением которого является ссылка на наш файл стилей. Так же необходимо добавить атрибут rel=”stylesheet”, чтобы браузер знал, что данный файл является именно файлом стилей, а не каким-либо другим. Например, у нас есть файл style.css, который находится в той же папке что и основной файл HTML, тогда для его подключения внутри <head></head>мы пишем <linkrel=”stylesheet” href=”style.css”>. И вуаля, наши стили подключены.

Селекторы.

Что такое селекторы и как это работает, проще сразу показать на примере. Допустим у нас есть обычная страница HTML,

<!DOCTYPE html>

<head>

<metacharset="UTF-8">

<linkrel="stylesheet" href="style.css">

<title>IT Center</title>

</head>

<body>

<h1>IT Center РЭУим. Г.В. Плеханова</h1>

<ahref="https://vk.com/reu_it"><imgsrc="http://the-center.it/img/logo.png"></a>

</body>

</html>

организация структуры страницы - student2.ru

Теперь, мы хотим, чтобы наш заголовок стал красным, для этого в файле стилей style.css пишем

h1{

color:red;

}

h1 — селектор, выбирающий все элементы h1 на странице.

color- свойство которое определяет цвет текста, в данном случае мы задали значение red, то есть красный.

организация структуры страницы - student2.ru Вот результат:

Таким образом можно выбрать элементы с любым тегом.

Существуют так же составные селекторы, для нашей странички мы можем написать:

a img{

background-color: black;

}

Такой селектор изменит цвет фона у всех тегов <img>которые вложены на любом уровне в тег <a>.

a>img{

background-color: black;

}

Такой селектор изменит цвет фона только у непосредственных потомков элемента <a>

организация структуры страницы - student2.ru

Также вы можете столкнуться с селектором * , который выберет все элементы на странице. Существует также большое множество более сложных селекторов, подробнее с ними вы можете ознакомиться здесь

CSSдает возможность выбирать элементы не только по сочетанию тегов, но также с помощью классов и id.

idэто индивидуальный идентификатор элемента, на странице может существовать только один элемент с конкретным id, два элемента с одинаковым idсуществовать не могут. Посмотрим как это работает. Удалим все наши предыдущее стили. Допишем нашему <img>id=”logo”;