Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 3. Строчные элементы. Валидация документа

Содержание курса

Закрывающие и открывающие теги. Пустые элементы

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


Пример обязательно закрываемого парного тега:

	<h1>Заголовок</h1>
	
Пример пустого элемента:

	<hr /> (горизонтальная линия)
	
	можно и так: <hr>
	
Пример необязательного закрывающего тега у парного элемента:

	<p>Параграф</p> или так:
	
	<p> Параграф без закрывающего тега
		

Но как же браузер в таком случае определит, где заканчивается, например открытый тег <p>? Все очень просто: технически в теге <p> не может быть никаких блочных элементов и как только браузер наткнется на новый открывающий тег, он автоматически закроет открытый ранее тег <p>. Однако еще раз повторюсь - так лучше не делать и не привыкать к этому!

Кавычки в значениях атрибутов

Как и в случае парных тегов, у атрибутов, а точнее у их значений сложилась такая же история - кавычки в значениях атрибутов можно ставить, а можно и не ставить. Однако я опять-таки рекомендую кавычки ставить и приучиться к этому! Кавычки могут быть одинарными или двойными (так: 'значение' или так: "значение"). Если в значении атрибута каким-то чудом есть пробел, то кавычки обязательны!

	
<div align="center">Раздел</div>

здесь: align - атрибут;
"center" - значение атрибута
	

Элементы и атрибуты в спецификациях

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

Элементы:
New - нововведенный элемент
Deprecated - устаревший элемент, нежелательный к употреблению, т.к. он может перейти в разряд Obsolete
Obsolete - полностью отмененный элемент
Атрибуты:
Implied - необязательные (подразумеваемые) атрибуты.
Recuired - обязательные атрибуты.
Кроме того, каждый элемент имеет семантику, т.е. свое смысловое значение даже несмотря на то, что одни элементы могут быть схожи по своему поведению с другими.

К счастью новые спецификации выходят ни так часто и переписывать свои коды под них вам придется редко. Все спецификации вы можете посмотреть на сайте консорциума W3.org

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

Inline (строчные) элементы

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

<html>
   <head><title>Строчные элементы</title></head>
   <body>
      <p>Строчный элемент воздействует на <em>отдельный</em> участок текста</p>
   </body>
</html>

Результат отображения в браузере будет таким:

Давайте в качестве примера рассмотрим некоторые строчные элементы и узнаем их семантику (смысловое значение):

<html>
   <head><title>Элементы с семантикой</title></head>
   <body>
      <strong>Выделение важного текста</strong>
      <em>Акцент на части текста</em>
      <ins>Добавление текста</ins>
      <del>Удаление текста</del>
      <cite>Цитирование</cite>
   </body>
</html>

Результат отображения этих элементов в браузере будет таким:

Помимо элементов с семантикой, есть строчные элементы для простого форматирования текста. Рассмотрим несколько примеров:

<html>
   <head><title>Форматирование текста</title></head>
   <body>
      <b>Полужирное начертание</b>
      <i>Наклонное начертание</i>
      <u>Подчеркивание текста</u>
      <strike>Перечеркивание текста</strike>
      <s>Перечеркивание текста</s>
   </body>
</html>

Вот так это будет выглядеть в браузере:

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

Для своей практики попробуйте использовать в качестве практической работы изученные элементы.

Валидация документа

DTD (Document Type Definition) программа, в которой описаны синтаксис, грамматика и все остальные правила языка HTML. Валидатор - это программа, которая используя правила DTD проверяет документ на техническую правильность составления.

Указываемый тип документа для HTML5 значительно упростили, и теперь она выглядит так: <!DOCTYPE html>. Тип документа указывается в самом начале документа перед открывающим тегом <html>.

	
<!DOCTYPE html>
	<html>
		<head><title>Заголовок документа.</title></head>
		<body>
		Содержание документа.
		</body>
	</html>
	

Валидатор для HTML5 находится по адресу: http://validator.w3.org/nu. Помимо официального сайта консорциума W3.org, его можно найти и на других сайтах.

После того, как вы вставите весь свой документ в валидатор он определит по типу документа (строка <!DOCTYPE ...>) с какими правилами (для какой версии HTML) документ нужно сверять и, после проверки, покажет вам ваши ошибки в документе.

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

В конце третьего урока мы с вами познакомимся с одним из универсальных атрибутов - это атрибут id. Универсальный - говорит о том, что этот атрибут может применяться у любого элемента HTML. Служит он для того, чтобы к элементу, у которого есть атрибут id можно было обратиться из любого другого документа (например из файла CSS) или с любого места кода внутри документа и повлиять на него. Значение этого атрибута обязательно должно начинаться с латинской буквы, далее могут идти цифры и знаки ( _ ) и (-). Использование русских букв недопустимо.

	
<!DOCTYPE html>
	<html>
		<head><title>Универсальный атрибут id</title></head>
		<body>
			<p id="paragraf">Параграф с атрибутом id="paragraf"</p>
		</body>
	</html>
	

Более подробно с этим универсальным атрибутом и другими мы познакомимся на следующих уроках.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля