Знание html – HTML: основы для начинающих

Тесты на знание HTML, CSS, JavaScript, PHP, SQL

Вы здесь: Главная — Тесты

Теперь на сайте доступно тестирование на знание следующих тем: HTML, CSS, JavaScript, PHP, SQL.

Каждый тест состоит из 10-ти вопросов по определённой теме. Я старался в каждом вопросе затрагивать самые разнообразные области применения конкретного языка, чтобы максимально тщательно проверить Ваш уровень знаний.

Безусловно, все тесты бесплатные и пройти их может любой желающий.

Порядок прохождения теста:

1. Переходите по ссылке «Начать тестирование» у соответствующего теста.
2. Отвечаете на поставленные вопросы, выбрав единственный правильный вариант.
3. По завершению тестирования Вы увидите свой балл, количество ошибок, а также разбор каждого вопроса из теста.

Внимание! Вернуться к предыдущему вопросу не получится, поэтому прежде, чем отвечать, думайте.

Доступные на данный момент тесты

1. HTML

   • Всего тест прошло: 70160 человек
   • Средний балл: 2.84 из 5 баллов.

   Тест на знание основ HTML. От Вас потребуется знание основных HTML-тегов, а также грамотное их использование. Так же необходимо понимание особенностей стандарта XHTML 1.1.

   Начать тестирование

2. CSS

   • Всего тест прошло: 30277 человек
   • Средний балл: 3.37 из 5 баллов.

   Тест проверяет знания по основам CSS

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

   Начать тестирование

3. JavaScript

   • Всего тест прошло: 23545 человек
   • Средний балл: 3.3 из 5 баллов.

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

   Начать тестирование

4. PHP

   • Всего тест прошло: 32293 человека
   • Средний балл: 3.03 из 5 баллов.

   Данный тест проверяет Ваши знания по языку PHP. От Вас требуется знание основных конструкций PHP, работы с переменными, сессий, реализации редиректа и прочих стандартных вещей.
   Убедительная просьба: В тесте содержится много вопросов по типу: «Что выведет скрипт?». Большая просьба, не надо копировать его и проверять. Будьте честны перед самими собой.

   Начать тестирование

5. SQL

   • Всего тест прошло: 17574 человека
   • Средний балл: 3.29 из 5 баллов.

   Данный тест проверяет Ваши знания по языку запросов SQL. Вопросы затрагивают только самые базовые знания этого языка, без какого-либо углубления. От Вас потребуется знание самых основных SQL-запросов, а также грамотное их использование.

   Начать тестирование

myrusakov.ru

Основы HTML | Учимся работать с кодом сайта

Всем-всем привет!

Коли начали мы изучать SEO продвижение, значит нужно знать основы HTML и CSS, которые помогут сделать наши сайты лучше и привлекательнее для поисковых систем. Всю эту неделю я буду рассказать Вам о работе с кодом сайта и вот, что Вас ждет:

Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.

Погнали!

Основы HTML

HTML (Hyper Text Markup Language) — это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта — документ, а браузер — средство просмотра подобных документов.

Задача HTML — показать браузеру где находиться тот или иной элемент документа. C помощью данного языка, элементы размечаются на странице и занимают определенное место, которые затем отображаются на мониторе посетителя сайта.

Язык разметки состоит из специальных тегов, которые помогают браузеру определить:

• Структуру документа;
• Место нахождения того или иного элемента;
• Предназначение элемента;
• Подключаемые сторонние файлы;
• И много-много другого.

Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.

Структура HTML

Любой HTML-документ имеет начальную структуру, которая должна соблюдаться в обязательно порядке. Выглядит она так:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
    <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">
    <meta name="description" content="Описание контента страницы, 1-2 предложения.">
</head>
<body>
   Контент страницы
</body>
</html

Разберем каждый элемент подробнее:

1. <!DOCTYPE html>

   Начало любого HTML-документа задается этим элементом. Так как язык разметки HTML постоянно развивается и имеет несколько версий, данный элемент помогает браузеру понять какая именно версия используется в документе и его тип;

2. <html> - открывающий тег; </html> - закрывающий тег

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

3. <head> - открывающий тег; </head> - закрывающий тег

   В пределах тегов <head></head> указывается заголовок окна страницы (Title), мета теги Description и Keywords, а также другая техническая информация. К использованию допускаются такие теги, как:

   1. <link>

      Подключение внешних файлов, например, файл стилей style.css;

   2. <meta>

      Используется для хранения информации для браузера и поисковых систем;

   3. <style>

      Указывается для определения стилей элементов документа;

   4. <script>

      Применяется для описания скриптов, использующихся на странице, а также можно указать ссылку на внешний файл со скриптом, программой;

   5. <title>

      Задает заголовок окна страницы.

4. <body> - открывающий тег; </body> - закрывающий тег

   Хранит основное содержание страницы, которое отображается в окне браузера. Вся основная работа происходит именно в пределах данного тега.

Вот мы и разобрались со стандартной структурой HTML-документа. Думаю, Вам все понятно. Теперь же поговорим о базовых тегах, знание которых поможет нам хоть немного разбираться в коде сайта.

Я сам обладаю исключительно базовыми знаниями, однако этого вполне хватает, чтобы с легкостью ориентироваться в коде, находить ошибки и исправлять их.

Базовые теги HTML

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

Для Вашего удобства оформлю все в таблице:

<div> </div>

<a href="URL-документа"></a>


<a name="Идентификатор якоря"></a>

<img src="Ссылка на картинку">


<img src="Ссылка на картинку" alt="Альтернативный текст">

 <ol>
   <li>1-й пункт</li>
   <li>2-й пункт</li>
   <li>3-й пункт</li>
</ol>

<ul>
   <li>1-й пункт</li>
   <li>2-й пункт</li>
   <li>3-й пункт</li>
</ul>

<p>Текстовый абзац</p>

<h2></h2>,...,<h6></h6>

<p>Текстовый <span>абзац</span></p>

<iframe src="http://site1.ru"></iframe>

<strong><strong>
<em></em>

В своей работе я использую только эти теги, да и то не все. Если Вы хотите более подробно ознакомиться с темой HTML-верстки, то рекомендую изучить такой сервис, как HTMLbook.ru. В одно время он мне очень помог.

Завтра мы с Вами разберем основы стилевого оформления CSS. Ну а сегодня переварите эту информацию.

До завтра!

context-up.ru

Часть 1. HTML / Habr

Прим. переводчика: Изначально я опубликовал этот пост в виде юмористических выдержек из трех статей, написанных тремя разными авторами и озаглавленных схожим образом: «Уровни владения HTML», «Уровни владения CSS» и «Уровни владения Javascript». Что, конечно же, было довольно глупой затеей. Осознание допущенной ошибки пришло через 5 минут и два минуса к посту и карме. Исправляюсь. Перевод «Уровней владения CSS» ждите завтра.

Уровень 0

Xэ–тэ–мэ–чаго?

Люди на этом уровне никогда не сталкивались с HTML, кроме как по ошибке, например, когда случайно открывали HTML-версию электронного письма в текстовом режиме. Эти люди не работают в веб-индустрии, и никогда не будут, поэтому у них нет ни причины, ни желания подняться выше нулевого уровня.

Типичное высказывание:

Уровень 1

HTML? Это такие штучки для того, чтобы делать текст жырным или курсивом?

Эти люди пользуются Интернетом достаточно давно и догадываются о том, что происходит за кулисами просматриваемого ими в данный момент веб-сайта. При попытке что-либо опубликовать в сети самим они беспомощны без какого-нибудь WYSIWYG-редактора. Это может быть Photoshop, Dreamweaver, Frontpage, или редактор, встроенный в CMS, которой им сказали пользоваться.

Люди, занимающиеся поддержкой содержания веб-сайта, зачастую находятся на этом уровне мастерства, а некоторые даже утверждают, что нет никакой надобности стремиться подняться на ступень выше. Многие визуально-ориентированные дизайнеры прочно застряли на этом уровне по своему собственному желанию, часто защищая свой выбор следующим: «Никто в печатном мире не редактирует PostScript-код вручную, так почему же в сети должно быть по другому?» К сожалению, многие менеджеры проектов также редко забираются выше первого уровня.

Уровень 2

Странички, которые я делаю в Macromedia Dreamweaver’е, отлично работают в Internet Explorer’е. Зачем мне вообще смотреть на этот HTML?

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

Разработчики второго уровня так же состоят из программистов, которые предпочитают безопасность Visual Studio или любой другой IDE, которую они используют. Они думают, что HTML — это слишком просто для них, и что их среда разработки достаточно продвинута, чтобы разобраться во все сама. Многие программисты второго уровня являются целевой аудиторией разработчиков CMS.

Уровень 3

Да, да. Я слышал об этих новых тэгах: ul, li и все такое. Но я отлично обхожусь своими любимыми table, img, br.

Многих веб-разработчиков старой школы, которые трудятся в индустрии с конца 90-х годов, можно найти на этом уровне. Вплоть до конца прошлого века эти люди писали HTML вручную, так что они знают все о вложенных таблицах и однопиксельных GIF-ах. С тех пор WYSIWYG-редакторы (такие как GoLive и Dreamweaver) улучшились до такой степени, что разработчики третьего уровня не видят никаких причин знать больше об HTML. Сейчас большая часть их работы, связанной с HTML, выполняется в дизайнерском режиме их редактора, поэтому они предпочли бы потратить свое время на изучение конкретного приложения, нежели вникать в то, что происходит за его кулисами.

Уровень 4

Слышь, а как можно сделать табличку с данными только div’ами и span’ами, не используя table?!

На этом уровне люди начинают сознательно использовать doctype-ы. На первом этапе это почти всегда переходный (transitional) doctype, чаще — XHTML 1.0 Transitional. Все таки XHTML является более поздней спецификацией чем HTML, так что наверное он лучше, правда? Люди на этом уровне являются также большими фанатами XHTML 1.1, наивно полагая, что более старшая версия подразумевает какие-то улучшения.

Услышав от кого-то, что использовать таблицы для разметки нельзя, многие программисты четвертого уровня используют div-ы для воссоздания таблицеподобных типов структуры. Так бывшие повара тег-супов становятся divоманами, которые денно и нощно производят тонны презентационной разметки с незамысловатами именами классов (red, blue, bigRedText и т.д.) и инлайновым CSS (атрибут style).

Большинство веб-разработчиков, которые достигли четвертого уровня, готовы продолжить обучение. Они понимают, что у методов, которые продвигаются авторами блоггов и книг о веб-стандартах, есть преимущество. Но они еще не поняли, почему эти методы лучше.

Уровень 5

Интересно, использование какого типа списка будет семантически более корректным в этом отрывке документа?

Большинство разработчиков, трудящихся в соответствие с канонам веб-стандартов, можно найти здесь. Эти люди, как правило, сначала думают о структуре и семантике и уже потом о представлении. На этом уровне обычно используются строгие (strict) doctype-ы, в целях поощрения разделения семантической и презентационной разметки. Будет ли это HTML версии 4.01 или XHTML версии 1.0, для многих не так уж и принципиально, хотя некоторые разработчики пятого уровня подвергают сомнению использование XHTML. На пятом уровне люди, как правило, склонны разводить бесконечные дискуссии о нюансах разметки. Они могут убить несколько часов, чтобы придумать имя для класса или реорганизовать HTML и CSS файлы.

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

Уровень 6

Я считаю спецификации HTML 4.01 и XHTML 2.0 семантически ограниченными. Поэтому я сейчас работаю над собственным языком разметки.

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

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

Читайте продолжение про CSS в следующей части.

habr.com

Основы HTML для начинающих. Пошаговые уроки. Урок-1

Всем привет!!! Я очень рад, что вы решили покорить вершины основ HTML и это правильный выбор. Ведь перед созданием первого сайта нужно знать основы HTML. Тем более, вам еще не раз придется сталкиваться с HTML кодировкой на веб-сайте. Очень рекомендую ознакомиться с уроками HTML для начинающих  на моем блоге, и я гарантирую, что после прохождения этого курса, вы сами с легкостью сможете создать веб-страницу или даже веб-сайт.

Приступим! Для начала выясним, что такое HTML?
HTML –  (от англ. Hypertext Markup Language ) это язык разметки гипертекста. Он впервые был разработан британским учёным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах. HTML был предназначен только для разметки текста, картинок и таблицы на веб-страницах. Теперь в HTML документ могут вставляться дополнительно каскадные таблицы стилей (CSS) и языки программирования такие, как JavaScript, VBScript.

HTML не является языком  программирования, он предназначен только для разметки текстовых документов.

Для изучения HTML вам достаточно иметь на компьютере Браузер и Стандартный Блокнот или бесплатный текстовый редактор Notepad++.
Чтобы открыть Стандартный блокнот, сделайте такие действия на компьютере: «Пуск» => «Программы» => «Стандартные» => «Блокнот».

Если вы слышали о программах, которые упрощают работу по написанию HTML кода (Microsoft FrontPage, Adobe Dreamweaver), то я не советую пользоваться ими на данном этапе обучения. Набивайте руку в стандартном блокнотике или в текстовом редакторе Notepad++, а когда пройдете этот курс, то сможете пользоваться программами для ускорения. Подписывайтесь на обновления моего блога и читайте, как пользоваться программами Microsoft FrontPage, Adobe Dreamweaver.

Из чего состоит HTML документ?
Для лучшего понимания я подготовил пример. Рассмотрите внимательно рисунок:

Разъяснение.

1). Любой HTML документ начинается с такой строки:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«https://www.w3.org/TR/html4/loose.dtd»>

Этой строчкой мы говорим браузеру, что наш HTML документ соответствует международной спецификации версии 4.01. Благодаря этой строчке ваша страничка будет выглядеть на всех браузерах одинаково.
Запоминать эту строчку не обязательно, HTML документ будет работать и без нее. Это для того, чтобы вы просто были в курсе, что это такое.

2). <html> и </html> — это начало и конец документа.

3). <head> и </head> — голова документа. Здесь часто вставляются дополнительные служебные теги, одним из этих тегов является <title></title>. Об остальных служебных тегах вы узнаете в дальнейших уроках, на данном этапе обучения этой информации достаточно .

4). <title> и </title> — заголовок документа.
Этот заголовок будет отображаться в браузере:

в поиске Яндекс или в Гугл.

5). <body> и </body> — тело документа.
Здесь находится содержимое документа, например, текст, картинки, таблицы, музыка, фильмы и т. д. Подробней о том, как вставить музыку, текст, картинки в тело документа вы узнаете в следующих уроках.

Примечание:

Вам частенько придется читать и слышать слово «тег».
Тег — это все то, что находится между скобками < >. Например: <body>, <title>, <html>, <head>, <br>, <p> и др. — все это теги.
Теги не видны при просмотре страницы в браузере, а вот все, что находится не в скобок, будет отображаться в браузере при просмотре.

Тегов много и они разные по назначению.

Существуют теги, которые необходимо закрывать. Например,
открываем тег <p>
и обязательно закрываем тег </p>

А есть теги одиночки, например, вот этот <br>.

Тег — это своего рода контейнер, внутри которого может содержаться текст, картинки и другие теги…

○ Обратите внимание на правильную последовательность открывающихся и закрывающихся тегов:

<тэг1><тэг2><тэг3> … </тэг3></тэг2></тэг1> 

Тег, который мы открыли первым — закрываем последним, второй – предпоследним и т.д.

○ А вот пример неправильной последовательности открывающихся и закрывающихся тегов. При такой очередности могут быть ошибки на веб-страничке:

<тэг1><тэг2><тэг3> … </тэг3></тэг1></тэг2> 

Ошибка была в <тэг1> и <тэг2>.
Будьте внимательны при написании кода.

Готовый код.
Вот так выглядит готовый стандартный обязательный HTML код веб-странички.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Не расстраивайтесь, если из всего выше написанного вы мало что или почти ничего не поняли. Во втором уроке будет больше практики, и вы сможете сами вручную все прописать и увидеть, как работает HTML.

Переходите к следующему уроку «Моя первая веб-страничка на HTML». Урок-2

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: html, основы

bloggood.ru

HTML для начинающих: бесплатный онлайн курс

Об авторе курса

Привет! Меня зовут Артём Ивашкевич. Я работаю веб-разработчиком более двух с половиной лет. Сейчас я работаю в компании Lamoda — это крупный проект, над которым трудятся более 300 разработчиков, его ежемесячная посещаемость более 18 млн человек.

В свободное время я обучаю программированию других людей, потому что мне это просто нравится. Если Вам интересно узнать, как я к этому пришёл, прочитайте историю как я стал программистом.

Чему Вы научитесь при прохождении курса HTML для начинающих

После прохождения этого курса вы получите знания, с помощью которых сможете самостоятельно создавать HTML-странички. Более того, к концу курса мы даже сделаем сайт и опубликуем его в интернете!

Онлайн курс по HTML от WebShake – это возможность самостоятельно сделать первый шаг на пути освоения специальности веб-разработчика.

Что мы предлагаем

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

Уроки сопровождаются домашними заданиями. Мы настоятельно советуем их выполнять, поскольку именно практика применения полученных знаний способствует их максимальному усвоению. Кроме того, рекомендую изучать темы именно в той последовательности, в которой они расположены на сайте. Так обеспечивается соблюдение подхода «от простого к сложному».

Наш онлайн курс по HTML можно осваивать в любое удобное для вас время. Однако не стоит делать слишком больших пауз между уроками. Распределяйте свои ресурсы грамотно и не в ущерб процессу обучения.

Преимущества изучения HTML

HyperText Markup Language – базовый язык программирования в web-сфере. Без знания основ HTML невозможно перейти к изучению более сложного материала. Неслучайно бесплатный курс по его освоению стоит первым в числе уроков по веб-разработке.

Язык гипертекстовой разметки легок в освоении, изучить его основы может даже новичок, ранее не сталкивавшийся с веб-разработкой. Мы предлагаем доступный и понятный онлайн курс по HTML, знакомиться с которым можно из любого места, где есть доступ к интернету. Уроки написаны простым языком и ориентированы на людей, имеющих различный уровень знаний в данной сфере.

Несомненным преимуществом бесплатного курса по HTML от WebShake является индивидуальный подход к проведению занятий. Вы осваиваете материал в любое удобное время, при необходимости возвращаясь к уже пройденным темам. Это гарантирует непрерывность процесса обучение, отсутствие «белых пятен» и пробелов в знаниях, которые неизменно возникли бы в случае проведения групповых занятий.

Красиво оформленный сайт привлекает внимание целевой аудитории и повышает количество посетителей. Именно знание HyperText Markup Language позволит придать интернет-ресурсу структурированности и логичности, сделать его простым для восприятия. По окончании курса вы освоите навыки верстки сайта и сможете реализовать их на практике и начать зарабатывать свои первые деньги в сфере веб-разработки.

webshake.ru

Десять типичных вопросов на собеседованиях на знание HTML / Habr

Обе эти статьи имели огромный успех, что было крайне неожиданным. Я решил, что пришло время написать подобную статью, но уже на тему HTML — и вот, что у меня получилось.

Валидация разметки

<figure>
   <picture>
      <source media="(min-width: 40em)"
      srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320y">
      <img src="medium.jpg" alt="London by night">
   </picture>
   <figcaption>A landscape of London by night</figcaption>
</figure>

Валидный ли это код? Поясните, почему.

Ответ

Элемент main

Ответ

Спецификация W3C описывает элемент как главное содержание страницы, то есть контент, который описывает основную тему страницы или является ключевым элементом функциональности приложения. В спецификации также говорится, что на странице не может быть больше одного main элемента.

Спецификация WHATWG не наделяет тэг main какой-либо семантикой и описывает элемент как контейнер для главенствующего содержания какого либо элемента. Также, согласно WHATWG, вам не запрещается иметь на одной странице несколько элементов main. Если у вас имеется несколько article элементов на странице, то вы можете выделить главенствующее содержимое каждого article с помощью тэга main.

WAI-ARIA

<header>
   <h2>Main title</h2>
   <form action="/" method="get">
      <input type="search">
      <input type="submit">
   </form>
</header>
<ul>
   <li><a href="/">Home</a></li>
   <li><a href="/products">Products</a></li>
   <li><a href="/about">About</a></li>
</ul>
<main>
   <article>
      <h2>Main title</h2>
      <p>This is the content of this section</p>
   </article>
</main>
<footer>
   <small>Copyright &copy; Aurelio De Rosa 2014</small>
</footer>

Можете ли вы улучишь доступность разметки с помощью WAI-ARIA ролей, где это возможно, учитывая старые технологии?

Ответ

<header role="header">
  <h2>Main title</h2>
  <form action="/" method="get" role="search">
     <label for="search">Search:</label>
     <input type="search">
     <input type="submit">
  </form>
</header>
<nav role="navigation">
  <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/products">Products</a></li>
     <li><a href="/about">About</a></li>
  </ul>
</nav>
<main role="main">
  <article role="article">
     <h2>Main title</h2>
     <p>This is the content of this section</p>
  </article>
</main>
<footer role="contentinfo">
  <small>Copyright &copy; Aurelio De Rosa 2014</small>
</footer>

Чтобы улучшить доступность, список навигации был помещен в тэг nav. Чтобы улучшить доступность для старых технологий, которые не поддерживают новые семантичные тэги, роли header, navigation, main, article, и contentinfo были добавлены элементам header, nav, main, article, и footer соответственно.

Другое улучшение касается формы поиска. Сначала форме была добавлена роль search. После чего был добавлен элемент label, который связан с элементом input с помощью атрибута for.

Элемент small

Ответ

Пример использования приведен ниже:

<img src="image.jpg" alt="London by night">
<small>Права на это изображение являются собственностью Аурелио Де Роза.</small>

Подзаголовки

Ответ

<article>
   <h2>Main title</h2>
   <h3>This is a subtitle</h3>
   <p>This is the content of this section</p>
</article>

Вот что мы получаем, если попробовать изобразить иерархию вышеизложенной разметки:

	h2
	|
	---h3
	   |
	   p

Эта простая схема наглядно показывает, что параграф являестя содержимым элемента h3 вместо того, чтобы быть содержимым элемента h2, вне зависимости от того, планировалось ли так сделать. Если же было намерение создать подзаголовок, а p связать с h2, то данная разметка является неправильной.

Собственно, элемент hgroup и был создан для того, чтобы решить эту проблему. Однако он был удалён из спецификации HTML5 в апреле 2013 года в виду отсутствия реализаций и отсутствия прецедентов, что делает его использование недопустимым.

Решением для задачи создания подзаголовка так, чтобы следующий далее параграф был связан с h2, изложено ниже:

<article>
   <h2>
       Main title
       <span>This is a subtitle</span>
   </h2>
   <p>This is the content of this section</p>
</article>

Изображения и доступность

Ответ

Элемент time

Ответ

<time datetime="2014-11-06">6</time>-
<time datetime="2014-11-09">9 November 2014</time>

meter и progress

Ответ

Элемент progress используется для того, чтобы показать прогресс выполнения задачи. В отличии от элемента meter, прогресс, описываемый элементом progress, может быть и не определен. Например, вы могли бы этим элементом показать, что прогресс выполнения задачи имеется, но вы не сможете указать, когда задача будет выполнена.

Атрибут longdesc

Ответ

Ниже продемонстрирован пример использование атрибута longdesc:

<img src="italy.jpg"
     alt="This image represents the map of Italy" longdesc="italy.html#description">
 
<!-- other content here ... -->
 
<section>
  <h3>Italy</h3>
  <p>The shown map of Italy illustrates its division 
  in regions...</p>
</section>

Элемент mark

Ответ

Заключение

Чтобы помочь вам изучить эти и другие смежные по теме семантики вопросы, я рекомендую прочитать некоторые из следующих статей SitePoint:

habr.com

Учебник HTML. Основы HTML

Этот учебник целиком и полностью посвящён языку HTML, без знаний которого не обойтись в создании какой либо веб-страницы. HTML язык — это основа, база которую просто таки необходимо знать любому начинающему веб-мастеру! Этот язык, сам по себе (в чистом виде), достаточно простой, думаю его с легкостью может освоить любой «продвинутый» шестиклассник.. в тоже время он позволяет самостоятельно создавать полноценные страницы и сайты.

Рассчитан этот HTML учебник для начинающих «с нуля» людей, которые только только решили освоить веб-ремесло, поэтому старался писать его как можно более развернуто и что называется «доходчиво», в тоже время стараясь охватить весь курс до мелочей, так что может быть и опытный веб-мастер найдет в нём для себя что-то новое или будет использовать его в качестве «шпаргалки», изложенной в прилагаемом справочнике тегов. Где нет «воды» и нудноватого для уже опытного человека «разжёвывания» материала.

Ну и сразу к делу.. начнем с классики..

Откройте блокнот, да да, тот самый блокнот.. Пуск> Стандартные> Блокнот и напишите в нем следующий текст:

<html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
Привет мир!!!
<br>
Меня зовут (здесь впишите Ваше имя), это моя первая страничка!
</body>
</html>

Далее, сохраните этот текст как html документ, название придумайте сами.. главное чтобы расширение было html

Повторюсь, чтобы не было казусов.. в блокноте кликаем по меню «Файл», выбираем «Сохранить как..» в строке «Имя файла» пишем: index.html, просто по умолчанию блокнот предлагает сохранить файл с расширением *.txt, а нам нужно расширение *. html

Далее открываем этот файл при помощи Вашего браузера.. ну к примеру того же Internet Explorerа (правой кнопкой по нашему файлу.. «Открыть с помощью..» Internet Explorer)

Поздравляю, Вы написали свою первую страничку!!!

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