Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML. ТЕХНОЛОГИИ ПРОГРАММИРОВАНИЯ

Содержание:

Введение

В рамках данной работы мы рассмотрим основной язык программирования для создания web-страниц. HTML является единственным на сегодняшний день языком программирования, который поддерживается подавляющим числом web-browserов мира. HTML является необходимым минимум для любого человека стремящегося стать web-программистом. В рамках этой работы мы рассмотрим является ли HTML языком программирования, узнаем что такое тег, рассмотрим минимальный каркас базовой страницы, обозрим так называемые meta-теги и основные теги, необходимые для современной разработки на HTML.

Помимо этого мы рассмотрим каскадные таблицы стилей (CSS), которые на сегодняшний являются неотъемлемой частью процесса разработки web-страниц.

Что такое HTML

По сути, HTML (HyperText Markup Language (англ.) — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во сети интернет. Большинство web-страниц содержат описывается на языке HTML. Язык HTML интерпретируется web-browserами; полученный в результате интерпретации форматированный текст отображается в виде графических данных, либо упорядоченных древовидных структур.

Язык HTML до 5-й версии определялся как приложение SGML (стандартного обобщённого языка разметки по стандарту ISO 8879).

Во всемирной паутине HTML-страницы, как правило, передаются web-browserам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.

В узком понимании HTML является языком гипертекстовой разметки и не более. На почве этого вопроса не одно десятилетие ведутся войны по типу «HTML — это не язык программирования». Если же быть строгим и смотреть на картину глобально, то HTML является математически обоснованным декларативным языком программирования.

Простейшие HTML web-страницы в виде файлов имеют расширение *.html (предпочтительнее) или *.htm

Из чего состоит HTML или что такое теги

Тег (Tag англ.) — это простейшие элементы разметки web-страницы, которую web-browser корректно поймёт и интерпретирует в DOM-дерево, которое в свою очередь будет отображено (при необходимости) на экране монитора. Тег, по сути своей, является функцией, которая принимает в себя аргументы в виде атрибутов и своего тела, а на выходе должно вернуть дерево компонентов и графическое представление этого дерева.

Простой пример тега: <p> внутри этого тега можно поместить текст или другие теги </p>

Количество тегов может вас испугать (около 136 на сегодняшний день), но в большинстве своём используется порядка 40, остальные используются в исключительных случаев или вовсе потеряли свою актуальность и являют собой рудименты прошлого технологий. Практически все теги для стилизации текста и блоков на сегодняшний день желательно не использовать, так как это считается антипаттерном. Вместо этого лучше добавить класс к тегу и на класс навесить CSS стили. Тем самым на сегодняшний день HTML выступает в роли каркаса web страниц и/или отправной точкой в наборе стартовых данных.

Нужно придерживаться правильного синтаксисса для того, чтобы web-browser понял где тег начинается и где заканчивается. Структура тега такова, что у него есть начало и конец. Обычно это два идентичных командных слова написанных латиницей и заключенные в фигурные треугольные скобки, где второе слово дополняется слешем: <body></body>. В некоторых случаях тег является самодостаточным или неспособным содержать дочерние элементы, в таком случае используется одно слово в фигурных скобках, дополненное слешем в конце слова: <hr />

Помимо прочего у многих тегов есть набор собственных атрибутов, которые можно указать в рамках начального слова, разделяя аттрибуты между собой пробелами: <select class=”yourClassNameForSelect” readonly value=”1”></select>

Аттрибуты могут быть типа true/false, в таком случае необязательно указывать его значения через знак присваивания (=); наличие этого атрибута будет расцениваться как true, а отсутствие — false.

Структура базовой документа HTML

Итак, мы захотели создать свою web-страницу. Для этого нам потребуется написать следующий код в любом текстовом документе с помощью любого текстового редактора и сохранить с расширением html:

<!DOCTYPE html>

<head>

<title>My first page!</title>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

После этого откройте страницу в web-browserе и вы увидите вашу web-страницу.

Теперь разберём данные теги по порядку:

<!DOCTYPE> — Этот элемент предназначен для указания типа текущего документа — DTD — document type definition, описание типа документа. Это нужно для того, чтобы web-browser понимал, как правильно интерпретировать текущую web-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксиссу. Чтобы web-browser «не путался» и понимал, согласно какому стандарту отображать web-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы. В следующей таблице приведены все возможные на текущий момент варианты написания:

DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	Строгий синтаксисс HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	Переходный синтаксисс HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>	Для всех документов.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	Строгий синтаксисс XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	Переходный синтаксисс XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML.

Актуальным на сегодняшний день является только HTML 5. Все прочие не рекомендованы к использованию.

Синтаксисс

<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">

Параметры

Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег html.

Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.

Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.

Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.

Имя — уникальное имя документа для описания DTD.

Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

URL — адрес документа с DTD.

<html> — элемент является контеийнером, который заключает в себе все содержимое web-страницы, включая элементы head и body. Открывающий и закрывающий элементы html в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, элемент html идет в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через элемент <!DOCTYPE>. Закрывающий элемент html должен всегда стоять в документе последним.

Аттрибуты

title — краткое описание объекта, которое будет видно только на десктопах и при наведении на элемент и задержании курсора на пару секунд. Почти не нужно, так как 90% офисного планктона не знают, что такие подсказочки вообще могут появляться в принципе.

manifest — указывает файл манифеста, необходимый для создания оффлайнового приложения.

xmlns — указывает пространство имен для XHTML-документов.

Также для этого элемента доступны универсалные аттрибуты (в конце раздела о тегах будет перечислены все универсалные аттрибуты и список универсальных событий).

<head> — Элемент head предназначен для хранения других элементов, цель которых — помочь web-browserу в работе с данными. Также внутри контеийнера head находятся метаэлементы, которые используются для хранения информации предназначенной для web-browserов и поисковых систем. Например, механизмы поисковых систем обращаются к метаэлементам для получения описания сайта, ключевых слов и других данных.

Содержимое элемента head не отображается напрямую на web-странице, за исключением элемента title устанавливающего заголовок окна web-страницы.

Внутри контеийнера head допускается размещать следующие элементы: base, basefont, bgsound, link, meta, script, style, title.

Аттрибуты

profile — Указывает адрес профиля метаданных.

Также для этого элемента доступны универсалные аттрибуты.

<body> — Элемент body предназначен для хранения содержания web-страницы (контента), отображаемого в окне web-browserа. Информацию, которую следует выводить в документе, следует располагать именно внутри контеийнера body. К такой информации относится текст, изображения, элементы, скрипты JavaScript и т.д.

Элемент body также применяется для определения цветов ссылок и текста на web-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными web-browserами.

Часто элемент body используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

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

Аттрибуты

alink — Устанавливает цвет активной ссылки.

background — Задает фоновый рисунок на web-странице.

bgcolor — Цвет фона web-страницы.

bgproperties — Определяет, прокручивать фон совместно с текстом или нет.

bottommargin — Отступ от нижнего края окна web-browserа до контента.

leftmargin — Отступ по горизонтали от левого края окна web-browserа до контента.

link — Цвет ссылок на web-странице.

rightmargin — Отступ от правого края окна web-browserа до контента.

scroll — Устанавливает, отображать полосы прокрутки или нет.

text — Цвет текста в документе.

topmargin — Отступ от верхнего края окна web-browserа до контента.

vlink — Цвет посещенных ссылок.

У этого элемента ещё имеются универсальные аттрибуты и события.

<p> — Определяет текстовый абзац. Элемент p является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего элемента нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Аттрибуты

align — просто определяет как будет выровнен текст.

У этого элемента ещё имеются универсальные аттрибуты и события.

Другие важные теги

Мы рассмотрели несколько элементов с помощью которых можно создать простейшую web-страницу. Но для полноценной разработки web-страниц (и уже тем более web-сайтов и web-приложений) необходимо знать миниамльный набор элементов, указанных далее.

<meta> — определяет метаэлементы, которые используются для хранения информации предназначенной для web-browserов и поисковых систем. Например, механизмы поисковых систем обращаются к метаэлементам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метаэлемент, все они размещаются в контеийнере head. Как правило, аттрибуты любого метаэлемента сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.

Синтаксисс

Аттрибуты

charset — Задает кодировку документа.

content — Устанавливает значение атрибута, заданного с помощью name или http-equiv.

http-equiv — Предназначен для конвертирования метаэлемента в заголовок HTTP.

name — Имя метаэлемента, также косвенно устанавливает его предназначение.

<script> — Элемент script предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих web-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.

script может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Синтаксисс

Аттрибуты
async — загружает и исполняет скрипт асинхронно. Будьте осторожнее с этим аттрибутом. Его устаналивают только на независимые скрипты и библиотеки, выполнение которых не должно влияет н а работу всей страницы. В умелых руках можнт ускорять работу страницы в разы.

defer — Отложенное выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Так же выстовляет низкий приоритет загрузки.

language — Устанавливает язык программирования на котором написан скрипт.

src — URI скрипта, который будет подгружен в страницу.

type — Определяет тип содержимого элемента script.

<noscript> — Контеийнер noscript показывает свое содержимое, если web-browser не поддерживает работу со скриптами или их поддержка отключена пользователем. В остальных случаях web-browser игнорирует этот элемент и все, что располагается внутри него.

Синтаксисс

<style> — элемент style применяется для определения стилей элементов web-страницы. Элемент style необходимо использовать внутри контеийнера head. Можно задавать более чем один элемент style.

Синтаксисс

Ваши стили

</style>

Аттрибуты

media — Определяет устройство вывода, для работы с которым предназначена таблица стилей.

type — Сообщает web-browserу, какой синтаксисс использовать для того, чтобы правильно интерпретировать стили.

<div> — это основный элемент для стилизации страницы. С ним вы будете иметь дело чаще всего. Элемент div является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри элемента, можно выделить стиль во внешнюю таблицу стилей, а для элемента добавить атрибут class или id с именем селектора.

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

Аттрибуты

align — просто определяет как будет выровнен текст.

У этого элемента ещё имеются универсальные аттрибуты и события.

<span> — другой важный тег после div – это наш span. Он важен тем, что может задавать стили инлайново для текста и встраиваться в текст без проблем (при этом будет игнорировать краулерами). К примеру можно сделать хайлайт текста или выделить первую букву абзаца. Ко всему прочему в рамках JS можно на его основе сделать конструкции подстановки анлайновых элементов зависимых от конекткста страницы (например изменения валюты при смене страны).

Для этого элемента доступны универсалные аттрибуты и события.

<a> — этот элемент является чуть ли не самым важным элементом веб-страниц, так как с помощью него вы можете указать ссылку на другу страницу и по нажатию на эту ссылку соответсвенно перейти на на эту страницу. Ко всему проему тег а может служить переходом к якорям на странице, тем самым облегчив навигацию. На сегодяншний день редко используется, так как большиснтво разработчиков ратуют за плавный скролинг, который сами же и программируют, чего нативными средствами браузера сделать нельзя.

Для создания ссылки нужно указать в атрибуте href абсолютный или относительный путь (URI). Абсолютный путь будет работать из любого места и частенько более предпочителный, в то время как относительный путь будет отталкиваться от текущего местоположения (по какому адресу открыта страница).

“Uniform Resource Identifier — унифицированный (единообразный) идентификатор ресурса. По-русски иногда говорят [у́ри]. URI — последовательность символов, идентифицирующая абстрактный или физический ресурс. Ранее назывался Universal Resource Identifier — универсальный идентификатор ресурса.”

Синтаксисс

<a href="URL">…произвольное название…</a>

<a name="идентификатор">…якорь на странице..</a>

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

coords — Устанавливает координаты активной области.

download — Предлагает скачать указанный по ссылке файл.

href — Задает адрес документа, на который следует перейти.

hreflang — Идентифицирует язык текста по ссылке.

name — Устанавливает имя якоря внутри документа.

rel — Отношения между ссылаемым и текущим документами.

rev — Отношения между текущим и ссылаемым документами.

shape — Задает форму активной области ссылки для изображений.

tabindex — этот атрибут получет порядковый номер, под которым до него можно будет добраться с помощью tab. Если потавить -1, то элемент будет не tabабельным

target — Имя окна или фрейма, куда web-browser будет загружать документ.

type — Указывает MIME-тип документа, на который ведёт ссылка.

У этого элемента ещё имеются универсальные аттрибуты и события.

<img> — простейший элемент, который отобразит на экране пользователя картинку, ссылку на которую вы можете указать в специальном атрибуте. Может быть вложен во множество других тегов, например так как a или button, что может добавить интерактивности. Так же даёт доступ пользователю сохранять картинку через контекстное меню. Чтобы этого избежать картинку лучше задавать через CSS стили любым другим тегам.

Синтаксисс

Аттрибуты
align — Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.

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

border — указывает толщину рамки изображения в пикселях. Не используйте этот атрибут. Есть CSS для этого.

height — указывает высоту изображения в пикселях. Не используйте этот атрибут. Есть CSS для этого.

hspace — указывает горизонтальный отступ изображения от окружения в пикселях. Не используйте этот атрибут. Есть CSS для этого.

ismap — Говорит web-browserу, что картинка является серверной картой-изображением.

longdesc — Указывает адрес документа, где содержится аннотация к картинке.

lowsrc — здесь можно указать ссылку на низкое разрешение картинки. Вы сэкономите уйму трафика, если будете грамотно пользоваться этим атрибутом и генерировать картинки с низким разрешением наравне с нормальным.

src — URI основного изображения.

vspace — указывает вертикальный отступ изображения от окружения в пикселях. Не используйте этот атрибут. Есть CSS для этого.

width — указывает ширину изображения в пикселях. Не используйте этот атрибут. Есть CSS для этого.

usemap — Ссылка на элемент map, содержащий координаты для клиентской карты-изображения.

У этого элемента ещё имеются универсальные аттрибуты и события.

<ul> — это элемент маркированный список, который по сути своей является универсальным списком. Каждым элементом списка является другой тег li, который наследует определенные стили от ul.

Синтаксисс

<ul>

<li>элемент маркированного списка</li>

</ul>

Аттрибуты
type — Устанавливает вид маркера списка.

У этого элемента ещё имеются универсальные аттрибуты и события.

<li> — это универсальный тег элемента списка. Не может сущестсовать вне тегов ul или ol, которые определяет как будет отображаться элемент li – в виде нумерованного или маркированного списка.

Синтаксисс

<ul>

<li>элемент маркированного списка</li>

</ul>

<ol>

<li>элемент нумерованного списка</li>

</ol>

Аттрибуты
type — Устанавливает вид маркера нумерованного или маркированного списка.

Value — Число, с которого будет начинаться нумерованный список.

У этого элемента ещё имеются универсальные аттрибуты и события.

<table> — Элемент table является контеийнером для элементов определяющих таблицы. Каждая таблица состоит из столбцов и строк, которые образуют ячейки. Соответсвенно в table строками является тег td, а ячейками td. Внутри table допустимо использовать следующие элементы:, col, caption, colgroup, tbody, td, tfoot, th, thead и tr.

Ранее с помощью таблиц верстались большая часть сайтов. Таблицы разбивали картинку на графические группы, которые реализовывлись внутри ячеек. На сегодняшний день это устарвшая методолгия, за которую вас уволят, поэтому учитесь верстать на div’ах послойно.

Синтаксисс

<table>

<tr>

</tr>

</table>

Аттрибуты
align — даёт понять каким будет выравнивание содержимого ячеек по горизонтали.

background — сюда можно написать ссылку на картинку и она будет фоном таблицы. Не используйте этот атрибут. Есть CSS для этого.

bgcolor — здесь можно написать цвет фона таблицы. Не используйте этот атрибут. Есть CSS для этого.

border — здесь можно указать какой будет толщины рамка таблицы в пикселах. Не используйте этот атрибут. Есть CSS для этого.

bordercolor — Здесь можно задать цвет рамки таблицы. Не используйте этот атрибут. Есть CSS для этого.

cellpadding — здесь можно указать внутренние отступы для ячеек в пикселях. Это можно всё еще делать в таблицы, но так же можно указать и в CSS, что предпочтительнее.

cellspacing — здесь можно указать отступы между ячеек в пикселях. Это можно всё еще делать в таблицы, но так же можно указать и в CSS, что предпочтительнее.

cols — здесь можно указать число колонок в таблице.

frame — Сообщает web-browserу, как отображать границы вокруг таблицы.

height — здесь можно указать высоту таблицы. Не используйте этот атрибут. Есть CSS для этого.

rules — Сообщает web-browserу, где отображать границы между ячейками.

summary — Краткое описание таблицы.

width — здесь можно указать ширину таблицы. Не используйте этот атрибут. Есть CSS для этого.

У этого элемента ещё имеются универсальные аттрибуты и события.

<tr> — расшифровывается как table row, является непосредственно строкой таблицы. Может содержать только th или td. Обязательно расположение внутри конейтера thead, tbody, tfoot, а те в свою очередь обязательно распологаться в table. Если не указать thead/tbody/tfoot, то бразуер сам автоматически пометсит все tr в tbody.

Синтаксисс

<table>

<tr>

</tr>

</table>

Аттрибуты

align — даёт понять каким будет выравнивание содержимого ячеек по горизонтали.

bgcolor — здесь можно написать цвет фона ячейки. Не используйте этот атрибут. Есть CSS для этого.

bordercolor — Здесь можно задать цвет рамки ячейки. Не используйте этот атрибут. Есть CSS для этого.

char — указывает по каком символу будет происходить выравнивание в столбце.

charoff — указывает относительно какого символа будет происходить смещение ячейки.

valign — даёт понять каким будет выравнивание содержимого ячейки по вертикали.

У этого элемента ещё имеются универсальные аттрибуты и события.

<td> — расшифровывается как table data, является непосредственно ячейкой таблицы. Обязательно расположение внутри конейтера tr, который в свою очередь обязательно должен распологаться в thead, tbody, tfoot, а те в свою очередь обязательно распологаться в table. Если не указать thead/tbody/tfoot, то бразуер сам автоматически пометсит все tr в tbody.

Синтаксисс

<table>

<tr>

</tr>

</table>

Аттрибуты

abbr — аббревиатура ячейки (читать как краткое описание)

align — даёт понять каким будет выравнивание содержимого ячейки по горизонтали.

axis — группирует ячейки связанные одной информацией.

background — сюда можно написать ссылку на картинку и она будет фоном ячейки. Не используйте этот атрибут. Есть CSS для этого.

bgcolor — здесь можно написать цвет фона ячейки. Не используйте этот атрибут. Есть CSS для этого.

bordercolor — Здесь можно задать цвет рамки ячейки. Не используйте этот атрибут. Есть CSS для этого.

char — указывает по каком символу будет происходить выравнивание в столбце.

charoff — указывает относительно какого символа будет происходить смещение ячейки.

colspan — укажите какое числе столбцов должна занять эта ячейка.

headers — Позволяет связать ячейки с заголовком.

height — здесь вы можете указать высоту строки. Не используйте этот атрибут. Есть CSS для этого.

nowrap — укажите этот атрибут и будет запрос на перенос строк внутри ячейки. Не используйте этот атрибут. Есть CSS для этого.

rowspan — укажите какое число строк должна занимать эта ячейка.

scope — Позволяет связать ячейки простой таблицы с заголовками в речевых web-browserах.

valign — даёт понять каким будет выравнивание содержимого ячейки по вертикали.

width — здесь можно указать ширину ячейки. Не используйте этот атрибут. Есть CSS для этого.

У этого элемента ещё имеются универсальные аттрибуты и события.

<iframe> — Элемент iframe создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

Элемент iframe является контеийнером, содержание которого игнорируется web-browserами, не поддерживающими данный элемент. Для таких web-browserов можно указать альтернативный текст, который увидят пользователи.

Синтаксисс

Аттрибуты

align — Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.

allowtransparency — Устанавливает прозрачный фон фрейма, через который виден фон страницы.

frameborder — Устанавливает, отображать границу вокруг фрейма или нет.

height — Высота фрейма.

hspace — Горизонтальный отступ от фрейма до окружающего контента.

marginheight — Отступ сверху и снизу от содержания до границы фрейма.

marginwidth — Отступ слева и справа от содержания до границы фрейма.

name — Имя фрейма.

sandbox — Позволяет задать ряд ограничений на контент загружаемый во фрейме.

scrolling — Способ отображения полосы прокрутки во фрейме.

seamless — Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.

src — Путь к файлу, содержимое которого будет загружаться во фрейм.

srcdoc — Хранит содержимое фрейма непосредственно в атрибуте.

vspace — Вертикальный отступ от фрейма до окружающего контента.

width — Ширина фрейма.

У этого элемента ещё имеются универсальные аттрибуты и события.

<form> — Элемент form добавляет форму на web-странице. Форма раньше являлась основным способом обмена данными межде сервером и пользовтелем. На сегодняшний день используется в качеству удобной обертки с удобным API. Так в осовном используется чтобы получить валидный каркас с исзодными данным для отправки даных на сервер, добавления нативных уведомлений валидации, ловли событий на форме и прочего. Раньше возможность обратится к тега input/textarea/checkbox была только через форму. Но это было давно и уже стало неправдой.

Количетсов форм на одной странице не ограничено, но нельзя вкладывать форму в форму, так как браузер скорее всего не поймет когда какая форма закончилась. Плюс ко всему браузер может отправить запрос на один сервер только два в одной паралели, так что сабмиттеть больше двух форм за раз не имеет смысла (а вообще лечше делать последовательную отправку, чтобы не было коллизий и все было очевидно, тупо, просто и наглядно)

Для того чтобы отправить форму на сервер в атрибутах обязательно должно быть указын не пустой action, а внутри формы находиться кнопка Submit, которую можно сделать различными способами (от нативных кнопок input type=submit и button, до написания собственных механизов сабмита в скриптах) или можно в рамках формы нажать Enter. Это будет аналогом нажатия на кнопку submit. Если конечно другой разработчик не запретил данного действия в скриптах.

Как уже и говорилось, когда мы сабмитим форму на сервер, то браузер собирает данные и отправляет их по адресу указанному в action. Web-browser собирает и подготавливает данные из формы: формирует или простой список из пар «ключ=значение» или генерируерт formidable структуру для POST запросов. Но сейчас возьмем простой вариант и отправим некоторые данные с помощью метода GET запроса. Он будет выглядеть так:

https://www.helloworld.org/someAction?ключ=значение&ключ2=значение2

Параметры в виде ключ=значение перечисляются после спе знака — вопросительного — указанного после URI основной программы, которая должна будет обработать наш запрос и дать ответ (ну или не дать и вернуть ошибку). Разделяются же параметры между собой с помощью амперсанда &. Большинство бразуеров не умеер нормально представлять ссылки с нелатинскими символами, поэтому все они преобразуются в шестнадцатеричное представление (в формат %HH, где HH — шестнадцатеричный код для значения ASCII-символа), а все пробелы заменяется на плюсы (+), чтобы не было разрывов строки.

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

Синтаксисс

...

</form>

Аттрибуты

accept-charset — дает понять какую кодировку поймет сервер при отправке.

action — адресс удаленного сервера, который будет обрабатывать ваш запрос.

autocomplete — если в текущее поле вводятся очень важные и секурные данные, то лучше отключите возможность автозаполнения. А ещё иногда браузер некорекктно по именам распознает какие данные надо подставить и в таком случае лучше будет отключить данную функцию (чтобы на место вашего имени и фамилии не писался ваш никнейм с порнхаба)

enctype — Способ кодирования данных form’ы.

method — метод, которым будет отправлена форма. Основные 4: GET/POST/PUT/DELETE.

name — устанавливает имя form’ы.

novalidate — отменяет проверку форму нативными срерсдтвами валиации браузера. К примеру, когда у вас самописная валидация на скриптах и валидация барузероем будет только мешать.

target — имя другого окна, таба или фрейма куда выведется результат ответа формы.

У этого элемента ещё имеются универсальные аттрибуты и события.

<fieldset> — Элемент fieldset является собой удобный, но забытый всеми тег, что умеет объединять поля в группы. Пи необходимости можно заблокировать сразу все поля внутри филдсета добавив один атрибут к этому филдсету, вместо того, чтоы добавлять этот атриут к каждому полю.

Web-browserы для удобства восприятия информации отображают специальные рамки вокруг fieldset. Вид этой рамки зависит от используемой ОС, а также используемого web-browserа.

Синтаксисс

<form>

</form>

Аттрибуты

disabled — делает элемент и всё его содержимое недоступным для любого взаимодействия. При сабмите формы это поле не будет отправлено на сервер.

form — устанавливает связь между элементом и формой, если указать идентификатор формы в данном атрибуте.

У этого элемента ещё имеются универсальные аттрибуты и события.

<label> — Элемент label связывет своё содержимое с элементом input/textarea/select. Обычно это делает для более удобного перехода к полю или изменения его значения. К примеру, чтобы не нахимать на маленький квадратик/кружочек чекбокса/радиобаттона мы можем связать их с текстовым лейблом и нажимая не текст будет нажиматься сам элемент. Он служит вроде ссылка для перехода и активации вышеназванных элементов.

Обычно используется два способа связывания лейбла и элемента формы: первый – это когда в специальный атрибут лейбла for мы вписываем id нужного элемента. Второй, более простой, подразумевает помещение элемента форму внутрь лейбла. Последний вариант используется повсеместно для создания чекбоксов и радиобатонов.

Синтаксисс

<input id="идентификатор"><label for="идентификатор"> Текст </label>

<label><input type="..."> Текст</label>

Аттрибуты

accesskey — с помощью заданной клавиши в этом атрибуте позволяет получить доступ к элементу при помощи нажатия указанной клавиши и специальной клавиши, которая у каждого браузера своя.

for — как раз тот самый атрибут, куда следует указать идентификатор необходимого для связки элемента.

<input> — Элемент input является одним из основных элементов, необходимых для взаимодействия с пользователем и одним из самых разносторонних. По сути он принимает одну из трёх простейших форм: текстовое поле с различными правилами ввода, флажки и взаимоисключащие переключатели. Обычно этот элемент используется в рамках контейнера form, чтобы в дальнейшем отправить значение этого поля на сервер, но в современном мире отправкой на сервер занимается скриптовый язык JavaScript, а поле input нужно исключительно для взаимодействия с пользователем.

Самый важный аттрибут этого элемента, от котого зависит его внешний вид и/или функциональность — type. Далее мы расмотрим основные виды типов этого элемента: просто текстовое поле (type=text), поле с скрытым содержимым – с паролем (type=password), поле-переключатель (type=radio), поле-флажок (type=checkbox), скрытое поле (type=hidden), которое всё равно будет будет отправляться на сервер, кнопка (type=button), кнопка для сабмита form’ы (type=submit), кнопка для возврата формы в изначальное состояние (type=reset), поле для выбора и хранения файла (type=file) и кнопка с изображением (type=image). У каждого из этих полей есть свой список аттрибутов влияющих на их поведение. Кроме того, в HTML5 добавлено еще более десятка новых элементов. В основном это текстовые поля с определенными масками поведения (типа корректного ввода email, telephone, date, etc.)

Синтаксисс

Аттрибуты

accept — здесь можно указать какие типы файлов будут принимать type=file. Файлы с другим расширением не будут иметь возможности выбраться на системном уровне.

align — задает как будет выравниваться изображение в type=image

autofocus — автоматически после рендера страницы фокусируется на элементе с этим атрибутом.

border — устсаналвивает в пикселях толщина рамочки вокруг изображения. Лучше не использовать вообзе изображение с type=image, но если уж вас приперло, то задайте рамочку с помощью CSS.

checked — атрибут true/false для checkbox/radio который задает значение выбранности или нет для этих элементов.

form — здесь вы можете указать к какой форме относится кнопка, если она находится вне формы.

formaction — принудительно указывает по какому адресу будет происходить сабмит формы. Редко-используемая фича, желательно её избегать.

formenctype — принудительно указывает кодировку в котром отправлять данные на сервер. Не использовать. Плохой стиль.

formmethod — принудительно указывает каким методом отправить данные формы на сервер. Не использовать. Плохой стиль.

formnovalidate — если у элементов формы используются нативные методы проверки валидности, то данное свойство отклчит их проверку при сабмите формы. Не использовать. Плохой стиль.

formtarget — после сабмита откроет ответ с сервера в фрейме или новом окне.

list — Указывает на список вариантов, которые можно выбирать при вводе текста.

max — атрибут, который указывает встроенным в браузер технологиям валидации, что в данном поле value не должно превышать значение этого атрибута. Работает для чисел и дат. В текущей реализиации браузер просто запретит ввод больше чем положено.

maxlength — атрибут, который указывает встроенным в браузер технологиям валидации, что количество символов в данном поле не должно превышать значение этого атрибута. В текущей реализиации браузер просто запретит ввод больше чем положено.

min — Нижнее значение для ввода числа или даты.

multiple — Позволяет загрузить несколько файлов одновременно.

name — уникальное имя элемента. По нему можно обратиться к элементу в скриптах или навесить стиль. Если у элемента есть значение, то при самбите формы значение элемента улетит на сервер под указанным в этом атрибуте именем.

pattern — Устанавливает шаблон ввода.

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

readonly — атрибут, который указывает что данное поле нельзя изменять, но его можно читать и оно будет отправлено на сервер, если совершить сабмит формы, а отличии от атрибута disabled.

required — атрибут, который указывает встроенным в браузер технологиям валидации, что данной поле должно быть не пустым перед сабмитом. В случае, если проверка не пройдена, то браузер откажет в сабмите и уведомит пользователя о неполноте данных.

size — указывает ширину текстового поля в попугаях.

src — Адрес графического файла для поля с изображением.

step — Шаг приращения для числовых полей.

tabindex — Этот атрибут получет порядковый номер, под которым до него можно будет добраться с помощью tab. Если потавить -1, то элемент будет не tabабельным.

type — Сообщает web-browserу, к какому типу относится элемент form’ы.

value — текущее значение данного поля. К этому полу можно будет обратиться в скриптах или же это значение будет отправлено на сервер при сабмите формы.

У этого элемента ещё имеются универсальные аттрибуты и события.

<textarea> — элемент textarea являет собой элемент form’ы для создания области, в которой может располагаться многострочное значение поле, в отличие от элемента input. При отправке данных на сервер или манипулировании значением поля в скриптах будут сохранены переносы строк. Символ переноса строки обычно зависит от используемой операционной системы.

Внутри textarea можно поместить любой текст, который будет отображаться внутри поля.

Синтаксисс

текст

</textarea>

Аттрибуты

autofocus — автоматически после рендера страницы фокусируется на элементе с этим атрибутом..

cols — ширина области, где число определяет количество символов, которое сможет поместиться на одной строке. Лучше использовать CSS стили.

form — устанавливает связь между элементом и формой, если указать идентификатор формы в данном атрибуте.

rows — высота области, где число определяет количество строк будет в элементе. Лучше использовать CSS стили.

wrap — атрибут определяющий харакет переноса строк.

У этого элемента ещё имеются универсальные аттрибуты и события.

<select> — Элемент select создаёт список по двум сценариям: выпадающий с возможностью выбрать один вариант из этого списка и записать его значение в значение value списка, второй же даёт возомжность создать список в небольшой области, где зажав ctrl можно выбрать несколько вариантов – так называемый множественный select. С помощью size можно задать высоту списке, где число в этом атрибе отражает число строк в области. А вот ширина не жадная и пытается стать ровной той, какая необходима для самого длинного названия элемента. Или можно с помощью CSS сделать как вашей душе угодно. Каждый пункт создается с помощью элемента option, который должен быть вложен в контеийнер select. Если планируется отправлять данные списка на сервер, то требуется поместить элемент select внутрь form’ы.

Синтаксисс

<option>Пункт 1</option>

<option>Пункт 2</option>

</select>

Аттрибуты

autofocus — автоматически после рендера страницы фокусируется на элементе с этим атрибутом.

form — устанавливает связь между элементом и формой, если указать идентификатор формы в данном атрибуте.

multiple — конвертирует простой список в список с множественным выбором.

size — число строк что будут отображены в спике.

У этого элемента ещё имеются универсальные аттрибуты и события.

<option> — Элемент option является элементом списка контеийнера select. Ширина списка задаётся самым широким значением длинны текста, указанным в элементе option, ну или может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент select внутрь form’ы.

Синтаксисс

<option>Пункт 1</option>

<option>Пункт 2</option>

</select>

Аттрибуты

label — показывает какую метку пункта списка использовать.

selected — если оный указан, то данная опция будет выбрана по дефолту в списке. Лучше не использовать. Вместо этого задайте значение value у select’а.

У этого элемента ещё имеются универсальные аттрибуты и события.

<button> — Элемент button создает на web-странице кнопку и по своим свойствам и действию напоминает элемент, получаемый с помощью input (с атрибутом type=[button/reset/submit]). Но, в отличие от этого элемента, button имеет ряд расширенных возможностей стилизации кнопок и управления формами. К примеру, на этой кнопке можно размещать любые элементы HTML, в том числе элемент img. С помощью стилей ей можно задать практически любой стиль и сделать её любого возможного для бразуера вида..

Теоретически, элемент button по правилам должен располагаться внутри form’ы. Но web-browserы клали на это, не выводят сообщение об ошибке и корректно работают с элементом button, даже если он встречается самостоятельно. Хотя, если нужно результат нажатия на кнопку отправить на сервер, помещать button в контеийнер form обязательно. Ну или можно с помощью атрибутов указать какую форму мы самбитим.

Синтаксисс

<form>

</form>

Аттрибуты

autofocus — автоматически после рендера страницы фокусируется на элементе с этим атрибутом.

form — здесь вы можете указать к какой форме относится кнопка, если она находится вне формы.

formtarget — после сабмита откроет ответ с сервера в фрейме или новом окне.

type — одно из трёх значений button/submit/reset. Первый тип делает из кнопки обычную кнопку, все остальные делают кнопки кнопками управления формы, внутри которых они распалагются.

У этого элемента ещё имеются универсальные аттрибуты и события.

<object> — Элемент object сообщает web-browserу, как загрузить и отобразить ообъекты, которые изначально web-browser не понимает. Обычн, таким объектам нужны подключения к web-browserу специальных модулей, которые называются плагин, или требует запуска вспомогательной программы.

Спецификация HTML 5 позволяет помещать несколько элементов object с различным содержанием друг в друга. Это даёт возможность отображать тот контент, который понятен web-browser, при отсутствии нужной программы или плагина. Это упрощает кроссбраузерность сайтов. К примеру, внешний элемент object загружает видео-файл, а в случае, когда необходимый кодек (программа для сжатия и восстановления видеоданных) не обнаружен в системе, вложенный элемент object показывает картинку. В дополнение внутрь object можно поместить элемент param, который передает дополнительные параметры для отображения объекта.

Синтаксисс

Аттрибуты

align — даёт понять как будет обтекаться элементы и тип его выравнивания на страницы

archive — определяет путь к файлам (библиотекам), необходимым дл корректной и полноценной работы объекта.

classid — URI плагина (приложения или программы), которая знает как работать с данным объектом и запустит его.

code — имя загружаемого объекта, который будет исполняться.

codebase — это путь до корневой папки с объектом, который определяется атрибутом code или classid.

codetype — говорит какой тип объекта, который определяется другим атрибутом classid.

data — URI адрес до файла, необходимый для того, чтобы его содержимое было отображено в web-браузере.

height — Это высота объекта.

hspace — это horizontal space или горизонтальный отступ до других элементов рядом.

type — MIME-тип объекта.

vspace — это vertical space или вертикальный отступ до других элементов рядом.

width — это ширина элемента

У этого элемента ещё имеются универсальные аттрибуты и события.

<canvas> — создает область-холст, в котором можно рендерить 2D картинку, делать анимацию и прочие ноу=хау из мира 2D. Основной интерес ввиду возможности рендерить 60 и выше кадров секунду. Некоторые разработчики полагают, что мир будущих интерфейсов лежит за canvas (или webGL)

Синтаксисс

</canvas>

Аттрибуты

height — это высота холста. По умолчанию 300 пикселей.

width — а это ширина холста. По умолчанию 150 пикселей.

У этого элемента ещё имеются универсальные аттрибуты и события.

Универсальные атрибуты

Далее будет универсальных атрибутов, которые могут быть использованы на большой группе тегов. Чтобы постоянно не повторяться они указаны списком ниже:

accesskey — с помощью заданной клавиши в этом аттрибуте позволяет получить доступ к элементу при помощи нажатия указанной клавиши и специальной клавиши, коорая у каждого браузера своя.

class — здесь мы можем перечислить названия классов, на которые в дальнейшем или сможем обратиться к нему в скриптах, или навесим стили.

contenteditable — атрибут меняет поведение контейнерного типа тегов, делая из них подобие textarea с возможностью редактировать содержимое.

contextmenu — если здесь указать идентификатор другого элемента (обычно это ul или menu с списком опций), то он откроется аки контекстное меню

dir — редко-используемый аттрибут, нужный для того, чтобы указать в каком направлении будет текст в элементе. Например для арабов текст должен быть справа налево.

hidden — некоторые теги можно спрятать с помощью этого аттрибута. Почти не используется, потому что принято делать это с помощью стилей.

id — указывает основной идентификатор элемента. Плохим тоном будет навесить на него стили, но хороим – найти жлемент в скриптах с помощью этого id.

lang — Web-browser не всегда знает как правильно отобразить национальные символы. Этот атрибут помогает ему разобраться. Например различные диалекты китайского.

spellcheck — web-browser может проверять орфографию и прочее с помощью встроенных словарей. Если вы хотите добавить эту возможность, то добавьте этот атрибут.

style — если вы ленивый и нехороший разработчик, то здесь вы будете указывать css стили для текущего элемента. Ну или иногда в безвыходных ситуациях вы будете этим заниматься.

title — Краткая описание объекта, которое будет видно только на декстопах и при наведении на элемент и задержании курсора на пару секунд. Почти не нужно, так как 90% офисного планктона не знают, что такие подсказочки вообще могут появляться впринципе.

Универсалные события

onblur — событие, когда теряется фокус на элементе.

onchange — событие, когда изменяется значения элемента form’ы или самого элемента.

onclick — событие, когда вы кликаете левой кнопкой мыши на элементе.

ondblclick — событие, когда вы дважды кликаете левой кнопкой мыши на элементе.

onfocus — событие, когда элемент получается фокусироку на себе

onkeydown — событие, когда вы нажимаете на клавишу, но не отпускаете.

onkeypress — событие, когда клавишу нажали и отпустили.

onkeyup — событие, когда вы отпустили клавишу.

onload — событие, когда документ загрузился (только загрузился, не обязательно построился, но все основные и неотложенные ресурсы уже скачаны, хотя могут быть и не исполнены).

onmousedown — событие, когда нажимаете на левую кнопку мыши

onmousemove — событие, когда вы перемещаете курсор мыши.

onmouseout — событие, когда вы уводите курсор за рамки элемента

onmouseover — событие, когда вы наводите курсор на элемент

onmouseup — событие, когда левая кнопка мыши отпущена

onreset — событие, когда вы очищаете форму

onselect — событие, когда вы выделяете текст в элементе формы

onsubmit — событие, когда вы сабмитите и отправляете форму

onunload — событие, когда вы закрываете страницу или бразуер

Список использованной литературы

Дакет Д. HTML и CSS. Разработка и дизайн web-сайтов. – М.: Эксмо, 2017. – 480с.
Фрейн Б. HTML5 и CSS3. Разработка сайтов для любых web-browserов и устройств. – СПб.: Питер, 2014. – 304с.
Хоган Б.П. HTML5 и CSS3. Web-разработка по стандартам нового поколения. – СПб.: Питер, 2015. – 320с.
Никсон Р. Создаем динамические web-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. – СПб.: Питер, 2016. – 767с.