Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Html основа: Элемент — Глоссарий | MDN

On

Html основа: Элемент — Глоссарий | MDN

By alexxlab

Содержание

Основа основ HTML-документа – валидность кода.

Что такое валидность кода?

Валидность кода – это соответствие кода определённым правилам и стандартам. Если приводить аналогию, например, с русским языком, то все мы знаем, что существуют определённые правила, которые определяют орфографию, пунктуацию, стилистику и т.п.

Мы знаем, как пишутся, например, слова: корова, молоко – если кто-то напишет эти слова с ошибкой, то мы, конечно, поймём, о чём идёт речь, но сразу подумаем, что человек бескультурный и малограмотный. Если мы напишем известную цитату:

Вот это стол, — на нём сидят!
Вот это стул, — его едят!

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

Конечно, зачастую бывает так, что браузер корректно обрабатывает и невалидный код, конечно, если html-теги не имеют орфографических ошибок. Если в написании тега ошибка – он будет проигнорирован. А вот если пропущен закрывающий тег, либо используются инструкции, которые в жизни не должны использоваться с этими тегами в данной версии языка – то всё может быть обработано нормально.

Для чего нужно соблюдать валидность кода?

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

  1. Вы захотите внести какие-то изменения в шаблон страницы. При невалидном коде всё вдруг может разъехаться вкривь, да вкось – об этом следует обязательно помнить. Всё равно в итоге код придётся переписывать правильно. Да и потом, один браузер может корректно обрабатывать ваши ошибки, а другой решит, что их нужно обрабатывать совсем по-другому.

  2. Вы захотите продвигать ваш сайт. Невалидный код – это одна из причин, по которой продвижение сайта может стать проблематичным. Это точно так же, как, если вы пишете с кучей ошибок какой-то текст, адресованный другим людям, которые более грамотные. Вы выразите полное неуважение к ним своим текстом. Поисковые машины так же считают, когда видят невалидный текст.

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

Как можно проверить валидность кода?

Для проверки валидности кода можно воспользоваться официальными сервисами:

http://validator.w3.org/ — для проверки валидности HTML-кода

http://jigsaw.w3.org/css-validator/ — для проверки валидности CSS

Например, можете проверить на валидность наш сайт http://validator.w3.org/check?uri=http%3A%2F%2Fwww.compera-online.ru и посмотреть, насколько правильно написан код.

Структура правильного HTML-документа

С чего начинается правильный HTML-документ?

Правильный документ начинается с указания типа документа. Наиболее распространённые типы документов, это:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>  (HTML 4.01 – это, можно сказать, классика жанра)

<!DOCTYPE html> (HTML 5 – это расширенный тип, позволяющий делать множество различных «украшательств» через HTML/CSS без использования JAVA)

<!DOCTYPE HTML PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»> (eXtended HTML 1.0)

В зависимости от типа документа используемые конструкции html-тегов несколько отличаются.

После определения типа документа идёт тег, открывающий контейнер веб-страницы — <html>.

Контейнер <html> содержит теги заголовка страницы <head> и </head> — закрывающий тег. После «головы» идёт тело сайта <body>, которое так же закрывается тегом </body> и </html>, закрывающий тег контейнера страницы.

Браузеры делают всё возможное, чтобы отобразить страницу, так что возможно, всё будет работать и без этих тегов, но их отсутствие будет считаться грубейшей ошибкой в вёрстке сайта.

В теге  <head> … </head> мы прописываем техническую информацию о странице сайта, а в теге <body>…</body> мы помещаем непосредственно содержимое сайта.

В следующей статье мы поговорим о том, что должно быть в теге <head>, а так же – что желательно в него поместить, для того, чтобы сайт больше любили поисковые системы.

Теги:
сайтостроение,
валидность кода

Другие статьи в разделе:

JavaWeb ——— основа HTML — Русские Блоги

 

1. Концепция

HTML Это язык, используемый для описания веб-страниц, ссылаясь на язык гипертекстовой разметки (язык гипертекстовой разметки).
«Гипертекст»:Это означает, что страница может содержать нетекстовые элементы, такие как изображения, ссылки и даже музыку и программы.

«отметка»: Представляет собой набор тегов разметки. HTML использует теги разметки для описания веб-страниц, большинство из которыхВ парахпоявляются.HTML — это не язык программирования.

Чтобы открыть веб-страницу, просто щелкните правой кнопкой мыши и выберите «Просмотреть исходный код», чтобы открыть окно, содержащее HTML-код страницы.

Синтаксис и спецификации HTML:Суффикс HTML-файла — .html.Или .htm, рекомендуется .html. HTML игнорирует регистр букв, и при написании рекомендуется использовать строчные буквы.Структура языка гипертекстовой разметки HTML включает в себя часть «Голова» и часть «Тело».из ихРаздел «head» предоставляет информацию о веб-странице, а раздел «main» предоставляет конкретное содержимое веб-страницы.

HTML-элементы:Он относится ко всем кодам от начального тега до конечного тега. НаиболееHTML-элементы могут быть вложенными(Могут содержать другие элементы HTML), документы HTML состоят из вложенных элементов HTML. Элементы HTML делятся на блочные и встроенные элементы. Блочные элементы (такие как: <h2>, <p>, <div>, <span>, <ul>, <ol>, <table>) отображаются в браузере. Время обычно начинается и заканчивается новой строкой; встроенные элементы (такие как: <b>, <td>, <a>, <h2>, <img>, <h2>, <h2>,) в браузере Отображение обычно не начинается с новой строки.

Атрибуты HTML:HTML-теги могут иметь атрибуты. Атрибуты предоставляют дополнительную информацию об элементах HTML. Атрибуты всегда появляются в виде пар имя / значение, например name = «value». Атрибуты всегда указываются в открывающем теге HTML-элементов.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

Оператор <! DOCTYPE> помогает браузеру правильно отображать веб-страницу. Он не входит в область видимости структуры языка разметки гипертекста.В веб-мире существует множество различных документов. Только зная тип документа, браузер может правильно отобразить документ. Существует также много различных версий HTML. Только полностью понимая точную версию HTML, используемую на странице, браузер может полностью корректно отображать HTML-страницу. Это цель <! DOCTYPE>. Ссылка на часто используемую декларацию DOCTYPE http://www.w3school.com.cn/tags/tag_doctype.aspссылка на сайт 。

2. Часто используемые ярлыки

<! — ->, комментарий
<html> </html>, он может отображаться в документе HTML только один раз. Определите весь документ HTML и включите все содержимое всего документа HTML.
<head> </head>, заголовок HTML-документа

<body> </body>, основная часть HTML-документа

2.1 Часто используемые метки в голове

<title> </title>, определяет заголовок документа.Может использоваться только в элементе HEAD. Текст в открывающем и закрывающем тегах заголовка будет в строке заголовка браузера.И отображается на панели задач Microsoft Windows. Для веб-страниц к заголовку автоматически добавляется «Internet Explorer». В приложениях HTML (HTA) будет отображаться только указанный заголовок.

<base> </base>, тег описывает основной адрес ссылки / цель ссылки, этот тег служит ссылкой по умолчанию для всех тегов ссылок в документе HTML.

<link> </link>, тег определяет отношения между документом и внешними ресурсами.

<meta> </meta>, тег описывает некоторые основные метаданные и предоставляет метаданные. Метаданные не отображаются на странице, но будут проанализированы браузером.

<style> </style>, тег определяет адрес ссылки на файл стиля HTML-документа. В элементе <style> вам необходимо указать файл стиля для визуализации HTML-документа.

<script> </script>, тег используется для загрузки файлов сценариев, например JavaScript. Чтобы

2.2 Общие метки в основном корпусе

<hr /> проведите разделительную линию

<br /> Разрыв строки. <br /> Очень похоже на <br>. В XHTML, XML и будущих версиях HTML элементы HTML без закрывающих тегов (закрывающих тегов) не допускаются. Даже если с отображением <br> во всех браузерах нет проблем, использование <br /> является долгосрочной гарантией.

<h2> <h2 /> ～ <h6> <h6 />, заголовок. цифровойЧем меньше размер, тем больше он отображается в браузере. Если число больше 6, обрабатывается как 6.

Ссылка <a href = «»> определяется тегом <a href>, а целевой атрибут используется для установки места открытия нового окна после щелчка по ссылке. Среди них тег a также называют якорем (anchor).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <title> Тег гиперссылки </title>
	</head>
	<body>
		 <a href="../List tag/02_Ordered list.html" target="_blank"> Щелкните У меня сюрприз! </a>
	</body>
</html>

<p> Абзац

<font> </font> Шрифт. <size> </size> Размер шрифта от 1 до 7. Если он больше 7, он будет обработан как 7.Не рекомендуется, используйте вместо него стиль.

атрибут стиля,Используйте атрибут стиля для изменения цвета фона (функция bgcolor), атрибут стиля удаляет старый атрибут «bgcolor»; атрибут стиля устанавливает цвет, шрифт и размер, атрибут стиля удаляет старый тег <font>; атрибут стиля устанавливает выравнивание текста. Атрибут стиля исключил атрибут выравнивания.

<html>
<body style = "background-color:yellow">
<h2 stye = "background-color:red>This is a Heading</h2>
<p style = "background-color:green>This is a Paragraph</p>
<h3 style = "font-family:verdana">A Heading</h3>
<p style = "font-family:arial;color:red;font-size:20px;">A Paragraph</p>
<h4 style = "text-align:center;">A Heading</h4>
<p>The heading above is aligned to the center of the page</p>
</body>
</html>

<b> </b> Жирный шрифт

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

<image> </image> тег изображения, src = «» — это путь к изображению,../ — это верхний каталог.alt, подсказка, когда изображение не может отображаться нормально.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <title> Тег изображения </title>
	</head>
	<body>
		 <img src = "../../ img / logo2.png" width = "150px" height = "30px" alt = "logopicture" />
	</body>
</html>

<ul> Тег неупорядоченного списка

<li> Конкретное значение каждой строки </li>

</ul>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <title> Неупорядоченный список </title>
	</head>
	<body>
		<ul type="square">
			<li>CSDN</li>
			 <li> Байду </li>
			 <li> Jingdong </li>
		</ul>
	</body>
</html>

результат операции:

<ol> Тег упорядоченного списка

<li> Конкретное значение каждой строки </li>

</ol>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> Упорядоченный список </title>
	</head>
	<body>
		<ol start="4" reversed="reversed" type="a">
			<li>CSDN</li>
			 <li> Байду </li>
			 <li> Jingdong </li>
		</ol>
	</body>
</html>

результат операции:

 

<table> тег таблицы

    <tr>

        <td>11</td>

    </tr>

</table>

Случай, межстрочный ярлык таблицы, код следующий:Расстояние между границей пространства ячеек и границей Расстояние между границей заполнения ячеек и содержимым

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <title> Операции между строками и столбцами таблицы </title>
	</head>
	<body>
		<table border="1px" align="center" cellspacing="0px" cellpadding="0px">
			<tr>
				<td colspan="2" align="center">
					<img src="../../img/1.jpg"/>
				</td>
				
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td colspan="2" rowspan="2" align="center">
					<table border="1px" align="center">
						<tr>
							<td>11</td>
							<td>12</td>
							<td>13</td>
						</tr>
						<tr>
							<td>21</td>
							<td>22</td>
							<td>23</td>
						</tr>
						<tr>
							<td>31</td>
							<td>32</td>
							<td>33</td>
						</tr>
					</table>
				</td>
				
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				
				
				<td rowspan="2" align="center">34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
				
			</tr>
			
		</table>
	</body>
</html>

результат операции:

<form> </form> формаОбласть, содержащая элементы формы. Элементы формы позволяют пользователям вводить содержимое в форму, такое как: текстовое поле, раскрывающиеся списки, переключатели, флажки и т. Д.Часть, отображаемая в браузере, является прямым текстом, а часть, которая должна быть отправлена ​​на сервер, должна быть определена по значению; если несколько переключателей должны использоваться в комбинации, они должны иметь одинаковое имя; если вы укажете ввод установите значение по умолчанию для радио и установите флажок Использовать проверенный атрибут и выберитеиспользоватьвыбранное свойство.Для конкретного случая код выглядит следующим образом:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <title> Введение в атрибуты тега формы </title>
	</head>
	<body>
		<form action="#" method="get">
			 Скрытые поля: <input type = "hidden" name = "id" value = "" /> <br />
			 Имя пользователя: <input type = "text" name = "username" readonly = "readonly" value = "zhangsan" size = "40px" maxlength = "5" placeholder = "Введите имя пользователя" /> <br />
			 Пароль: <input type = "password" name = "password" required = "required" /> <br />
			 Подтвердите пароль: <input type = "password" name = "repassword" /> <br />
			 Пол: <input type = "radio" name = "sex" value = "Male" /> Мужской
			 <input type = "radio" name = "sex" value = "Female" checked = "checked" /> Женский <br />
			 Хобби: <input type = "checkbox" name = "hobby" value = "fishing" /> рыбалка.
			 <input type = "checkbox" name = "hobby" value = "play electric" /> играть электрическую
			 <input type = "checkbox" name = "hobby" value = "write code" checked = "checked" /> написать код <br />
			 Аватар: <input type = "file" name = "file" /> <br />
			 Родной город: <select name = "Province">
				 <option> - Выберите - </option>
				 <option value = "Beijing"> Пекин </option>
				 <option value = "Shanghai" selected = "selected"> Шанхай </option>
				 <option value = "Guangzhou"> Гуанчжоу </option>
			</select><br />
			 Самостоятельное введение:
				<textarea name="zwjs">
					
				</textarea><br />
			 Кнопка отправки: <input type = "submit" value = "register" /> <br />
			 Обычная кнопка: <input type = "button" value = "zhuce" /> <br />
			 Кнопка сброса: <input type = "reset" />
		</form>
	</body>
</html>

результат операции:

Разница между get и post:

 

Методы get и post в форме соответствуют методам GET и POST в протоколе HTTP во время передачи данных.Основные различия между ними заключаются в следующем:

1、Get используется для получения данных с сервера, а Post используется для передачи данных на сервер.из их,Get — это метод формы по умолчанию.Метод Get должен использовать Request.QueryString дляПолучитьЗначение переменной; доступ к методу Post осуществляется через Request.Form.РазместитьКонтент.

2. Метод Get передает данные пользователя через URL-запрос. Имя каждого поля в форме и его содержимое связаны с парой строк и помещаются после URL-адреса программы, на которую указывает атрибут действия, например http. : //www.mdm. com / test.asp? name = asd & password = sad, данные будут отображаться прямо на URL-адресе, как пользователь нажимает ссылку; метод Post использует механизм HTTP-сообщений для размещения имени каждое поле в форме и его содержимое в заголовке HTML (заголовок) будут отправлены на сервер для обработки программой, на которую может ссылаться атрибут действия. Программа будет читать и обрабатывать данные формы через стандартный ввод (stdin) .

3、Отправка данных в методе Get небезопасна.Например, страница входа в систему, при отправке данных через Get, имя пользователя и пароль будут отображаться в URL-адресе. Если страницу можно кэшировать или другие люди могут получить доступ к машине клиента, учетную запись пользователя и пароль можно получить из истории записей, поэтому рекомендуется использовать метод Post для отправки формы; общая проблема со страницей формы, отправленной методом Post, заключается в том, что при обновлении страницы открывается диалоговое окно.

4、Объем данных, передаваемых Get, невелик,Обычно ограничивается примерно 2 КБ, но эффективность выполнения лучше, чем у метода Post, что в основном связано с ограничением длины URL-адреса;Post может передавать много данных, поэтому вы можете использовать Post только при загрузке файлов.(Конечно, есть еще одна причина, о которой будет сказано позже).

5. Get ограничивает значение набора данных формы Form символами ASCII, а Post поддерживает весь набор символов ISO10646.Данные, передаваемые Post, могут быть правильно преобразованы в китайский язык, установив метод кодирования; при этом данные, передаваемые Get, не изменились. В будущих процедурах мы должны обращать внимание на этот момент.

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

 

 

 

<frameset> </frameset>, тег структуры фрейма HTML.Примечание: <frameset> и <body> не могут сосуществовать.

<frame> </frame>, тег кадра.

<frameset cols="25%,*">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

Случай, чтобы реализовать фоновое отображение страницы системы веб-сайта. Среди них два <frame> разделены во втором <frameset>, что эквивалентно принятию всего <frameset> в качестве элемента <frame> в первом <frameset>.из их<frame name=»right»>И нижеtarget = «right», эти два права совпадают.Код реализации следующий:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <title> Фоновая страница отображения системы веб-сайта </title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" />
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame name="right" />
		</frameset>
	</frameset>
</html>

Код top.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		 <font size = "7"> Добро пожаловать, XXXX, чтобы войти в систему управления фоном </font>
	</body>
</html>

Код left.html:Target = «right» совпадает с указанным выше <frame name = «right»>, и эти два права одинаковы.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		 <a href="right.html" target="right"> Управление членством </a> <br /> <br />
		 <a href="#"> Управление брендом </a> <br /> <br />
		 <a href="#"> Управление товарами </a> <br /> <br />
		 <a href="#"> Управление классификацией </a>
	</body>
</html>

Код right.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		 Вся информация о пользователе,
	</body>
</html>

результат операции:

анализ:

Полный список HTML-тегов (в алфавитном порядке): http://www.w3school.com.cn/tags/index.aspссылка на сайт

Полный список HTML-тегов (отсортированный по функциям): http://www.w3school.com.cn/tags/html_ref_byfunc.aspссылка на сайт

   

———————————————— Я низкий -клавиша Разделитель ————————————————

 

Html — основа основ

Это самый основной раздел, посвященный
языку HTML. Какие бы технологии не
использовались для Web — строительства,
все они в конечном итоге должны выдать
клиенту HTML — код. Поэтому без знания
основ языка HTML дальнейшие шаги в области
Web — строительства, дизайна просто
невозможны. Создавать странички с
помощью почти всем известной программы
Front Page — не столь уж сложная задача. У
многих складывается ошибочное
представление о том, что научиться Web —
строительству, есть ни что иное, как
овладеть программой Front Page. Это совсем
не так. В чем мы с Вами очень скоро
убедимся. Но иметь под руой Front Page для
начала не помешает. На крайний случай
вполне достаточно будет программы
Notepad («Блокнот»), которая имеется
практически у всех. Конечно не стоит и
напоминать, что необходима программа-броузер
(Internet Explorer, Netscape Navigator и т.д.). Итак,
повторюсь! Когда мы просматриваем сайт,
то какими средствами бы он не создавался,
мы просматриваем HTML — код, интерпретируемый
браузером. Для грамотного Web-строительства
необходимы знания структуры HTML документа
и синтаксиса этого языка. Синтаксис
HTML, базируется на тэгах.

 

Тэги html

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

<html>

— тэг, символизирующий

начало любой
HTML — страницы. Будь то записано как

<html>

или

<HTML>

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

 

Власть тэга распространяется до тех
пор, пока не встретится закрывающий
тэг. Закрывающий тэг ничем не отличается
от открывающего, но имеет после первой
угловой скобки символ «/».
К примеру тэг

<html>

— открывающий,

а

</html>

— закрывающий. Теперь самое время
сверстать первую HTML — страничку. Запускаем
Notepad (Блокнот). Набираем то, что написано
ниже.

<html>

 <head>

   <title>Пример
простейшей HTML странички.</title>

 </head>

<body>

  <p>Простейшая HTML
страничка</p>

</body>

</html>

Теперь выбираем в меню File(Файл)->Save
As…(Сохранить как…). Вам будет
предложено сохранить как Text
Document(Текстовый документ). В строке
File Name(Имя файла) набираем
test.html, а в строке File Type(Тип
файла) выбираем в выпадающем списке
All Files(Все файлы). Нажимаем
Save(Сохранить). Лучше создать
отдельный каталог и сохранить файл
test.html в нем. Теперь можно закрыть
Notepad (Блокнот). Запускаем сохраненный
нами файл test.html. Если в окне броузера
мы видим текст Простейшая HTML
страничка, то это значит, что Вами
все было сделано правильно. А текст
«Пример простейшей HTML странички»
появится в заголовке окна броузера.
Анализ созданной нами странички проведем
в следующий раз.

НОУ ИНТУИТ | Введение в HTML5

Форма обучения:

дистанционная

Стоимость самостоятельного обучения:

бесплатно

Доступ:

свободный

Документ об окончании:

Уровень:

Для всех

Длительность:

7:50:00

Выпускников:

1201

Качество курса:

4.31 | 4.12


В курсе рассказывается об истории создания HTML5, возможностях, совместимости с другими стандартами, основных структурных элементах и их использовании в современных браузерах.


Демонстрируются новые элементы разметки и атрибуты, улучшающие формы, элемент video и создание индивидуального видеоплеера, «холст», API сокеты, кэширование приложение и хранилища данных на клиентских компьютерах. Дается введение в технологию многопоточного выполнения кода Web Workers и описываются основные возможности геолокации.

Теги: ajax, cookies, figures, footer, geolocation, google, html, javascript, jquery, NAV, objective-c, SRT, WAIS, worker, xhtml, браузеры, видео, заголовок раздела, манифест, поддержка, приложения, серверы, спецификации, элементы


Предварительные курсы


Дополнительные курсы

 

 

2 часа 30 минут

—

 


Знакомство с HTML5!

Основные вехи истории создания HTML5. Перспективы языка, сравнение с другими стандартами. Проблемы совместимости. Обсуждаются новые свойства языка разметки, а также технологии, не имеющие прямого отношения к стандарту HTML5, но тесно с ним связанные. API браузеров. JavaScript/DOM. Сокеты. Автономные web приложения, кэши приложений и локальная база данных Web SQL. Увеличение производительности за счет компонента Web Workers. Геолокация.

—

 


Новые структурные элементы в HTML5

В лекции рассматриваются структурные элементы HTML5. Демонстрируется, каким образом новые свойства языка взаимодействуют друг с другом в контексте реальной web-страницы. Использование тегов логической компоновки документа: колонтитулов, навигационных панелей, автономных фрагментов контента, блоков для иллюстраций, разметки времени и даты. Специфика описания типа документа (DTD — Document Type Definition). Как новые средства языка поддерживаются в популярных браузерах. Методики, позволяющие заставить старые клиентские программы отображать неизвестные элементы разметки.

—

 


Новые свойства форм в HTML5

Рассказывается о новых элементах разметки и атрибутах, улучшающих формы. Примеры новых элементов числового ввода, ползунков, списков выбора даты и времени, выбора цвета из цветовой палитры, индивидуального поиска по сайту, элементов ввода со списком вариантов, поля для телефонных номеров, e-mail- и url-адресов. Новые механизмы вывода информации: вывод результатов вычислений, панель индикатора выполнения. Встроенная в HTML5 проверка заполнения формы.

—

 


Введение в видео HTML5

В данной лекции описывается элемент <video> и некоторые связанные с ним API. Перечислены основные поддерживаемые видеоформаты. Автор рассказывает о наиболее важных способах, с помощью которых можно управлять видео через JavaScript и возможностях создания собственных элементов управления проигрывателем. Как элемент <video> сочетается с другими элементами web страницы. Оформление видео с помощью каскадных таблиц стилей (CSS3). Особое внимание уделяется совместимости новых свойств языка со старыми браузерами.

—

 


Улучшение доступности видео-плеера HTML5

Лекция представляет собой описание проекта создания индивидуального видеоплеера HTML5 с улучшенной доступностью. На примерах рассматривается разработка элементов управления плеером: кнопок и ползунков. Создание титров и стенограмм. Описывается проблемы, связанные с управлением плеером посредством клавиатуры. Использование JavaScript-библиотеки jQuery для программирования индивидуальных особенностей видеоплеера. Приводится подборка полезных ресурсов в сети интернет.

—

 


Холст HTML5 – основы

Основы использования элемента «холст». Из данной лекции вы узнаете, как создавать на холсте графические примитивы в виде прямоугольных и треугольных областей со свойствами заливки и обводки. Даны особенности рисования линий и штрихов. Рисование фигур с помощью путей. Вставка в холст других изображений, сформированных элементами img и canvas. Манипуляции с пикселями изображения. Методики добавления на холст текста, теней и градиентов.

—

 


Введение в сокеты Web

Приводится описание API сокетов HTML5 с примерами использования. Основные протоколы для обмена информацией между клиентскими и серверными приложениями. Методы, свойства и события объекта WebSocket. Описаны конструкторы для создания соединения с сервером, использующие различные настройки. Открытие и закрытие соединений. Характеристика сообщений от сервера, обработка основных ошибок, возникающих при работе с сокетами. Методики проверки поддержки сокетов в браузере клиента.

—

 


Автономное выполнение приложений Web с помощью HTML5 AppCache

В данной лекции речь идет о методах кэширования приложений на клиентских компьютерах. Отличия кэша браузеров от кэша приложений HTML5. Файл манифеста и его основные директивы. Подключение манифеста к web приложению. Явное определение файлов для кэширования. Предоставление пользователю резервного контента. Использование API кэша приложений и событий для проверки использования актуальных версий файлов. Проверка поддержки технологии браузером. Статусы, события и обработчики событий кэша приложений.

—

 


Хранилище Web: более удобное и мощное хранилище клиентских данных

Рассматриваются сессионные (Session Storage) и локальные (Local Storage) хранилища данных на стороне клиента. Сравнение технологий хранилищ HTML5 с технологией Cookie. Помещение и извлечение данных из сессионного и локального хранилищ. Удаление данных. Лимит хранилища. Использование событий хранилища. Вопросы безопасности и соответствующие рекомендации.

—

 


Web Workers за работой

Введение в технологию многопоточного выполнения кода Web Workers. Принципы работы и случаи использования. Какие стандартные объекты JavaScript доступны для Web Workers. Присущие ему ограничения. Поддержка в современных браузерах. Дополнительные ссылки по теме.

—

 


Как использовать API геолокации W3C

В завершающей курс лекции описываются основные возможности API геолокации. Как определяется местоположение пользователя. Стандартные предупреждения безопасности. Способы использования API геолокации в приложениях web. Прямое и обратное геокодирование. Геолокация на примере карт от Google.

—

 

1 час 40 минут

—

Лекция 1. Основы World Wide Web (WWW)

Презентация

Интернет — это глобальная компьютерная сеть, объединяющая сотни миллионов компьютеров в общее информационное пространство. Интернет представляет свою инфраструктуру для прикладных сервисов различного назначения, самым популярным из которых является Всемирная Паутина – World Wide Web (www).

World Wide Web (www, web, рус.: веб, Всемирная Паутина) — распределенная информационная система, предоставляющая доступ к гипертекстовым документам по протоколу HTTP.

WWW — сетевая технология прикладного уровня стека TCP/IP, построенная на клиент-серверной архитектуре и использующая инфраструктуру Интернет для взаимодействия между сервером и клиентом (рис. 1).

Серверы www (веб-серверы) — это хранилища гипертекстовой (в общем случае) информации, управляемые специальным программным обеспечением.

Документы, представленные в виде гипертекста называются веб-страницами. Несколько веб-страниц, объединенных общей тематикой, оформлением, связанных гипертекстовыми ссылками и обычно находящихся на одном и том же веб-сервере, называются веб-сайтом.

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

Рис. 1. Архитектура сервиса WWW

В основе www — взаимодействие между веб-сервером и браузерами по протоколу HTTP (HyperText Transfer Protocol). Веб-сервер — это программа, запущенная на сетевом компьютере и ожидающая клиентские запросы по протоколу HTTP. Браузер может обратиться к веб-серверу по доменному имени или по ip-адресу, передавая в запросе идентификатор требуемого ресурса. Получив запрос от клиента, сервер находит соответствующий ресурс на локальном
устройстве хранения и отправляет его как ответ. Браузер принимает ответ и обрабатывает его соответствующим образом, в зависимости от типа ресурса (отображает гипертекст, показывает изображения, сохраняет полученные файлы и т.п.).

Основной тип ресурсов Всемирной паутины — гипертекстовые страницы. Гипертекст — это обычный текст, размеченный специальными управляющими конструкциями — тегами. Браузер считывает теги и интерпретирует их как команды форматирования при выводе информации. Теги описывают структуру документа, а специальные теги, якоря и гиперссылки, позволяют установить связи между веб-страницами и перемещаться как внутри веб-сайта, так и между
сайтами.

Т. Дж. Бернерс-Ли — «отец» Всемирной паутины

Сэр Тимоти Джон Бернерс-Ли — британский учёный-физик, изобретатель Всемирной паутины (совместно с Робертом Кайо), автор URI, HTTP и HTML. Действующий глава Консорциума Всемирной паутины (W3C). Автор концепции семантической паутины и множества других разработок в области информационных технологий. 16 июля 2004 года Королева Великобритании Елизавета II произвела Тима Бернерса-Ли в Рыцари-Командоры за «службу во благо глобального развития Интернета».

Компоненты сервиса

Функционирование сервиса обеспечивается четырьмя составляющими:

  • URL/URI — унифицированный способ адресации и идентификации сетевых ресурсов;
  • HTML — язык гипертекстовой разметки веб-документов;
  • HTTP — протокол передачи гипертекста;
  • CGI — общий шлюзовый интерфейс, представляющий доступ к серверным приложениям.

Адресация веб-ресурсов. URL, URN, URI

Для доступа к любым сетевым ресурсам необходимо знать где они размещены и как к ним можно обратиться. Во Всемирной паутине для обращения к веб-документам изначально используется стандартизованная схема адресации и идентификации, учитывающую опыт адресации и идентификации таких сетевых сервисов, как e-mail, telnet, ftp и т.п. — URL, Uniform Resource Locator.

URL (RFC 1738) — унифицированный локатор (указатель) ресурсов, стандартизированный способ записи адреса ресурса в www и сети Интернет. Адрес URL имеет гибкую и расширяемую структуру для максимально естественного указания местонахождения ресурсов в сети. Для записи адреса используется ограниченный набор символов ASCII. Общий вид адреса можно представить так:

://:@:/

Где:

схема
схема обращения к ресурсу: http, ftp, gopher, mailto, news, telnet, file, man, info, whatis, ldap, wais и т.п.
логин:пароль
имя пользователя и его пароль, используемые для доступа к ресурсу
хост
доменное имя хоста или его IP-адрес.
порт
порт хоста для подключения
полный-путь-к-ресурсу
уточняющая информация о месте нахождения ресурса (зависит от протокола).

Примеры URL:

http://example.com	#запрос стартовой страницы по умолчанию
http://www.example.com/site/map.html	#запрос страницы в указанном каталоге
http://example.com:81/script.php	#подключение на нестандартный порт
http://example.org/script.php?key=value #передача параметров скрипту
ftp://user:[email protected]	#авторизация на ftp-сервере
http://192.168.0.1/example/www #подключение по ip-адресу
file:///srv/www/htdocs/index.html #открытие локального файла
gopher://example.com/1	#подключение к серверу gopher
mailto://[email protected] #ссылка на адрес эл.почты

В августе 2002 года RFC 3305 анонсировал устаревание URL в пользу URI (Uniform Resource Identifier), еще более гибкого способа адресации, вобравшего возможности как URL, так и URN (Uniform Resource Name, унифицированное имя ресурса). URI позволяет не только указавать местонахождение ресурса (как URL), но и идентифицировать его в заданном пространстве имен (как URN). Если в URI не указывать местонахождение, то с его помощью можно описывать ресурсы, которые не могут быть получены непосредственно из Интернета (автомобили, персоны и т.п.). Текущая структура и синтаксис URI регулируется стандартом RFC 3986, вышедшим в январе 2005 года.

Язык гипертекстовой разметки HTML

HTML (HyperText Markup Language) — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц созданы при помощи языка HTML. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. Для этого он представляет небольшой (сравнительно) набор структурных и семантических элементов — тегов. С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен единообразно воспроизводиться на различном оборудовании (монитор ПК, экран органайзера, ограниченный по размерам экран мобильного телефона, медиа-проектор). Однако современное применение HTML очень далеко от его изначальной задачи. Со временем основная идея платформонезависимости языка HTML стала жертвой коммерциализации www и потребностей в мультимедийном и графическом оформлении.

Протокол HTTP

HTTP (HyperText Transfer Protocol) — протокол передачи гипертекста, текущая версия HTTP/1.1 (RFC 2616). Этот протокол изначально был предназначен для обмена гипертекстовыми документами, сейчас его возможности существенно расширены в сторону передачи двоичной информации.

HTTP — типичный клиент-серверный протокол, обмен сообщениями идёт по схеме «запрос-ответ» в виде ASCII-команд. Особенностью протокола HTTP является возможность указать в запросе и ответе способ представления одного и того же ресурса по различным параметрам: формату, кодировке, языку и т. д. Именно благодаря возможности указания способа кодирования сообщения клиент и сервер могут обмениваться двоичными данными, хотя данный протокол является символьно-ориентированным.

HTTP — протокол прикладного уровня, но используется также в качестве «транспорта» для других прикладных протоколов, в первую очередь, основанных на языке XML (SOAP, XML-RPC, SiteMap, RSS и проч.).

Общий шлюзовый интерфейс CGI

CGI (Common Gateway Interface) — механизм доступа к программам на стороне веб-сервера. Спецификация CGI была разработана для расширения возможностей сервиса www за счет подключения различного внешнего программного обеспечения. При использовании CGI веб-сервер представляет браузеру доступ к исполнимым программам, запускаемым на его (серверной) стороне через стандартные потоки ввода и вывода.

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

Программное обеспечение сервиса www

Веб-серверы

Веб-сервер — это сетевое приложение, обслуживающее HTTP-запросы от клиентов, обычно веб-браузеров. Веб-сервер принимает запросы и возвращает ответы, обычно вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными. Веб-серверы — основа Всемирной паутины. С расширением спектра сетевых сервисов веб-серверы все чаще используются в качестве шлюзов для серверов приложений или сами
представляют такие функции (например, Apache Tomcat).

Созданием программного обеспечения веб-серверов занимаются многие разработчики, но наибольшую популярность (по статистике http://netcraft.com) имеют такие программные продукты, как Apache (Apache Software Foundation), IIS (Microsoft), Google Web Server (GWS, Google Inc.) и nginx.

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

IIS (Internet Information Services) — проприетарный набор серверов для нескольких служб Интернета, разработанный Майкрософт и распространяемый с серверными операционными системами семейства Windows. Основным компонентом IIS является веб-сервер, также поддерживаются протоколы FTP, POP3, SMTP, NNTP.

Google Web Server (GWS) — разработка компании Google на основе веб-сервера Apache. GWS оптимизирован для выполнения приложений сервиса Google Applications.

nginx [engine x] — это HTTP-сервер, совмещенный с кэширующим прокси-сервером. Разработан И. Сысоевым для компании Рамблер. Осенью 2004 года вышел первый публично доступный релиз, сейчас nginx используется на 9-12% веб-серверов.

Браузеры

Браузер, веб-обозреватель (web-browser) — клиентское приложение для доступа к веб-серверам по протоколу HTTP и просмотра веб-страниц. Как правило браузеры дополнительно поддерживают и ряд других протоколов (например ftp, file, mms, pop3).

Первые HTTP-клиенты были консольными и работали в текстовом режиме, позволяя читать гипертекст и перемещаться по ссылкам. Сейчас консольные браузеры (такие, как lynx, w3m или links) практически не используются рядовыми посетителями веб-сайтов. Тем не менее такие браузеры весьма полезны для веб-разработчиков, так как позволяют «увидеть» веб-страницу «глазами» поискового робота.

Исторически первым браузером в современном понимании (т.е. с графическим интерфейсом и т.д.) была программа NCSA Mosaic, разработанная Марком Андерисеном и Эриком Бина. Mosaic имел довольно ограниченные возможности, но его открытый исходный код стал основой для многих последующих разработок.

Существует множество различных программ-браузеров, но наибольшей популярностью на дату написания этой статьи пользуются следующие:

  • Internet Explorer / (Edge с версии 11) (IE) — браузер, разработанный компанией Майкрософт и тесно интегрированный c ОС Windows.
  • Firefox — свободный кроссплатформенный браузер, разрабатываемый Mozilla Foundation и распространяемый под тройной лицензией GPL/LGPL/MPL.
  • Safari — проприетарный браузер, разработаный корпорацией Apple и входящий в состав операционной системы Mac OS X.
  • Opera — кроссплатформенный многофункциональный веб-браузер, впервые представленный в 1994 году группой исследователей из норвежской компании Telenor. Дальнейшая разработка ведется Opera Software ASA.

Развернутая информация об этих и ряде альтернативных браузеров приводится в статье «Как выбрать лучший браузер?».

Роботы-«пауки»

Наряду с браузерами, ориентированными на пользователя, существуют и специализированные клиенты-роботы («пауки», «боты»), подключающиеся к веб-серверам и выполняющие различные задачи автоматической обработки гипертекстовой информации. Сюда относятся, в первую очередь, роботы поисковых систем, таких как google.com, yandex.ru, yahoo.com и т.п., выполняющие обход веб-сайтов для последующего построения поискового индекса.

Контрольные вопросы

CC-BY-SA Анатольев А.Г., 31.01.2012

Презентация на тему: Язык HTML
Язык  HTML  — это основа web сайтов, с его помощью создается каркас


1


Первый слайд презентации

Язык HTML
Язык  HTML  — это основа web сайтов, с его помощью создается каркас страницы, которую вы видите в браузере.
Если сравнивать страницу сайта и обычную бумажную книгу, то на сайте, как и в книге, есть абзацы и заголовки. В книге есть название всей книги (по сути самый главный заголовок), есть названия глав, параграфов в этих главах и так далее.
Заголовки, абзацы и другие блоки можно выделить и на странице сайта. Это делается с помощью  HTML тегов.
http://old.code.mu/books/css/

Изображение слайда


2


Слайд 2

Атрибуты
В тегах также могут размещаться  атрибуты  — специальные команды, которые расширяют действие тега.
Атрибуты размещаются внутри открывающего тега в таком формате:  <тег атрибут1=»значение» атрибут2=»значение»>.
Кавычки могут быть любыми — одинарными или двойными, допустимо их вообще их не ставить, если значение атрибута состоит из одного слова (но это не желательно).
Что такое HTML теги?
HTML теги  — это специальные команды для браузера. Они говорят ему, что, к примеру, следует считать заголовком страницы, а что абзацем.
Теги строятся по такому принципу: уголок  <, потом имя тега, а потом уголок  >, вот так:  <имя тега>. Имя тега может состоять из английских букв и цифр. Примеры тегов:  <h2>,  <p>,  <b>.
Теги обычно пишутся парами — открывающий тег и соответствующий ему закрывающий. Разница между открывающим и закрывающим тегами в том, что в закрывающем теге после уголка  <  стоит слеш  /.
К примеру,  <p>  — так я открыл тег p, а так —  </p>  — я его закрыл. Все, что попадает между открывающим и закрывающим тегами, подпадает под воздействие нашего тега.
Бывают теги, которые не нужно закрывать, например,  < br >  или  < img >.
http://old.code.mu/books/css/

Изображение слайда


3


Слайд 3

Структура простейшей страницы
Страница сайта — это обычный текстовый файл с расширением . html. Внутри этого файла и хранится текст HTML страницы вместе с тегами.
http://old.code.mu/books/css/

Изображение слайда


4


Слайд 4

Абзацы
Одним из основных элементов страницы являются  абзацы.
Абзац создается с помощью тега  <p>  таким образом:
http://old.code.mu/books/css/

Изображение слайда


5


Слайд 5

Заголовки h2, h3, h4, h5, h5, h6
Кроме абзацев важное значение на странице имеют  заголовки.
http://old.code.mu/books/css/

Изображение слайда


6


Слайд 6

Жирный
Вы уже знаете, что заголовки по умолчанию  жирные. Однако, можно сделать жирным и обычный текст — достаточно взять его в тег  <b>.
http://old.code.mu/books/css/

Изображение слайда


7


Слайд 7

Курсив
Кроме жирного можно сделать также и  курсив  с помощью тега  <i> :
http://old.code.mu/books/css/

Изображение слайда


8


Слайд 8

Маркированные списки
Наряду с абзацами и заголовками существует еще один важный элемент страницы — это  списки. Списки создаются с помощью тега  < ul >, внутри которого обязательно должны идти теги  < li >.
http://old.code.mu/books/css/

Изображение слайда


9


Слайд 9

Нумерованные списки
Создаются с помощью тега  < оl >, внутри которого обязательно должны идти теги  < li >.
http://old.code.mu/books/css/

Изображение слайда


10


Слайд 10

Ссылки
Ссылки  являются теми элементами, которые делают из интернета интернет. Нажимая на ссылки, мы можем переходить с одной страницы сайта на другу.  Ссылка создается с помощью тега  <a>, при этом у нее должен быть обязательный атрибут  href, в котором хранится адрес той страницы, на которую ведет ссылка.
http://old.code.mu/books/css/

Изображение слайда


11


Слайд 11

Картинки
Давайте теперь разберемся с тем, как разместить  изображение  на странице вашего сайта. Для этого предназначен тег  < img >, имеющий обязательный атрибут  src, в котором хранится путь к файлу картинки.
http://old.code.mu/books/css/

Изображение слайда


12


Слайд 12

Ссылки в виде картинок
Ссылкой  может быть не только текст, но и  картинка  — для этого достаточно тег  < img >  вложить в тег  <a>
http://old.code.mu/books/css/

Изображение слайда


13


Слайд 13

Разрыв строки
В том месте, где должен быть разрыв строки, следует написать тег  < br >. Учтите, что этот тег особенный и не имеет закрывающего.
http://old.code.mu/books/css/

Изображение слайда


14


Слайд 14

Задачи для решения
Повторите страницу по данному по образцу:
http://old.code.mu/books/css/

Изображение слайда


15


Слайд 15

Задачи для решения
Повторите страницу по данному по образцу:
http://old.code.mu/books/css/

Изображение слайда


16


Слайд 16

Структура простейшей таблицы
Таблица — это набор  строк  и  столбцов, на пересечении которых находятся  ячейки.
Таблица имеет жесткую структуру: главным является тег  < table >, внутри которого должны лежать теги  < tr >, которые создают  ряды  (строки) таблицы, а внутри них — теги  < td >, которые создают  ячейки.
http://old.code.mu/books/css/

Изображение слайда


17


Слайд 17

Ячейки-заголовки
Кроме тегов  td  существуют также теги  < th >, которые также создают ячейки. Но это уже будут не обычные ячейки, а  ячейки-заголовки, которые указывают, что находится в данном столбце (или строке) таблицы.
http://old.code.mu/books/css/

Изображение слайда


18


Слайд 18

Задачи для решения
Повторите страницу по данному по образцу:
http://old.code.mu/books/css/

Изображение слайда


19


Слайд 19

Язык CSS
Язык  CSS  расширяет возможности языка HTML. Он позволяет менять цвета, шрифты, фон, в общем заниматься красотой сайта. А HTML, соответственно, отвечает за структуру сайта.
Как работать с CSS
Каждому тегу в HTML соответствует так называемый  селектор  CSS. К примеру, тегу  <p>  соответствует CSS селектор  p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки  {}, внутри которых следует писать  CSS свойства.
CSS свойства  и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате:  имя  свойства, потом  двоеточие, потом  значение  этого свойства (например, свойство — это цвет, а «красный» — это значение). Потом нужно поставить  точку с запятой  и можно писать следующее свойство.
http://old.code.mu/books/css/

Изображение слайда


20


Слайд 20

Покрасим абзацы в красный цвет
http://old.code.mu/books/css/

Изображение слайда


21


Слайд 21

Покрасим абзацы в  зеленый цвет и сделаем их  большого размера
http://old.code.mu/books/css/

Изображение слайда


22


Слайд 22

Способы подключения CSS к HTML коду
Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS применился к нашему  HTML коду.
CSS прописывается в отдельном файле и специальным образом подключен к нашей HTML странице.
Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, и эти изменения применятся на всей 1000 HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
http://old.code.mu/books/css/

Изображение слайда


23


Слайд 23

Отдельный CSS файл
Чтобы подключить CSS файл к HTML странице, в теге  head  следует написать такую конструкцию:
< link rel =» stylesheet » href =»путь к CSS файлу»>
Сам CSS файл должен быть с расширением . css. Обычно его называют  styles.css  или  style.css.
http://old.code.mu/books/css/

Изображение слайда


24


Слайд 24

Комментарии CSS
Так же, как и в  HTML, в  CSS  можно ставить  комментарии. Они оформляются следующим образом:  слеш и звездочка /*,  потом текст комментария, потом  звездочка и слеш */.
http://old.code.mu/books/css/

Изображение слайда


25


Слайд 25

Основные CSS свойства
Свойство color — цвет текста
Свойство  color  позволяет задать  цвет текста
http://old.code.mu/books/css/

Изображение слайда


26


Слайд 26

Свойства width и height — ширина и высота
Свойства  width и height  позволяют задать высоту и ширину элементу соответственно. Ширина и высота обычно измеряются в  пикселях  (обозначается  px ) или  процентах  (обозначается  % )
http://old.code.mu/books/css/

Изображение слайда


27


Слайд 27

Свойство text-align — выравнивание текста
Свойство  text-align  позволяет задать выравнивание текста. Текст можно выравнять по  левому  краю (значение  left ), по  правому  (значение  right ), по  центру  (значение  center ) и  одновременно  и по правому, и по левому краю (значение  justify ).
http://old.code.mu/books/css/

Изображение слайда


28


Слайд 28

Свойство font-weight — жирность
Свойство  font-weight  позволяет сделать текст жирным или наоборот — отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует добавить значение  bold, а чтобы отменить жирность — значение  normal.
http://old.code.mu/books/css/

Изображение слайда


29


Слайд 29

Свойство font-style — курсив
Свойство  font-style  позволяет сделать текст курсивным или наоборот — отменить курсив. Чтобы сделать текст курсивом, следует добавить значение  italic, а чтобы отменить курсив — значение  normal.
http://old.code.mu/books/css/

Изображение слайда


30


Слайд 30

Свойство font-size — размер текста
Свойство  font-size  позволяет задать размер текста. Размер задается в  пикселях  (обозначаются  px ), в  пунктах  (обозначаются  pt ), в  процентах  (обозначаются  % )
http://old.code.mu/books/css/

Изображение слайда


31


Слайд 31

Свойство font-family — тип шрифта
Свойство  font-family  позволяет задать тип шрифта (тип часто называют  семейством  шрифта).
Не все шрифты можно использовать, так как если на компьютере пользователя не окажется указанного шрифта — браузер вместо него возьмет стандартный шрифт (в результате на экране будет совсем не то, что мы задумывали). Поэтому необходимо использовать только  веб безопасные шрифты, которые наверняка будут у пользователя
http://old.code.mu/books/css/

Изображение слайда


32


Слайд 32

Веб безопасные шрифты
Значение
Описание
Arial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Arial Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Comic Sans MS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Courier New
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Georgia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Impact
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Times New Roman
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Trebuchet MS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Verdana
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
http://old.code.mu/books/css/

Изображение слайда


33


Слайд 33

Свойство line-height — межстрочный интервал
Свойство  line-height  задает межстрочный интервал.
Межстрочный интервал  — это расстояние между линиями текста, то есть белый промежуток между ними.
http://old.code.mu/books/css/

Изображение слайда


34


Слайд 34

Свойство font — сокращение для шрифтов
Существует специальное свойство  font, которое можно использовать вместо многих свойств, которые мы уже разобрали. Такие свойства в CSS называются  свойствами-сокращениями. Зачастую их использование гораздо удобнее вместо множества других свойств.
Свойство  font  имеет следующий синтаксис:  курсив жирность размер_шрифта / интервал_между_строками семейство_шрифта. Обязательными являются » размер_шрифта » и » семейство_шрифта «, порядок имеет значение.
Свойство  font  является  свойством-сокращением.
http://old.code.mu/books/css/

Изображение слайда


35


Слайд 35

Свойство text-indent — красная строка
Свойство  text-indent  позволяет задать  красную строку, то есть отступ первой строки текста (к примеру, в абзаце)
Свойство vertical-align
Свойство  vertical-align  позволяет задать выравнивание по вертикали. К сожалению, адекватным образом это выравнивание работает только для таблиц.
Значение  top  выравнивает по верхнему краю, значение  bottom  — по нижнему, а  middle  — по центру по вертикали (есть еще некоторые другие значения, они нас пока не интересуют).
http://old.code.mu/books/css/

Изображение слайда


36


Слайд 36

Задачи на основные CSS свойства
1. Выполнить HTML -разметку для текста по образцу, сохранить файл под именем index.html :
http://old.code.mu/books/css/

Изображение слайда


37


Слайд 37

Задачи на основные CSS свойства
2. Создать файл стилей styles.css, сохранить в одной папке с файлом.html
http://old.code.mu/books/css/

Изображение слайда


38


Слайд 38

Основы работы с селекторами CSS
Тег div
Тег  div  служит контейнером для других тегов. Сам по себе он ничего не делает, однако в него можно положить много разных тегов, например, абзацев и заголовков, а затем для всех них  одновременно  применить различные CSS свойства.
http://old.code.mu/books/css/

Изображение слайда


39


Слайд 39

Тег span
Тег  span  является контейнером для кусочка текста. Вы уже знаете, что для того, чтобы сделать, к примеру, жирный текст — следует использовать тег  b. Однако, что делать, если я хочу покрасить  кусочек текста  в красный цвет? Для такого случая тега, подобного тегу  b, не существует.
Для этого и предназначен тег  span  — сам по себе он абсолютно ничего не делает, но для него можно применить  CSS стили, которые позволят нам добавить нужный эффект к кусочку текста.
http://old.code.mu/books/css/

Изображение слайда


40


Слайд 40

Группировка селекторов
Селекторы тегов можно объединять через  запятую  и CSS код применится к ним всем  одновременно.
http://old.code.mu/books/css/

Изображение слайда


41


Слайд 41

Вложенность тегов друг в друга
Представим теперь ситуацию, когда мы хотим обратиться только к тем тегам  i, которые находятся  внутри абзацев, и не хотим трогать те теги  i, которые находятся  внутри заголовков h3.
Это делается с помощью так называемого  контекстного селектора, который позволяет обращаться к тегам по их вложенности в другие теги.
Чтобы показать вложенность, между селекторами следует поставить  пробел  (этот пробел и есть знак контекстного селектора).
Например, так :
p i  — мы обратимся ко всем тегам  i, находящимся внутри p,
p b  — так ко всем тегам  b  внутри  p,
div p b  — ко всем тегам  b, которые находятся внутри абзацев p, которые в свою очередь находятся внутри тега div.
http://old.code.mu/books/css/

Изображение слайда


42


Слайд 42

О братимся ко всем абзацам внутри div и покрасим их в красный цвет:
Пример: Вложенность тегов друг в друга
http://old.code.mu/books/css/

Изображение слайда


43


Слайд 43

Выбор элемента по уникальному id
Необходимо для всех абзацев поставить красный цвет, а  конкретно  для этого абзаца — зеленый.
В этом случае можно воспользоваться атрибутом  style, однако этот способ не самый оптимальный (он захламляет HTML код CSS кодом).
Второй способ заключается в том, что нужному элементу дается  атрибут id, который содержит в себе  уникальное имя  нашего тега ( другого id с таким именем на странице быть не должно — будет конфликт ).
Если мы дадим ему, к примеру, имя  test, тогда в CSS мы сможем обратиться к нему таким образом:  #test  — то есть сначала пишется символ  «решетка», а затем — то  имя, которое мы записали в атрибут  id.
http://old.code.mu/books/css/

Изображение слайда


44


Слайд 44

Для всех абзацев зададим красный цвет, а для абзаца с  id =» test »  — зеленый:
Пример: Выбор элемента по уникальному id
http://old.code.mu/books/css/

Изображение слайда


45


Слайд 45

А теперь атрибут  id  дадим  конкретному диву  и покрасим содержимое этого дива в красный цвет, обратившись к нему по его  id :
Пример: Выбор элемента по уникальному id
http://old.code.mu/books/css/

Изображение слайда


46


Слайд 46

Совместим  контекстный селектор  (который пробел, показывающий вложенность) и  id  и сделаем так, чтобы  только абзацы  (но не заголовки  h3 ) из  #test  стали красного цвета:
Пример: Выбор элемента по уникальному id
http://old.code.mu/books/css/

Изображение слайда


47


Слайд 47

Классы элементов
Обращение к элементу по его  id  имеет некоторый недостаток — так мы можем обратиться только к одному элементу на странице. А что делать, если нам, к примеру, нужны абзацы двух типов — красные и зеленые и они могут чередоваться в произвольном порядке? В этом случае гораздо удобнее будет воспользоваться  классами.
Классы  задаются с помощью атрибута class, в котором мы пишем имя класса. Их преимущество в том, что один и тот же класс может быть у  многих  элементов на странице. То есть, если элементы должны вести себя одинаково — мы даем им один и тот же класс.
Как обратиться к элементам с определенным классом в  CSS : пусть мы задали нужным нам элементам класс с именем  test, тогда в  CSS  ко всем элементам с этим классом мы можем обратиться следующим образом — . test  — вначале символ  «точка»  и потом  имя класса  из атрибута  class.
http://old.code.mu/books/css/

Изображение слайда


48


Слайд 48

Пример: Классы элементов
И абзацы, и заголовки имеют один и тот же класс  test, который красит эти элементы в красный цвет:
http://old.code.mu/books/css/

Изображение слайда


49


Слайд 49

Определенный тег с заданным классом
Бывают такие ситуации, когда разные теги имеют один и тот же класс. К примеру, у абзацев и заголовков h3 одновременно задан класс  test. Вам может потребоваться выбрать  только абзацы  с классом  test, не затрагивая заголовков  h3  с этим же классом.
В этом случае вместо селектора . test  нужно написать следующее:  p.test  — таким образом я выберу все абзацы с классом  test, не затронув заголовки. Если же я напишу  h3.test  — то выберу все заголовки h3 с классом  test, не затронув абзацев.
http://old.code.mu/books/css/

Изображение слайда


50


Слайд 50

Только абзацы с классом  test  станут красного цвета, а заголовки с таким же классом — не станут
Пример: Определенный тег с заданным классом
http://old.code.mu/books/css/

Изображение слайда


51


Слайд 51

p.test  — такой селектор выбирает  абзацы с классом test.
p. test  ( поставлю пробел ), то выберу все элементы с классом  test, находящиеся  внутри  абзацев.
Важность пробела!
http://old.code.mu/books/css/

Изображение слайда


52


Слайд 52

В ыберем  только h3  с классом  test
Пример: Определенный тег с заданным классом
http://old.code.mu/books/css/

Изображение слайда


53


Слайд 53

С делаем так, чтобы класс  test  задавал курсив всем элементам, которым он дан, и чтобы при этом все заголовки  h3  с классом  test  красились в красный цвет, а абзацы с этим классом — в зеленый
Пример: Определенный тег с заданным классом
http://old.code.mu/books/css/

Изображение слайда


54


Слайд 54

Основы работы со ссылками и границами
Свойство text-decoration
Свойство  text-decoration  позволяет задавать некоторые эффекты для текста:  подчеркивание,  перечеркивание, линию сверху, а также отменять такие эффекты, если какой-либо тег имеет их по умолчанию.
Чаще всего это свойство используются для отмены подчеркивания ссылок (они по умолчанию подчеркнуты).
Значение underline
Значение  underline  добавляет подчеркивание тексту:
http://old.code.mu/books/css/

Изображение слайда


55


Последний слайд презентации: Язык HTML
Язык  HTML  — это основа web сайтов, с его помощью создается каркас

Значение overline
Значение  overline  добавляет линию над текстом:
http://old.code.mu/books/css/

Изображение слайда

HTML. Редакторы, основные теги. Информатика, 11 класс: уроки, тесты, задания.











1.
HTML-редакторы


Сложность:
лёгкое

1


2.
HTML-редакторы (лого)


Сложность:
лёгкое

1


3.
Основные цвета


Сложность:
лёгкое

1


4.
Теги для выделения текста и шрифта


Сложность:
среднее

2


5.
Теги


Сложность:
среднее

2


6.
Одиночные HTML-теги


Сложность:
среднее

2


7.
Цвет фона


Сложность:
сложное

2


8.
Код цвета


Сложность:
сложное

3


9.
Контейнеры


Сложность:
сложное

3

: элемент базового URL-адреса документа — HTML: язык разметки гипертекста

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

Используемый базовый URL-адрес документа может быть доступен сценариям с Node / baseURI . Если в документе нет элементов , то baseURI по умолчанию соответствует местоположению .href .

Атрибуты этого элемента включают глобальные атрибуты.

Предупреждение: Если указан один из следующих атрибутов, этот элемент должен предшествовать другим элементам со значениями атрибутов URL-адресов, например ’s href .

href

Базовый URL-адрес, который будет использоваться во всем документе для относительных URL-адресов. Допускаются абсолютные и относительные URL-адреса.

цель

Ключевое слово или определенное автором имя контекста просмотра по умолчанию для отображения результатов навигации по элементам ,

или

без явных целевых атрибутов . Следующие ключевые слова имеют особое значение:

  • _self (по умолчанию): показать результат в текущем контексте просмотра.
  • _blank : показать результат в новом безымянном контексте просмотра.
  • _parent : показать результат в родительском контексте просмотра текущего, если текущая страница находится внутри фрейма. Если родителя нет, действует так же, как _self .
  • _top : показать результат в самом верхнем контексте просмотра (контекст просмотра, который является предком текущего и не имеет родителя). Если родителя нет, действует так же, как _self .

Несколько элементов

Если используется несколько элементов , будут выполняться только первые href и первые target — все остальные игнорируются.

Якоря на странице

Ссылки, указывающие на фрагмент в документе — например, — разрешаются с помощью , инициируя HTTP-запрос к базовому URL-адресу с прикрепленным фрагментом.Например:

  1. Дано
  2. … и эта ссылка: Anker
  3. … ссылка указывает на https://example.com/#anchor .

Open Graph

Теги Open Graph не подтверждают и всегда должны иметь полные абсолютные URL-адреса. Например:

Таблицы BCD загружаются только в браузере

contextpath — Каковы рекомендации для тега html?

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

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

Можно например сделать

  
...


...
 домой 
 часто задаваемые вопросы 
 контакт 
...

вместо

  

...
 главная 
 часто задаваемые вопросы 
 контакт 
...

Обратите внимание, что значение заканчивается косой чертой, иначе оно будет интерпретировано относительно последнего пути.

Что касается совместимости браузеров, это вызывает проблемы только в IE. Тег в HTML определен как , а не с конечным тегом , поэтому можно просто использовать без конечного тега. Однако IE6 думает иначе, и все содержимое после тега в таком случае помещается как дочерний элемента в дереве HTML DOM. Это может вызвать на первый взгляд необъяснимые проблемы в Javascript / jQuery / CSS, т.е. элементы полностью недоступны в определенных селекторах, таких как html> body , пока вы не обнаружите в инспекторе HTML DOM, что между ними должно быть base (и head ).

Обычное исправление IE6 — использование условного комментария IE для включения конечного тега:

Если вас не волнует W3 Validator, или когда вы уже используете HTML5, вы можете просто закрыть его, каждый веб-браузер все равно его поддерживает:

Закрытие тега также мгновенно устраняет безумие IE6 в WinXP SP3 для запроса ресурсов

Попробуй

Ссылка выше фактически приведет к https: // www.quackit.com/javascript/javascript_arrays.cfm независимо от URL-адреса текущей страницы. Это связано с тем, что базовый URL-адрес ( https://www.quackit.com/javascript/ ) добавляется к (относительному) URL-адресу, указанному в ссылке ( javascript_arrays.cfm )

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

Атрибуты

HTML-теги могут содержать один или несколько атрибутов.Атрибуты добавляются к тегу, чтобы предоставить браузеру дополнительную информацию о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот пример: style = "color: black;" .

Есть 3 вида атрибутов, которые вы можете добавлять в свои HTML-теги: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.

Атрибуты, которые вы можете добавить к этому тегу, перечислены ниже.

Атрибуты, зависящие от элемента

В следующей таблице показаны атрибуты, относящиеся к этому тегу / элементу.

Атрибут Описание
href Задает URI / URL-адрес для использования.
мишень рамка / окно мишени

Глобальные атрибуты

Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex не применяется к элементам dialog ).

  • ключ доступа
  • автокапитализация
  • класс
  • контентный
  • данные- *
  • директор
  • перетаскиваемый
  • скрыто
  • id
  • режим ввода
  • это
  • идентификатор товара
  • itemprop
  • itemref
  • позиции сфера действия
  • тип позиции
  • язык
  • часть
  • слот
  • проверка орфографии
  • стиль
  • tabindex
  • титул
  • перевести

Полное описание этих атрибутов см. В разделе «Глобальные атрибуты HTML 5».

Атрибуты содержимого обработчика событий

Атрибуты содержимого обработчика событий позволяют вызывать сценарий из HTML-кода. Сценарий вызывается при наступлении определенного «события». Каждый атрибут содержимого обработчика событий имеет дело с отдельным событием.

  • onabort
  • onauxclick
  • onblur
  • отмена
  • oncanplay
  • может пройти через
  • обмен
  • onclick
  • вкл.
  • контекстное меню
  • копия
  • на смену
  • врезка
  • ondblclick
  • ондраг
  • ондрагенд
  • ондрагентер
  • ондрагэксит
  • ondragleave
  • вперед
  • ондрагстарт
  • на стороне
  • на срок замены
  • пусто
  • завершено
  • ошибка
  • onfocus
  • onformdata
  • на входе
  • недействительно
  • нажатие клавиши
  • onkeypress
  • onkeyup
  • onlanguagechange
  • загрузка
  • загруженные данные
  • загруженные метаданные
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • на мышке над
  • onmouseup
  • паста
  • вкл. Пауза
  • в игре
  • действующая
  • в процессе
  • обмен
  • возврат
  • размер
  • в прокрутке
  • нарушение политики безопасности
  • востребовано
  • в поиске
  • при выборе
  • на смену
  • установленная
  • при подаче
  • приостановлено
  • ontimeupdate
  • рычаг
  • по объему Изменение
  • ожидает
  • на колесе

Полный список обработчиков событий см. В разделе «Атрибуты содержимого обработчика событий HTML 5».

HTML-тег

Тег недавно стал частью HTML5. Он определяет абсолютный (базовый) URL-адрес для всех относительных URL-адресов в документе HTML. Этот тег также определяет, как должны открываться ссылки в текущем документе (в новом окне, в текущем окне и т. Д.).

Вы можете получить доступ к используемому базовому URL-адресу документа из сценариев с document.baseURI. Если документ не содержит элементов, baseURL по умолчанию будет иметь значение document.location.href.

Синтаксис¶

Тег пуст, что означает, что закрывающий тег не требуется. Но в XHTML тег () должен быть закрыт ().

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

Если вы используете несколько элементов, будут соблюдаться только первые атрибуты href и target.Остальные будут проигнорированы.

Пример HTML-тега

: ¶

  

  
     базовый тег HTML 
    
  
  
     Попробуйте инструмент создания CSS

Попробуйте сами »

Результат¶

В этом примере тег определяет базовый URL -« https: // www.w3docs.com/ ", а относительная ссылка" / css3-maker / border-radius "будет использовать этот URL в качестве отправной точки.

Скопируйте вышеупомянутый код в наш редактор, и вы увидите активную ссылку, которая при нажатии открывается в новом окне. Хотя сама ссылка не содержит атрибута target _blank, она откроется в новом окне, поскольку мы установили для атрибута target _blank абсолютный URL-адрес в теге.

Атрибуты¶

Тег обязательно должен содержать атрибут href или target.При необходимости можно использовать оба атрибута.

Базовый тег в html - W3spoint

HTML

Тег

Чтобы указать базовый URL или указать URL для всех относительных ссылок в документе HTML, используется тег HTML. В документе может быть указан только один элемент, который помещается в элемент. Элемент HTML не содержит закрывающего тега, но элемент XHTML требует закрывающего тега.Тег HTML должен иметь либо атрибут «href», либо указанный с ним атрибут «target». Атрибуты «href» и «target» также могут быть указаны вместе с тегом HTML.

Синтаксис:

Пример 1: 

 






  Bootstrap  


  W3spoint






Bootstrap

W3spoint


Выход:

Пояснение:

В приведенном выше примере указан относительный адрес изображения.Браузер будет искать изображение в «https://www.w3spoint.com/wp-content/uploads/2018/08/Bootstrap%204.JPG», поскольку базовый URL-адрес указан в разделе заголовка. Ссылка, указанная в теге , открывается в том же окне, потому что ни у ссылки нет атрибута target = ”_ blank”, ни у атрибута target базового элемента нет.

Пример 2: Использование _blank в теге. 

 






 Bootstrap 


  W3spoint






Bootstrap

W3spoint


Выход:

Пояснение:

В приведенном выше примере указан относительный адрес изображения. Браузер будет искать изображение в «https://www.w3spoint.com/wp-content/uploads/2018/08/Bootstrap%204.JPG», поскольку базовый URL-адрес указан в разделе заголовка. Ссылка, указанная в теге , открывается в следующем окне, поскольку целевой атрибут базового элемента присутствует и установлен в «_blank».Однако сама ссылка не имеет атрибута target = ”_ blank”.

Особые атрибуты тега:

Атрибут Значение Использует
href URL Чтобы определить базовый URL для всех относительных ссылок.
цель _ пустой Открыть соответствующую ссылку в следующем окне.
цель сам Открыть соответствующую ссылку в текущем окне.
цель _parent Чтобы открыть относительную ссылку в родительском фрейме.
цель _top Для открытия ссылок на всю ширину страницы.

Глобальные атрибуты:

Глобальные атрибуты HTML поддерживаются тегом HTML.

Атрибуты событий:

Атрибуты событий HTML поддерживаются тегом HTML.

Поддерживающих браузеров:

Chrome, IE, Firefox, Opera и Safari.

Базовый тег HTML

Базовый тег HTML определяет базовый URL-адрес для всех ссылок в HTML-документе или веб-странице.

Синтаксис базового тега HTML

Синтаксис базового тега HTML показан ниже. Это самозакрывающийся тег. В XHTML он имеет как начальный, так и конечный тег.

Использование базового тега HTML

Базовый тег HTML определяет базовый URL-адрес или цель для всех других URL-адресов или ссылок, определенных в HTML-документе или веб-странице.На одной веб-странице разрешен только один базовый URL . Не может быть более одного базового URL.

Пример базового тега HTML

Ниже приведен простой пример базового тега.




   


 Базовый тег HTML

В приведенном выше примере, как вы можете видеть, ссылка Base Url из HTML Base Tag определена в разделе заголовка документа.

Браузер Поддержка базового тега HTML

Базовый тег

HTML поддерживается всеми основными браузерами, включая Internet Explorer .

Атрибуты, используемые в базовом теге HTML

В базовых тегах HTML определены два основных атрибута: href и target . Если href не определен в базовом теге, тогда должен быть определен целевой атрибут, или вы можете определить оба.

атрибут href

Устанавливает Базовый URL-адрес веб-страницы или документа.

целевой атрибут

Он определяет цель, где открыть связанный документ, страницу или файл.

Поддержка глобальных атрибутов в базовом теге HTML

Базовый тег HTML поддерживает глобальные атрибуты.

Поддержка атрибутов событий в базовом теге HTML

Базовый тег HTML не поддерживает атрибуты событий.

Базовый тег HTML для видео

Посмотрите наше видео о базовом теге HTML и подпишитесь на наш канал Youtube.