HTML4 на практике


Содержание

HTML4 на практике

Тест содержит вопросы, связанные с практическими знаниями по HTML 4.01 и поведением браузеров. Охватывает следующие темы: форматирование текста, ссылки, якоря, изображения, списки, таблицы, формы.

Правильный ответ на вопрос подразумевает, что сохраняется валидность кода и соответствие приведённому образцу. Для всех вопросов считается, что используется только строгий доктайп и кодировка UTF-8.

Перед прохождением теста примите во внимание следующее.

  • Вам необходимо пройти 15 вопросов, которые в случайном порядке выбираются из базы данных.
  • На каждый вопрос даётся четыре варианта ответов, из них только один вариант является корректным.
  • Во время тестирования не используйте кнопку «Назад» в браузере, иначе тест будет завершен досрочно и не засчитан как пройденный.

Отправить сообщение об ошибке
Если нашли ошибку в тексте выделите ее мышкой и нажмите сочетание клавиш Ctrl+ENTER, укажите правильный текст без ошибки.

Сборник упражнений и задач по основам HTML

Пару слов о задачнике

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

Илон Маск рекомендует:  Php руководство по рнр 3 0 функции postgresql

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

Чтобы посмотреть результат выполнения исходного кода решения задачи во фрейме кодового блока, используйте кнопку ‘Результат’ .

Оглавление задачника

Синтаксис HTML

1.1. Скопируйте исходный код нашей первой веб-страницы в свой редактор и для удобства восприятия отформатируйте его. Показать решение.

Условие задачи №1.1

1.2. Попробуйте написать по памяти код нашей первой веб-страницы. Показать решение.

1.3. Скопируйте исходный код нашей первой веб-страницы в свой редактор, после чего исправьте в нем все ошибки. Показать решение.

Условие задачи №1.3

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

Условие задачи №1.4

1.5. Создайте веб-страницу, содержащую два коротких предложения, принадлежащих одному абзацу, но расположенных на разных строках. Используйте одиночный тег
(принудительный разрыв строки). Не забывайте про служебный тег . Показать решение.

Универсальные атрибуты html-элементов

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

2.2. Создайте веб-страницу, состоящую из двух абзацев, в которых будет по два коротких предложения, расположенных на разных строках. Цвет текста первого абзаца должен быть красным, а второго – синим. При наведении курсора на первый абзац, должна появляться подсказка «Я первый абзац», а при наведении на второй – «Я второй абзац». Используйте атрибут style, а в качестве его значения свойства CSS : «color: red» и «color: blue» . Также воспользуйтесь атрибутом title, не путая его с аналогичным элементом. Показать решение.

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

Условие задачи №2.3

2.4. Скрипт в исходном коде примера позволяет найти в документе элемент с требуемым id и сделать цвет его шрифта красным. Зная это, сделайте текст второго абзаца красным. Показать решение.

Условие задачи №2.4

2.5. Преобразуйте второй абзац в исходном коде примера в редактируемый элемент с проверкой орфографии. Используйте для этого универсальные атрибуты contenteditable и spellcheck. Запустите код в своем браузере и устраните ошибки в тексте. Обратите внимание, что после получения абзацем фокуса, браузер автоматически будет подсвечивать слова с ошибками до тех пор, пока все ошибки не будут исправлены. Показать решение.

Условие задачи №2.5

2.6. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

Условие задачи №2.6

Мнемоники и коды Юникод в HTML

3.1. Создайте веб-страницу, содержащую абзац с предложением «Сколько будет ½+⅓ ?». Чтобы задать красный цвет шрифта для суммы, используйте тег , а также универсальный атрибут style со значением «color: red» . Для дробей используйте мнемоники и коды Юникода (результат должен быть одинаков), которые можно найти в наших таблицах мнемоник здесь. Показать решение.

3.2. Создайте веб-страницу, содержащую предложение: «Я открывающий тег «. Для знаков ‘ и ‘>’ используйте мнемоники, а чтобы задать зеленый цвет шрифта, используйте тег и универсальный атрибут style со значением «color: green» . Показать решение.

3.3. Создайте веб-страницу, содержащую предложение: «Чтобы вывести мнемонику ‘&’ на экран, необходимо в коде знак амперсанда заменить на его мнемонику!». При наведении курсора на мнемонику, должна появляться подсказка «Мнемоника». Используйте универсальный атрибут style и значение цвета green , а также универсальный атрибут title. Не забудьте использовать в заголовке документа служебный тег . Показать решение.

3.4. Исправьте ошибки в исходном коде примера, после чего запустите его в своем браузере. Показать решение.

HTML4 на практике

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • 30 хороших практик в CSS для новичков

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.


Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

*Наведите курсор мыши для приостановки прокрутки.

30 хороших практик в CSS для новичков

CSS — язык, используемый в какой-то момент практически каждым разработчиком. Хотя мы порой воспринимаем его как должное, он, тем не менее, является мощным средством и имеет множество нюансов в применении, позволяющих помочь в разработке качественного дизайна (либо затруднить данный процесс). Ниже представлено 30 хороших рекомендаций, которые помогут вам писать правильный и грамотный код, избегая многих типичных ошибок.

1. Сделайте его легко читаемым

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

Заметка
При написании CSS-файлов, большинство разработчиков разделяются на две группы, две крайности.

Группа 1: Все в одну линию

Группа 2: Каждому стилю — отдельная строка

На самом деле обе практике вполне хороши, хотя между представителями данных групп нередки разногласия! Просто имейте в виду — выбирать нужно тот вариант, на который вам приятно смотреть. Вот и все.
Заметка

2. Сделайте его целостным

Помимо повышения читабельности кода, сделайте его более целостным. Вы должны начать разрабатывать свой «суб-язык» CSS, который позволит вам придерживаться определенного стиля именования. Есть определенное количество классов, которые я создаю практически всегда, при этом я даю им одни и те же имена каждый раз. К примеру, я использую .caption-right для выравнивания картинок по правой стороне.

Подумайте о том, будете ли вы использовать тире и нижние подчеркивания в названиях ваших классов и ID, и в каких случаях вы будете так делать. Когда вы начинаете создавать собственные стандарты для CSS, вы становитесь куда ближе к профессионалам в этом деле.

3. Начните с фреймворка

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

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

Заметка
Не соглашусь. CSS-фреймворки — незаменимая вещь, но лишь для немногих, для тех, кто хорошо умеет ими пользоваться.

«Это скорее не вопрос изобретения колеса, а вопрос понимания того, как оно работает»

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

4. Используйте обнуление

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

Вот ссылки на одни из наиболее популярных сбросов: MeyerWeb, Yahoo’s developer reset. Как вариант, вы можете придумать свой «обнулятор», взяв за основу следующий сброс CSS.

5. Структурируйте ваши файлы стилей по принципу «сверху вниз»

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

Не забудьте снабдить каждую секцию комментариями!

6. Группируйте элементы

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

7. Создайте сперва HTML-разметку

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

8. Применяйте несколько классов к элементу, если нужно

Иногда бывает лучше применить к элементу сразу несколько классов. Предположим, у вас есть контейнер div, которому вы хотите задать float:right, и у вас уже есть класс .right в вашем файле стилей, который выравнивает все по правому краю. Вы можете просто добавить еще один класс к вашему контейнеру div:

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

Заметка
Будьте очень осторожны, используя имена вроде left и right. Представьте, что вам вдруг понадобилось выровнять контейнер по левой стороне. В этом случае вам нужно вернуться в HTML-код и изменить имя класса — и все это для того, чтобы изменить визуальное отображение на странице. Это несемантично. Запомните: HTML — для разметки, CSS — для визуального представления.

Если вам нужны правки в HTML для смены оформления страницы, вы делаете что-то не так!

9. Используйте правильный тэг Doctype

Объявление типа документа очень важно и влияет на то, пройдет ли валидацию ваш код CSS и HTML. По сути, весь облик вашего сайта может сильно измениться в зависимости от объявленного типа документа DOCTYPE.

10. Используйте сокращенную запись

При сооружении своего CSS-файла вы можете значительно его «ужать», используя сокращенную форму записи в подходящих ситуациях. Для свойств вроде padding, margin, font и некоторых других можно комбинировать стили в одну строку. К примеру, блоку div можно назначить следующие стили:

В одну строку это будет выглядеть так:

11. Комментируйте CSS

Точно так же, как и в любом другом языке, комментирование является отличной идеей. Чтобы добавить комментарий, просто добавьте /* перед комментарием и */ после него:

12. Понимайте разницу между блочными элементами и элементами типа «inline»


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

К элементам, относящимся к обоим типам можно отнести:

К блочным элементам относятся:

13. Располагайте свойства в алфавитном порядке

Применение такой системы расположения свойств позволит вам сэкономить немало времени при поиске нужного свойства.

Заметка
Эх. принести скорость в жертву слегка улучшенной читабельности.. Смотрите сами..
Заметка

14. Используйте CSS-компрессоры

Сжиматели CSS помогают значительно уменьшить размера файла стилей посредством удаления лишних переводов строк и комбинирования элементов. Все это позволяет вашему сайту загружаться быстрее. CSS Optimizer и CSS Compressor — два замечательных онлайн-сервиса для выполнения таких задач.

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

15. Используйте общие классы

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

К примеру, я заметил, что я использую float:right и float:left снова и снова в своих дизайнах. Я просто добавляю классы .left и .right в свой файл стилей и применяю его к элементам.

Таким образом, вам не нужно постоянно писать float:left для всех элементов, к которым нужно применить данное свойство.

16. Используйте «Margin: 0 auto» для центрирования дизайна

Многие новички в CSS не понимают, почему они не могут просто использовать float: center чтобы добиться эффекта центрации для блочных элементов. Если бы все было так просто! К сожалению, нужно делать это так:

17. Не заключайте все подряд в DIV

Частенько возникает соблазн сделать что-то вроде:

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

И уже для тэга h1 вы можете задать любое оформление, которое вам нужно.

18. Используйте Firebug

Если вы еще не загрузили Firebug, остановитесь, сделайте это и продолжайте. Серьезно. Этот плагин должен быть в арсенале любого веб-разработчика. Помимо того, что вы можете отлаживать с его помощью JavaScript, изучать html-структуру страницы, искать ошибки и т.д., вы можете также визуально изучать, модифицировать и редактировать CSS в режиме реального времени.

19. Меньше хаков

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

20. С умом используйте абсолютное позиционирование

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

21. Используйте свойство Text-transform

Text-transform — очень полезное свойство, позволяющее вам стандартизировать то, как будет выглядеть текст. Предположим, вы хотите создать заголовки, в которых должны использоваться только буквы в нижнем регистре. Просто примените данное свойство к стилю заголовка:

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

22. Не используйте негативные отступы, чтобы спрятать тэг H1

Часто люди используют картинку для текста в хэдере, после чего используют или display:none, или отрицательные отступы, чтобы сместить h1 за видимую часть страницы. Matt Cutts, глава службы борьбы со спамом в Google, официально заявил, что это плохая идея, так как Google может решить, что это — спам-технология.

Как говорит мистер Cutts, «избегайте того, чтобы прятать текст логотипа средствами CSS. Используйте тэг alt».

23. Проводите валидацию CSS и HTML-кода

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

24. Ems или Пиксели?

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

25. Не недооценивайте значение списков

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

26. Избегайте избыточных селекторов

Легко по незнанию добавить лишний селектор в файл стилей. Как один из распространенных вариантов такой ошибки, можно привести такой пример:

В такой ситуации можно ничего не усложнять и сделать так:

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

27. Добавляйте ко всему внешние и внутренние отступы

Разные браузеры по-разному отрисовывают элементы. IE делает это не так, как Firefox. IE6 — не так, как IE7 и IE8 и т.д. Как раз-таки основными отличиями между браузерам часто является их «отношение» к обработке отступов. Если вы не используете «обнулятор», вы, вполне вероятно, захотите прописать свойства margin и padding для всех элементов на странице, чтобы наверняка себя обезопасить. Это можно сделать очень просто:

Теперь все элементы страницы будут иметь внешние и внутренние отступы 0px, если иное не задано в файле стилей.

28. Когда готово, попробуйте объектно-ориентированный CSS

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

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

29. Используйте несколько файлов стилей.

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

30. Сперва всегда проверяйте на «закрытость» элементы страницы

Если что-то выглядит не так, всегда начинайте с поисков чего-то вроде отсутствующего закрывающего тэга. Вы можете использовать для этого также XHTML Validator. Кроме того, это позволит вам выявить и другие возможные проблемы.

Glen Stansberry
net.tutsplus.com
Перевод — Дмитрий Науменко

P.S. Если вы изучаете CSS для того, чтобы освоить верстку сайтов, также рекомендую вам серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Создание HTML 5 структуры на практике

Статья, в которой рассматривается положение дел, связанных с созданием HTML5-структуры на практике, а также некоторые другие моменты, которые необходимо учитывать во время её разработки.

Уровень поддержки HTML5-структуры пользовательскими агентами

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

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

Чтобы авторы обратили на это внимание, разработчики спецификации опубликовали в стандарте HTML5 следующий абзац.


Основное содержимое вышеприведённого абзаца заключается в том, что они призывают авторов не полагаться полностью на структуру документа, описанной в этой спецификации, по крайне мере до тех пор, пока новая структура не получит широкую поддержку. Стандарт рекомендует авторам, как и прежде, создавать структуру веб-страниц с помощью элементов h1 , h2 , h3 , h4 , h5 и h6 или такую, которая была бы обратно совместимой с заголовочной.

Несмотря на расплывчатую поддержку HTML5 структуры документа пользовательскими агентами, авторам всё равно стоит задуматься о её внедрении. Это позволит сделать документ структурированным, семантическим и логичным с точки зрения HTML5.

Создание HTML5-структуры обратно совместимой с заголовочной (HTML4)

До тех пор пока HTML 5 структура документа, не будет однозначно пониматься пользовательскими агентами, её создание будет обусловлено необходимостью использования обратной совместимости с HTML4. Таким образом, при создании структуры документа авторам следует учитывать то, что она должна быть правильной как в отношении HTML4, так и в отношении HTML5.

Создавать такую структуру не так уж сложно как это может показаться на первый взгляд. Для этого авторам всего лишь необходимо использовать внутри секционных элементов заголовки соответствующего ранга. Определяется ранг по уровню вложенности секционного элемента. Корневой секционный элемент имеет 1 ранг. Секции, которые расположены непосредственно в нём, имеют 2 ранг. Секции, которые расположены внутри секций второго ранга, соответственно имеют 3 ранг и т.д.

Вышеприведенный пример будет иметь следующую структуру (outline):

Илон Маск рекомендует:  Атрибут dirname в HTML

Рассмотрение процесса проектирования структуры документа на реальном примере

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

Начнём процесс проектирования с рассмотрения основных групп контента, из которых состоит данная страница.

На вышепредставленном рисунке видно, что данная страница состоит из шапки, навигации по блогу, основного блока (статья с комментариями), боковой панели и футера.

Самой важной информацией на этой странице является название статьи. Далее по важности можно расположить разделы статьи и комментарии к ней. Разделы, представленные в боковой панели, являются вспомогательными и не несут в себе основной контент страницы.

Процесс создания HTML5-структуры документа обратно совместимой с заголовочной (HTML4) и оптимизированной под поисковые системы выполним поэтапно.

На 1 этапе разработаем HTML5-структуру страницы, не обращая внимание на то, как она будет выглядеть с точки зрения HTML4 (заголовочной структуры).

Для этого воспользуется элементами article , section , nav и aside из категории sectioning, и элементом h1 из группы heading.

На 2 этапе доработаем структуру, полученную на 1 этапе, таким образом, чтобы она была обратно совместимой с заголовочной.

Теперь перейдём к оптимизации вышепредставленной структуры документа под критерии поисковых систем, а именно переделаем её таким образом, чтобы самым главным содержимым страницы было не название блога, а название статьи.

Инструменты для проверки HTML-структуры документа

Проверить разработанную структуру документа можно с помощью следующих инструментов:

Проверка структуры документа с помощью сервиса W3C» title=»>Проверка структуры документа с помощью сервиса W3C»>

Проверка структуры документа с помощью HeadingsMap

Расширение HeadingsMap для браузера Mozilla Firefox — это очень удобный инструмент, который позволяет проверить структуру документа в соответствии со спецификацией HTML5 и HTML4.

Заключение

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

Практика. HTML. Основы гипертекстовой разметки¶

HTML (HyperText Markup Language) — язык разметки гипертекста, используемый для создания документов, независимых от аппаратно-программной платформы. HTML — это не язык программирования, а описательный язык.

Цель работы: В ходе выполнения этой лабораторной работы необходимо освоить базовые приемы использования языка HTML для создания макета веб-страницы.

Задание к работе¶

  1. Спроектировать структуру веб-сайта по теме вашей учебной научно-исследовательской работы (УНИРС) или по любой другой теме, сопоставимой (или бОльшей) по объему с УНИРС.
  2. Разработать эскиз оформления веб-сайта (использовать любой графический редактор).
  3. Выполнить верстку макета страницы с блочной структурой по разработанному эскизу.

Указания к работе¶

Описание тегов здесь и далее дается без привязки к конкретной версии языка HTML, это сделано умышленно, чтобы акцентировать внимание на общих принципах разметки. Это же относится и к атрибутам тегов. Подробные описание возможностей различных версий HTML (на уровне стандартов) всегда доступны на сайте http://www.w3.org.

Типовая структура парного тега:

Типовая структура непарного (одиночного) тега:

Подавляющее большинство тегов HTML — парные, т.е. требуют наличия закрывающего тега.

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

  • Теги HTML не чувствительны к регистру.
  • Различные версии HTML поддерживают устаревшие (deprecated) теги только для обратной совместимости.
  • Значения атрибутов крайне рекомендуется закрывать в одинарные или двойные кавычки.

Список основных тегов HTML¶

, ячейки —
Тег Обязательные атрибуты Описание
Контейнер HTML-документа.
Блок мета-данных HTML-документа
Название HTML-документа, выводится в заголовке окна программы-браузера.
См. подробное описание мета-тегов Предоставляет дополнительную информацию о документе.
Начальный и конечный тег тела документа.
Параграф, основной текстовый контейнер, закрывающий тег обязателен

. После закрывающего тега браузер выполняет перенос строки и абзацный отступ.

Контейнер, основное предназначение — размещение блоков содержимого на странице
(в XHTML/HTML 5 —
)
Принудительный перенос строки, закрывающий тег не требуется
текст будет отображаться так, как
Неупорядоченный (маркированный) список, элементы списка выводятся тегом
Упорядоченный (нумерованный) список, элементы списка выводятся тегом
href = «URI» Создает в документе гиперссылку, обязательный атрибут href указывает на ресурс или его местонахождение
Заключенный в теги текст будет отображаться курсивом.
Заключенный в теги текст будет отображаться жирным шрифтом.
Заключенный в теги текст будет отображаться моноширинный шрифтом.
Заголовки разделов. Возможные значения — от h1 до h6. Семантически правильная структура заголовков веб-страницы влияет на ее ранжирование в поисковом индексе.
Заключенный в теги текст будет смещен вниз (нижний индекс)
Заключенный в теги текст будет смещен ввверх (верхний индекс).
Заключенный в теги текст будет отображаться шрифтом большего размера.
Заключенный в теги текст будет отображаться шрифтом меньшего размера.
src=»https://iit-web-lectures.readthedocs.io/ru/latest/practice/URI»
alt = «some text»
Непарный тег. Указывает на изображение, загружаемое с адреса, заданного значением обязательного атрибута src. Значение атрибута alt используется, если изображение не может быть загружено или отображено.
Контейнер таблицы. Строки формируются тегом

Мета-теги¶

Основное предназначение мета-тегов ( ), это включение информации о документе, которая может содержать сведения об авторе, дате создания документа или авторских правах.

Вся информация, находящаяся в мета-тегах ориентирована на серверы, браузеры и поисковых роботов. Для посетителя веб-страницы информация, которую несут в себе мета-теги, будет не видна.

В документе может находится любое количество тегов . Все они размещаются в блоке . .

Рассмотрим некоторые, часто используемые мета-теги:

Используется для того, чтобы браузер мог правильно определить тип и содержимого и кодировку веб-страницы.

Автоматическое перенаправление (редирект) через N секунд после открытия с текущей страницы на указанный адрес .

Используется для указания имени автора. Поисковые системы могут найти нужную информацию по имени автора.

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

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

Управление поисковым роботом, указание ему того, что страницу нужно индексировать (или нет, если указано “noindex”).

Cпециальные символы¶

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

Символ Мнемокод Числовой код Описание
неразрывный пробел
¢ ¢ ¢ цент
£ £ £ фунт стерлингов
¥ ¥ ¥ иена или юань
§ § § параграф
© © © знак copyright
« « « левая двойная угловая скобка
­ ­ место возможного переноса
® ® ® знак зарегистрированной торговой марки
° ° ° градус
² ² ² верхний индекс два (x²)
³ ³ ³ верхний индекс три (x³)
· · · точка по середине
» » » правая двойная угловая скобка
½ ½ ½ дробь – одна вторая
× × × знак умножения
÷ ÷ ÷ знак деления
σ Σ Σ греческая заглавная буква сигма
λ λ λ греческая строчная буква лямбда
μ μ μ греческая строчная буква мю
маркер списка
многоточие .
валюта евро


Немного о верстке¶

Общее форматирование¶

Структура макета веб-страницы¶

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

Больше возможностей по дизайну представляют макеты веб-страниц с нелинейной структурой, которые создаются:

  • С использованием фреймов.
  • С использованием табличной верстки.
  • С использованием блочных элементов.

Пусть требуется создать документ, логически разделенный на три блока (рис. 2): «head» — верхний блок, «menu» — левый блок, «content» — правый блок. Примеры, иллюстрирующие как это можно сделать перечисленными способами, приведены в листингах 2, 3 и 4.

HTML для чайников с практическими уроками

Дата публикации: 2020-08-11

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

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

Так вот, если мы говорим об изучении html, то есть тоже теория, а есть практика. Теория в данном случае – это просто какой-то цикл статей, уроков на тему языка, основных тегов и их применения и т.д.

Практика же для вас начинается тогда, когда вы самостоятельно создаете html-файл, пишите туда стартовый код и начинаете изучать собственноручно, как оно все работает. Написал тег, посмотрел, как работает. Вставил картинку – проверил. Добавил какие-то атрибуты и т.д. Именно практика дает возможность быстро разобраться и запомнить основные теги. Потом вы просто на автомате их пишите и вам не нужно полчаса вспоминать, как же создать список.

Ну а для редких тегов всегда нужно использовать словарь. Никто, ни один супер верстальщик и веб-разработчик, я думаю, не знает всех тегов наизусть. Это просто не нужно. Если тег используется тобой 1 раз в 10 лет, то зачем держать его в голове? Я думаю, это понятно.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Но такую практику я бы назвал просто этакой игрой в песочнице. Вы просто пишите разные теги, пытаетесь разобраться со всем максимально подробно, но все для чего? Должна же быть какая-то цель. Обычно html и css изучают для того, чтобы потом создавать свои веб-страницы и полноценные сайты.

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

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

Как правильно изучить язык и где брать практику?

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

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

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

А что, по-вашему, нужно? Делать ссылки, таблицы, списки, вставлять картинки, создавать формы? Да, именно это в первую очередь нужно человеку, который собирается заниматься сайтостроением. При изучении же свободной информации в интернете, вы можете получить намного больше, но это будет вам абсолютно ни к чему.

Например, зачем вам прямо сейчас знать, какой тег отвечает за вывод аббревиатуры? А какой тег запрещает изменение направления текста? Вы не обязаны это знать, так как все это редко вам пригодится. Для таких случаев, как я говорил, есть справочник. Смотрим в него и решаем проблему за пару минут.

Так что в первую очередь вы должны изучить то, что вам нужно. А потом уже можете по желанию узнать историю возникновения html, невалидные сегодня теги и прочую маловажную информацию для вас.

Вопрос практики в html решается очень просто. Смотрите любой видеоурок и повторяете все действия. То есть создается, например, в уроке список – вот и вы тоже его создавайте. От вас будет приветствоваться делать что-то самому уже по окончанию видеоурока. То есть учиться не просто переписывать код за кем-то, но и думать самому.

Следующий этап

Рано или поздно придет время, когда вы уже изучили все основное, что вам нужно в html. Далее вам нужно начинать учить css. Это язык, который отвечает за оформление веб-страниц. Он связан с html, поэтому без него обойтись нельзя. У нас тоже есть курс по основам css.

Могу вас заверить, что css изучать интереснее! А в каком-то плане даже легче. Во-первых, в css тоже достаточно мало свойств и правил, которые вы должны запомнить. Во-вторых, в этом языке очень простой синтаксис, так что никаких проблем с написанием кода на нем не возникнет даже у новичка. В-третьих, поскольку css отвечает за внешний вид страницы, на первых порах у вас будет вызывать восторг то, что вы заставили страницу покраситься в красный цвет, а вон той картинке сделали рамку.

В общем, изучать css просто и интересно, поэтому рекомендую не затягивать и начинать сразу же после того, как закончите с основами html.

Ваша финальная практика

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

PROG-TIME

Практика вёрстки на языке HTML. Полезные уроки для закрепления выученного ранее материала и получения новых знаний на практике. Здесь мы практикуемся и набираем опыт в области WEB-программирования. Учимся строить грамотные сайты, продающие сайты.

Вы можете предложить тему на нашем форуме, задать свой вопрос или помочь другим начинающим программистам: https://vk.com/prog_time

Так же практикуйте своё знание языков программирования на нашем канале:https://www.youtube.com/channel/UCF_m4pWmG7zor1hHBCf_PqA

Простой калькулятор на HTML + CSS + JavaScript

Всем привет в данной записи мы с вами рассмотрим реализацию простого калькулятора на CSS, HTML, JavaScript. Это простой и очень красивый калькулятор, который вы легко сможете добавить на свой сайт. […]

Добавляем видео с YouTube на сайт через iframe. Дополнительные настройки встраивания видео из Youtube

Здравствуйте, сегодня я вам покажу как можно добавить видео с YouTube на свой сайт. Мы разберем дополнительные настройки которые позволяют регулировать следующее: запуск видео сразу после прогрузки страницы, запуск видео […]

HTML теги для SEO . Как правильно оптимизировать HTML сайт

Всем привет в этой записи мы с вами разберем теги которые используются для SEO оптимизации сайта, то есть оптимизации сайта под поисковые запросы. Мы будем рассматривать HTML теги и разберем, […]

Многоуровневое меню

Сегодня мы научимся создавать многоуровневое меню и подробно разберём как это делается. Многоуровневое меню – это меню которое имеет выпадающие окна с дополнительными пунктами меню. Этот пример подойдёт только для […]

Пуленепробиваемый HTML: 37 шагов к идеальной разметке

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

Под катом много букв! Чтоб не потеряться в их обилии все пункты выделены заголовками.

2. Какие версии HTML существуют?

Первая версия HTML (1989) не имела номера версии; это был просто «HTML». Первая стандартизированная версия HTML, выпущенная Internet Engineering Task Force (IETF) в 1995, называлась HTML 2.0.

Позже был сформирован Консорциум WWW (W3C). Он презентовал свою первую стандартизированную версию в 1997: HTML 3.2. Её приемник, HTML 4.0, вышел в 1998, и был быстро сменен на HTML 4.01 в 1999. Это последняя актуальная версия HTML. W3C провозгласило, что больше не будет выпускать последующих версий HTML. HTML 4.01 рекомендован для создания HTML документов.

Не смотря на это, Web Hypertext Application Technology Working Group (WHATWG) работает над так называемым HTML5, в надежде что он в итоге станет рекомендованным W3C.

5. Что делает декларация DOCTYPE’ов?

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

Он задает тип корневого элемента документа ( ), публичный идентификатор и системный идентификатор.

Публичный идентификатор (-//W3C//DTD HTML 4.01//EN) показывает кто использовал декларацию типа документа, или DTD, (W3C); название DTD (DTD HTML 4.01); и язык на котором написана DTD (EN, т.е. английский). Обратите внимание, что DTD не указывает на язык самой веб-страницы; там указан язык, на котором составлен DTD.

Системный идентификатор (www.w3.org/TR/html4/strict.dtd) — это путь к используемой DTD.


Декларация DOCTYPE’а указывает валидатору (программе для проверки синтаксической «правильности» веб-страницы) на соответствие какой DTD должен проверяться документ. Браузеры не должны заботиться о том, задекларирован ли DOCTYPE в документе, но современные браузеры используют эту декларацию, чтобы определить является ли страница «современной» (браузер будет обрабатывать страницу в соответствии со спецификацией) или написанной «на старый манер» (браузер будет обрабатывать страницу с учетом багов старых браузеров). DOCTYPE влияет на метод рендеринга страницы в Internet Explorer, Opera, Firefox (и прочих Mozilla-образных браузерах), Safari и в большинстве остальных современных браузеров. Полная декларация DOCTYPE — включая системный идентификатор — говорит браузеру что это современный документ. Если системный идентификатор отсутствует, или декларации DOCTYPE вообще нет, то браузер сочтет, что это страница написанная «на старый манер» и обработает её в «quirks mode» (режим с причудами).

7. Какая разница между Strict, Transitional и Frameset DTD’шками?

Разница между этими DTD в том, какие элементы и атрибуты они декларируют и в том, каким образом они позволяют (обязывают) соблюдать вложенность элементов.

  • HTML 4.01 Strict DTD — делает ударение на разделении содержимого от презентации и поведения. Эту DTD W3C рекомендует для всех новых документов.
  • HTML 4.01 Transitional DTD — является неким промежуточным звеном при переходе от «старой» (old-scool’ьной, доHTMLьной) разметки к современной. Не рекомендуется использовать при написании новых документов. Содержит 11 презентационных элементов (прим. переводчика: не несущих смысловой нагрузки, а используемых исключительно для изменения внешниго вида; например элемент ) и полный набор презентационных атрибутов, которые отменены в Strict DTD. Transitional DTD часто необходима для страниц располагающихся внутри фреймов, т.к. она имеет атрибут target, необходимый для открытия ссылки в другом фрейме.
  • HTML 4.01 Frameset DTD — используется для страниц на основе фреймов. Консорциум W3 не рекомендует использовать фреймы. Для современных сайтов более удачным решением будет использование приложений на стороне сервера для решения подобных задач.

8. Какой DOCTYPE выбрать?

Если мы создаем новую страницу, W3C рекомендует использовать HTML 4.01 Strict (прим. переводчика: конечно, всем известно, что всё-таки лучше использовать XHTML 1.0 Strict).

Если мы собираемся переводить старые HTML 2.0 или HTML 3.2 документы, то пока мы не перевели всю презентацию в CSS, а элементы, отвечающие за поведение в JavaScript, мы можем использовать HTML 4.01 Transitional.

11. Почему валидатор ругается на тэг ?

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

На протяжении «войны браузеров» в конце 90-х, такие производители браузеров как Microsoft и Netscape соревновались, кто больше придумает «крутых» фич для стилизации и оформления HTML страниц. Проблема была в том, что эти фичи не были стандартизированными и, в большинстве случаев, были не кроссбраузерными.

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

Также были широко распространены нестандартизированные атрибуты. Один из примеров — marginwidth.

13. Что такое BOM?

BOM, или byte order mark (отметка последовательности байтов) — используется в некоторых кодировках, которые используют больше 8-ми бит для кодирования данных (например, UTF-8 или UTF-16). Процессор умеет использовать две разные схемы хранения больших целых чисел: «big-endian» (тупоконечная) и «little-endian» (остроконечная). BOM содержит 16 бит, записанных в самом начале файла, которые указывают браузерам, какая схема используется.

К сожалению многие старые браузеры не могут обработать эту информацию, вместо этого они отображают эти биты как символьные данные. Если вы видите несколько странных символов вверху страницы, то это вероятнее всего означает, что BOM не был обработан браузером (или не верно была установлена кодировка).

Единственное решение проблемы — не использовать BOM. Редакторы, которые умеют сохранять документ в UTF-8 обычно позволяют выбрать, использовать или не использовать BOM.

14. Какую кодировку использовать?

Прим. переводчика: переводить этот пункт не стал; думаю, всем известно, что UTF-8 — это наше всё. Следует использовать UTF-8. А при сохранении документа выбирать UTF-8 without BOM.

16. Почему нужно писать & amp; вместо &?

Прим.: HTML-последовательности у меня написаны с пробелом после амперсанда, потому что в противном случае парсер Хабра их отображает не так как надо.

Некоторые символы имеют особое значение в HTML: (больше), & (амперсанд), « (кавычки), (апостроф). Иногда, когда мы хотим использовать эти значки в обычном тексте, мы должны заменять их HTML-последовательностями.

Для первых четырех указанных выше знаков последовательности будут выглядеть так:

  • & lt; (меньше)
  • & gt; (больше)
  • & amp; (амперсанд)
  • & quot; (кавычки)

XML определяет HTML-последовательность для апострофа (& apos;), но HTML не включает в себя эту последовательность. Апостроф может быть заменен только цифровой последовательностью (& #39;). Прим. переводчика: ради интереса провел маленький эксперимент. На практике последовательность & apos; в апостроф интерпретируют все браузеры (FF3, Opera 9, Safari 3, Google Chrome) кроме IE (все версии).

Т.к. амперсанд используется во всех этих последовательностях, он всегда должен быть преобразован в HTML-последовательность, включая случаи, когда он используется внутри атрибутов, в частности в атрибуте href в ссылках. К сожалению амперсанд очень часто встречается в URI в качестве разделителя аргументов.

В большинстве случаев в HTML амперсанд не замененный последовательностью ничего не ломает (но XHTML — это другая история). Но что если нам случится столкнуться с параметром запроса, совпадающим с названием html-последовательности…

21. Что использовать,

Элемент p используется для выделения абзацев в тексте. Абзац — одно или больше предложений объединенных одной мыслью.

Перенос строки (br) в основном используется как презентационный инструмент и должен скорее быть реализован на CSS чем на HTML. Впрочем, есть несколько ситуаций, когда перенос строки может иметь семантический смысл, например, при разметке строк в стихах и песнях, при написании почтовых адресов или при разметке примеров кода. В этих случаях использование br оправдано, но использование br для разделения абзацев не допустимо.

С другой стороны p имеет довольно четкое семантическое значение: разметка абзацев. Иногда веб-разработчики склонны рассматривать p как основной блочный для использование в качестве контейнеров, но это не верно. Не редкость увидеть элементы label и input внутри p в формах, но я бы назвал это семантически неверным. Метки и поля ввода не могут являться содержимым абзаца.

23. Стоит ли заменить и на и ?

Только если вы действительно хотите подчеркнуть что-то (сделать на чем-то ударение, выделить). Эти теги не являются равноценными.

В Былые Смутные Времена, авторы использовали b и i для усиления смысловой окраски слов.

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

em означает семантическое ударение, усиление значения. Содержимое, к которому применяется такой вид выделения, должно иметь усиление во время прочтения вслух (например, громче или протяжнее). strong означает ещё большее ударение, но часто это считается излишним (можно использовать вложенные em для указания еще большего ударения). Некоторые эксперты советуют использовать strong только для определенных элементов на странице, которые однозначно должны быть выделенными (например, указатель «текущей страницы»), и не должны отмечать слова и фразы внутри основного текста.

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

27. Как правильно использовать элемент ?

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

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

28. Как правильно использовать элемент ?

dfn используется для «определения значений терминов». Это типографское соглашение, особенно общепринятое в научных документах, для выделения курсивом нового термина, с которым читатель возможно не знаком, когда определение появляется в тексте первый раз. По умолчанию dfn отображается курсивом.

Общеизвестное заблуждение, что dfn означает «сокращение» и многие авторы используют его также как abbr и acronym (указывая пояснение к термину с помощью атрибута title). Термины должны отмечаться с помощью dfn в документах только один раз (при первом употреблении термина и его пояснении).

29. Как правильно использовать элемент ?

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

* 21 * дополнительный номер #

Здесь тег var используется для указания «дополнительного номера» (который будет отмечен курсивом). Тот, кто захочет перенаправить звонок на дополнительный номер 942 напишет «21*942#». Таким образом, var означает не то, что вы должны ввести «д-о-п-о-л-н-и-т-е-л-ь-н-ы-й н-о-м-е-р», а то, что вместо слов «дополнительный номер» будут цифры.

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

31. Какая разница между тегами и ?

Никто толком не может дать ответ на этот вопрос! Даже спецификация HTML в какой-то степени противоречит сама себе.

abbr было расширением Netscape для HTML на протяжении «войны браузеров». acronym было Майкрософтовским расширением. Оба варианта означают приблизительно одно и тоже. Оба элемента были включены в спецификацию HTML с разной семантической нагрузкой. Проблема в том, что никто толком не может объяснить, в чем заключается эта семантика.

Давайте обратимся к словарю:
Аббревиатура — сокращенная форма слова или фразы.
Акроним — слово, сформированное из первых букв или нескольких первых букв слов в составе фразы или нескольких слов.

Определение акронима говорит, что это слово, т.е. оно может быть произнесено. Таким образом, «NATO» является акронимом, т.к. состоит из начальных букв в словосочетании «North Atlantic Treaty Organization». Напротив, «FBI» не будет являться акронимом, в соответствии с определением, потому что его нельзя произнести как целое слово, а скорее оно будет звучать как «еф-би-ай». Вот тут то и начинает неразбериха. Технически известно, что «FBI» — это инициализм (прим. переводчика: в оригинале «initialism»), определение которого по словарю звучит так:

Инициализм — 1) название или термин, сформированный из первых букв или из нескольких первых букв слов, которые произносятся как отдельные слова; 2) группа первых букв означающих имя, организацию и т.д., которые произносяться отдельно.

Первое определение почти то же, что и акроним, а второе более отстраненное. Не смотря на это в спецификации нет элемента initialism, и путаница усугубляется тем, что слово «акроним» в простой американской речи используется как синоним слова «инициализм».

Спецификация HTML предлагает следующие определения:

abbr — указывает на сокращенную форму (например, WWW, HTTP, URI, Mass и т.д.).
acronym — указывает на акроним (например, WAC, radar и т.д.).

Похоже на то, что спецификация ссылается на словарные определения, что означает что «FBI» должно быть размечено тегом abbr, т.к. не может быть произнесено как целое слово. Не смотря на это, несколькими абзацами ниже спецификация говорит:

Западные языки широко используют такие акронимы как «GmbH», «NATO», и «F.B.I.», в качестве аббревиатур таких как «M.», «Inc.», «et al.», «etc.»

Вы еще не запутались? Я да. Безопаснее всего всегда использовать abbr, так как все акронимы также являются аббревиатурами, но не наоборот. Не смотря на это, тут есть небольшая проблема. Microsoft были так расстроены решением W3C использовать abbr для абревиатур и инициализмов вместо acronym, что они отказались от поддержки тега abbr! (Но все же ввели поддержку abbr в Internet Explorer 7.)

Так что же делать бедным веб-разработчикам? И почему мы вообще должны заморачиваться? Конечно, хорошо иметь элемент, к которому можно прилепить атрибут title, но мы же это можем сделать и со span‘ом. Суть в том, что размечать акронимы и аббревиатуры хорошо для смежных технологий; в частности для screen reader’ов. Но скрин ридеры в большинстве предпочитают игнорировать теги abbr и acronym, т.к. никто точно не знает, как правильно их использовать и Microsoft не поддерживает тег abbr. Это палка о двух концах.

Вопрос на этот ответ я не знаю! Лично я использую abbr для таких очевидных аббревиатур как «Inc.» и для таких инициализмов как «FBI», и использую acronym для сокращений, которые можно прочесть как слово, например «GIF». Но в соответствии со спецификацией я не могу никого обвинить в разметке «FBI» в качестве акронима. А как на счет «SQL», который некоторые произносят по буквам, а некоторые называют «сикуэл».


32. Почему отменяются определенные фичи?

Самая распространенная фича которой интересуются новички — это атрибут target. Этот атрибут запрещен в HTML 4.01 Strict, но до сих пор поддерживается в HTML 4.01 Transitional. Существует много элементов и атрибутов, которые разрешены в Transitional, но запрещены в Strict.

Причина, по которой W3C отменяет некоторые элементы и атрибуты — желает разделить содержимое (HTML), внешний вид (CSS) и поведение (JavaScript). Заставить элемент отображаться по середине — это вопрос презентационный; он должен быть решен средствами CSS, а не с помощью тега center. Открыть ссылку в новом окне — это вопрос поведения; он должен решаться средствами JavaScript, а не с помощью атрибута target.

В основном, отмененные фичи — те, которые появились на протяжении войны браузеров в 90-х. Эти фичи были включены в HTML 3.2, чтобы хоть как-то навести порядок, но это не главная задача, которая стояла перед HTML. С релизом HTML 4, его авторы попытались «переучить Веб» убирая «пагубные» части, которые были включены в HTML 3.2, по крайней мере в Strict DTD.

Другими словами эти вещи отменены не просто так. По возможности старайтесь их не использовать.

37. Как подключить HTML страницу внутри другой страницы?

Если вы используете Strict DTD, то у вас есть только один валидный способ — использовать элемент object:

К сожалению поддержки object‘а нет в Internet Explorer’е.

При использовании Transitional DTD можно использовать iframe‘ы:

Основы HTML для начинающих

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

Для изучения урока, скачайте архив с необходимыми файлами.

HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.

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

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

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

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

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.

Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

  • Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
  • HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки
      , редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
    • Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
    • Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
    • Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

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

    Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

    Структура документа HTML

    Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.

    Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?

    Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:

    Обратите внимание, документы HTML имеют расширение .html.

    Итак, по порядку из примера.

    — тип документа (доктайп)

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

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

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

    — начало документа

    Первый тег, который мы встречаем после доктайпа, это .

    HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.

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

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

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

    Далее, мы видим тег , который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

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

    Тег — заголовок документа

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

    Метатег

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

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

    Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

    Фавиконка (favicon)

    Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

    CSS стили документа

    Подключает к документу CSS файл со стилями оформления HTML.

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

    HTML 4.1 — в примерах

    Данный туториал предназначен прежде всего для новичков в сайто-строительстве. Этот туториал поможет вам быстро войти в курс HTML а также послужит справочным пособием по некоторым элементам языка. Прототипом к данному руководству служила работа Владимира Дригалкина. Но т.к. то руководство уже устарело, я решился написать подобное, но современное. Что из этого вышло судить только вам. Я надеюсь что мой труд не прошел зря, и данное руководство вам поможет. Удачи!

    1. С чего начинать?

    Для начала Вам нужно выбрать редактор. Cyщecтвyeт двa типa peдaктopoв: WYSIWYG — What-You-See-Is What-You-Get (Что-ты-видишь-то-и-получаешь) и peдaктopы, paбoтaющиe нaпpямyю c HTML-кoдoм.

    Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала вaм пoдoйдyт peдaктopы пepвoй гpyппы, нaпpимep:

    • Macromedia Home Site — trial.
    • NVU или Nvu Portable & KompoZer Portable (можно установить на флешку, и носить всегда с собой) — free.

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

    Ecли хотите научиться paбoтaть c HTML-кoдoм нaпpямyю, а речь в данном учебнике пойдет как раз об этом, воспользуйтесь:

  • Notepad++ или Portable Notepad++ (можно установить на флешку, и носить всегда с собой).
  • Home Site (Очень удобно писать быстро код, и тут-же смотреть результат в окне просмотра).
  • Блокнот (notepad.exe). Писать конечно можно, но неудобно. Нет подсветки, и все очень мрачно.

    Лично я выбрал Notepad++, которым заменил стандартный notepad.exe.
    Notepad++ умеет подсвечивать: C, C++, Java, C#, XML, HTML, PHP, CSS, Javascript, ASP, VB/VBS, SQL, Perl, Python, Ruby и еще много разных языков программирования. В отличии от остальных конкурентов, Notepad++ имеет такие преимущества:

    • Подсветка текста и возможность сворачивания блоков, согласно синтаксису языка программирования
    • WYSIWYG (печатаешь и получаешь то, что видишь на экране)
    • Настраиваемый пользователем режим подсветки синтаксиса
    • Авто-завершение набираемого слова
    • Одновременная работа с множеством документов
    • Одновременный просмотр нескольких документов
    • Поддержка регулярных выражений Поиска/Замены
    • Полная поддержка перетягивания фрагментов текста
    • Динамическое изменение окон просмотра
    • Автоматическое определение состояния файла
    • Увеличение и уменьшение
    • Поддержка большого количества языков
    • Заметки
    • Выделение скобок при редактировании текста
    • Запись макроса и его выполнение

    Всю инфу + мануал читайте здесь: http://notepad-plus.sourceforge.net

    Так-же я юзаю HomeSite 4.5.2. Особенно удобно набирать HTML вручную, и смотреть тут-же результат. Еще там удобные кнопки. Т.е. работать можно в полуавтоматическом режиме (не WYSIWYG).

    С чего же начинать? Во-первых попробуйте сделать следующее.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL