разница, как заполнять для SEO, как правильно прописать в WordPress
Атрибут Alt – это описание изображения в теге <img> в виде текста, представляющее собой альтернативный источник информации для пользователей, у которых в браузере отключено отображение картинок на странице. Текст атрибута появляется в том месте, где должно было быть изображение, которое не удалось загрузить. Также данный атрибут считывается роботами поисковых систем в процессе индексации страницы.
Атрибут title – это текст подсказки в теге <img>, предоставляющий пользователю дополнительную информацию об изображении. Текст картинки отобразится, если пользователь наведет на нее курсор мыши и задержит на несколько секунд.
Зачем нужны?
Изображение нормально загрузится на странице даже с пустыми атрибутами alt и title. Но вы не реализуете их возможности для более эффективного SEO продвижения самой картинки. Дело в том, что поисковые системы способны анализировать уникальность изображений, но вот распознавать какой тематике они посвящены еще полноценно не могут.
Вдобавок, у поисковиков Google и Яндекс есть сервисы «Картинки», через которые пользователи тоже могут отыскать ваше изображение – то есть это дополнительный источник трафика. Вот почему следует оптимизировать описания для графических изображений.
Вообще важность альтернативного текста, содержащегося в атрибуте Alt, трудно переоценить. Здесь вкратце описывается суть картинки, то есть что на ней изображено. Если у пользователя слабое интернет-соединение и отключен показ картинок, то именно этот текст показывается вместо графики.
Благодаря alt пользователи понимают, что находится на странице. Важно и то, что данный атрибут помогает роботам понять, что изображено на картинке.
Важно! У Яндекса и Google атрибут Alt выступает в роли одного из факторов ранжирования в поиске по картинкам.
То есть он отлично индексируется роботами поисковых систем и применяется для идентификации содержимого изображений. Это способствует увеличению релевантности страницы и привлечению дополнительных посетителей из поиска по картинкам.
Кроме важной роли для SEO тег alt помогает в веб-серфинге слабо видящим или пользователям вовсе без зрения. Специальные программы для чтения текста с экрана распознают и зачитывают информацию, написанную в данном поле.
Поэтому всякий раз, когда вебмастер пренебрегает заполнением атрибута alt, он лишается возможности добавить своему ресурсу дополнительный рейтинг и привлечь больше трафика.
Title для изображений в свою очередь помогает повысить конверсию, особенно коммерческим сайтам, если вставить в него призыв, мотивирующий пользователя осуществить целевое действие. К примеру: «закажите наши услуги со скидкой 20%».
Но title изображения виден только пользователям, сидящим с компьютеров. И если вы хотите донести до пользователей важную информацию, не делайте это в поле title. Рекомендуется разместить ее внутри контента, как обычный текст. А нерелевантный тайтл лучше и вовсе не добавлять.
Как отображаются в коде и на сайте
Когда браузер не подгружает картинки на странице, показывается описание изображения alt:
В коде атрибут alt задается так:
<img border="0" alt="[альтернативное описание]" src="izobrazhenie.jpg">На сайте тег title отображается следующим образом:
В коде title к картинке задается так:
<img border="0" alt="[альтернативное описание]" title="[дополнительный текст]" src=" izobrazhenie.jpg">Но если картинка будет использоваться в качестве ссылки, Яндекс советует вставлять title в ссылку:
<a href="link.html" title="[дополнительный текст]"><img border="0" alt="[альтернативный текст]" src="izobrazhenie.jpg"></a>Как влияют на SEO
В 2014 году Андрей Левчук провел
Глава 5 Установка значений атрибутов / Habr
Оглавление5 Установка значений атрибутов
В этой главе мы объясним, как можем установить (или изменить) значения атрибутов в разметке.
5.1 Установка значения любого атрибута
Скажем, наш сайт публикует информационный бюллетень, и мы хотим, чтобы пользователи могли подписаться на него, поэтому создаем шаблон /WEB-INF/templates/subscribe.html с формой:
<form action="subscribe.html">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscribe!" />
</fieldset>
</form>Как и в случае с Thymeleaf, этот шаблон начинается, скорее, как статический прототип, чем шаблон для веб-приложения. Во-первых, атрибут действия в нашей форме статически связывается с самим файлом шаблона, так что нет места для полезной перезаписи URL. Во-вторых, атрибут value в кнопке submit позволяет отображать текст на английском языке, но мы хотели бы, чтобы он был интернационализирован.
<form action="subscribe.html" th:attr="action=@{/subscribe}">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
</fieldset>
</form>Концепция довольно проста: th:attr принимает выражение, которое выполняет и присваивает атрибуту полученное значение. Создав соответствующие файлы контроллеров и сообщений, результатом обработки файла будет:
<form action="/gtvg/subscribe">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="¡Suscríbe!"/>
</fieldset>
</form> Помимо новых значений атрибутов вы также можете увидеть, что имя контекста приложения автоматически было добавлено в базу URL в /gtvg/subscribe, как описано в предыдущей главе.
Но что, если бы мы хотели установить более одного атрибута за раз? XML-правила не позволяют вам устанавливать атрибут дважды в теге, поэтому th:attr возьмет список назначений, разделенных запятыми, например:
<img src="../../images/gtvglogo.png"
th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />Учитывая необходимые файлы сообщений, это будет выводить:
<img src="/gtgv/images/gtvglogo.png" title="Logo de Good Thymes" alt="Logo de Good Thymes" />5.2 Установка значения для определенных атрибутов
К настоящему моменту вы могли бы подумать, что что-то вроде:
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>… довольно некрасивый кусок разметки. Указание назначения внутри значения атрибута может быть очень практичным, но это не самый элегантный способ создания шаблонов, если вы должны делать это все время.
Например, чтобы установить атрибут value, используйте значение th:value:
<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>Это выглядит намного лучше! Давайте попробуем сделать то же самое с атрибутом action в теге form:
<form action="subscribe.html" th:action="@{/subscribe}">И помните ли вы эти th:href, которые мы помещали в наш home.html раньше? Это точно такие же атрибуты:
<li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li> Таких атрибутов достаточно много, каждый из которых нацелен на определенный атрибут HTML5:
th:abbr |
th:accept |
th:accept-charset |
th:accesskey |
th:action |
th:align |
th:alt |
th:archive |
th:audio |
th:autocomplete |
th:axis |
th:background |
th:bgcolor |
th:border |
th:cellpadding |
th:cellspacing |
th:challenge |
th:charset |
th:cite |
th:class |
th:classid |
th:codebase |
th:codetype |
th:cols |
th:colspan |
th:compact |
th:content |
th:contenteditable |
th:contextmenu |
th:data |
th:datetime |
th:dir |
th:draggable |
th:dropzone |
th:enctype |
th:for |
th:form |
th:formaction |
th:formenctype |
th:formmethod |
th:formtarget |
th:fragment |
th:frame |
th:frameborder |
th:headers |
th:height |
th:high |
th:href |
th:hreflang |
th:hspace |
th:http-equiv |
th:icon |
th:id |
th:inline |
th:keytype |
th:kind |
th:label |
th:lang |
th:list |
th:longdesc |
th:low |
th:manifest |
th:marginheight |
th:marginwidth |
th:max |
th:maxlength |
th:media |
th:method |
th:min |
th:name |
th:onabort |
th:onafterprint |
th:onbeforeprint |
th:onbeforeunload |
th:onblur |
th:oncanplay |
th:oncanplaythrough |
th:onchange |
th:onclick |
th:oncontextmenu |
th:ondblclick |
th:ondrag |
th:ondragend |
th:ondragenter |
th:ondragleave |
th:ondragover |
th:ondragstart |
th:ondrop |
th:ondurationchange |
th:onemptied |
th:onended |
th:onerror |
th:onfocus |
th:onformchange |
th:onforminput |
th:onhashchange |
th:oninput |
th:oninvalid |
th:onkeydown |
th:onkeypress |
th:onkeyup |
th:onload |
th:onloadeddata |
th:onloadedmetadata |
th:onloadstart |
th:onmessage |
th:onmousedown |
th:onmousemove |
th:onmouseout |
th:onmouseover |
th:onmouseup |
th:onmousewheel |
th:onoffline |
th:ononline |
th:onpause |
th:onplay |
th:onplaying |
th:onpopstate |
th:onprogress |
th:onratechange |
th:onreadystatechange |
th:onredo |
th:onreset |
th:onresize |
th:onscroll |
th:onseeked |
th:onseeking |
th:onselect |
th:onshow |
th:onstalled |
th:onstorage |
th:onsubmit |
th:onsuspend |
th:ontimeupdate |
th:onundo |
th:onunload |
th:onvolumechange |
th:onwaiting |
th:optimum |
th:pattern |
th:placeholder |
th:poster |
th:preload |
th:radiogroup |
th:rel |
th:rev |
th:rows |
th:rowspan |
th:rules |
th:sandbox |
th:scheme |
th:scope |
th:scrolling |
th:size |
th:sizes |
th:span |
th:spellcheck |
th:src |
th:srclang |
th:standby |
th:start |
th:step |
th:style |
th:summary |
th:tabindex |
th:target |
th:title |
th:type |
th:usemap |
th:value |
th:valuetype |
th:vspace |
th:width |
th:wrap |
th:xmlbase |
th:xmllang |
th:xmlspace |
5.3 Установка нескольких значений за раз
Есть два довольно специальных атрибута, называемых th:alt-title и th:lang-xmllang, которые могут использоваться для одновременного задания двух атрибутов в одно и то же время. В частности:
th:alt-title будет задано значение alt и title.
th:lang-xmllang будет устанавливать lang и xml:lang
Для нашей домашней страницы GTVG это позволит нам заменить это:
<img src="../../images/gtvglogo.png"
th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />… или это, что эквивалентно:
<img src="../../images/gtvglogo.png"
th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />… на это:
<img src="../../images/gtvglogo.png"
th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />5.4 Добавить до- и -после
Thymeleaf также предлагает атрибуты th:attrappend и th:attrprepend, которые добавляют (суффикс) или добавляют (префикс) результат к существующим значениям атрибутов.
Например, вы можете захотеть сохранить имя добавляемого класса CSS для одной из ваших кнопок в переменной контекста, поскольку конкретный класс CSS, который будет использоваться, будет зависеть от того, что пользователь сделал до того:
<input type="button" value="Do it!" th:attrappend="class=${' ' + cssStyle}" />Если вы обрабатываете этот шаблон с переменной cssStyle, установленной в «warning», вы получите:
<input type="button" value="Do it!" />В Standard Dialect есть также два специальных атрибута добавления: атрибуты th:classappend и th:styleappend, которые используются для добавления класса CSS или фрагмента стиля к элементу без перезаписывания существующих:
<tr th:each="prod : ${prods}" th:classappend="${prodStat.odd}? 'odd'">(Не беспокойтесь о значении th:each. Это атрибут итерации, и мы поговорим об этом позже).
5.5 Булевые аттрибуты с фиксированным значением
HTML имеет концепцию логических атрибутов, которые активируются только, если их значение «true». В XHTML эти атрибуты принимают только одно значение, которым и являются.
Например, проверьте:
<input type="checkbox" name="option2" checked /> <!-- HTML -->
<input type="checkbox" name="option1" checked="checked" /> <!-- XHTML -->Standard Dialect включает в себя атрибуты, которые позволяют вам устанавливать эти атрибуты по условию, так что если его значение равно «true», атрибут будет установлен в его фиксированное значение, а если он будет равен «false», атрибут не будет установлен:
<input type="checkbox" name="active" th:checked="${user.active}" />В Standard Dialect существуют следующие логические атрибуты с фиксированным значением:
th:async |
th:autofocus |
th:autoplay |
th:checked |
th:controls |
th:declare |
th:default |
th:defer |
th:disabled |
th:formnovalidate |
th:hidden |
th:ismap |
th:loop |
th:multiple |
th:novalidate |
th:nowrap |
th:open |
th:pubdate |
th:readonly |
th:required |
th:reversed |
th:scoped |
th:seamless |
th:selected |
5.6 Установка значения любого атрибута (процессор атрибутов по умолчанию)
Thymeleaf предлагает процессор атрибутов по умолчанию, который позволяет нам устанавливать значение любого атрибута, даже если для него не определен th:* конкретный процессор в Standard Dialect.
Что-то вроде этого:
<span th:whatever="${user.name}">...</span>Результатом будет:
<span whatever="John Apricot">...</span>5.7 Поддержка аттрибутов, дружественных HTML5 и имен элементов
Также можно использовать совершенно другой синтаксис для применения процессоров к вашим шаблонам более удобным для HTML5 способом.
<table>
<tr data-th-each="user : ${users}">
<td data-th-text="${user.login}">...</td>
<td data-th-text="${user.name}">...</td>
</tr>
</table>Синтаксис data-{prefix}-{name} является стандартным способом записи пользовательских атрибутов в HTML5, не требуя от разработчиков использования namespaced, таких как th:*. Thymeleaf делает этот синтаксис автоматически доступным для всех ваших диалектов (не только для Standard).
Существует также синтаксис для указания пользовательских тегов: {prefix}-{name}, который следует спецификации W3C Custom Elements (часть большой спецификации W3C Web Components). Это можно использовать, например, для элемента th:block (или th-block), который будет объяснен в следующем разделе.
Важно: этот синтаксис является дополнением к namespaced th:*, он не заменяет его. Нет никакого намерения вообще отказаться от namespaced синтаксиса в будущем.
НОУ ИНТУИТ | Лекция | HTML-формы
Аннотация: В этой лекции разбирается возможность взаимодействия читателя HTML-страниц с сервером Web-узла. Подробно описывается подмножество HTML, которое носит название HTML-формы.
HTML-формы
Формы были созданы и используются в WWW для получения отклика пользователя на предоставленную информацию и сбора данных о пользователе. После заполнения пользователем формы и запуска процесса ее обработки, информация из нее попадает к программе, работающей на сервере. Простота использования тега <MAILTO:> в формах позволяет даже владельцам небольших страниц получать отклик от своих читателей. Для обработки большого количества откликов используются программы, поддерживающие Common Gateway Interface (CGI) и расположенные на сервере, в адрес которого поступают отклики. Таким образом пользователь может интерактивно взаимодействовать с Web-сервером через Internet.
Задание формы — элемент FORM
Элемент FORM обозначает документ как форму и определяет границы использования других тегов, размещаемых в форме. Тег <FORM> определяется последовательностью тегов <INPUT> , размещенных внутри пары <FORM> и </FORM>. В форме используется как метод ( method ), так и действие ( action ) для описания обработки данных, вводимых пользователем в форму. Метод ( GET или POST ) определяет, как должны обрабатываться входные данные из формы, а действие указывает на URI (Uniform Resource Identifier) программы, ответственной за обработку этих данных.
<FORM METHOD=post ACTION=mailto:[email protected]>
Определение элементов управления формы — тег <INPUT>
Данный тег используют для определения области внутри формы, куда вводятся данные. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, опция, изображение или кнопка. Вид поля ввода определяется значением атрибута TYPE.
Атрибут TYPE=text
Когда пользователю необходимо ввести небольшое количество текста (одну или несколько строк), используется тег <INPUT> , и атрибут TYPE устанавливается в значение text. Это значение принято по умолчанию и указывать его необязательно. Кроме того, задается атрибут NAME для определения наименования переменной поля.
Ваше имя <INPUT NAME=Name SIZE=35>
Имеется еще три дополнительных атрибута, которые можно использовать. Первый называется MAXLENGTH, он ограничивает число символов, вводимых пользователем в текущее поле. По умолчанию данное число не ограничено. Вторым атрибутом является SIZE, определяющий размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. Если значение MAXLENGTH больше, чем SIZE, браузер будет прокручивать данные в окне. Последним из дополнительных атрибутов является атрибут VALUE, обеспечивающий начальное значение поля ввода.
Атрибут TYPE=checkbox
Для создания независимых флагов в формах HTML используется тег <INPUT> со значением атрибута TYPE=checkbox. В зависимости от содержания формы пользователь может отметить несколько флагов. Когда форма использует тег <INPUT> со значением атрибута CHECKBOX, в нем должны присутствовать и атрибуты NAME, и VALUE. Атрибут NAME указывает на наименование данного поля (флага) ввода. В атрибуте VALUE будет содержаться значение поля.
<BR>Россия<INPUT NAME="Страна" TYPE=checkbox VALUE="Россия"> Страны СНГ<INPUT NAME="Страна" TYPE=checkbox VALUE="СНГ">
В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег <INPUT> должен содержать атрибут CHECKED.
Атрибут TYPE=radio
В некоторых случаях требуется организовать выбор одного из нескольких возможных значений. Для создания формы ввода при выборе пользователем одного значения из нескольких возможных необходимо использовать тег <INPUT> с атрибутом TYPE=radio. Когда в форме применяется данный атрибут, в теге <INPUT> должны быть указаны атрибуты NAME и VALUE. Атрибут NAME указывает наименование соответствующего поля (кнопки). Атрибут VALUE содержит значение поля.
<BR>Пол мужской<INPUT NAME="Пол" TYPE=radio VALUE="Мужской"> Пол женский<INPUT NAME="Пол" TYPE=radio VALUE="Женский">
Атрибут TYPE=image
В зависимости от содержимого формы может случиться так, что пользователю потребуется щелкнуть мышью на изображении, чтобы завершить работу с формой. Для этого программисты используют тег <INPUT> с атрибутом TYPE=image. Когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он «обрабатывает» введенную в форму информацию. Когда форма использует атрибут image, тег <INPUT> должен содержать также атрибуты NAME и SRC. NAME указывает наименование поля ввода формы. Атрибут SRC содержит URI файла — источника изображения. Атрибут ALIGN является дополнительным и используется аналогично тому же атрибуту тега <IMG>.
<BR>Выберите точку<INPUT TYPE=image NAME=point SRC=image.gif>
Атрибут TYPE=password
Если в форме требуется организовать ввод пароля, то атрибут TYPE можно установить в значение password ( TYPE=password ). Используя данный тип, можно организовать ввод пароля без вывода на экран составляющих его символов. При этом следует помнить, что введенные данные передаются по незащищенным каналам связи и могут быть перехвачены.
<BR>Подпись<INPUT NAME=login>Пароль <INPUT TYPE=password NAME="Слово">
Атрибут TYPE=reset
Когда пользователь заполняет форму, ему может потребоваться начать все сначала. На такой случай существует кнопка Reset, по которой пользователь может щелкнуть мышью, чтобы вернуться к первоначальным значениям полей. Когда пользователь выбирает данную кнопку, форма восстанавливает первоначальные значения всех элементов, в которых присутствует атрибут TYPE=reset. Для создания кнопки Reset используется тег <INPUT> с атрибутом TYPE=reset. Браузер в свою очередь будет выводить изображение данной кнопки. Если в форме используется атрибут reset, тег <INPUT> может дополнительно содержать атрибут VALUE. Данный атрибут определяет надпись на изображении кнопки.
<INPUT TYPE=reset VALUE="Очистить форму">
Атрибут TYPE=submit
Используя форму HTML для ввода информации от пользователя, необходимо обеспечить пользователю возможность завершить ввод данных. Для этого используется тег <INPUT> с атрибутом TYPE=submit. Браузер, в свою очередь, выводит данный элемент, как кнопку, по которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Когда в форме используется тег <INPUT> с атрибутом submit, данный элемент может содержать два дополнительных атрибута: NAME и VALUE. Атрибут NAME хранит название переменной поля в вашей форме. Атрибут VALUE — определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов.
<BR><INPUT TYPE=submit VALUE="Отправить сообщение">
Скрытые поля. Добавление в тег INPUT атрибута TYPE=hidden позволит включить в отправляемую форму значения атрибутов NAME и VALUE, которые пользователь изменить не может. Такие метки полезны при наличии нескольких форм для дальнейшей обработки данных.
Основы работы с HTML — Ответы на тесты Intuit.ru
Ответы на курс: Основы работы с HTML
Выберите самый мелкий заголовок из представленных ниже:
| <h3>Заголовок</h3> | |
| ✓ | <H5>Заголовок</H5> |
| <h2>Заголовок</h2> | |
| <h4>Заголовок</h4> |
Сколько пустых строк введется между словами «hello» и «world» в коде <p>hello</p><p>world</p>?
Какой тег определяет тело документа HTML?
Какой тег вставляет горизонтальную линейку?
Какой тег определяет комментарий?
Какой тег определяет документ HTML?
Укажите вариант корректной установки цвета фона страницы?
| <body cl=»yellow»> | |
| <head bgcolor=»yellow»> | |
| ✓ | <body bgcolor=»yellow»> |
| <body color=»yellow»> |
Как добавить всплывающую подсказку для элемента INS?
| <INS datetime=»1994-11-05T08:15:30-05:00″ style=»text»>любой текст</INS> | |
| ✓ | <INS datetime=»1994-11-05T08:15:30-05:00″ title=»text»>любой текст</INS> |
| <INS datetime=»1994-11-05T08:15:30-05:00″ cite=»text»>любой текст</INS> |
В каком примере текст будет помечен как образец?
| <STRONG>это образец</STRONG> | |
| ✓ | <SAMP>это образец</SAMP> |
| <VAR>это образец</VAR> |
В каком примере обозначен акроним?
| ✓ | <ACRONYM title=»и так далее»>и тд.</ACRONYM> |
| <ABBR title=»Abbreviation»>abbr.</ABBR> | |
| <CITE title=»World Wide Web»>WWW</CITE> |
Как выделить переменную в тексте кода?
| <P><KBD>var a;</KBD> это переменная | |
| <P><CITE>var a;</CITE> это переменная | |
| <P><ABBR>var a;</ABBR> это переменная | |
| ✓ | <P><VAR>var a;</VAR> это переменная |
В каком примере описан подиндекс?
| ✓ | <SUB>этот текст отображен подиндексом</SUB> |
| <SUBINDEX>этот текст отображен надиндексом</SUBINDEX> | |
| <SUP>этот текст отображен подиндексом</SUP> |
Укажите вариант, в котором значение атрибута rows соответствует его значению по умолчанию:
| <FRAMESET rows=»35%, 65%»> | |
| ✓ | <FRAMESET rows=»100%»> |
| <FRAMESET rows=»25%, 75%»> |
Какие разделы содержат набор фреймов?
| <BODY> | |
| ✓ | <FRAMESET> |
| <TITLE> |
Определите корректно описанную последовательность вложенности элементов:
| <BODY><FRAME></FRAME></BODY> | |
| <BODY><FRAMESET></FRAMESET></BODY> | |
| ✓ | <FRAMESET><FRAME></FRAMESET> |
В каком элементе находится базовый URL c высшим приоритетом?
В каком примере определяется гиперссылка и одновременно создается именованный якорь?
| ✓ | <A name=»first» href=»http://www.intuit.ru/index.html»>…</A> |
| <A type=»first» href=»http://www.intuit.ru/index.html»>…</A> | |
| <A rev=»first» href=»http://www.intuit.ru/index.html»>…</A> |
Укажите вариант, в котором полоса прокрутки будет отображаться всегда:
| <FRAME scrolling=»no»> | |
| ✓ | <FRAME scrolling=»yes»> |
| <FRAME scrolling=»auto»> |
В каком примере определена таблица фреймов с двумя строками и тремя столбцами?
| <FRAMESET rows=»25%,65%,15%» cols=»50%,50%»> | |
| <FRAMESET rows=»50%,50%» cols=»50%,50%»> | |
| ✓ | <FRAMESET rows=»25%,75%» cols=»33%,34%,33%»> |
Какой элемент позволяет описать базовый URL?
Выберите корректно описанные гиперссылки:
| ✓ | <A href=»http://www.intuit.ru/help»> |
| <HYPERLINK href=»http://www.intuit.ru/course.html#first»> | |
| ✓ | <A href=»http://www.intuit.ru»> |
Внутри какого элемента может присутствовать тег А?
| ✓ | <BODY> |
| <HEAD> | |
| <TITLE> |
В какой таблице ширина промежутков между ячейками составит 20 пикселей?
| ✓ | <table cellspacing="20">
<tr >
<td>text</td>
<td>text</td>
</tr>
</table> |
<table gridspacing="20">
<tr >
<td>text</td>
<td>text</td>
</tr>
</table> | |
<table cellpadding="20">
<tr >
<td>text</td>
<td>text</td>
</tr>
</table> |
Какой из приведенных фрагментов кода выводит таблицу с тремя строками?
<table> <tr> <td></td> <td></td> <td></td> </tr> </table> | |
<table> <tr> <td rowspan=3> </td> </tr> </table> | |
<table> <tr> <td colspan=3> </td> </tr> </table> | |
| ✓ | <table> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> |
В какой таблице текст выравнен по правому краю ячеек?
<table align="left">
<tr align="right">
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table> | |
| ✓ | <table align="left">
<tr align="right">
<td align="right">text</td>
<td align="right">text</td>
</tr>
<tr align="left">
<td align="right">text</td>
<td align="right">text</td>
</tr>
</table> |
<table align="center">
<tr align="left">
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table> |
В каких случаях атрибут выравнивания align имеет более высокий приоритет?
| <TABLE align=»left»> | |
| <COL align=»left»> | |
| ✓ | <TH align=»left»> |
Что определяет атрибут BORDER у элемента разметки TABLE?
| вид границы | |
| ✓ | ширину границы |
| ширину ячейки | |
| расстояние между ячейками | |
| расстояние от содержания до границы ячейки |
В каких примерах корректно описан элемент TR?
| <TR><TD>ячейка1</TR></TD> | |
| ✓ | <TR><TH>ячейка1</TH><TH>ячейка2</TH></TR> |
| ✓ | <TR><TD>ячейка1</TD></TR> |
Что определяет атрибут BACKGROUND у элемента разметки TABLE?
| ширину ячейки | |
| вид границы | |
| ✓ | фоновое изображение |
| расстояние от содержания до границы ячейки | |
| расстояние между ячейками |
С какого элемента начинается список определений?
В каких примерах элементы неупорядоченного списка, маркируются пустыми кружками?
| <OL type=»circle»> | |
| <DL type=»circle»> | |
| ✓ | <UL type=»circle»> |
Как устанавливается номер текущего элемента списка?
| <LI value=»i»> | |
| ✓ | <LI value=»1″> |
| ✓ | <LI value=»10″> |
В каком примере неупорядоченный список вложен в упорядоченный список?
<UL> <LI> А <LI> Б <OL> <LI> В <LI> Г </OL> </UL> | |
<DL> <DT> А <DD> Б <UL> <LI> В <LI> Г </UL> </DL> | |
| ✓ | <OL> <LI> А <LI> Б <UL> <LI> В <LI> Г </UL> </OL> |
Какой из приведенных примеров нумерует список заглавнымии римскими цифрами?
| <UL type=»i»> | |
| ✓ | <OL type=»I»> |
| <DL type=»i»> |
В каких примерах список определений использован корректно?
| ✓ | <DL> <DT> А <DD> Б <UL> <LI> ...первый элемент списка... <LI> ...второй элемент списка... </UL> </DL> |
<DL> <DT> А</DT> <DD> Б</DD> <DL> <DT> В</DT> <DD> Г</DD> </DL> </DL> | |
| ✓ | <DL> <DT>Hacker</DT> <DD>a clever programmer</DD> </DL> |
Для выбора файла можно использовать код:
<form> Выбрать файл: <input file="checked" size="80"> </form> | |
<form> Выбрать файл: <input type="url" size="80"> </form> | |
| ✓ | <form> Выбрать файл: <input type="file" size="80"> </form> |
Значение защищенного поля (пароля) тега input задается:
| значением password атрибута user | |
| ✓ | значением password атрибута type |
| атрибутом password |
Отметьте верное утверждение:
| ✓ | значение текстового поля тега input по умолчанию задается атрибутом value |
| ширина текстового поля тега input задается атрибутом length | |
| минимальная ширина текстового поля тега input задается атрибутом minlength |
Отметьте верные утверждения:
| ✓ | максимальное количество символов разрешенных в тексте input задается атрибутом maxlength |
| ширина текстового поля тега input задается атрибутом width | |
| ✓ | ширина текстового поля тега input задается атрибутом size |
Отметьте верное
| код textarea rows=»7″ cols=»30″ задает 6 видимых строк и 29 столбцов | |
| ✓ | для описания текстовой многострочной области используется тег textarea |
| ✓ | количество видимых строк и столбцов текстовой многострочной области задаются атрибутами rows и cols |
Как определить ссылку на полное описание изображения?
| <A src=»sitemap.gif» longdesc=»http://www.intuit.ru/index.html»> | |
| <APPLET src=»sitemap.gif» longdesc=»http://www.intuit.ru/index.html»> | |
| <IFRAME src=»sitemap.gif» longdesc=»http://www.intuit.ru/index.html»> | |
| ✓ | <IMG src=»sitemap.gif» longdesc=»http://www.intuit.ru/index.html»> |
Укажите корректные примеры использования карт изображений:
| ✓ | <AREA href=»search.html» alt=»Search» shape=»rect» coords=»184,0,276,28″> |
| ✓ | <AREA href=»guide.html» alt=»Access Guide» shape=»rect» coords=»0,0,118,28″> |
| ✓ | <AREA href=»shortcut.html» alt=»Go» shape=»circle» coords=»184,200,60″> |
| <AREA href=»top10.html» alt=»Top Ten» shape=»polygon» coords=»276,0,276,28,100,200,50,50,276,0″> |
Какой тег описывает клиентские карты изображений?
| <PARAM> | |
| ✓ | <MAP> |
| <OBJECT> |
Какой атрибут тега IMG определяет размещение ресурса изображения?
Как прижать объект к левому краю, чтобы последующий текст обтекал объект справа?
| <IMG align=»justify» | |
| ✓ | <IMG align=»left»> |
| <IMG align=»center» |
В каком примере описан документ как набор фреймов?
| <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> | |
| ✓ | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> |
| <!DOCTYPE HTML PUBLIC «-//W3C//ENTITIES Symbols//EN//HTML» «http://www.w3.org/TR/html4/HTMLsymbol.ent»> |
Выберите самый крупный заголовок:
| <h4>Заголовок</h4> | |
| ✓ | <h2>Заголовок</h2> |
| <h3>Заголовок</h3> |
Укажите абсолютный URL:
| ✓ | <A href=»http://www.intuit.ru/help/index.html#first»> |
| ✓ | <A href=»http://www.intuit.ru»> |
<LINK href=»http://www.intuit.ru/course.html»> |
С помощью какого элемента можно однократно установить целевой фрейм для нескольких ссылок?
| ✓ | <BASE> |
| <FRAME> | |
| <LINK> |
Введение в HTML — Ответы на тесты Intuit.ru
Ответы на курс: Введение в HTML
В каких случаях необходимо применение CER (Character Entity Reference)?
| для описания символов, отсутствующих в кодировке US ASCII | |
| в случае необходимости указания знаков «<» и «>« | |
| ✓ | для описания служебных символов языка разметки HTML, которые могут быть неверно обработаны браузером |
Что означает DTD (Document Type Definition)?
<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.0 Transitional//EN">
| ✓ | указывает, что документ соответствует стандарту HTML 4.0, используемый язык английский |
| говорит о необходимости привести документ к стандарту HTML 4.0, используя английский язык | |
| указание браузеру соблюдать стандарт HTML 4.0 при отображении документа |
Найдите неверные фрагменты кода:
| ✓ | </html>
</body>
<center>
<ahref="doc.htm">Гиперссылка</a>
</center>
</body>
</html>
|
| ✓ | <html>
<body>
<center>
<a href="doc.htm">Гиперссылка<a>
</center>
<body>
<html>
|
<html>
<body>
<center>
<a href="doc.htm">Гиперссылка</a>
</center>
</body>
</html>
|
Какой тэг служит для размещения кода JavaScript?
Найдите правильный способ привязки внешней таблицы стилей к документу.
| <LINK HREF=stylesheet href=»../css/style.css» TYPE=»text/css»> | |
| ✓ | <LINK REL=stylesheet href=»../css/style.css» TYPE=»text/css»> |
| <LINK REL=stylesheet rel=»../css/style.css» TYPE=»text/css»> |
Какой тег служит для именования документа в World Wide Web?
Какой тэг определяет документ HTML?
Какой из приведенных тегов позволяет создавать ненумерованные списки?
Какой URL будет сформирован для ссылки в приведенном фрагменте?
<BASE HREF="http://intuit.ru/"> <BODY> <A HREF="doc1.html">Документ 1</A> </BODY>
| правильный URL не может быть сформирован | |
| ✓ | http://intuit.ru/doc1.html |
| http://intuit.ru/docs/doc1.html |
Какой атрибут тэга BODY позволяет задать цвет фона страницы?
| ✓ | bgcolor |
| color | |
| set | |
| background-color |
Какие из приведенных тегов являются тегами управления разметкой?
| ✓ | <h2> |
| в приведенном списке таких тегов нет | |
| <B> | |
| ✓ | <BR> |
Какой из приведенных тегов позволяет создавать нумерованные списки?
Какие из приведенных тегов являются тегами, управляющими формой отображения текста?
| <Q> | |
| ✓ | <I> |
| ✓ | <SUP> |
| <EM> |
Имеется сервер http://intuit.ru, на котором находятся два документа:
http://intuit.ru/intuit.html и http://intuit.ru/intuit/detail.html.
Какая из приведенных форм записи ссылки из первого документа на второй документ является верной?
| <A HREF=»detail.html»>Подробнее об Университете </A> | |
| <BASE HREF=»http://intuit.ru»> | |
| ✓ | <A HREF=»intuit/detail.html#det2″>Подробнее об Университете </A> |
Какой атрибут тега <IMG> задает горизонтальное расстояние
между вертикальной границей страницы и изображением?
Какой из приведенных тегов описывает активное изображение?
| <img src=»image.jpg» width=100 height=100 usemap> | |
| <img src=»image.jpg» width=100 height=100> | |
| ✓ | <img src=»image.jpg» width=100 height=100 usemap=»#map1″> |
Укажите неправильный способ определения карты изображения:
| <MAP NAME=»map»> <AREA SHAPE=»rect» COORDS=»0,0,100,100″ HREF=»http://www.intuit.ru/help/index.html»></MAP> | |
| <MAP NAME=»map»><AREA SHAPE=»circle» COORDS=»100,0,200″ HREF=»http://www.intuit.ru/shop/index.html»></MAP> | |
| ✓ | <AREA COORDS=»100,0,200,100″ HREF=»http://www.intuit.ru/shop/index.html»> |
Выберите корректный пример вставки изображения в HTML-документ.
| <INPUT TYPE=image> | |
| <BODY BACKGROUNDIMAGE=»1.gif» alt=»image»> | |
| <A HREF=»1.gif» alt=»image»> | |
| ✓ | <IMG SRC=»1.gif» alt=»image»> |
С помощью какого элемента можно создавать выпадающие списки в формах?
| TEXTAREA | |
| INPUT | |
| ✓ | SELECT |
Какой из приведенных фрагментов кода создает переключатель?
| <input type=radiobutton name=a1 value=1><input type=radiobutton name=a1 value=2> | |
| ✓ | <input type=radio name=a1 value=1><input type=radio name=a1 value=2> |
| <input type=checkbox name=a1 value=1><input type=checkbox name=a1 value=2><input type=text name=a1 value=2> |
С помощью какого контейнера задается форма?
Какой из приведенных тегов используется при создании элементов с возможностью выбора нескольких вариантов одновременно?
| <INPUT TYPE=RADIO> | |
| <INPUT TYPE=RADIOBOX> | |
| <INPUT TYPE=TEXTAREA> | |
| <INPUT TYPE=OPTION> | |
| ✓ | <INPUT TYPE=CHECKBOX> |
В каких примерах внешний FRAMESET делит доступное пространство на три столбца, а внутренний FRAMESET делит второй фрейм на два ряда неравной высоты?
| <FRAMESET cols=»45%, 55%»>…<FRAMESET rows=»10%, 20%»>…</FRAMESET>…</FRAMESET> | |
| ✓ | <FRAMESET cols=»33%, 33%, 34%»>…<FRAMESET rows=»30%, 20%»>…</FRAMESET>…</FRAMESET> |
| <FRAMESET cols=»50%, 50%»>…<FRAMESET rows=»40%, 50%»>…</FRAMESET>…</FRAMESET> | |
| ✓ | <FRAMESET cols=»33%, 33%, 34%»>…<FRAMESET rows=»40%, 50%»>…</FRAMESET>…</FRAMESET> |
Какой атрибут определяет имя фрейма, в котором будет открыт документ?
| alt | |
| style | |
| title | |
| ✓ | target |
При задании какого атрибута браузер будет рисовать разделитель между этим фреймом и каждым смежным фреймом?
| ✓ | <FRAME frameborder=»1″> |
| <FRAME frameborder=»0″> | |
| <FRAME border=»1″> |
В каком примере второй столбец = 250 пикселов, первый = 25% и третий = 75% от оставшегося пространства?
| ✓ | <FRAMESET cols=»1*,250,3*»> |
| <FRAMESET cols=»25,250,3*»> | |
| <FRAMESET cols=»1*,250,75″> | |
| <FRAMESET cols=»25,250,75″> |
Укажите верный способ определения карты изображения:
| <AREA COORDS=»100,0,200,100″ HREF=»http://www.intuit.ru/shop/index.html»> | |
| ✓ | <MAP NAME=»map»><AREA SHAPE=»circle» COORDS=»100,0,200″ HREF=»http://www.intuit.ru/shop/index.html»></MAP> |
| ✓ | <MAP NAME=»map»> <AREA SHAPE=»rect» COORDS=»0,0,100,100″ HREF=»http://www.intuit.ru/help/index.html»></MAP> |
Какие из приведенных тегов неверно описывают активное изображение?
| ✓ | <img src=»image.jpg» width=100 height=100> |
| ✓ | <img src=»image.jpg» width=100 height=100 usemap> |
| <img src=»image.jpg» width=100 height=100 usemap=»#map1″> |
Какой пример кода определяет вывод горизонтальных фреймов?
| ✓ | <FRAMESET rows=»25%, 75%»> |
| <FRAMESET cols=»45%, 55%»> | |
| <FRAMESET cols=»50%, 50%»> | |
| ✓ | <FRAMESET rows=»15%, 85%»> |
Какой из приведенных тегов описывает тело классической модели документа?
| <HTML> | |
| ✓ | <BODY> |
| <BODY CONTENT> | |
| <HEAD> |
Проверочный тест HTML (основные понятия)
HTML проверочный тест Вариант 1
Задание № 1
Текст заключенный в теги <В> отобразится
1) Жирным шрифтом
2) Подчеркнутым
3) Курсивом
Задание № 2
Какое расширение нужно использовать для сохранения интернет-страницы, набранной в программе блокнот?
1) .doc 2) .gif 3) .php 4) .css 5) .html
Задание № 3
Какой тип списка вы видете перед собой?
элемент 1
элемент 2
элемент 3
1) Маркированный
2) Нумерованный
3) Список определений
Задание № 4
Атрибуты тега …
1) Нужно писать сразу после закрытия тега
2) Нужно писать в закрывающем теге
3) Можно использовать вместо самого тега
4) Изменяют и уточняют его действия
Задание № 5
Для форматирования текста в html обычно рекомендуют использовать …
1) тег
2) программу Microsoft Word
3) CSS стили
Задание № 6
Установите соответствие
1 <I>2 <В>
3 <font-size>
4 color
__ Текст, заключенный в эти теги будет отображен жирным
__ Определяет размер шрифта
__ Текст заключенный в эти теги будет отображен курсивом
__ Определяет цвет текста
Задание № 7
Что связывают между собой гиперссылки?
1) Теги
2) Атрибут и его значение
3) Веб-страницы
4) Теги и атрибуты
Задание № 8
Значение атрибутов тега заключается в …
1) скобки
2) кавычки
3) теги
4) атрибуты
Задание № 9
Какой тип списка определяет тег
1) Нумерованный
2) Маркированный
3) Список определений
HTML проверочный тест Вариант 2
Задание № 1
Установите соответствие
12
3
__ Определяет неупорядоченный список
__ Определяет упорядоченный список
__ Определяет элемент списка
Задание № 2
Текст заключенный в теги <U> отобразится
1) Курсивом 2) Подчеркнутым 3) Жирным шрифтом
Задание № 3
Укажите правильный формат задания атрибутов
1) <имя_атрибута имя_тега=»значение»>
2) <значение имя_атрибута=»имя_тега»>
3) <имя_тега значение=»имя_атрибута»>
4) <имя_тега имя_атрибута=»значение»>
Задание № 4
Как отобразится в браузере текст если мы в документе HTML его без каких либо тегов между тегами … .
1) Отобразится сплошной строкой с переносом в конце окна браузера
2) Отобразится так как мы его набрали с учетом всех пробелов
3) Отобразится так как мы его набрали с учетом всех переносов
4) Отобразится так как мы его набрали с учетом всех переносов и пробелов
Задание № 5
Укажите существующие виды списков?
1) Маркированные
2) Указательные
3) Списки определений
4) Нумерованные
5) Значительные
Задание № 6
Страницу html мы можем корректно отобразить с помощью …
1) текстового редактора
2) программы Microsoft Word
3) браузера
Задание № 7
Установите соответствие
12
3
4
5
__ Определяет горизонтальную линейку
__ Определяет параграф
__ Вставляет единичный перенос строки
__ Определяет основную часть или тело документа
__ Определяет документ HTML
Задание № 8
1) Таблицу по центру страницы
2) Текст находящийся в таблице по центру
3) Таблицу по правому краю страницы
4) Текст находящийся в таблице по правому краю
5) Таблицу по левому краю страницы
Задание № 9
Страница html создается с помощью …
1) любого текстового редактора
2) любой системы программирования
3) специальной системы программирования html
Ответы:
Вариант 1
1) Верный ответ (1 б.): 1;
5) Верный ответ (1 б.): 5;
6) Верный ответ (1 б.): 2;
7) Верный ответ (1 б.): 4;
8) Верный ответ (1 б.): 3;
10) Верные ответы (1 б.):
2; 3; 4; 1; 5;
12) Верный ответ (1 б.): 3;
16) Верный ответ (1 б.): 2;
17) Верный ответ (1 б.): 2;
Вариант 2
18) Верные ответы (1 б.):
2; 1; 3;
19) Верный ответ (1 б.): 1;
20) Верный ответ (1 б.): 4;
21) Верный ответ (1 б.): 1;
22) Верные ответы (1 б.): 1; 3; 4;
24) Верный ответ (1 б.): 3;
26) Верные ответы (1 б.):
5; 2; 3; 4; 1;
29) Верный ответ (1 б.): 1;
30) Верный ответ (1 б.): 1;
Значения атрибутов HTML — Как создать сайт
Типы значений у атрибутов HTML
Атрибуты HTMLЗначения атрибутов
Схема HTML-тега с атрибутом и значением, выглядит следующим образом:
Схема парного тега:
<имяТега атрибут="значение"> </имяТега>
Схема одиночного тега:
<имяТега атрибут="значение">
В статье Об атрибутах HTML, мы рассмотрели виды атрибутов, существующих в языке HTML. У разных атрибутов имеются определённые типы значений, давайте рассмотрим их:
- Значения атрибутов событий,
- Значения атрибутов форматирования,
- Значения атрибутов селекторов,
- Значения атрибута стиля,
- Значения атрибутов указания пути (адреса, URL),
- Значения атрибутов описания.
Значения атрибутов событий
В качестве значений атрибута события, выступает функция или JavaScript-код, их мы будем рассматривать при изучении языка программирования JavaScript и клиентской веб-технологии DOM.
Примеры, использования значений атрибутов событий:onclick="alert()" — в качестве значения, выступает встроенная функция JavaScript,onclick="myFunction()" — в качестве значения, выступает пользовательская функция JavaScript,onmouseover="document.getElementById('nameID').style.color='#008800';" — в качестве значения, выступает технология DOM.
Значения атрибутов форматирования
Вместо атрибутов форматирования и их значений, сейчас используют CSS-свойства. Однако если вам всё же захочется добавить в HTML-теги атрибуты форматирования, то вы можете это сделать.
Значения атрибутов форматирования, делятся на три вида:
а) Значение размера,
б) Значение цвета,
в) Ключевое слово.
а) В качестве значений размера выступают пиксели px или проценты %, более подробно об этом вы можете прочитать в статье Единицы измерения в HTML
Примеры использования значений размера атрибутов форматирования:height="100px" — высота элемента 100 пикселей,width="50%" — ширина элемента 50 процентов.
б) В качестве значений цвета могут выступать слова на английском языке (например red) или числа в шестнадцатеричном формате (например #ff0000), более подробно об этом вы можете прочитать в статье Цвета в HTML
Примеры использования значений цвета атрибутов форматирования:color="red" — красный цвет шрифта, задан английским словом,bgcolor="#ff0000" — красный цвет фона элемента, задан в шестнадцатеричном формате,bordercolor="green" — зелёный цвет рамки элемента, задан английским словом.
в) В качестве значений ключевого слова выступают слова которые уже встроены в язык HTML, например right, top, _blank и т.д.
Примеры использования значений ключевого слова, в атрибутах:align="right" — выравнивает элемент по правому краю,valign="bottom" — выравнивает элемент по нижнему краю,target="_blank" — открывает страницу в новом окне (не является атрибутом форматирования).
Значения атрибутов селекторов
В качестве значений атрибутов селекторов выступает любое слово которое можно набрать английскими буквами, более подробно об этом вы можете прочитать в статье Селекторы CSS
Примеры использования значений атрибутов селекторов:class="имяКласса" — значение имени селектора класса,id="имяУникальногоИдентификатора" — значение имени селектора уникального идентификатора.
Значение атрибута стиля
В качестве значения атрибута стиля выступает CSS-код, более подробно об этом вы можете прочитать в учебнике по языку CSS, в статье Внедрение атрибута style
Примеры использования значений атрибута style=" ":style="color: green;" — присвоить шрифту зелёный цвет green,style="font-family: Arial;" — присвоить шрифту имя Arial.
Значения атрибутов указания пути
В качестве значений атрибутов указания пути (адреса) выступает адрес сайта, страницы или файла, например:
http://site.ru — абсолютный путь,http://site.ru/stranitsa.html — абсолютный путь,
../stranitsa.html — относительный путь,/img/myPicture.html — относительный путь.
Более подробно об адресах в HTML, а также относительных и абсолютных путях можно прочитать в статье Адреса в HTML
Примеры использования значений атрибутов указания пути:href="http://site.ru" — ссылка на сайт,src="/img/myPicture.jpg" — ссылка на файл изображения.
Значения атрибутов описания
В качестве значений атрибутов описания выступает произвольный текст описывающий тот или иной элемент страницы.
Примеры использования значений атрибутов описания:alt="Это фотография моего кота" — описание изображения,title="Нажав на ссылку вы перейдёте на крутой сайт" — описание ссылки с помощью глобального атрибута title.
Читать далее: Шпаргалка по HTML
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 16 октября 2014