HTML и CSS с нуля до PRO часть 7

Дополнительная Разметка

Указание разных версий HTML Идентификация и группировка элементов Комментарии, метаинформация и окна iframe

На этом этапе мы рассмотрели основные
теги, которые хорошо вписываются в группы и
разделы.
В этой главе мы сосредоточимся на некоторых полезных темах, которые
нелегко сгруппировать вместе. Вы узнаете о:
● Различные версии HTML и как указать, какие
версия, которую вы используете
● Как добавлять комментарии к вашему коду.
● Глобальные атрибуты, то есть атрибуты, которые можно использовать на
любой элемент, включая атрибуты class и id
● Элементы, которые используются для группировки частей страницы.
где никакой другой элемент не подходит
● Как встроить страницу в страницу с помощью iframe.
● Как добавить информацию о веб-странице с помощью
<meta> элемент
● Добавление символов, таких как угловые скобки и авторских прав.
символы

Эволюция HTML

С тех пор, как Интернет был впервые создан, было несколько разных версий HTML.
Каждая новая версия была разработана
быть улучшением
последний (с новыми элементами и
добавлены атрибуты и старый код
удаленный).
Также было несколько
версии каждого браузера, которые использовались для
просматривать веб-страницы, каждая из которых
реализует новый код. Не все
Интернет-пользователи, однако, имеют
последние браузеры, установленные на
их компьютеры, что означает
что не каждый сможет
просмотреть все новейшие функции и
разметка.
Где ты должен быть
особенно осведомлен о браузерах
не поддерживает определенные функции,
Я записал это (как
вы видели с некоторыми из
Элементы HTML5, представленные в
главу "Формы" - и как вы
увидим в главах CSS).
За исключением нескольких
элементы добавлены в HTML5
(которые были выделены),
элементы, которые вы видели в
эта книга была доступна в
HTML 4.
Хотя в HTML 4 были
презентационные элементы для
контролировать внешний вид страниц,
авторам не рекомендуется
используйте их больше. (Примеры
включить элемент <center>
для центрирования контента на
страница, <font> для управления
внешний вид текста и
<strike>, чтобы провести линию
текст - все это может быть
вместо этого достигается с помощью CSS.)
В 1998 году язык под названием XML
был опубликован. Его цель
было позволить людям писать
новые языки разметки. С
HTML был наиболее широко используемым
язык разметки вокруг, это было
решил, что HTML 4 должен быть
переформулирован, чтобы следовать правилам
XML и он был переименован
XHTML. Это означало, что
авторам пришлось следить за новыми,
более строгие правила написания
разметка. Например:
● Каждому элементу нужен был
закрывающий тег (кроме пустого
такие элементы, как <img />).
● Названия атрибутов должны быть в
строчные.
● Все атрибуты требуют значения,
и все ценности должны были быть
заключен в двойные кавычки.
● Устаревшие элементы должны
больше не будет использоваться.
● Каждый элемент, который был
открылся внутри другого
элемент должен быть закрыт
внутри того же элемента.

Одно из ключевых преимуществ этого
изменение заключалось в том, что XHTML работает
без проблем с другими программами
которые написаны для создания и
обрабатывать XML-документы.
Его также можно использовать с другими
форматы данных, такие как Scalable
Векторная графика (SVG) - a
графический язык, написанный на
XML, MathML (используется для обозначения
математические формулы), и
CML (используется для разметки химических
формулы).
Чтобы помочь веб-странице
авторы переходят на этот новый синтаксис,
два основных варианта XHTML 1.0
были созданы:
● Strict XHTML 1.0, где
авторы должны были соблюдать правила
в письме
● Переходный XHTML 1.0,
где авторы все еще могли использовать
презентационные элементы (такие
как <центр> и <font>).
Переходная версия
XHTML был создан, потому что
это позволило авторам продолжить
следовать старым практикам (с
менее строгий синтаксис) и используйте некоторые
элементов и атрибутов
которые собирались удалить
из будущих версий HTML.
Была еще и третья версия
XHTML 1.0 называется XHTML
1.0 Frameset, который позволил
авторов веб-страниц для разделения
окно браузера на несколько
"кадры", каждый из которых
держать другую HTML-страницу.
В наши дни кадры очень
редко используется и вводится поэтапно
из.
В HTML5 авторы веб-страниц делают
не нужно закрывать все теги, и
новые элементы и атрибуты будут
быть представленным. На время
написание, спецификация HTML5
не было завершено, но
у основных производителей браузеров
приступили к реализации многих из
новые функции и веб-страница
авторы быстро перенимали
новая разметка.
Несмотря на то, что HTML5
еще не завершено, вы можете
безопасно воспользоваться
новые возможности языка как
пока вы стремитесь обеспечить
что пользователи со старыми браузерами
сможет просматривать ваши страницы
(хотя некоторые из дополнительных
функции не будут видны
их).

DOCTYPE

Потому что были
несколько версий HTML, каждая
веб-страница должна начинаться с
Объявление DOCTYPE, чтобы сообщить
браузер какая версия HTML
страница использует (хотя
браузеры обычно отображают
страницу, даже если она не включена).
Поэтому мы будем включать
по одному в каждом примере для остальных
книги.
Как вы увидите, когда использование DOCTYPE
также может помочь браузеру
правильно отобразить страницу.
Поскольку был написан XHTML
в XML вы иногда будете
увидеть страницы, использующие XHTML
строгий DOCTYPE начинается с
необязательное объявление XML.
Там, где это используется, это должно быть
первое, что есть в документе.
Перед этим ничего не должно быть,
даже не пробел.

Комментарии в HTML

<!- - Coments - - >
Если вы хотите добавить комментарий
к вашему коду, который не будет
видны в браузере пользователя, вы
можно добавить текст между этими
символы:
<! - - комментарий здесь - - >
Хорошая идея добавить
комментарии к вашему коду, потому что,
независимо от того, насколько вы знакомы
со страницей в то время
написать это, когда вы придете
вернемся к нему позже (или если кто-то
еще нужно посмотреть код),
комментарии сделают это много
легче понять.
Хотя комментариев нет
видны пользователям в основном
окно браузера, они могут быть
просмотрено всеми, кто смотрит на
исходный код страницы.
На длинной странице вы часто будете
см. комментарии, используемые для обозначения
где начинаются разделы страницы
или конец, и передать примечания
помочь всем, кто смотрит на
код это понимает.
Также можно использовать комментарии
вокруг блоков кода, чтобы остановить
этот код не отображается
в браузере. В примере на
слева, ссылка на электронную почту была
закомментировал.

<! - - начало внедрения - - >
<h1> Текущие выставки </h1>
<h2> Олафур Элиассон </h2>
<! - - конец введения - ->
<! - - начало основного текста - ->
<p> Олафур Элиассон родился в Копенгагене, Дания.
  в 1967 году - исландским родителям. </p>
<p> Он известен скульптурами и масштабными
  искусство инсталляции с использованием элементарных материалов
  таких как свет, вода и температура воздуха до
  улучшить впечатления зрителя. </p>
<! - - конец основного текста - ->
<! - -
<a href="mailto:info@example.org"> Связаться </a>
- - >

Атрибут ID

Каждый элемент HTML может содержать
атрибут id. Он используется для
однозначно идентифицировать этот элемент
из других элементов на
страница. Его значение должно начинаться с
буква или нижнее подчеркивание (не
номер или любой другой символ).
Важно, чтобы не было двух
элементы на той же странице
имеют одинаковое значение для своего идентификатора
атрибуты (в противном случае значение
больше не уникальна).
Как вы увидите, когда вы
взглянем на CSS в следующем
раздел, придающий элементу
уникальная идентичность позволяет
стиль его отличается от любого другого
экземпляр того же элемента
на странице. Например,
вы можете назначить один
абзац на странице
(возможно, абзац, содержащий
цитата) другой стиль
чем все остальные параграфы.
В примере справа
абзац с атрибутом id
чье значение pullquote
сделан в верхнем регистре с помощью CSS.
Если вы продолжите узнавать о
JavaScript (язык, который
позволяет добавить интерактивности к
ваши страницы), атрибуты id могут быть
используется, чтобы скрипт работал
с этим конкретным элементом.
Атрибут id известен как
глобальный атрибут, потому что он может
использоваться на любом элементе.

<p> Вода и воздух. Это очень банально.
  вещества, они почти не привлекают внимания - и
  но они подтверждают само наше существование. </p>
<p id = "pullquote"> Каждый раз, глядя на море, я чувствую
  успокаивающее чувство безопасности, как будто в гостях у меня
  вотчина; Я отправляюсь в путешествие, чтобы увидеть.
</p>
<p> Тайна загадок, вода и воздух правы
  там перед нами в море. </p>

Атрибут класса

Каждый элемент HTML может
также несут атрибут класса.
Иногда, а не однозначно
идентификация одного элемента внутри
документ, вам понадобится
способ обозначить несколько элементов
как отличаться от
другие элементы на странице.
Например, у вас может быть
некоторые абзацы текста, которые
содержат информацию, которая больше
важнее других и хочу
различать эти элементы, или
вы можете захотеть отличить
между ссылками, которые указывают на другие
страницы на вашем собственном сайте и ссылки
которые указывают на внешние сайты.
Для этого вы можете использовать
атрибут класса. Его ценность
должен описать класс
принадлежит. В примере на
слева ключевые абзацы имеют
атрибут класса, значение которого
важный.
Атрибут класса на любом
элемент может разделять то же самое
ценить. Итак, в этом примере
ценность важного может быть
также используется в заголовках и ссылках.

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

<p class = "important"> На один год с
  Ноябрь 2010, Маругаме Геничиро-Инокума
  Музей современного искусства (MIMOCA) проведет
  цикл из четырех выставок Хироши Сугимото. </p>
<p> На каждой будут представлены работы художника.
  тематически контекстуализированы под заголовками
  «Наука», «Архитектура», «История» и
  «Религия», чтобы представить исчерпывающий
  панорама творчества художника. </p>
<p class = "important admittance"> Часы работы: 10:00 - 18:00
  (После 17:30 вход запрещен) </p>

Блочные элементы

Некоторые элементы всегда будут
кажется, что начинается с новой строки в
окно браузера. Это
известные как элементы уровня блока.
Примеры блочных элементов:
<h1>, <p>, <ul> и <li>.

<h1> Хироши Сугимото </h1>
<p> Даты проведения выставки ORIGIN OF ART:
  следует: </p>
<ul>
<li> Наука: 21 ноября - 20 февраля 2010/11 гг. </li>
<li> Архитектура: 6 марта - 15 мая 2011 г. </li>
<li> История: 29 мая - 21 августа 2011 г. </li>
<li> Религия: 28 августа - 6 ноября 2011 г. </li>
</ul>

Встроенные элементы

Некоторые элементы всегда будут
кажется, что продолжает
та же линия, что и их сосед
элементы. Они известны как
встроенные элементы.
Примеры встроенных элементов:
<a>, <b>, <em> и <img>.

Приурочен к единовременному обороту планеты вокруг
солнце под наклоном 23,4 градуса, что
ритм времен года, это <em> Истоки искусства </em>
цикл состоит из четырех тем: <b> наука,
архитектура, история </b> и <b> религия </b>.

Группировка текста и
Элементы в блоке

Элемент <div> позволяет
сгруппировать набор элементов вместе
в одной блочной коробке.
Например, вы можете создать
элемент <div>, содержащий все
элементов заголовка
вашего сайта (логотип и
навигация), или вы можете создать
элемент <div>, содержащий
комментарии посетителей.
В браузере содержимое
элемент <div> начнется
новая строка, но кроме этой
это не повлияет на
презентация страницы.
Использование атрибута id или class
в элементе <div>, однако,
означает, что вы можете создавать
Правила стиля CSS, указывающие, как
много места элемент <div>
должен занимать на экране и
изменить внешний вид всех
элементы, содержащиеся в нем.
Это также может облегчить
следуйте своему коду, если вы использовали
<div> элементы для хранения каждого
раздел страницы.
Группировка текста и
Элементы в блоке
Поскольку может быть несколько
другие элементы внутри <div>
элемент, может быть полезно добавить
комментарий после закрытия
</div> тег.
Это позволяет четко видеть
какой открывающий тег предполагается
соответствовать, как показано на
конец примера здесь.

Группировка текста и
Встроенные элементы

<span>
Элемент <span> действует как
встроенный эквивалент <div>
элемент. Он используется для:
1. Содержите фрагмент текста.
где нет другого подходящего
элемент, чтобы отличить его от
окружающий его текст
2. Содержат ряд встроенных
элементы
Самая распространенная причина, почему
люди используют элементы <span>
чтобы они могли контролировать
внешний вид содержания
эти элементы с помощью CSS.
Обычно вы видите, что класс
или атрибут id используется с
Элементы <span>:
● Чтобы объяснить цель этого
<span> элемент
● Чтобы стили CSS можно было
применяется к элементам, которые
имеют определенные значения для этих
атрибуты

<p> Аниш Капур получил премию Тернера в 1991 году и
  выставлен в <span class = "gallery"> Тейт
  Современная </span> галерея в Лондоне в 2003 году. </p>

IFrames

Iframe похож на маленькое окошко
это было вырезано в вашем
страница - и в этом окне вы
можно увидеть другую страницу. Термин
iframe - это сокращение от встроенного
Рамка.
Одно из распространенных способов использования фреймов
(что вы, возможно, видели на
различные веб-сайты) для встраивания
карту Google на страницу. В
содержание iframe может быть любым
html (находится на
на том же сервере или где-нибудь еще на
паутина).
Iframe создается с использованием
Элемент <iframe>. Есть
несколько атрибутов, которые вам понадобятся
знать, как его использовать:
src
Атрибут src указывает
URL-адрес страницы, отображаемой в
Рамка.
height
Атрибут высоты указывает
высота iframe в пикселях.
width
Атрибут width указывает
ширина iframe в пикселях

<iframe
width = "450"
height = "350"
src = "http://maps.google.co.uk/maps?q=moma+new+york
& amp; output = embed ">
</iframe>

scrolling
Атрибут прокрутки будет
не поддерживаются в HTML5. В
HTML 4 и XHTML, он указывает
должен ли iframe
есть полосы прокрутки или нет. Это
важно, если страница внутри
iframe больше, чем пробел
вы разрешили это (используя
атрибуты высоты и ширины).
Полосы прокрутки позволяют пользователю перемещаться
вокруг кадра, чтобы увидеть больше
содержание. Это может занять одно из трех
значения: да (для отображения полос прокрутки),
нет (чтобы скрыть полосы прокрутки) и авто
(показывать только при необходимости).
frameborder

Атрибут frameborder будет
не поддерживаются в HTML5. В
HTML 4 и XHTML, он указывает
должен ли кадр иметь
граница или нет. Значение 0
указывает, что граница не должна
быть показаны. Значение 1 указывает
что должна быть показана граница.
seamless
В HTML5 появился новый атрибут
называется бесшовные может применяться
в iframe, где полосы прокрутки
нежелательны. Бесшовные
атрибут (как и другие новые
HTML5 атрибуты) не
нужна ценность, но вы часто будете
см. авторы дают ему значение
бесшовные. Старые браузеры
не поддерживают бесшовные
атрибут.

<iframe
src="http://maps.google.co.uk/maps?q=moma+new+york
&amp;output=embed"
width="450"
height="350"
frameborder="0"
scrolling="no">
</iframe>

Информация о
Вашей странице

Он содержит список слов, разделенных запятыми, которые пользователь
может выполнить поиск, чтобы найти страницу.
На практике этого больше нет.
любое заметное влияние на то, как
поисковые системы индексируют ваш сайт.
robots
Это указывает на то,
двигатели должны добавить эту страницу
к их результатам поиска или нет. А
значение noindex можно использовать, если
эту страницу добавлять не следует. А
можно использовать значение nofollow
если поисковые системы должны добавить это
страницу в своих результатах, но не все
страницы, на которые он ссылается.

Элемент <meta> также
использует http-Equiv и
атрибуты содержимого попарно.
В нашем примере вы можете увидеть
три экземпляра атрибута httpequiv. У каждого есть
различное назначение:
author
Это определяет автора
веб-страница.
pragma
Это не позволяет браузеру
кеширование страницы. (То есть,
хранить его локально, чтобы сэкономить время
скачивая его при последующих
посещений.)
expires
Поскольку браузеры часто кешируют
содержание страницы,
опцион истекает, можно использовать
чтобы указать, когда страница
должен истечь (и больше не будет
кешируется). Обратите внимание, что дата должна
быть указанным в показанном формате.

Escape Characters

Есть некоторые символы, которые используются в
и зарезервировано HTML-кодом. (Например,
левая и правая угловые скобки.)

Поэтому, если вы хотите эти
символы появятся на вашем
страницы вам нужно использовать то, что есть
так называемые "escape-символы"
(также известные как escape-коды или
ссылки на сущности). Например,
чтобы написать левую угловую скобку,
вы можете использовать & lt; или же
& # 60 ;. Для амперсанда вы
можно использовать любой & amp; или & # 38 ;.
Также есть специальные коды
что можно использовать, чтобы показать
символы, такие как авторское право и
товарный знак, символы валюты,
математические символы и
некоторые знаки препинания. Для
Например, если вы хотите включить
символ авторского права на веб-странице
вы можете использовать & copy; или же
& # 169 ;.
При использовании escape-символов
важно проверить
страницу в вашем браузере, чтобы
что правильный символ показывает
вверх. Это потому, что некоторые шрифты
не поддерживаю все это
персонажи, и вы могли бы
поэтому необходимо указать
другой шрифт для этих
символы в вашем коде CSS.

Этот пример начинается с использования
DOCTYPE, чтобы указать, что это
это веб-страница HTML 4. в
голову, вы также можете увидеть <meta>
тег, описывающий страницу
содержание. Несколько элементов используют
атрибуты id и class
определить их цель. В
символ авторского права был
добавлен с помощью escape-кода.
Части страницы были
сгруппированы с использованием элементов <div>,
и добавлены комментарии
чтобы указать, что </div>
элементы закрываются.

<! DOCTYPE html PUBLIC
"- // W3C // DTD HTML 4.01 Transitional // EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta name = "description" content = "Телефон, электронная почта
 и направления к книжному магазину The Art Bookshop, Лондон, Великобритания "/>
 <title> Связаться с книжным магазином по искусству, Лондон, Великобритания </title>
</head>
<body>
 <div id = "header">
 <h1> Магазин книг по искусству </h1>
 <ul>
 <li> <a href="index.html"> главная </a> </li>
 <li> <a href="index.html"> новые публикации </a>
 </li>
 <li class = "current-page">
 <a href="index.html"> контакт </a> </li>
 </ul>
 </div> <! - конец заголовка ->
 <div id = "content">
 <p> Чаринг-Кросс-роуд, Лондон, WC2, Великобритания </p>
 <p> <span class = "contact"> Телефон </span>
 0207 946 0946 </p>
 <p> <span class = "contact"> Электронная почта </span>
 <a href="mailto:books@example.com">
 books@example.com </a> </p>
 <iframe width = "425" height = "275" frameborder = "0"
 scrolling = "no" marginheight = "0" marginwidth = "0"
 src = "http://maps.google.co.uk/maps?f=q&amp;
 source = s_q & amp; hl = en & amp; geocode = & amp;
 q = charing + cross + road + london & amp; output = embed ">
 </iframe>
 </div> <! - конец содержания ->
 <p> & копировать; Книжный магазин по искусству </p>
</body>
</html>

Резюме
ДОПОЛНИТЕЛЬНАЯ НАЗНАЧЕНИЕ
X DOCTYPES сообщает браузерам, какую версию HTML вы
используют.
X Вы можете добавлять комментарии к вашему коду между
маркеры <! - и ->.
X Атрибуты id и class позволяют идентифицировать
отдельные элементы.
X Элементы <div> и <span> позволяют группировать
блочные и встроенные элементы вместе.
X <iframes> прорезает окна на ваших веб-страницах через
какие другие страницы могут отображаться.
X Тег <meta> позволяет вам предоставлять все виды
информация о вашей веб-странице.
X Escape-символы используются для включения специальных
символы на ваших страницах, такие как <,> и ©