Общие сведения о языке html. Что такое HTML. История создания
Здравствуйте уважаемые начинающие веб-мастера. Начинаем изучать языки программирования.
И начнём мы их изучать с 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 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.
HTML - язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки - , чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих.
Визуальные редакторыНовички, только ступившие на путь изучения HTML, часто начинают свою работу с программ, позволяющих создавать сайты без каких-либо знаний. В них можно просто расположить элементы на экране так, как они будут отображаться в браузере. Казалось бы, вот он — источник вечной благодати, позволяющий избавиться от большинства веб-разработчиков. Но не всё так просто, так как у визуальных редакторов есть масса недостатков, которые делают невозможным их использование в серьёзных проектах.
Все эти программы создают много ненужных тегов, которые делают конечный вариант страницы громоздким и неоптимальным. Конечно, в наш век скоростного интернета это имеет меньшее значение, чем раньше, но есть ряд причин, по которым лаконичный и грамотно написанный сайт получается более практичным, чем его собрат, созданный в визуальном редакторе. Веб-страница, сделанная в такой программе, будет плохо обрабатываться поисковыми роботами, так как для них важен каждый килобайт кода, а громоздкий и нелогичный код с кучей едва ли придётся им по вкусу. Помимо этого, редакторы часто отстают от времени, становясь неактуальными, а тратить ресурсы на их развитие нецелесообразно, так как ни один профессионал не пользуется этими продуктами. Поэтому каждый, кто хочет работать в сфере создания сайтов, должен знать основы HTML.
ТегиКак упоминалось выше, теги описывают браузеру структуру веб-страницы. Большинство из них имеют открывающий и закрывающий тег, но далеко не все. Например, ..., где вместо точек находится содержимое. Первый из них показывает, где начинается тег, а второй закрывает его. Внутри могут находиться другие элементы разметки страницы, они могут вкладываться друг в друга подобно матрёшке. Тут важно своевременно закрывать теги, чтобы страница отображалась корректно.
Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«...», где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы.
Структура документаКаждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега , сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы.
Потом идут основные парные структуры, составляющие «скелет» сайта. Первый тег, в который вложены все остальные — .... Всё, что находится за его пределами, не распознаётся браузером как веб-страница, так что он открывает документ и закрывает его. Этот тег является обязательным для любого документа. В нём также содержатся ещё несколько обязательных тегов, которые будут рассмотрены ниже.
HeadВнутри тега ... содержится информация технического характера, которая не будет отображаться на странице, но, тем не менее, является важной частью документа HTML. Основы сайта закладываются именно в этом месте, здесь выбирается кодировка и вводится название страницы. Оно содержится внутри обязательного тега .... Отображается название в верхней части браузера, где также можно разместить небольшую иконку, характеризующую содержимое страницы. Желательно сразу указать кодировку документа для его корректного отображения. Это можно сделать при помощи тега . Метатеги предоставляют данные о структуре страницы и обычно располагаются внутри head.
LinkЗнание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег . В готовом виде это выглядит примерно вот так: , где href указывает на местоположение файла, а type - на его тип.
Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них:
- - применяется для выделения подстроки, на которую будет распространяться особый стиль, описанный в css;
- - создаёт ссылку на веб-странице; адрес перехода задаётся атрибутом href;
- - один из популярнейших тегов современности; каждый, кто решил изучить основы языка HTMLl, должен уделить ему особое внимание, поскольку это блочный элемент, на основе которого сделана львиная доля современных сайтов (параметры для блоков задаются в css, и внутри этого тега могут располагаться другие блоки);
Выделяет абзац из текста; содержимое абзаца находится между открывающим и закрывающим тегами;
- - нумерованный список, элементы которого заключаются в парный тег
- - маркированный список, в котором, так же как и в нумерованном, элементы обозначаются тегом
- - - заголовки документа (цифра обозначает уровень заголовка, то есть - главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней , почти невозможно встретить на просторах интернета), также важно помнить, что на странице может быть лишь один заголовок ;
- - жирный текст;
- - курсив;
- вставка картинки на интернет страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения);
- - вставка видео на веб-страницу;
- - тег, вставляющий в документ аудио файл.
Это далеко не все теги, необходимые для создания собственной веб-страницы, но их вполне достаточно, чтобы заложить основы HTML для начинающих.
CSSРазвитие языка HTML привело к тому, что каждый тег обзавёлся массой атрибутов, да и требования к внешнему виду веб-страниц существенно возросли. Код стал громоздким и неудобным, сложно было прочитать его, не то что адаптировать или изменить. К тому же, если на вашем сайте десять страниц, на которых много заголовков, отмеченных зелёным цветом, а вам вдруг захотелось сделать их красными, то придётся попотеть, изменяя каждый вручную. С появлением каскадных таблиц стилей этот процесс стал простым и логичным, да и HTML-код стал куда более читаемым.
Применение CSS
Для создания веб-страниц необходимо знать основы HTML и CSS, так как сейчас без знания каскадных таблиц стилей делать в этой сфере нечего. В них задаются атрибуты для любого элемента, распространяющиеся на весь документ. Таким образом, можно задать цвет сразу для всех элементов
Для того чтобы подключить файл css к документу, существует тег link. Чуть выше был описан принцип его использования, но он не является единственным вариантом объединения всех стилей в одном месте. Есть ещё тег , который располагается в «голове» документа и позволяет прописать стили, не используя файлы CSS. Не обязательно пользоваться либо одним методом, либо другим. Их можно успешно комбинировать для получения наилучшего результата. Для создания файла с таблицами стилей нужно создать файл с расширением.css, например, Styles.css.
JavaScriptНередко человек, решивший заняться понимает, что для его задач недостаточно тех средств, которые предлагает HTML. Основы позволят создать красивую страницу, но что делать, если вдруг понадобилось сделать её интерактивной? Для этих целей существует уникальный программирования, который прекрасно взаимодействует с HTML. Называется он JavaScript, так как задумывался как младший брат популярного языка Java. Сегодня эти языки обзавелись существенными различиями, и пропасть между ними только растёт.
JavaScript может расширить возможности HTML, он позволяет создавать и редактировать теги. Также при помощи этого замечательного инструмента можно работать с Cokie, загружать данные с сервера, не перезагружая страницу, сделать сайт более интерактивным, чем позволяют возможности HTML. Есть у этого языка и ограничения, которые связаны с безопасностью. Если JavaScript используется не на серверной части, то он будет выполняться в условиях, ограничивающих его возможности, дабы злоумышленники не могли задействовать вредоносный код на любом компьютере.
РедакторыОсновы HTML для новичка предполагают знания о наиболее удобных и практичных программах для создания веб-страниц. Как было написано выше, визуальные редакторы, такие как Dreamweaver и ему подобные, не подходят для этих целей. Так что же, писать теги в обычном блокноте? Этот вариант также сомнителен, так как стандартный блокнот не располагает никакими специальными инструментами для вёрстки. С этой задачей может неплохо справиться Notepad++. Большой плюс этого продукта в том, что он имеет открытый код и распространяется абсолютно бесплатно. В нём присутствует удобная подсветка синтаксиса и автоматическое закрывание тегов. Notepad++ также предоставляет широкий выбор языков интерфейса, а его возможности легко расширяются при помощи многочисленных дополнений.
Sublime Text 3 — программа, похожая на Notepad++, но распространяющаяся на платной основе. Именно она покорила сердца большинства разработчиков. Sublime Text 3 идеально подходит для JavaScript, CSS и HTML. Основы работы с ней придётся изучать самостоятельно, но оно того стоит. В ней заложены воистину безграничные возможности для тонкой настройки, что позволяет максимально подогнать программу под свои нужды.
Основы HTML и CSS для начинающихКак видите, изучить искусство создания веб-страниц не так уж и сложно, как кажется на первый взгляд. Всего несколько месяцев практических занятий превратят вас из робкого пользователя в начинающего разработчика. Научиться вёрстке гораздо проще, чем освоить какой-нибудь язык программирования или Linux. На самом деле тегов HTML не так уж и много, важно понять практический аспект их применения.
Не лишним в этом деле будет навык работы в Adobe Photoshop. Эта программа позволяет работать с фотографиями, картинками и прочими графическими элементами веб-страницы. На данный момент именно "Фотошоп" лучше всего справляется с такими задачами, конкурентов у него немного. Для тех, кому этот продукт компании Adobe пришёлся не по нраву, есть Lightroom, GIMP, Illustrator и другие программы с похожими функциями.
Что даёт знание HTMLНавыки создания веб-страниц очень актуальны сегодня, так как интернет расширяется не по дням, а по часам. Каждое предприятие, любой, даже самый маленький магазинчик, мастерские и спортивные клубы — все хотят иметь собственный сайт. И конечно же, для этого им понадобится разработчик, владеющий CSS и 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:
Таблица 2. Атрибуты тега
1.2.3. ЭлементАтрибут 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);
с использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
Таблица 4. Атрибуты тега
1.2.5. ЭлементАтрибут Описание, принимаемое значение 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" . Таблица 5. Атрибуты тега
1.3. ЭлементАтрибут Описание, принимаемое значение 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 Используются для объявления языка сценария, использованного при составлении содержимого тега. В этом разделе располагается все содержимое документа. Для элемента доступны .
Таблица 5. Атрибуты тега
Атрибут Описание, принимаемое значение onafterprint Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. onbeforeprint Событие, срабатывающее перед отправкой страницы на печать. onbeforeunload Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. onhashchange Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 . onmessage Событие происходит, когда сообщение получено через источник события. onoffline Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. ononline Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. onpagehide Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. onpageshow Событие происходит, когда пользователь переходит на веб-страницу, после события onload. onunload Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. HTML (Hyper Text Markup Language)-это специальный язык разметки документов. Важно отметить, что здесь речь идет об электронных, а не о печатных документах.
Печатный документ имеет строго заданные размеры страницы и полей. В нем точно заданы параметры шрифтов. Электронные документы, Web-страницы предназначены не для печати на принтере, а для просмотра на экране. Заранее неизвестно, на каком компьютере документ будут просматривать. Неизвестен размер окна обозревателя и неизвестно, какие имеются шрифты.
Язык HTML специально создан, чтобы оформлять экранные документы, которые будут воспроизводиться неизвестными средствами. Изначально язык HTML предназначался не для форматирования документа, а для его функциональной разметки . Например, «заголовок» - это характеристика содержания, а не оформления. Программа для просмотра документа на экране (браузер, броузер, обозреватель), выбирает свой способ отображения части документа, описанной как заголовок.
Создание документа на языке HTML аналогично программированию. Автор документа берет обычный текст и вставляет в него специальные коды (их называют тегами). Когда документ просматривается, теги выполняют роль команд. Например, если в начале абзаца стоит тег , то весь абзац будет выровнен по центру окна, независимо от того, в каком окне будет происходить просмотр документа, и каким шрифтом текст будет отображаться.
Теги HTML позволяют выполнять выравнивание строк документа, управлять фоном и цветом шрифта, вставлять иллюстрации и обтекать их текстом, включать в документ мультимедийные объекты и многое другое. В результате получаются содержательные и эффектно оформленные Web-документы.
Среди многочисленных тегов HTML есть специальная группа тегов, предназначенных для создания гипертекстовых ссылок. Гипертекстовая ссылка - это выделенный фрагмент текста или иллюстрация, с которыми связан адрес другого документа. Обычно гипертекстовые ссылки выделены подчеркиванием или другим цветом. Если на гипертекстовую ссылку навести указатель мыши, то он изменит форму. Если на гипертекстовой ссылке щелкнуть левой кнопкой мыши, произойдет переход к другой Web-странице, возможно, находящейся на другом сервере, может быть даже на другом континенте.
Документы, созданные в формате HTML сохраняют в файлах с расширением html или htm.
Теги htmlУправляющие конструкции языка HTML называются тегами. Теги – это наборы символов, с помощью которых выполняется разметка текста. Все теги записываются в угловых скобках, которые формируются символами «меньше» (). После открывающей скобки идёт ключевое слово, определяющее тег.
Регистр букв в названиях тегов не имеет значения. Однако принято записывать теги прописными буквами, чтобы они отличались от основного текста.
Теги бывают парные и непарные . Для воздействия на часть документа (например, на абзац) используют парные теги: открывающий и закрывающий . Открывающий тег создаёт эффект, а закрывающий прекращает его действие. Закрывающие теги начинаются с символа косой черты (/).
Непарные теги воздействуют на весь документ или дают разовый эффект в месте своего появления. В этом случае закрывающий тег не употребляется.
Если по ошибке в теге записано ключевое слово, отсутствующее в языке, то тег полностью игнорируется.
При просмотре документа в браузере сами теги не отображаются, но влияют на способ отображения документа.
На эффект, создаваемый тегом, могут влиять атрибуты. Атрибуты – это служебные слова, отделённые от ключевого слова тега и друг от друга пробелами. Если требуется указать значение атрибута, то оно записывается после знака равенства и заключается в кавычки. В парных тегах атрибуты добавляются только к открывающему тегу. Закрывающие теги никогда не содержат атрибутов .
Язык HTML позволяет вводить в документ