Что такое HTML. История создания
С появлением компьютерных сетей и тем более «всемирной паутины», появилась необходимость передачи информации для разных платформ. Ведь необходимо, чтобы все элементы документа на всех компьютерах, не зависимо от используемой системы, отображались одинаково. Для этого используется специальный язык – HTML. Впервые применение этого языка описания страниц было применено для отображения научной информации в Европейском центре ядерных исследования (Женева), и применялся для возможности отображения информации для всех компьютеров локальной сети. Сегодня HTML служит неотъемлемой частью большинства программ, и прежде всего – для отображения интернет страниц. Фактически любой пользователь глобальной сети посещая любой сайт использует HTML. Вся информация, которую пользователь может лицезреть в окне браузера описывается через HTML, а сами браузеры представляют собой специализированные программы для работы с HTML языком.
Что такое HTML ?В полной мере назвать HTML языком программирования нельзя, хотя многие функции позволяют сделать простые приложения непосредственно в коде. Для описания свойств элементов используются дескрипторы (теги), с помощью которых прописывается размер, положение и специальные свойства элементов, а также ссылки на другие элементы самого текста или другие документы. Весь комплекс кода носит название гипертекста, а аббревиатура HTML расшифровывается как HyperText Markup Language , что в переводе на «великий и могучий» означает «язык гипертекстовой разметки».
Особое развитие HTML получил вместе с развитием WWW (World Wide Web), поскольку разрабатывался как универсальный язык для всех устройств, независимо от имеющегося на них оборудования. Использование языка дает возможность структурного отображения информации и упрощает ее восприятие. Если сравнивать с печатной продукцией, то это будет соответствовать колонкам и полосам газеты. Заголовки, положение картинок, таблицы – это все необходимо для структурной подачи, поскольку сплошной массив текста читать весьма затруднительно.
Первые версии HTML были разрознены и не имели определенного единства. В результате пришлось выработать определенный единый стандарт. Это было сделано в 1995 году, и стандарт оформлен был в виде официальной версии HTML 2.0. Через 2 года (в 1997) к нему были добавлены некоторые возможности. Новый формат получил название HTML 3.0, и предложен был W3C (World Wide Web Consortium) . Теоретически он включал в себя все функции 2.0, но в те времена возможности браузеров были весьма ограничены, поэтому полной совместимости не получилось. К концу 1997 года после апробирования версии языка 3.2, был принят новый стандарт 4.0. В нем старые дескрипторы были упразднены, и появились новые, в частности, использование каскадных таблиц стилей (CSS ).
Базовая структура документовБольшая часть современных программ для верстки страниц, такие как Dreamweaver и Microsoft SharePoint Designer , автоматически создают базовую структуру документов, но для того, чтобы правильно читать и создавать ее самостоятельно, необходимо познакомиться с простыми правилами.
Разметка документа проводится с помощью тегов, как правило – парных (открывающий и закрывающий). Теги заключены в угловые скобки и не показываются пользователю, но при этом строго удерживают разметку страниц.
Документ HTML начинается и заканчивается тегами формата документа.
Тут код страницы
Перед тегом документа может указываться стандарт, с использованием которого будет отображаться содержимое (тег DOCTYPE ).
В документе различают заголовок, который считывается браузером, но не отображается в окне, и тело страницы, которые, собственно, и видит пользователь.
Заголовок определяется тегами и , и содержит данные, предназначенные для форматирования документа. В заголовке прописываются также загружаемые скрипты, которые требуются для отображения данных. В тегах < title> и прописывается заголовок страницы который отображается в заголовке окна или вкладки.
Основной код страницы представлен с помощью тегов и . Все, что написано между ними будет отображаться на экране, за исключением элементов, для которых указаны специальные значения, и самих тегов для форматирования документа.
Структуру HTML документа можно представить следующим образом.
< title> Заголовок страницы (отражается в окне!)
Заголовок документа. Не отображается на экране
Тело документа. Отображается на экране
Здравствуйте уважаемые начинающие веб-мастера. Начинаем изучать языки программирования.
И начнём мы их изучать с html.
Сразу скажу, что в конце курса Вы уже сможете самостоятельно написать сайт на чистом html, и выложить его в интернет. Но я всё же порекомендую не торопиться, и после html, познакомиться с css.
Тогда и сайт Вы сделаете покруче, и сможете исправлять внешний вид сайта, созданного на готовой CMS(система управления контентом).
Изучение языка программирования, и изучение иностранного языка — это далеко не одно и тоже, и оно гораздо легче. Более того, это не страшно, а очень увлекательно.
Просто непонятное всегда пугает, но я вам обещаю, что после первых же занятий, пройдут все страхи.
Учиться мы будем при помощи редактора , который Вам нужно установить на свой компьютер.
В этом редакторе файлов, можно написать код, и тут-же посмотреть, как отобразит его браузер. Очень удобно.
Давайте, сначала я Вам немного расскажу, что из себя представляет HTML, и это будет скучная часть нашего курса, а затем займёмся интереснейшей практикой. Там уж, точно, скучно не будет.
НТМL (HyperText Markup Language) дословно — язык разметки гипертекста. С помощью его создаются веб-страницы.
И если, совокупность просто страниц, объединённых одной тематикой, в нашем понимании — книга, или даже, лучше сказать, толстый журнал, то совокупность веб-страниц объединённых одним доменным именем — это и есть сайт.
Каждая веб-страница имеет свой уникальный текст, написанный Вами, и заключенный в html-код.
Код — это команды браузеру, как отображать тот или иной элемент. Допустим, написали Вы слово, а вот в каком виде оно будет на экране, зависит от того, в какой код вы его заключите.
Код html состоит из следующих элементов:
2. Атрибуты тегов.
3. Значения атрибутов.
Давайте рассмотрим их по порядку.
Тег html — это основной элемент кода. Пишется он так:
Как видите, состоит он из двух частей. Первые угловые скобки — это открывающая часть, а вторые, со слешем — закрывающая.
Между этими двумя частями, пишется весь остальной код страницы, которая будет отображаться на экране.
Тег сообщает браузеру, что это html-документ, и является основным (родительским) тегом для всех остальных элементов.
В остальных тегах, элементах кода, в угловых скобках пишется буква, или слово, которое будет являться названием тега и определит, какой элемент будет этим тегом выведен на экран.
Например, если поставить в угловых скобках букву h1 , то на экране выведется текст в виде заголовка.
Здравствуйте
То есть шрифт слова «Здравствуйте», будет крупнее и жирнее остального текста.
Если в угловые скобки поставить букву p , то текст заключённый в тег, будет выведен в виде абзаца.
Здравствуйте
То есть, шрифт будет обычный, но всё, что написано после этого тега, будет начинаться с новой строки.
И таких букв, и даже слов, определяющих вид команды, в html несколько десятков, хотя в частом использовании находятся не больше 10-15 тегов.
Более подробно, каждый из них, мы рассмотрим по ходу
Следующие — это атрибуты тегов. Часто используемых, тоже не более десятка. А в последнее время и того меньше, так как все функции атрибутов перенесены в css.
Но об этом попозже, а пока всё же узнаем, что такое атрибут, так как некоторые из них не потеряли актуальности и не потеряют никогда.
Атрибут — это дополнительная команда. Пишется он в открывающей части тега. Например, захочется вам сделать заголовок цветным, тогда в открывающую часть тега h1 , нужно вставить атрибут color
И сразу переходим к значениям атрибутов. Дело в том, что атрибут обязательно должен быть со значением. То есть, дали вы команду, что заголовок должен быть цветным, значит нужно указать, какой будет цвет.
Это указание и будет значением атрибута. Выглядит оно так:
Это красный цвет.
Точно так же, но при помощи других атрибутов, можно задавать размер текста, отступы, выравнивания, и много чего ещё.
Хотя, оформление всё больше переходит к CSS, а атрибуты оформления постепенно устаревают и выходят из практики.
А сейчас делаем вывод из всего вышесказанного:
Язык HTML — это язык, который понимают браузеры. Нам он необходим для того, чтоб общаться с браузером, или можно сказать, управлять им, то есть давать ему команды на то, как воспринимать и отображать на экране то, что мы напишем.
Хочу добавить, что теги, атрибуты, и их значения, легко запоминаются во время практических занятий, чем и будут по сути все последующие статьи.
Там сразу видишь тег, узнаёшь его значение, в каком случае и каком месте он применяется, какими знаками сопровождается, и как пишется, так что сейчас я не буду показывать Вам все теги и атрибуты, увидим всё на практике.
Полный список тегов и атрибутов html, если кому то интересно, всегда можно посмотреть в . .
Хотя, если вы не собираетесь профессионально заниматься программированием, будет достаточно знать несколько (около десятка) основных тегов и несколько же атрибутов.
Ну, и всё, пожалуй. Мало? А больше пока и не надо. Остальное будем узнавать в процессе обучения на конкретных примерах.
Думаю, на примерах будет лучше усваиваться. Наша цель сделать сайт и понять, как же всё это работает, так что вперёд на практику.
Перемена
Только сядешь за учёбу — так обязательно какая-то падла разбудит!!!
В школе учитель говорит ученикам:
— Кто из вас окончательно считает себя тупицей? Встаньте.
После долгой паузы поднимается один ученик:
— Так ты считаешь себя тупицей?
— Ну не совсем, но как — то неловко, что вы стоите один.
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .
Структура веб-страницы 1. Структура HTML-документаЯзык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,
, , и т.д.
Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
Является потомком одновременно для и .
Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег
Является родительским только для .
Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
И являются дочерними по отношению к .
Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
Являются между собой сестринскими.
1.1. Элемент 1.2. ЭлементРаздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. ЭлементОбязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
| charset | Указывает кодировку символов для текущего HTML-документа: |
| content | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения. |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" . Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: |
| name | Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop . application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: . keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: . Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято. |
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
.paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:
...
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. Элемент
Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
через
директиву @import url
@import url(style.css);
с использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
| crossorigin | Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована. |
| href | Основной атрибут тега, в качестве значения выступает путь к файлу со стилями. |
| hreflang | Определяет язык текста в документе, на который идет ссылка. |
| media | Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
| nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
| rel | Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), . archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. author ссылка на страницу об авторе документа или на страницу с контактными данными автора. bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка. external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. first указывает ссылку, ведущую на первый документ из последовательности документов. help ссылка на документ со справкой. icon определяет путь к иконке, которая будет использована для текущего документа. last указывает ссылку, ведущую на последний документ в последовательности документов. license ссылка на сведения об авторских правах для документа. next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии. nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке. pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него. prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка. prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии. search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок. stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа. tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу. up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре. |
| sizes | Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения: ширинах высота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинах высота (размеры иконки задаются в пикселях), например: ; any - иконка может масштабироваться до любого размера. |
| title | Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
| type | Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" . |
| async | Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). |
| charset | Определяет кодировку символов |
| crossorigin | Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен. use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен. |
| defer | Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. |
| nonce | Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. |
| src | Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу. |
| type | Используются для объявления языка сценария, использованного при составлении содержимого тега. |
В этом разделе располагается все содержимое документа. Для элемента доступны .
| onafterprint | Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. |
| onbeforeprint | Событие, срабатывающее перед отправкой страницы на печать. |
| onbeforeunload | Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. |
| onhashchange | Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 . |
| onmessage | Событие происходит, когда сообщение получено через источник события. |
| onoffline | Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. |
| ononline | Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. |
| onpagehide | Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. |
| onpageshow | Событие происходит, когда пользователь переходит на веб-страницу, после события onload. |
| onunload | Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. |
- Перевод
Примечание: это не полный перевод статьи. Я выбрал только самые интересные лично для себя пункты. Статья не претендует на свежесть, но возможно даже люди хорошо знакомые с версткой найдут для себя что-то интересное. Статья затрагивает некоторые аспекты семантики верстки с конкретными примерами.
Под катом много букв! Чтоб не потеряться в их обилии все пункты выделены заголовками.
- HTML 4.01 Strict DTD - делает ударение на разделении содержимого от презентации и поведения. Эту DTD W3C рекомендует для всех новых документов.
- HTML 4.01 Transitional DTD - является неким промежуточным звеном при переходе от «старой» (old-scool"ьной, доHTMLьной) разметки к современной. Не рекомендуется использовать при написании новых документов. Содержит 11 презентационных элементов (прим. переводчика: не несущих смысловой нагрузки, а используемых исключительно для изменения внешниго вида; например элемент ) и полный набор презентационных атрибутов, которые отменены в Strict DTD. Transitional DTD часто необходима для страниц располагающихся внутри фреймов, т.к. она имеет атрибут target , необходимый для открытия ссылки в другом фрейме.
- HTML 4.01 Frameset DTD - используется для страниц на основе фреймов. Консорциум W3 не рекомендует использовать фреймы. Для современных сайтов более удачным решением будет использование приложений на стороне сервера для решения подобных задач.
Если мы собираемся переводить старые HTML 2.0 или HTML 3.2 документы, то пока мы не перевели всю презентацию в CSS, а элементы, отвечающие за поведение в JavaScript, мы можем использовать HTML 4.01 Transitional.
11. Почему валидатор ругается на тэг ? никогда не был частью HTML спецификации. Это не стандартизированный элемент, который хотя и поддерживается большинством браузеров, но не является частью HTML.На протяжении «войны браузеров» в конце 90-х, такие производители браузеров как Microsoft и Netscape соревновались, кто больше придумает «крутых» фич для стилизации и оформления HTML страниц. Проблема была в том, что эти фичи не были стандартизированными и, в большинстве случаев, были не кроссбраузерными.
Есть и другие элементы, которые достаточно широко использовались (например, marquee ), но никогда не были включены в спецификацию. По возможности никогда их не используйте.
Также были широко распространены нестандартизированные атрибуты. Один из примеров - marginwidth .
13. Что такое BOM?BOM , или byte order mark (отметка последовательности байтов) - используется в некоторых кодировках, которые используют больше 8-ми бит для кодирования данных (например, UTF-8 или UTF-16). Процессор умеет использовать две разные схемы хранения больших целых чисел: «big-endian» (тупоконечная) и «little-endian» (остроконечная). BOM содержит 16 бит, записанных в самом начале файла, которые указывают браузерам, какая схема используется.К сожалению многие старые браузеры не могут обработать эту информацию, вместо этого они отображают эти биты как символьные данные. Если вы видите несколько странных символов вверху страницы, то это вероятнее всего означает, что BOM не был обработан браузером (или не верно была установлена кодировка).
Единственное решение проблемы - не использовать BOM. Редакторы, которые умеют сохранять документ в UTF-8 обычно позволяют выбрать, использовать или не использовать BOM.
14. Какую кодировку использовать?Прим. переводчика: переводить этот пункт не стал; думаю, всем известно, что UTF-8 - это наше всё. Следует использовать UTF-8 . А при сохранении документа выбирать UTF-8 without BOM . 16. Почему нужно писать & amp; вместо &?Прим.: HTML-последовательности у меня написаны с пробелом после амперсанда, потому что в противном случае парсер Хабра их отображает не так как надо.Некоторые символы имеют особое значение в HTML: < (меньше), > (больше), & (амперсанд), " (кавычки), " (апостроф). Иногда, когда мы хотим использовать эти значки в обычном тексте, мы должны заменять их HTML-последовательностями.
Для первых четырех указанных выше знаков последовательности будут выглядеть так:
- & lt; (меньше)
- & gt; (больше)
- & amp; (амперсанд)
- & (кавычки)
Т.к. амперсанд используется во всех этих последовательностях, он всегда должен быть преобразован в HTML-последовательность, включая случаи, когда он используется внутри атрибутов, в частности в атрибуте href в ссылках. К сожалению амперсанд очень часто встречается в URI в качестве разделителя аргументов.
В большинстве случаев в HTML амперсанд не замененный последовательностью ничего не ломает (но XHTML - это другая история). Но что если нам случится столкнуться с параметром запроса, совпадающим с названием html-последовательности…
21. Что использовать,Или
?
Элемент p
используется для выделения абзацев в тексте. Абзац - одно или больше предложений объединенных одной мыслью.
Перенос строки (br ) в основном используется как презентационный инструмент и должен скорее быть реализован на CSS чем на HTML. Впрочем, есть несколько ситуаций, когда перенос строки может иметь семантический смысл, например, при разметке строк в стихах и песнях, при написании почтовых адресов или при разметке примеров кода. В этих случаях использование br оправдано, но использование br для разделения абзацев не допустимо.
С другой стороны p имеет довольно четкое семантическое значение: разметка абзацев. Иногда веб-разработчики склонны рассматривать p как основной блочный для использование в качестве контейнеров, но это не верно. Не редкость увидеть элементы label и input внутри p в формах, но я бы назвал это семантически неверным. Метки и поля ввода не могут являться содержимым абзаца.
23. Стоит ли заменить и на и ? Только если вы действительно хотите подчеркнуть что-то (сделать на чем-то ударение, выделить). Эти теги не являются равноценными.В Теперешние Не Менее Грустные Времена, авторы используют strong и em для того, чтобы сделать текст жирным или курсивом .
em означает семантическое ударение, усиление значения. Содержимое, к которому применяется такой вид выделения, должно иметь усиление во время прочтения вслух (например, громче или протяжнее). strong означает ещё большее ударение, но часто это считается излишним (можно использовать вложенные em для указания еще большего ударения). Некоторые эксперты советуют использовать strong только для определенных элементов на странице, которые однозначно должны быть выделенными (например, указатель «текущей страницы»), и не должны отмечать слова и фразы внутри основного текста.
b и i не имеют семантической нагрузки; они всего лишь меняют шрифт на жирный или курсив. Они хороши для использования в общепринятых типографских правилах, которые не нашли семантически подходящего HTML элемента. Например, названия кораблей традиционно отображаются курсивом, но в HTML нет элемента . По этому можно записать Титаник.
27. Как правильно использовать элемент ?address используется для указания контактной информации на странице. Это может быть почтовый адрес, номер телефона, любая другая контактная информация. address - блочный элемент, который может содержать только текст и inline-элементы. В большинстве браузеров по умолчанию отображается курсивом, но это легко исправить с помощью CSS.address может быть использован только для указания почтового адреса, но это не так.
28. Как правильно использовать элемент ?dfn используется для «определения значений терминов». Это типографское соглашение, особенно общепринятое в научных документах, для выделения курсивом нового термина, с которым читатель возможно не знаком, когда определение появляется в тексте первый раз. По умолчанию dfn отображается курсивом.Общеизвестное заблуждение, что dfn означает «сокращение» и многие авторы используют его также как abbr и acronym (указывая пояснение к термину с помощью атрибута title). Термины должны отмечаться с помощью dfn в документах только один раз (при первом употреблении термина и его пояснении).
29. Как правильно использовать элемент ?var используется для разметки переменных, или заменяемых частей текта. Это типографское соглашение, принятое для выделения переменных курсивом, которые в реальной жизни заменяются другими данными. Например, в руководстве к телефонным коммуникациям, инструкция по перенаправлению входящего телефонного звонка на другой дополнительный номер может выглядеть приблизительно так:* 21 * дополнительный номер #
Здесь тег var используется для указания «дополнительного номера» (который будет отмечен курсивом). Тот, кто захочет перенаправить звонок на дополнительный номер 942 напишет «21*942# ». Таким образом, var означает не то, что вы должны ввести «д-о-п-о-л-н-и-т-е-л-ь-н-ы-й н-о-м-е-р», а то, что вместо слов «дополнительный номер» будут цифры.
Общеизвестное заблуждение, что var должно использоваться для указания переменных в примерах программного кода.
31. Какая разница между тегами и ? Никто толком не может дать ответ на этот вопрос! Даже спецификация HTML в какой-то степени противоречит сама себе.abbr было расширением Netscape для HTML на протяжении «войны браузеров». acronym было Майкрософтовским расширением. Оба варианта означают приблизительно одно и тоже. Оба элемента были включены в спецификацию HTML с разной семантической нагрузкой. Проблема в том, что никто толком не может объяснить, в чем заключается эта семантика.
Давайте обратимся к словарю:
Аббревиатура - сокращенная форма слова или фразы.
Акроним - слово, сформированное из первых букв или нескольких первых букв слов в составе фразы или нескольких слов.
Определение акронима говорит, что это слово, т.е. оно может быть произнесено. Таким образом, «NATO» является акронимом, т.к. состоит из начальных букв в словосочетании «North Atlantic Treaty Organization». Напротив, «FBI» не будет являться акронимом, в соответствии с определением, потому что его нельзя произнести как целое слово, а скорее оно будет звучать как «еф-би-ай». Вот тут то и начинает неразбериха. Технически известно, что «FBI» - это инициализм (прим. переводчика: в оригинале «initialism») , определение которого по словарю звучит так:
Инициализм - 1) название или термин, сформированный из первых букв или из нескольких первых букв слов, которые произносятся как отдельные слова; 2) группа первых букв означающих имя, организацию и т.д., которые произносяться отдельно.
Первое определение почти то же, что и акроним, а второе более отстраненное. Не смотря на это в спецификации нет элемента initialism , и путаница усугубляется тем, что слово «акроним» в простой американской речи используется как синоним слова «инициализм».
Спецификация HTML предлагает следующие определения:
abbr
- указывает на сокращенную форму (например, WWW, HTTP, URI, Mass и т.д.).
acronym
- указывает на акроним (например, WAC, radar и т.д.).
Похоже на то, что спецификация ссылается на словарные определения, что означает что «FBI» должно быть размечено тегом abbr , т.к. не может быть произнесено как целое слово. Не смотря на это, несколькими абзацами ниже спецификация говорит:
Западные языки широко используют такие акронимы как «GmbH», «NATO», и «F.B.I.», в качестве аббревиатур таких как «M.», «Inc.», «et al.», «etc.»Вы еще не запутались? Я да. Безопаснее всего всегда использовать abbr , так как все акронимы также являются аббревиатурами, но не наоборот. Не смотря на это, тут есть небольшая проблема. Microsoft были так расстроены решением W3C использовать abbr для абревиатур и инициализмов вместо acronym , что они отказались от поддержки тега abbr ! (Но все же ввели поддержку abbr в Internet Explorer 7.)
Так что же делать бедным веб-разработчикам? И почему мы вообще должны заморачиваться? Конечно, хорошо иметь элемент, к которому можно прилепить атрибут title , но мы же это можем сделать и со span "ом. Суть в том, что размечать акронимы и аббревиатуры хорошо для смежных технологий; в частности для screen reader"ов. Но скрин ридеры в большинстве предпочитают игнорировать теги abbr и acronym , т.к. никто точно не знает, как правильно их использовать и Microsoft не поддерживает тег abbr . Это палка о двух концах.
Вопрос на этот ответ я не знаю! Лично я использую abbr для таких очевидных аббревиатур как «Inc.» и для таких инициализмов как «FBI», и использую acronym для сокращений, которые можно прочесть как слово, например «GIF». Но в соответствии со спецификацией я не могу никого обвинить в разметке «FBI» в качестве акронима. А как на счет «SQL», который некоторые произносят по буквам, а некоторые называют «сикуэл».
32. Почему отменяются определенные фичи? Самая распространенная фича которой интересуются новички - это атрибут target . Этот атрибут запрещен в HTML 4.01 Strict, но до сих пор поддерживается в HTML 4.01 Transitional. Существует много элементов и атрибутов, которые разрешены в Transitional, но запрещены в Strict.Причина, по которой W3C отменяет некоторые элементы и атрибуты - желает разделить содержимое (HTML), внешний вид (CSS) и поведение (JavaScript). Заставить элемент отображаться по середине - это вопрос презентационный; он должен быть решен средствами CSS, а не с помощью тега center . Открыть ссылку в новом окне - это вопрос поведения; он должен решаться средствами JavaScript, а не с помощью атрибута target .
В основном, отмененные фичи - те, которые появились на протяжении войны браузеров в 90-х. Эти фичи были включены в HTML 3.2, чтобы хоть как-то навести порядок, но это не главная задача, которая стояла перед HTML. С релизом HTML 4, его авторы попытались «переучить Веб» убирая «пагубные» части, которые были включены в HTML 3.2, по крайней мере в Strict DTD.
Другими словами эти вещи отменены не просто так. По возможности старайтесь их не использовать.
37. Как подключить HTML страницу внутри другой страницы? Если вы используете Strict DTD, то у вас есть только один валидный способ - использовать элемент object :
Alternate content here for browsers that don"t support OBJECT.
К сожалению поддержки object "а нет в Internet Explorer"е.
При использовании Transitional DTD можно использовать iframe "ы:
Alternate content here for browsers that don"t support IFRAME.
На протяжении ряда последних лет постоянно совершенствуются технические возможности вычислительной техники, развиваются коммуникационные средства и технологии управления информационными ресурсами, все это приводит к тому, что активно появляются более крупные информационные системы. Имеются в виду масштабы систем не только в отношении объемов поддерживаемых информационных ресурсов, но и в отношении количества их пользователей. Так в настоящее время объемы информационных ресурсов Web определяются многомиллионными количествами страниц.
Подобное развитие информационных технологий, сетей и систем дало массовое распространение языку гипертекстовой разметки HTML. Под информационными системами подразумевают инструменты, моделирующие реальность, которые реализуются различными подходами. Для последних лет характерно появление инструментальных средств и крупных информационных систем, в которых предусмотрено совместное использование различных информационных технологий. В настоящее время имеется много различных специальных программ для создания Web-сайтов. С помощью этих программ работа разработчиков, создающих Web-страницы сложного дизайна, стала значительно легче, поскольку появилась возможность динамического генерирования Web-страниц.
Деятельность информационных технологий характеризуется стандартизацией различного рода аспектов. Эта деятельность позволяет обеспечить перенос приложений и информационных ресурсов с одной программно–аппаратной платформы на другую, а также повторно использовать ресурсы, например использование программных компонентов приложений.
Сеть Internet стала популярной с появления WorldWideWeb (WWW), поскольку эта сетевая технология первой предоставила пользователям достаточно простой и в то же время современный интерфейс доступа к различным сетевым ресурсам. Простое и удобное использование привело к увеличению количества пользователей WWW, а также к привлечению внимания коммерческих структур. В дальнейшем число пользователей стало расти лавинообразно, так продолжается и по сей день. В связи с этим появилась необходимость объединения всего множества информационных ресурсов, ее решением стало развитие технологии определения гипертекстовой навигационной системы. Эта технология была представлена языком HTML. Поскольку технология HTML на ранних этапах была очень простой, все пользователи сети одновременно смогли создавать и читать информационные материалы, опубликованные во Всемирной паутине. Это произошло потому, что разрабатывая различные компоненты технологии предположили квалификацию авторов информационных ресурсов, их оснащенность средствами вычислительной техники минимальными.
Определение 1
Язык HTML (HyperTextMarkupLanguage, язык разметки гипертекста) является языком разметки текста. Под разметкой понимают общую служебную информацию, не выводящуюся с документом, но определяющую внешний вид тех или иных фрагментов документа.
Например, выделение слова жирным шрифтом или курсивом, вывод отдельного абзаца особым шрифтом или оформление заголовка крупным шрифтом.
Стандарт SGMLЭто язык разметки создавался и был разрекламирован как один из вариантов SGML. Впервые в 1974 году Чарльз Голдфарб предложил, а в дальнейшем значительно доработав его приняли официальным стандартом ISO, SGML (StandardGeneralizedMarkupLanguage, Стандартный обобщенный язык разметки), представляющий собой метаязык, т.е. систему описания других языков.
Стандарт SGML появился, так как возникла необходимость совместно использовать данные разными приложениями и операционными системами. Проблема с совместимостью возникла у пользователей очень давно, еще на заре появления вычислительной техники. Ученые из IBM - Чарльз Гольдфарб, Эд Мо-шер и Рэй Лори – проанализировали многие нестандартные языки разметки на предмет недостатков и сформулировали общие принципы, обеспечивающие совместную работу с документами в разных операционных системах. Ниже приведены эти принципы:
Замечание 1
Вышеназванные правила составляют основу предшественника SGML - GML (Generalized Markup Language), который разрабатывали и исследовали около 10 лет, пока по соглашению, заключенному международной группой разработчиков, не появился стандарт SGML.
Средства языка HTMLСредства языка HTML обеспечивают форматную разметку документов, определяют гиперсвязи между документами (их фрагментами). За основу при написании кода HTML выбрали обычный текстовый файл. Можно сказать, что гипертекстовая база данных в концепции WWW представляет собой набор текстовых файлов, в которых разметка выполнена на языке HTML, определяющем форму представления информации (разметку) и структуру связей между файлами и информационными ресурсами (гипертекстовые ссылки). Разработчиками HTML были решены задачи:
- предоставления дизайнерам гипертекстовых баз данных простого средства для создания документов;
- создания мощного средства для отражения имевшихся в то время представлений об интерфейсе пользователя гипертекстовых баз данных.
Первую задачу решили выбором теговой модели для описания документов. С помощью языка HTML можно проводить разметку электронного документа, отображаемого на экране с полиграфическим уровнем оформления, причем в результирующем документе могут содержаться разнообразные метки, иллюстрации, аудио - и видеофрагменты и т.д. В язык были включены развитые средства создания различных уровней заголовков, шрифтовых выделений, разные списки, таблицы и др.
Другим важным моментом стало использование за основу языка обычного текстового файла. Среда редактирования HTML является нейтральной полосой между простейшим текстовым файлом и приложением WYSIWYG (whatyouseeiswhatyouget – что вы видите, то и получаете). Выбор среды редактирования предоставляет все преимущества текстового редактирования.
Гипертекстовые ссылки, которые использовались для связи текстовых документов между собой, постепенно стали применять для объединения различных информационных ресурсов, в том числе звука и видео. С помощью системы гиперссылок HTML можно построить систему взаимосвязанных по разным критериям документов. В состав языка HTML входят команды (тэги), которые позволяют управлять формой и размером шрифтов, размером и расположением иллюстраций, а также осуществляют переход от фрагмента текста или иллюстрации к другому html-документу (гипертекстовые ссылки). Документ, представленный в html-форматом – это текстовый файл со всеми необходимыми сведениями о выводимой на экран информации. Управлять сценариями просмотра страниц Website (гипертекстовой базы данных, выполненной в технологии World Wide Web) можно с помощью языков программирования этих сценариев (JavaScript, Java и VBScript). Для обработки форм ввода данных пользователя и другой информации можно использовать специальные серверные программы (например, на языках PHP или Perl). Используя язык HTML, можно размещать на страницах гипертекстовые ссылки и интерактивные кнопки, соединяющие Web-страницы с другими страницами сайта и с другими сайтами. До сих пор не существует настолько удобных редакторов HTML, чтобы пользователь мог бы обойтись без текстового редактора и ручной расстановки тэгов, что гораздо усложняет работу с языком, делает необходимым овладение несвойственных ему функций.
Замечание 2
Проанализировав особенности языка HTML и оценив уровень его проработки, можно сделать вывод, что уже в ближайшие годы возможно появление более совершенных его модификаций, новых языков и прикладных пакетов для работы с web-страницами.
Динамический и статический HTML-документыHtml-документы бывают двух видов: статические и динамические. Статические документы хранят файлы файловой системы, используемой web-сервером или браузером при просмотре локальных файлов. Размещая информацию на web-сервере, используют динамические документы, не существующие постоянно в виде файлов, а генерирующиеся в момент запроса клиента. При чем для конечного пользователя не имеет значения каким способом представлены документы.
Генерирование динамических документов HTML происходит с помощью специально написанной программы по правилам web-сервера. При планировании размещения информации на сервере, для правильного определения видов документов, учитывают степень обновления данных, их объем и частоту обращений к ним. При динамическом способе подразумевается хранение данных в формализованном виде, например в базе данных. При хранении данных в формализованном виде используются шаблоны документов с произведенными в них изменениями, генерируются статические документы путем использования любых средств отчетов, имеющихся в той системе управления баз данных (СУБД), которой последние обработаны и формализованы.
Перспективы HTMLНовые версии языка HTML не предполагаются, не смотря на это существует дальнейшее развитие HTML под названием XHTML (англ. Extensible Hypertext Markup Language - расширяемый язык разметки гипертекста). Пока возможности XHTML сопоставимы с HTML, но предъявляются более строгие требования к синтаксису. Язык XHTML является подмножеством языка SGML, однако в отличие от HTML, соответствует спецификации XML. Вариант XHTML 1.0 был одобрен в качестве Рекомендации Консорциума Всемирной паутины (W3C) 26 января 2000 года. Нужно отметить, что в этом формате создано большое количество информационных ресурсов, которые долго еще будут пониматься web-браузерами и использоваться в своем первозданном виде. Кроме того, все новые форматы будут разрабатываться (и уже разрабатываются – например XML) с поддержкой технологий HTML.
Стили работы меняются, меняются и средства доступа к содержимому. Язык HTML уже изначально создавался как платформо - независимый язык. Новые технологии используются повсеместно и довольно скоро пространство WWW перестанут применять лишь пользователи настольных персональных компьютеров, уже сейчас некоторыми пользователями активно применяются голосовые браузеры для незрячих или браузеры, использующие азбуку Бройля, зачастую содержимое выводится не на монитор компьютера, а на экран телевизора, где применяются приставки с выходом в сеть, на телетайп или на монохромные дисплеи различных организаторов-пейджеров и пр.
Поиск
Мы можем оповещать вас о новых статьях,