Синтаксис XML. Основные HTML-теги

Здравствуйте, уважаемые читатели блога ! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов... И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке - , и . Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — , поэтому затрагивать его мы не будем.

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

И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги , и ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:

А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе.

Функции тега

Итак, тег является контейнерным (). Внутри него заключается все видимое и невидимое содержимое веб-страницы (включая теги и ). Открывающий тег идет сразу после декларации Doctype, а закрывающий стоит в конце документа. Тем самым, он дает понять браузеру, откуда начинать обработку документа и где ее заканчивать.

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

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

Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст. Также и в случае с этим тегом:

А вот что вы увидите, наведя курсор на документ с данным содержимым:

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

Функция тега

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

Какую же информацию можно увидеть в ? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы. Все содержимое этого тега предназначено для поисковых систем и браузеров . Единственное, что вы хоть как-то можете увидеть это тег , который отвечает за заголовок окна веб-страницы. Вот пример:</p> <p><img src='https://i2.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy></p> <p>Текст после иконки и есть содержание тега <title>. А теперь рассмотрим содержание <head>, которое мы увидеть не можем, но которое является очень <a href="/reviews/sistemnyi-blok-kompyutera-vazhnye-chasti-kompyutera-processor.html">важной частью</a> <b>создания и продвижения сайта. </b>В первую очередь это строка</p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </p><p>Это мета-тег отвечающий за <b>тип содержимого страницы </b> (Content-Type). В данном случае, это html код в кодировке UTF-8 (content="text/html; charset=UTF-8"). Далее идет <a href="/reviews/dlya-chego-sluzhit-teg-title-vsegda-li-title-popadaet-v-snippet.html">тег title</a>, описанный выше. Затем идут строки, начинающиеся с тега <link>. Он указывает на связь с внешним документом. Например, строка</p><p> <link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" /> </p><p>указывает на то, что подключен (rel="stylesheet") файл с (type="text/css"), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать <b>каскадные таблицы стилей </b>.</p> <p>Вообще, в <a href="/life-hacks/html-tegi-html-head-body-tegi-kotorye-est-v-lyuboi-stranichke-interneta.html">теге head</a> много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с ) — наличие тегов описания, <a href="/life-hacks-for-pc/statistika-zaprosov-po-klyuchevym-slovam-servis-podbora-slov-v-yandekse-chto.html">ключевых слов</a> и canonical. Я использую <b>плагин All in <a href="/life-hacks-for-smartphones/pravilnaya-nastroika-all-in-one-seo-pack-dlya-wordpress-all-in-one-seo-pack-pravilnaya.html">One SEO</a> Pack </b>, поэтому они и присутствуют в пределах <head>.</p> XML предназначен для широкого использования, символы не ограничены 7-битным набором символов ASCII . К числу символов, допустимых в языке XML , относятся три управляющих символа СО стандарта ASCII , все <a href="/life-hacks/formuly-v-ms-word-vstavka-obychnyh-simvolov-ispolzovanie-simvolov-v.html">обычные символы</a> этого стандарта и почти все остальные <a href="/life-hacks-for-smartphones/chto-delat-esli-vmesto-teksta-ieroglify-v-word-brauzere-ili-tekstovom-dokumente.html">символы Unicode</a> <h3>Имена.</h3><p>В языке XML все имена должны начинаться с буквы, символа нижнего подчеркивания (_) или двоеточия (:) и продолжаться только допустимыми для имен символами, а именно они могут содержать только буквы, входящие в секцию букв <a href="/life-hacks-for-windows/kodirovka-unicode-kodirovka-yunikod-standart-kodirovaniya-simvolov.html">кодировки Unicode</a>, арабские цифры, дефисы, знаки подчеркивания, точки и двоеточия. Однако имена не могут начинаться со строки xml в любом регистре. Имена, начинающиеся с этих символов, зарезервированы для использования консорциумом W3C . Нужно помнить что так как буквы не ограничены исключительно <a href="/instructions/izvestny-kody-simvolov-v-kodovoi-tablice-ascii-kodirovka-ascii-american-standard-code-for.html">символами ASCII</a> , то в именах можно использовать слова из родного языка.</p> <h3>Структура XML- документа.</h3><p>Любой XML -документ состоит из следующих частей:</p><ul><li>Необязательный пролог.</li> <li>Тело документа.</li> <li>Необязательный эпилог, следующего за деревом элементов.</li> </ul><p>Рассмотрим каждую из частей более подробно.</p> <h3>Пролог XML- документа.</h3><p>Документ XML начинается с пролога. В прологе содержатся некоторые указания, предназначенные для анализатора XML и приложений.</p><p>Пролог состоит из нескольких частей:</p><ol><li>необязательное объявление XML (XML Declaration) которое заключено между символами <?...?>. Объявление содержит:<ul><li>пометку xml и номер версии (version) спецификации XML;</li> <li>указание на кодировку символов (encoding), в которой написан документ (по умолчанию encoding="UTF-8" );</li> <li>параметр standalone который может принимать значения "yes" или "no" (по умолчанию standalone="yes" ). Значение "yes" показывает, что в документе содержатся все требуемые декларации элементов, a "no" - что нужны <a href="/life-hacks-for-windows/vai-fai-router-znachenie-lampochek-vneshnii-vid-i-opredelenie-znacheniya.html">внешние определения</a> DTD .</li> </ul><p>Все это вместе может выглядеть следующим образом:</p> <p><?xml version ="1.0" encoding="windows-1251" standalone="yes"?>.</p> <p>Важно отметить, что в объявлении XML только атрибут version является обязательным, все остальные атрибуты могут быть опущены и, следовательно, принимать значения по умолчанию. Так же нужно помнить, что все эти атрибуты следует указывать только в приведенном выше порядке.</p> </li> <li>комментарии.</li> <li>команды обработки.</li> <li>символы пустых пространств.</li> <li>необязательное <span>объявление типа документа </span>, DTD (Document Type Declaration ) которое заключено между символами <!DOCTYPE...> и может занимать несколько строк. В этой части объявляются теги, использованные в документе, или приводится ссылка на файл, в котором записаны такие объявления.</li> </ol><p>После <span>объявление типа документа </span> так же могут следовать комментарии, команды обработки и символы пустых пространств.</p><p>Поскольку все эти части необязательны, пролог может быть опущен.</p> <h3>Тело XML-документа.</h3><p>Тело документа состоит из одного или <a href="/computers/nuzhen-stilnyi-dizain-v-flet-stile-flet-dizain-proshloe.html">больше элементов</a>. В правильно оформленном XML документе элементы формируют простое иерархическое дерево , в котором обязательно присутствует <span>корневой элемент </span> ( root element ) в который вложены все остальные элементы документа. <a href="/computers/xml-bazovyi-kurs-yazyk-xml-praktika-i-teoriya-atributy-xml-faila.html">Язык XML</a> налагает на элементы чрезвычайно <a href="/life-hacks-for-windows/prodlit-trafik-na-megafone-1-den-vazhnye-usloviya-i-ogranicheniya.html">важное ограничение</a> - они должны быть правильно вложены. Это позволяет достаточно легко вложить один XML - документ в другой не нарушая структуру документа, при этом <span>корневой элемент </span> вложенного документа станет просто одним из элементов документа, в который он вложен. В связи с этим мы сталкиваемся с еще одним ограничением, а именно с тем, что имена элементов должны быть уникальны в пределах документа, поскольку во включенном документе такие же имена, что и во включающем могут иметь совершенно иной смысл. Для решения проблемы совпадающих имен введено понятие пространства имен.</p><p>Имя корневого элемента считается именем всего документа и указывается во второй части пролога после слова Doctype . Если определение DTD находится внутри XML - документа, то оно помещается в квадратных скобках после имени корневого элемента:</p><p><!DOCTYPE имя_корневого_элемента [описание DTD ]></p><p>Но обычно определение DTD составляется сразу для нескольких XML -документов. В таком случае его удобно записать отдельно от документа и тогда вместо <a href="/life-hacks-for-different-systems/kak-v-vorde-obedinit-figurnoi-skobkoi-kvadratnye-i-figurnye-skobki-v-vorde.html">квадратных скобок</a> записывается одно из слов System или Public после которого идет адрес в форме URI ( Uniform Resource Identifier ) файла с определением DTD . Для всех практических целей URI считается эквивалентом <a href="/internet/novoe-oformlenie-soobshchestv-vkontakte-url-adres-gruppy-vkontakte.html">адреса URL</a> , хотя в принципе это может быть любое <a href="/life-hacks-for-pc/kak-pridumat-interesnoe-imya-kak-pridumyvat-novye-unikalnye-imena-dlya.html">уникальное имя</a>. Определение DTD , например, может выглядеть следующим образом:</p><p><!DOCTYPE root_element_name SYSTEM "DTD.dtd"></p> <h3>Пространства имен XML</h3><p>Поскольку в разных XML -документах могут встретится одни и те же имена тегов и их атрибутов, имеющие совершенно разный смысл, надо иметь возможность их как-то различать. Для этого имена тегов и атрибутов снабжают кратким префиксом, который отделяется от имени двоеточием. Префикс имени связывается с идентификатором, определяющим <span>пространство имен </span> (namespace ). Все имена тегов и атрибутов, префиксы которых связаны с одним и тем же идентификатором, образуют одно <span>пространство имен </span>, в котором имена должны быть уникальны. Префикс и идентификатор пространства имен определяются атрибутом xmlns следующим образом:</p><p><ns:root_element_name xmlns:ns = "http://URI_namespace"></p><p>В дальнейшем имена тегов и атрибутов, которые мы хотим отнести к пространству имен "http://URI_namespace" , снабжаются префиксом ns, например:</p><p><ns:city ns:type="город">Новосибирск</ns:city>.</p><p>Атрибут xmlns может появиться в любом <a href="/life-hacks-for-pc/xml-tehnologiya-elementy-i-atributy-dlya-realizacii-veb-servisov-xml---atributy.html">элементе XML</a> , а не только в корневом. Определенный им префикс можно применять в том элементе, в котором записан атрибут xmlns , и во всех вложенных в него элементах. Более того, в одном элементе можно определить несколько пространств имен. Во вложенных элементах <span>пространство имен </span> можно переопределить, связав префикс с другим идентификатором. Появление имени тега без префикса в документе, использующем <span>пространство имен </span>, означает, что имя принадлежит пространству имен по умолчанию. Префиксы, начинающиеся с символов xml с любым регистром букв, зарезервированы за самим языком XML .</p><p>Имя вместе с префиксом называется расширенным или уточненным именем. Часть имени, записанная после двоеточия, называется <a href="/iron/kak-razdelit-lokalnyi-disk-na-2-chasti-korrektnye-manipulyacii-v.html">локальной частью</a> имени.</p> <p>Здравствуйте, уважаемые читатели блога сайт! В прошлой статье мы разобрались, а также что такое тип документа и как браузеры определяют используемый язык с помощью . Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом. </p> <h3>Что такое HTML-тег, виды HTML-тегов, примеры написания</h3><b>HTML-тег </b>— в переводе с английского <b>tag — помечать </b> -символы, заключенные в угловые скобки и являющиеся элементами языка гипертекстовой разметки (HTML). Символы могут быть толок на <a href="/life-hacks-for-ios/chto-delat-esli-ne-menyaetsya-raskladka-klaviatury-kak-vosstanovit.html">английском языке</a> (весь интернет на нем построен). Тег имеет вид <strong></strong> <p>Это тег выделения текста жирным шрифтом. Теги имеют три вида:</p> <ul><li><b>Открывающий тег </b> - тег, стоящий в начале. В рассмотренном выше примере тег <strong> является открывающим и стоит перед тем текстом, который нужно выделить.</li> <li><b>Закрывающий тег </b> - тег, стоящий в конце. <a href="/life-hacks-wi-fi/operacionnyi-sistema-unix-byla-razrabotana-v-otlichitelnye-cherty.html">Отличительной чертой</a> служит слеш «/» перед символами в угловых скобках. Опять же обратимся к рассмотренному выше примеру. Тег </strong> является закрывающим и стоит после текста, который следует выделить жирным</li> <li><b>Одиночные теги </b> — теги, которые не имеют закрывающего тега. Примером может служить <br /> Вот пример открывающего и закрывающего тега:</li> </ul> <strong></strong> <p>Вся конструкция, включая текст, будет выглядеть следующим образом:</p><p> <strong>Этот текст будет выделен жирным</strong> </p><p>А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам:<b>Этот текст будет выделен жирным. </b> Существует еще такое понятие, как<b> контейнерные теги </b>, но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее <a href="/life-hacks-for-smartphones/imya-polzovatelya-dlya-instagramma-primery-parnei-chasto-voznikayushchie-problemy-s.html">частым примером</a> служит тег <a href="/computers/kak-vstavit-stroku-tablicy-eksel-dobavlenie-novoi-stroki-v-programme-microsoft.html">новой строки</a>.</p><p>В основном, одиночные теги используются для вставки какого-либо элемента, например изображения или таблицы.</p> <h3>Что такое атрибуты,правила написания и зачем они нужны</h3> Помимо тегов существуют еще и так называемые <b>атрибуты </b>. Точнее не помимо, а в тегах. С помощью атрибутов можно задать <a href="/life-hacks-for-different-systems/primenenie-mk-avr-shemy-algoritmy-programmy-gde-i-kak-uchitsya.html">дополнительные параметры</a> для какого-либо тега. <b>Атрибуты </b> для каждого тега свои, а в данной теме мы будем экспериментировать над тегом <font>, который без атрибутов, собственно, ничего толкового не делает. <p><b>Font </b> — контейнерный тег, применяемый для форматирования текста. С помощью данного тега вы сможете и выделить текст жирным, и изменить размер, и расстояние между строк — в общем все, что можно делать с текстом. Рассмотрим пример с размером текста. Для начала заключим текст в тег Font.</p><p> <font> Текст </font> </p><p>Теперь немного про правила написания атрибутов. Атрибуты<b> всегда </b> пишутся в открывающем теге и после символов самого тега. Можно написать в одном теге несколько атрибутов в любом порядке. Атрибуты вы можете найти на сайте валидатора W3C (про который я напишу чуть ниже). Итак, вот пример тега font с атрибутом size:</p><p> <font size="5"> Текст</font> </p><p>Данный атрибут в теге font изменяет размер заключенного в теги Текста.<br> Если вы откроете <a href="/life-hacks-for-smartphones/programmy-s-otkrytym-kodom-dlya-android-ishodnyi-kod-programmy.html">исходный код</a> страницы, то увидите, что место, где находится <a href="/life-hacks-for-smartphones/ochen-bolshoi-probel-mezhdu-slovami-v-vorde-tri-sposoba-kak-ubrat-probel-mezhdu.html">большое слово</a> «Текста» имеет вид</p><p> <font size="5"> Текста </font> </p><p>Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в данном случае size), затем ставим «=» и заключаем параметр атрибута в <a href="/life-hacks/bescvetnyi-inurl-oplata-operatory-poiskovyh-sistem-google-i-yandeks-poisk.html">двойные кавычки</a>. Параметры атрибутов вы сможете найти все на том же сайте консорциума <a href="/reviews/chto-takoe-internet-pautina-vsemirnaya-pautina-istoriya.html">всемирной паутины</a>.</p> <h3>Что такое валидатор (validator) W3C, правила написания и список тегов</h3> Как я и писал, существует великое множество тегов. Но где их всех найти? Вот для этой цели существует <b>валидатор W3C </b>W3C -<b> World <a href="/life-hacks-for-windows/tehnologiya-world-wide-web-www-vsemirnaya-pautina-istoriya-nazvaniya-i-kak-v.html">Wide Web</a> Consorcium, </b>а по-русски — консорциум всемирной паутины. Не совсем понятно, да? Это такое место, где разрабатывают веб-стандарты — (языки гипертекстовой разметки — их детище). Во главе всего консорциума стоит, известный из прошлой статьи, Тим Бернерс-Ли — создатель HTML. Сайт этой организации — w3.org . Предупреждаю, сайт полностью на английском, так что запаситесь словарем или переводчиком в браузере. Кстати, Google у данного сайта равен 9, а — 37000 (это все очень много, если кто не в курсе). <p>Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке HTML 4.01 Specification , после чего вверху видим вкладку elements , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах): <br><img src='https://i0.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Legenda-validatora-W3C.png' align="center" width="100%" loading=lazy></p> <p>А сразу после легенды идет таблица самих тегов:</p> <p><img src='https://i2.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Tablitsa-tegov-na-sayte-W3C.png' align="center" width="100%" loading=lazy></p> <ul><li>В первом столбце — <b>Name </b> — само название тега — то что должно стоять в угловых скобках (< и >).</li> <li>Второй столбец — <b>Start Tag </b> — наличие открывающего тега. В <a href="/life-hacks-for-ios/tipy-dannyh-stolbcov.html">данном столбце</a> вы можете увидеть букву «O», что значит «Optional», а в переводе с английского - Опционально. Данная буква присутствует только напротив тегов <html>, <head>, <body> и <tbody> и означает, что можно ставить открывающий тег, а можно не ставить — браузер сам все сделает.</li> <li>Третий столбец — <b>End Tag </b> — наличие закрывающего тега. Напротив данного тега можно увидеть как букву «O», так и букву «F». Значение первой не изменилось. Вторая же буква — «F» — дословно с английского «запрещено» — означает, что закрывающий тег ставить запрещено, его просто не существует. Например, не существует тега </img>, ибо нечего в нем закрывать.</li> <li>Четвертый -<b> Empty </b> — означает, что тег является одиночным (пустым). Все теги, напротив которых стоит буква «E» в данном столбце, стоит еще и буква «F» в предыдущем столбце. Ведь у одиночных тегов не бывает закрывающих. Примером служит все тот же тег <img>.</li> <li>Пятый столбец — <b>Depr. </b> или <b>Deprecated </b> — с английского «не рекомендуемые». Если в данном столбце стоит буква «D» (которая расшифровывается точно также) значит, что <a href="/life-hacks-wi-fi/chto-pisat-v-tege-title-sbor-predvaritelnyh-dannyh-chto-takoe.html">данный тег</a> не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и <a href="/computers/harakteristiki-materinskoi-platy-asus-maximus-4-extreme-obzor-i-testirovanie.html">внешнего вида</a> всего сайта и HTML-документа используются каскадные таблицы стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, <a href="/computers/chto-dast-uvelichenie-ozu-funkcii-i-prednaznachenie-tipy-i-formfaktory-op.html">данная функция</a> используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста (<font> и <Center> являются примером)</li> <li>Шестой столбец — <b>DTD </b> — может содержать либо букву <b>«L» </b>, либо <b>«F» </b>. Первая — <b>«L» </b> - <b>Loose DTD </b> — означает, что тег, напротив которого стоит данная буква, может использоваться только в переходном типе документов (<!DOCTYPE> — Transitional, про который я писал в предыдущей статье). Вторая — <b>«F» </b> — <b>Frameset DTD </b> — означает, что тег может использоваться только в документе, типа FRAMESET (<!DOCTYPE> — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.</li> <li>И последний, седьмой столбец - <b>Description </b> — <a href="/life-hacks-for-pc/kak-otklyuchit-opciyu-bit-na-mts-superbit-smart-ot-mts-kratkoe-opisanie.html">краткое описание</a> тега, опять же на английском</li> </ul><p>Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.</p> <ul><li>Первая колонка — <b>Name </b> — как и в случае с тегами — название атрибута. Все на английском, но имея <a href="/life-hacks-for-different-systems/bazovye-znaniya-elektroniki-nachinayushchii-radiolyubitel-shkola-shemy.html">базовые знания</a> можно догадаться, что делает тот или иной атрибут.</li> <li>Вторая колонка — <b>Related Elements </b> — это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.</li> <li>Третья колонка — <b>Type </b> — это все <a href="/life-hacks-for-different-systems/xsd-umnyi-xml-ogranicheniya-ili-fasety-dlya-znachenii-v-xml-sheme-xsd-spisok.html">возможные значения</a> определенного атрибута. Например напротив выбранного нами атрибута size в <a href="/life-hacks-for-pc/belyi-shrift-html-zadaem-shrift-teksta-atribut-face-tega-font.html">теге Font</a> стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это специальный набор вариантов размера (в данном случае). Ведь можно писать как пиксели, так и проценты</li> <li>Четвертая колонка — <b>Default </b> — означает, обязателен ли атрибут в определенном теге. Например, в теге <a href="/life-hacks-wi-fi/atribut-alt-tega-img-kak-propisat-atribut-alt-k-kartinke-pravilno.html">Img атрибут</a> src обязателен, так как указывает на источник, из которого брать картинку.</li> <li>6, 7, и 8 колонки означают то же самое, что и в случае с тегами.</li> </ul><p>Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на <a href="/life-hacks-for-smartphones/osnovy-html-dlya-nachinayushchih-na-ponyatnom-yazyke-yazyk-html-dlya.html">языке HTML</a>, над которой и будем экспериментировать.</p> <h3>Создание файла в формате html — HTML-документ</h3> <p>Прежде всего, разберемся что такое <b>HTML-документ </b>. А это, собственно, файл в формате HTML. И все интернет странички являются HTML- документами. Например, при попадании на сайт в <a href="/game/kak-otkryt-konsol-razrabotchika-zapusk-java-skriptov-iz-adresnoi.html">адресной строке</a> в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать <a href="/life-hacks-for-windows/xampp-gotovyi-komplekt-web-servera-ustanovka-lokalnogo-servera-xampp-i-wordpress.html">локальный сервер</a> — Денвер (про который я все хочу написать).</p> <p>Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением.html. Можно (и лучше всего) использовать <b>Notepad++ </b> , потому что в данном <a href="/life-hacks-for-different-systems/obzor-besplatnyh-alternativnyh-tekstovyh-redaktorov-luchshie.html">текстовом редакторе</a> используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде</p> <p>Итак, нам нужно просто открыть <b>Notepad++ </b> и сохранить файл с произвольным текстом (можно и пустой), но в формате.html. Для этого, как обычно, кликаете на надпись файл, затем "сохранить как " и ищем среди большого списка расширений <b>«HyperText Markup Language file </b> (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»</p> <p>Как я уже говорил, теги HTML - это <a href="/life-hacks/kak-mozhno-sbrosit-nastroiki-na-androide-sbros-do-zavodskih.html">специальные инструкции</a>, указывающие браузерам как отображать ту или иную часть страницы. Сейчас мы поговорим о них подробнее, но не старайтесь сразу все запоминать - у вас не получится, да и не нужно это, так как в остальных главах вы будете на каждом шагу сталкиваться с тегами - постепенно все само запомнится. Просто прочитайте и постарайтесь понять.</p> <h2>Открывающие и закрывающие теги, теги-контейнеры</h2> <p>Теги могут быть <i>открывающими </i> (начальными) и <i>закрывающими </i> (конечными). Открывающие теги состоят из знаков «<» и «>» между которыми указывается имя тега, а у закрывающих перед именем дополнительно ставится прямой слэш (/).</p> <p>Большинство HTML-тегов являются парными - имеют обязательные открывающий и закрывающий теги, например: <STRONG> и </STRONG> . Некоторые имеют только открывающий тег, например <BR> , и называются <b>пустыми </b>. Другие же могут иметь открывающий тег, а закрывающий можно указывать, а можно и нет, тогда браузер сам определит, где заканчивается действие тега.</p> <p>Теги, которые имеют обязательный или необязательный закрывающий тег принято называть <b>теги-контейнеры </b> или <b>элементы-контейнеры </b>.</p> <p>Все теги HTML не чувствительны к регистру, то есть можно указывать <STRONG> и <strong> или вообще <sTRonG> .</p> <p>Теперь совет. Рекомендую вам всегда писать теги в нижнем регистре (<a href="/instructions/kak-v-vorde-zaglavnye-bukvy-sdelat-strochnymi-kak-bolshie-bukvy.html">строчными буквами</a>) и ставить необязательные закрывающие теги. Во-первых, это является признаком профессионализма и хорошего тона, а во-вторых, в HTML-коде со всеми закрывающими тегами гораздо проще ориентироваться и править его. Ну да я вам об этом еще не раз напомню.</p> <p>Пример использования тегов</p><p> <b><a href="/computers/uchimsya-dobavlyat-formuly-v-microsoft-word-bloki-instrumentov-nachalo.html">Жирный шрифт</a></b> <i>Курсивный шрифт</i> </p><p>Результат в браузере</p> <h2>И все таки, как будет правильно - «теги» или «элементы»?</h2> <p>Вообще, в большинстве случаев правильно будет говорить - «элементы». Именно из HTML-элементов состоит веб-страница, и именно элементы выводят в окне браузера изображения, таблицы, ссылки и т.д. А теги предназначены для того, чтобы сообщить браузеру, где и какой элемент находится, начинается и заканчивается. Давайте еще раз рассмотрим пример, который расположен выше. Там указаны два элемента B и I . Каждый из них содержит обычный текст и имеет открывающий и закрывающий теги.</p> <p>Так уж сложилось, что на сегодняшний день слово «тег» прочно вошло в русский язык (да и не только в русский) в качестве синонима слову «элемент». Я думаю из-за того, что при использовании обоих слов не теряется смысл повествования. Поэтому в данном учебнике я тоже буду использовать оба этих слова, чтобы вы привыкли к ним и научились подсознательно определять, о чем <a href="/iron/chem-otlichaetsya-palka-dlya-selfi-ot-monopoda-esli-rech-idet-o.html">идет речь</a> в каждом конкретном случае. И сильно на этом не заморачивайтесь, знаете, чем отличается тег от элемента - вот и хорошо.</p> <h2>Теги можно указывать в одну строку, а можно в несколько</h2> <p>Да, HTML-теги можно указывать в одну строку, а можно в несколько, для браузеров это не имеет никакого значения, они просто игнорируют переносы строк. А также между тегами можно ставить сколько угодно пробелов - все подряд идущие пробелы браузеры воспринимают как один. Например, вот так:</p> <p> <b>Жирный шрифт</b> <i> Курсивный шрифт </i> </p><p>Результат в браузере</p> <h2>Правильная вложенность тегов</h2> <p>Многие теги можно вкладывать друг в друга, чтобы они вместе воздействовали на один и тот же элемент страницы. Но при этом важно соблюдать правильную вложенность - тег, появляющийся раньше, должен закрываться позже. Кстати, ошибка вложенности является одной из самой распространенной среди новичков.</p> <p><тег1><тег2><тег3> ...<span></тег3></тег2></тег1> </span> - правильно</p> <p><тег1><тег2><тег3> ...<span></тег1></тег3></тег2> </span> - неправильно</p> <p>Пример использования вложенных тегов</p><p> <b><i>Жирный курсивный шрифт</i></b> </p><p>Результат в браузере</p> <h2>Родительские и дочерние теги, потомки и предки</h2> <p>Чтобы указать иерархическую структуру HTML-тегов, их принято называть определенными словами. На самом деле все очень просто. Итак, давайте возьмем такой пример:</p><p> <тег1> <тег2>...</тег2> <тег3><тег4>...</тег4></тег3> </тег1> </p><p><b>Родительские теги </b> - тег является родительским для других тегов, если они вложены внутрь него на один уровень. В нашем примере <ТЕГ1> является родительским для <ТЕГ2> и <ТЕГ3> , но не является для тега <ТЕГ4> . А вот <ТЕГ3> родитель <ТЕГ4> .</p> <p><b>Дочерние теги </b> - обратно родительским. <ТЕГ2> и <ТЕГ3> дочерние для <ТЕГ1> , а <ТЕГ4> для тега <ТЕГ3> .</p> <p><b>Предки </b> - тег является предком для всех тегов, которые находятся внутри него на любом уровне вложенности. <ТЕГ1> предок для всех тегов, а <ТЕГ3> предок <ТЕГ4> .</p> <p><b>Потомки </b> - обратно предкам. Все теги - потомки тега <ТЕГ1> , но <ТЕГ4> еще и потомок тега <ТЕГ3> .</p> <p>Ну что, не запутались? Чтобы проще запомнить, проведите аналогию со своим семейным древом и сразу все встанет на свои места.</p> <h2>Что значит «один тег содержит другой»?</h2> <p>Как вы уже знаете, теги можно вкладывать друг в друга и, соответственно, одни могут содержать другие. Но тут есть один небольшой, но очень <a href="/life-hacks-wi-fi/nizkourovnevoe-vosstanovlenie-hdd-neskolko-vazhnyh-momentov-mozhno-li.html">важный момент</a>, которому новички часто не уделяют должного внимания. Давайте возьмем уже знакомый нам пример:</p><p> <тег1> <тег2>...</тег2> <тег3><тег4>...</тег4></тег3> </тег1> </p><p>Говорят, что один тег содержит другой только, если первый является родительским тегом, а второй - дочерним и никак иначе. то есть в нашем примере <ТЕГ1> содержит <ТЕГ2> и <ТЕГ3> , но не содержит <ТЕГ4> . А вот <ТЕГ3> как раз и содержит <ТЕГ4> . Немного необычно, правда? Но своя логика в этом есть, согласитесь.</p> <p>Каждый HTML-элемент может содержать только <a href="/instructions/kak-opredelit-socialnoe-polozhenie-cheloveka-poziciya-cheloveka-v-obshchestve.html">определенный набор</a> тегов, а некоторые вообще не могут содержать ничего кроме текста. Все это зависит от типа, к которому относится тег, поэтому, перед тем как вкладывать теги, проверьте - может ли один из них содержать другой.</p> <h2>Типы тегов</h2> <p>В HTML, теги делятся на несколько типов или моделей:</p> <p><b>Inline (встроенные, уровня строки) </b> - все, что выводят эти теги на страницу, всегда отображается браузером на одной сроке. И только если доступной ширины (например, ширины окна браузера) не хватает, то происходит перенос строки на следующую и т.д.</p> <p>Пример использования встроенных тегов</p><p> <b>Жирный шрифт</b> <i>Курсивный шрифт</i> </p><p>Результат в браузере</p> <p><b>Block (блочные, уровня блока) </b> - все, что выводит каждый из таких тегов на страницу, отображается браузером с новой строки, После себя такие элементы также создают переносы строк.</p> <p>Пример использования <a href="/game/kakie-iz-perechislennyh-tegov-yavlyayutsya-blochnymi-strochno-blochnye-elementy.html">блочных тегов</a></p><p> <p>Параграф 1</p> <p>Параграф 2</p> </p><p>Результат в браузере</p> <p>Параграф 1</p> <p>Параграф 2</p> <p>Есть еще теги других типов, но о них мы с вами поговорим в дальнейших уроках, а эти два типа самые распространенные в HTML.</p> <p>Ну что, надеюсь пока все понятно? Тогда пошли дальше.</p> <table id="step"><tr><td></td></tr></table> <p>Содержимое html-документа или веб-страницы определяется содержимым <a href="/life-hacks-for-different-systems/pozicionirovanie-elementov-html-zadannoe-polozhenie.html">html элементов</a>.</p> <h3>HTML элементы</h3> <p>HTML-элемент — это все, что находится между стартовым(открывающим) и конечным(закрывающим) тегами.</p> <h3>Синтаксис элементов html</h3> <ul><li>HTML элемент начинается с <b>открывающего/стартового тега </b>.</li> <li>HTML элемент заканчивается <b>закрывающим/конечным тегом </b>.</li> <li><b>Содержимое элемента </b>— это все, что находится между открывающим и закрывающим тегами.</li> <li>Некоторые элементы могут быть <b>пустыми </b>.</li> <li>Пустые элементы состоят только из <b>открывающего </b>тега.</li> <li>Большая <a href="/instructions/kakie-tegi-opredelyayut-vidimuyu-chast-spravochnik-tegov-html.html">часть html</a> элементов может иметь <b>атрибуты. </b></li> </ul><p>(Вы узнаете больше об атрибутах в следующих главах учебника.)</p> <h3>Вложенные элементы</h3> <p>Большая часть html элементов может быть вложена друг в друга. HTML документ состоит из вложенных элементов.</p> <h3>Пример</h3> <html><p> <body><br> <p>Это мой первый параграф.</p><br> </body></p> <p>Приведенный пример состоит из трех элементов:</p> <p><b>1. </b> Элемент <b><p> </b> используется для вставки параграфа в веб-страницу. Имеет открывающий и закрывающий теги. Содержимое этого элемента в нашем примере - надпись «Это мой первый параграф».</p> <p><b>2. </b> Элемент <b><body> </b> описывает <a href="/life-hacks/ne-vidit-chast-failov-fleshki-fleshka-ne-vidit-faily.html">видимую часть</a> содержимого веб-страницы. Имеет открывающий и закрывающий теги. В него вложен элемент <p>Со своим содержимым.</p> <p><b>3. </b> Элемент <b><html> </b> описывает весь <a href="/program/pravila-postroeniya-html-dokumentov-tegi-logicheskogo-formatirovaniya-html-teksta.html">html документ</a>. Имеет открывающий и закрывающий теги. В него вложены уже два элемента <body> и <h3>Не забывайте закрывающий тег</h3> <p>Большинство браузеров корректно отобразят ваш <a href="/computers/html-primechaniya-chto-takoe-kommentarii-v-kode-html-i-kak-ih.html">код html</a>, даже если вы забудете поставить закрывающий тег. Однако, это может привести к ошибкам и непредсказуемым результатам.</p> <p>Внимание! Будущие версии HTML не позволяют забывать закрывающие теги.</p> <h3>Пустые HTML элементы</h3> <p>HTML элементы без содержимого называются пустыми элементами. Пустые элементы состоят из одного тега.</p> <p><b><br> </b> — это пустой элемент, не имеющий закрывающего тега (он используется для отображения горизонтальной черты).</p> <p>В XHTML, XML и будущих <a href="/reviews/aktualnaya-versiya-flesh-pleera-onlain-html-igry.html">версиях HTML</a> все элементы должны быть закрыты. Чтобы сделать это, вам достаточно добавить наклонную черту через пробел после названия тега — <b><br /> </b>. Это <a href="/program/prilozheniya-dlya-podgotovki-k-uroku-privychka-uchitsya-luchshie.html">хорошая привычка</a>, которая пригодится в будущем.</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </article> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Рекомендуем другие статьи</div> <div class="items"> <div class="item"> <a href="/reviews/kak-prazdnovat-letnee-solncestoyanie-kak-prazdnovat-letnee-solncestoyanie.html" class="item__link"> <img src="/uploads/d002eb7ee7f8ca5839027a5ec58464a2.jpg" width="220" height="170" alt="Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние" class="item__image" / loading=lazy> <div class="item__title">Как праздновать летнее солнцестояние Эммануэль Дагер: Исцеляющее солнцестояние</div> </a> </div> <div class="item"> <a href="/internet/programmirovanie-mikrokontrollerov-dlya-nachinayushchih-legko-i.html" class="item__link"> <img src="/uploads/cc080e5fe541f0a30c5c0fdf1654e93a.jpg" width="220" height="170" alt="Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих" class="item__image" / loading=lazy> <div class="item__title">Программирование микроконтроллеров AVR для начинающих Программирование контроллеров avr для начинающих</div> </a> </div> <div class="item"> <a href="/life-hacks-for-ios/pochemu-planshet-ne-vyklyuchaetsya-chto-delat-zavis-planshet---chto-delat-vozmozhnye.html" class="item__link"> <img src="/uploads/5ee684d277379108d1f4344cff82eff8.jpg" width="220" height="170" alt="Завис планшет - что делать?" class="item__image" / loading=lazy> <div class="item__title">Завис планшет - что делать?</div> </a> </div> </div> </div> </div> </main> <aside class="sidebar"> <div class="section"> <div class="section__headline">Самое популярное</div> <div class="sidebar-items"> <a class="sidebar-item" href="/program/videonablyudenie-cherez-usb-kameru-besprovodnaya-usb-kamera-kupit.html"> <img src="/uploads/c5ad1ebb2eec805aceb765a476962621.jpg" width="75" height="75" alt="Беспроводная USB камера купить беспроводную мини камеру компьютера Цифровая камера с usb выходом" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Беспроводная USB камера купить беспроводную мини камеру компьютера Цифровая камера с usb выходом</div> </a> <a class="sidebar-item" href="/life-hacks-for-pc/sem-putei-voiti-v-svoi-lichnyi-kabinet-stoloto-russkoe-loto-obman.html"> <img src="/uploads/ef0eb579f517d663a977671e7a51ce14.jpg" width="75" height="75" alt="Столото, Русское лото – обман?" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Столото, Русское лото – обман?</div> </a> <a class="sidebar-item" href="/internet/v-chem-smysl-maininga-kak-rabotaet-maining-kriptovalyuty-process.html"> <img src="/uploads/e7ccb6fbe0cf024cedb045c511cf5fad.jpg" width="75" height="75" alt="Как работает майнинг криптовалюты Процесс майнинга криптовалют" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как работает майнинг криптовалюты Процесс майнинга криптовалют</div> </a> <a class="sidebar-item" href="/game/professiya-programmist-dlya-detei-konspekt-zanyatiya-v-detskom.html"> <img src="/uploads/9d0201b81adc610408d4507ccf6f9186.jpg" width="75" height="75" alt="Конспект занятия в детском саду «Программист – великий волшебник" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Конспект занятия в детском саду «Программист – великий волшебник</div> </a> <a class="sidebar-item" href="/life-hacks-for-ios/aliekspress-prosit-ukazat-proverochnyi-kod-pri-vhode-chto.html"> <img src="/uploads/85f99bb622febba2f51f6ce46c571a8f.jpg" width="75" height="75" alt="Как пройти проверку при входе в аккаунт на Алиэкспресс?" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как пройти проверку при входе в аккаунт на Алиэкспресс?</div> </a> <a class="sidebar-item" href="/game/otklyuchenie-uslugi-mobilnye-podpiski-kak-uznat-kakie-platnye.html"> <img src="/uploads/ce520cb58283add55341e217e52bd195.jpg" width="75" height="75" alt="Как узнать какие платные подписки от мегафон подключены и как их отключить" class="sidebar-item__image" / loading=lazy> <div class="sidebar-item__title">Как узнать какие платные подписки от мегафон подключены и как их отключить</div> </a> </div> </div> <script> // <![CDATA[ $(document).ready(function() { var floatsidebar = $("#float-sidebar"); var offset = floatsidebar.offset(); var left = offset.left; var top = offset.top; var width = $("#float-sidebar").width(); var height = $("#float-sidebar").height(); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop >= top) { $('#float-sidebar').css({ left: left + 'px', position: 'fixed', top: "50px", width: width + "px" }); } else { $('#float-sidebar').css({ position: 'static', }); } }); }); // ]]> </script> <div id="float-sidebar"> <div id="laqybe1" style="height:500px;width:270px;" align="center"></div> </div> </aside> </div> <footer class="footer"> <div class="footer-left"> <div class="footer__logo"> <div class="footer__logo-sitename">radiobud.ru</div> </div> <div class="footer__copyright"> <p>© 2024 - radiobud.ru<br /></p> <p>Обзоры, лайфхаки, игры, программы</p> </div> <nav class="footer__nav-1"> <ul> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li> </ul> </nav> </div> <nav class="footer__nav-2"><ul> <li class="menu-item type-taxonomy object-category "><a href="/feedback.html">Контакты</a></li> <li class="menu-item type-taxonomy object-category "><a href="">Реклама</a></li> <li class="menu-item type-taxonomy object-category "><a href="">О сайте</a></li> </ul></nav> <div class="footer__counters"> </div> <div class="footer__note"></div> </footer> </div> </div> <script type='text/javascript' src='https://radiobud.ru/wp-content/themes/radiobud.ru/js/scripts.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1","visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0421\u043a\u0440\u044b\u0442\u044c","width":"Auto"} ; /* ]]> */ </script> <script type='text/javascript' src='https://radiobud.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://radiobud.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script> </body> </html>