Особенности идеального HTML-кода


Содержание
— заголовки документа (цифра обозначает уровень заголовка, то есть — главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней почти невозможно встретить на просторах интернета), также важно помнить, что на странице может быть лишь один заголовок ; — жирный текст; — курсив; — вставка картинки на интернет страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения); — вставка видео на веб-страницу; — тег, вставляющий в документ аудио файл. Это далеко не все теги, необходимые для создания собственной веб-страницы, но их вполне достаточно, чтобы заложить основы HTML для начинающих. Развитие языка HTML привело к тому, что каждый тег обзавёлся массой атрибутов, да и требования к внешнему виду веб-страниц существенно возросли. Код стал громоздким и неудобным, сложно было прочитать его, не то что адаптировать или изменить. К тому же, если на вашем сайте десять страниц, на которых много заголовков, отмеченных зелёным цветом, а вам вдруг захотелось сделать их красными, то придётся попотеть, изменяя каждый вручную. С появлением каскадных таблиц стилей этот процесс стал простым и логичным, да и HTML-код стал куда более читаемым. Применение CSS Для создания веб-страниц необходимо знать основы HTML и CSS, так как сейчас без знания каскадных таблиц стилей делать в этой сфере нечего. В них задаются атрибуты для любого элемента, распространяющиеся на весь документ. Таким образом, можно задать цвет сразу для всех элементов Для того чтобы подключить файл css к документу, существует тег link. Чуть выше был описан принцип его использования, но он не является единственным вариантом объединения всех стилей в одном месте. Есть ещё тег , который располагается в «голове» документа и позволяет прописать стили, не используя файлы CSS. Не обязательно пользоваться либо одним методом, либо другим. Их можно успешно комбинировать для получения наилучшего результата. Для создания файла с таблицами стилей нужно создать файл с расширением .css, например, Styles.css. JavaScript Нередко человек, решивший заняться разработкой веб-страниц, понимает, что для его задач недостаточно тех средств, которые предлагает HTML. Основы позволят создать красивую страницу, но что делать, если вдруг понадобилось сделать её интерактивной? Для этих целей существует уникальный сценарный язык программирования, который прекрасно взаимодействует с HTML. Называется он JavaScript, так как задумывался как младший брат популярного языка Java. Сегодня эти языки обзавелись существенными различиями, и пропасть между ними только растёт. JavaScript может расширить возможности HTML, он позволяет создавать и редактировать теги. Также при помощи этого замечательного инструмента можно работать с Cokie, загружать данные с сервера, не перезагружая страницу, сделать сайт более интерактивным, чем позволяют возможности HTML. Есть у этого языка и ограничения, которые связаны с безопасностью. Если JavaScript используется не на серверной части, то он будет выполняться в условиях, ограничивающих его возможности, дабы злоумышленники не могли задействовать вредоносный код на любом компьютере. Редакторы Основы HTML для новичка предполагают знания о наиболее удобных и практичных программах для создания веб-страниц. Как было написано выше, визуальные редакторы, такие как Dreamweaver и ему подобные, не подходят для этих целей. Так что же, писать теги в обычном блокноте? Этот вариант также сомнителен, так как стандартный блокнот не располагает никакими специальными инструментами для вёрстки. С этой задачей может неплохо справиться Notepad++. Большой плюс этого продукта в том, что он имеет открытый код и распространяется абсолютно бесплатно. В нём присутствует удобная подсветка синтаксиса и автоматическое закрывание тегов. Notepad++ также предоставляет широкий выбор языков интерфейса, а его возможности легко расширяются при помощи многочисленных дополнений. Sublime Text 3 — программа, похожая на Notepad++, но распространяющаяся на платной основе. Именно она покорила сердца большинства разработчиков. Sublime Text 3 идеально подходит для JavaScript, CSS и HTML. Основы работы с ней придётся изучать самостоятельно, но оно того стоит. В ней заложены воистину безграничные возможности для тонкой настройки, что позволяет максимально подогнать программу под свои нужды. Основы HTML и CSS для начинающих Как видите, изучить искусство создания веб-страниц не так уж и сложно, как кажется на первый взгляд. Всего несколько месяцев практических занятий превратят вас из робкого пользователя в начинающего разработчика. Научиться вёрстке гораздо проще, чем освоить какой-нибудь язык программирования или Linux. На самом деле тегов HTML не так уж и много, важно понять практический аспект их применения. Не лишним в этом деле будет навык работы в Adobe Photoshop. Эта программа позволяет работать с фотографиями, картинками и прочими графическими элементами веб-страницы. На данный момент именно «Фотошоп» лучше всего справляется с такими задачами, конкурентов у него немного. Для тех, кому этот продукт компании Adobe пришёлся не по нраву, есть Lightroom, GIMP, Illustrator и другие программы с похожими функциями. Что даёт знание HTML Навыки создания веб-страниц очень актуальны сегодня, так как интернет расширяется не по дням, а по часам. Каждое предприятие, любой, даже самый маленький магазинчик, мастерские и спортивные клубы — все хотят иметь собственный сайт. И конечно же, для этого им понадобится разработчик, владеющий CSS и HTML. Основы просто освоить, после чего дело за практикой. Так как технологии вёрстки постоянно развиваются, то фронтенд-разработчики всегда будут востребованы. Тот, кто решит посвятить себя этой интересной отрасли, никогда не останется без работы.
  • 27. Как правильно использовать элемент ?
  • 28. Как правильно использовать элемент ?
  • 29. Как правильно использовать элемент ?
  • 31. Какая разница между тегами и ?
  • 32. Почему отменяются определенные фичи?
  • 37. Как подключить HTML страницу внутри другой страницы?
  • 25 советов и описание HTML5
  • 1. Новый тип документа
  • 2. Элемент Figure
  • 3. Переопределение Недавно я использовал элемент , чтобы создать подзаголовки, которые тесно связаны с логотипом. Это полезный представляемый элемент; однако, теперь это было бы неправильно его использовать. Элемент small был переопределён для большего соответствия маленьким шрифтам. Представьте указание авторского права в нижнем колонтитуле вашего сайта; согласно новому HTML5 определению этого элемента, правильно обернёт эту информацию. «Элемент small теперь переименован в «small print»» 4. Теперь без атрибутов Type для ссылок и скриптов Вы, возможно, ещё добавляете атрибут type тегам и 28 особенностей, советов и техник HTML5, которые необходимо знать Эта отрасль развивается быстро, очень быстро! Если не быть аккуратным, то можно безнадежно отстать. Поэтому, если ты немного ошеломлен приближающимися изменениями и обновлениями языка HTML5, ты можешь использовать этот букварь необходимых знаний. 1. Новый Doctype До сих пор используешь этот надоедливый, сложнозапоминающийся XHTML doctype? Если так, то зачем? Начни использовать новый HTML5 doctype. Ты проживешь дольше — как бы сказал Дуглас Квейд На самом деле знал ли ты, что, по правде говоря, даже эта директива не является обязательной в HTML5? Однако, она используется для современных и браузеров более ранних версий, которые требуют определенного doctype . Браузеры, которые не понимают эту директиву, просто отображают содержащуюся разметку в стандартном режиме. Поэтому начинай использовать новый doctype без боязни и особых стеснений. 2. Элемент figure Рассмотрим следующую разметку для изображений: К сожалению, нет возможности ассоциировать подпись, содержащуюся в тэге параграфа, с элементом изображения, к которому эта подпись относиться. В HTML5 это исправляется с помощью элемента . В комбинации с элементом , мы можем семантически ассоциировать подписи с соответствующими изображениями. 3. Переопределенный элемент Не так давно, я использовал элемент для создания подзаголовков, которые близко связаны с логотипом. Это очень удобный презентационный элемент; однако сейчас это будет не корректным использованием. Элемент small сейчас переопределен более специализировано для отображения мелкого текста. Представь краткий блок об описании авторских прав на твоем сайте; в соответствии с новым опредлением элемент может быть корректно содержать эту информацию. Элемент small сейчас относится к «маленькому тексту». 4. Больше нет атрибута type для элементов script и link. Ты возможно до сих пор добавляешь атрибут type в тэги элементов link и script Это уже не нужно. При объявлении обоих этих тэгов уже предполагается, что они ссылаются на определенные таблицы стилей и скрипты соответственно. Таким образом, мы можем удалить в целом type . 5. Брать в кавычки или нет. . В этом вопрос. Помни, что HTML5 это не XHTML. Ты не обязан помещать атрибуты в кавычки, если не хочешь этого делать. Ты не обязан добавлять закрывающий тэг. Фактически в этом нет ничего плохого, если это делает твою жизнь намного проще. Для меня это на самом деле проще. Попробуй и ты. Но если ты предпочитаешь более структурированные документы, во всех смыслах, ты можешь использовать кавычки. 6. Сделай свой контент редактируемым Современные браузеры понимают новый стильный атрибут, который может быть использован в элементах, называемый contenteditable . Как можно предположить из названия, он позволяет пользователю редактировать любой текст, содержащийся в элементе, включая его дочерние элементы. Существует множество способов использования нечто подобного, включая приложения списков дел, использующих преимущества локального хранилища. Или, как мы узнали из прошлого совета, мы можем написать это так: 7. Поля ввода Email Если мы используем значение «email» атрибута type для форм ввода, мы можем проинформировать браузер о возможности ввести строки, соответствующие только валидным email адресам. Да, все верно: встроенная валидация форм «на лету» скоро будет доступна! Мы пока не можем на все 100% положиться на результаты данной проверки по понятным причинам. Браузеры более ранних версий, которые «не понимают» значение email атрибута type, отображают поля ввода самими что ни на есть обычным образом. В то же время, мы не можем зависеть от валидации браузера. Решение на стороне сервера по-прежнему должно быть реализовано. Также стоит учесть, что все современные браузеры достаточно нестабильны, когда дело доходит до использования элементов или атрибутов, которые не поддерживаются ими полностью. Например, Opera поддерживает проверку форм email, только если определен атрибут name . Однако, она не поддерживает атрибут placeholder , который будет рассмотрен более подробно в следующем совете. В итоге, не завися пока от этих форм валидации, мы все равно можем их использовать. 8. Заполнители Прежде мы были вынуждены использовать немного Javascript для создания заполнителей для областей текста (textbox). Конечно, ты можешь изначально назначить атрибут value как ты считаешь нужным, но как только пользователь удаляет этот текст и снимет фокус с него, щелчком мыши вне этого поля, его содержимое снова станет заданным по умолчанию. Атрибут placeholder исправляет эту ситуацию. Опять же, поддержка этой функции достаточно сомнительна во всех браузерах, однако, с каждым новым релизом ситуация будет меняться к лучшему. К тому же, если браузер такой, как Firefox или Opera, в настоящее время не поддерживает атрибут placeholder , ничего страшного. 9. Локальное хранилище Благодаря локальному хранилищу(не введенным с HTML5, а упомянутому ради удобства), мы можем организовывать расширенную «память» браузера введенных данных, даже после его закрытия или обновления страницы. «Локальное хранилище устанавливает пространство на домене. Даже закрывая и открывая заново браузер и переходя на тот же сайт, все данные из полей сохраняются в локальном хранилище. -QuirksBlog Хотя очевидно, что данное хранилище не поддерживается всеми браузерами, мы можем изучить этот метод для работы, наиболее заметно это в Internet Explorer 8, Safari 4 и Firefox 3.5. Учти только то, что для компенсации отсутствия поддержки данной технологии в старых браузерах, ты должен сперва определить существует ли свойство window.localStorage. 10. Семантичный Header и Footer Прошли времена подобного кода: Блоки, изначально, не имели семантичной структуры — даже после появления атрибута id . Теперь в HTML5 у нас появилась возможность использовать элементы и . Разметка, приведенная выше, может быть переписана следующим образом: Это в полной мере позволяет создавать в своих проектах сложные по структуре разделы header и footer Не надо путать эти элементы с заголовком и подвалом твоего сайта. Они просто ссылаются на эти контейнеры. По существу, имеет смысл размещать в элементе footer , к примеру, мета-информацию в нижней части статьи блога. 11. Еще о дополнениях работы с формами в HTML5 Изучи новые полезные дополнения HTML5 по работе с формами в небольшом видео-совете. 12. Internet Explorer и HTML5 К сожалению, Internet Explorer по-прежнему привносит множество пререканий при работе с новыми HTML5 элементами. Все элементы, по умолчанию, имеют значение inline атрибута display Для того, чтобы убедиться в том, что новые элементы HTML5 отображаются корректно, как блочный элемент, необходимо стилизовать их таковыми. К сожалению, Internet Explorer будет все равно игнорировать эти стили, потому что он понятия не имеет, что, например, элемент header сам по себе блочный. К счатью, существует простой фикс этой проблемы: Достаточно странно, но этот код кажется включает Internet Explorer. Для упрощения использования данного метода в дальнейшем, Рэмми Шарп создал скрипт, на который можно ссылаться, как на HTML5 факел. Этот скрипт также исправляет часть вопросов с печатью. 13. hgroup Представь, что в заголовке моего сайта имеется его имя, немедленно следующее за подзаголовком. Используя тэги ≪h1> и ≪h2> соответственно для создания разметки в HTML4 до сих пор не было возможности семантично проиллюстрировать взаимоотношения между этими двумя элементами. К тому же, использование тэга h2 привносит больше проблем, с точки зрения иерархии, когда он описывает и другие заголовки на странице. Используя элемент hgroup , мы можем группировать заголовки вместе без влияния на поток вывода документа. 14. Атрибут для обязательных полей Формы поддерживают новый атрибут required , который указывает, естественно, является ли конкретное поле для ввода обязательным. В зависимости от твоих предпочтений написания кода, ты можешь объявить этот атрибут двумя путями: Либо более структурированным способом: Любой из представленных методов работает. В браузерах, которые поддерживают этот атрибут, этот код не позволит отправить форму, если обязательное поле не заполнено. Вот небольшой пример: мы также используем атрибут placeholder, потому что нет никаких припятствий, чтобы этого не делать Если обязательное поле остается пустым и форма отправляется, поле будет подсвечено. 15. Атрибут Autofocus Опять же, HTML5 снимает необходимость использования Javascript-решений. Если конкретное поле ввода должно быть выбрано по умолчанию (с фокусом), теперь мы можем использовать атрибут autofocus . Любопытно, пока я сам предпочитаю использовать более XHTML подход(с использованием кавычек и т.д.) и пишу «autofocus=autofocus» , хоть это и странно. Таким образом, скоро мы будем использовать подход с использованием одного ключевого слова. 16. Поддержка аудио Mozilla и Webkit еще не определились до конца с форматом аудио. Firefox хочет использовать файл формата .ogg, когда как Webkit-браузеры отлично взаимодействуют с распространенным .mp3 расширением. Это означает следующее, что ты, как минимум, должен создавать две версии для аудио. Когда Safari загружает страницу, браузер может не распознать .ogg формат, пропустит его и, соответственно, обратиться к mp3 версии. То учти, что IE, как обычно, не поддерживает воспроизведение аудио, а Opera 10 и более ранние версии могут работать только с .wav файлами. 17. Поддержка видео Также как элемент , мы также можем использовать HTML5 видео в новых браузерах. На самом деле, совсем недавно YouTube анонсировал новый встроенную поддержку HTML5 видео для своих роликов, для браузеров, которые поддерживают эту технологию. К сожалению, опять же, потому что HTML5 спецификация не определяет конкретного кодека для видео, решение о выборе кодека остается за разработчиками браузеров. Пока Safari и Internet Explorer 9 могут поддерживать видео в формате H.264 (который могут вопроизводить Flash-плееры), Firefox и Opera используют свободные форматы Theora и Vorbis. Опять же, для отображения HTML5 видео, ты должен учитывать оба формата. Chrome может корректно обрабатывать видео, которое кодировано в форматах «ogg» и «mp4». Есть несколько моментов, на которые стоило бы обратить внимание. Мы не обязаны объявлять атрибут type ; однако, если мы не будем объявлять этот атрибут, браузер должен будет определить его самостоятельно. Можно сэкономить немного пропускной способности, если самому объявить атрибут type Не все браузеры понимают HTML5 видео. Под элементом source , мы можем также предложить ссылку для скачивания или встроенную Flash-версию видео. Твое дело. Атрибуты controls и preload будут более подробно рассмотрены в слелующих двух пунктах. 18. Предзагрузка видео. Атрибут preload делает именно то, о чем ты мог бы предположить. Хотя изначально ты должен решить хочешь ли ты, чтобы браузеры осуществлял предварительную загрузку видео. Так ли это необходимо? Возможно, если посетитель получает доступ к странице, которая специально создана для отображения видео, несомненно видео предварительно должно быть загружено, тем самым сэкономив пользователю немного времени. Видео будет предварительно загружаться, если имеется следующее объявление preload=»preload» или просто добавлен атрибут preload . Я предпочитаю последний вариант, так как он менее многословный. 19. Отображение контрольной панели Если ты используешь каждый из этих советов и трюков, ты мог заметить, что приведенный выше код отображает видео как картинку, без каких-либо элементов управления. Для отображения элементов управления, мы должны определить атрибут controls в элементе video . Только, пожалуйста, помни, что каждый браузер воспроизводит свой плеер по-своему. 20. Регулярные выражения Как часто ты пишешь регулярные выражения для проверки определённых текстовых полей? Но благодаря новому атрибуту pattern , мы можем вставить регулярное выражение напрямую в нашу разметку. Если ты достаточно знаком с регулярными выражениями, ты знаешь, что шаблон [A-Za-z] <4,10>принимает только прописные и строчные буквы. Также эта строка должна быть длиной минимум 4 и максимум 10 знаков. Обрати внимание, что мы объединили все новые атрибуты! Если ты не знаком с регулярными выражениями, направляйся сюда. 21. Определение поддерживаемых атрибутов В чем прелесть этих атрибутов, если мы не имеем возможности определить заранее поймет ли их браузер? Хорошо, но есть несколько вариантов определить это заранее. Мы обсудим два. Первый вариант: использовать отличную библиотеку Modernizr. Кроме того, мы можем создать и анализировать эти элементы, чтобы определить какие из браузеров способны их понять. Например, в нашем предыдущем примере, если мы хотим определить поддерживает ли браузер атрибут pattern , мы должны добавить немного Javascript на нашу страницу: На самом деле, это достаточно популярный метод определения браузерной совместимости. Библиотека jQuery использует данный метод. В коде, приведенном выше, мы создаем новый элемент input , и сразу же определяем распознается ли атрибут pattern для этого элемента. Если да — браузер поддерживает данную функциональность. Помни, что все это основывается на JavaScript! 22. Маркировка элементов Подумай о подсвеченной маркировке элемента. Строка, помещенная в данный тэг, должна согласовываться с текущими действиями пользователя. Например, если я ищу «Открой своё сознание» на каком-либо блоге, я могу использовать немного Javascript-кода для того, чтобы обвернуть каждое появление этой строки с помощью тэгов . 23. Когда именно надо использовать Некоторые из нас изначально относятся с спорят когда именно мы должны использовать простые, стандартные div ы. Сейчас мы можем пользоваться элементами header , arcticle , section и footer . Если ли четко определенные моменты, когда следует использовать div ? Конечно! Div ы должны использоваться, когда нет более лучшего элемента для данной задачи. Например, если тебе необходимо поместить блок кода специально в элемент-обвертку с целью дальнейшего позиционирования контента, элемент 24. Что необходимо немедленно начать использовать. Ведутся разговоры, что HTML5 не будет закончен до 2022, поэтому многие люди продолжают его игнорировать, что является большой ошибкой. На самом деле, есть несколько функций HTML5, которые мы можем использовать в своих проектах прямо сейчас! Ну а более простой, чистый код — это всегда хорошо, как минимум. В сегодняшнем небольшом обучаещем видео, я покажу несколько из них 25. Что не является HTML5 Люди могут быть прощены за то, что удивительные Javascript малообъемные переходы, сгруппированы во всеобъемлющем HTML5. Эй, даже Apple непреднамеренно способствал этой идее. Для интересующихся «не разработчиков» это простой способ соответствовать современным веб-стандартам. Однако, для нас, несмотря на кажущуюся семантичность, важно понимать, что это не HTML5. SVG: Не HTML5. По-крайней мере, 5 лет. CSS3: Не HTML5. Это CSS. Геолокация: Не HTML5. Хранилище на стороне клиента: Не HTML5. Понятие изначально фигурировало в спецификации, но позже оно было удалено из нее, так как некоторые специалисты были обеспокоены тем, что спецификация становилась слишком сложной. И теперь эта технология выведена в отдельную спецификацию. Web Sockets: Не HTML5. Также было выведено в отдельную спецификацию. Несмотря на то, сколько различий тебе необходимо, все эти технологии могут быть сгруппированы в современный веб-стэк. На самом деле, разветвленные спецификации до сих пор управляются теми же людьми. 26. Атрибут Data Сейчас мы официально имеем поддержку особых, пользовательских атрибутов для всех HTML элементов. В то время как, ранее мы могли иметь дело с таким конструкциями: . валидатор подобную конструкцию мог не пропустить. Но сейчас, когда мы уже не относим придуманный нами атрибут к атрибуту «data», мы можем официально использовать этот метод. Если вы хоть раз передавали важную информацию посредством имени такого атрибута, как class (возможно для использования в Javascript), то эта новая возможность является большим подспорьем! HTML сниппет Получение значения пользовательского атрибута Также этот метод может быть использован в твоих CSS, как и в этом глупом и хромом примере по CSS изменению текста. Ты можешь увидеть демо размещенного выше эффекта на JSBIN. 27. Элемент вывода Как ты, возможно, догадался элемент output используется для вывода результатов вычислений. Например, если ты хочешь отобразить координаты курсора мыши или сумму нескольких чисел, эти данные должны быть помещены в элемент output . В качестве простого примера, давай вставим сумму двух чисел в пустой элемент output с помощью Javascript после того, как кнопка submit будет нажата. Пожалуйста, только учти, что поддержка элемента output до сих пор немного нераспространенная. Во время написания этой статьи, у меня получалось нормально использовать этот элемент только в Opera. Что и было отражено в коде, приведенном выше. Если браузер не распознает этого элемента, то он просто сообщит вам об этом. В противном случае, браузер определит элемент вывода с именем «sum» и установит его значение, равное 15 , соответственно, после того, как форма будет отправлена на сервер. Элемент output может также содержать атрибут for , который отражает имя элемента, с которым он связан, подобно логике работы атрибута label . 28. Создание ползунков HTML5 предоставляет новый вид элементов input — range Особенно примечательно, что он может содержать атрибуты min , max , step и value и др. Хотя только Opera сейчас поддерживает это новшество полностью, будет просто восхитительно, когда мы сможем в полной мере пользоваться этой технологией. Для быстрой демонстрации, давайте создадим ползунок, который позволит пользователям оценить насколько хорош «Total Recall». Мы не будем создавать приближенное к реальной жизни решение, а просто покажем простоту реализации. Шаг 1: Разметка В начале создадим разметку. Заметь, для того, чтобы установить min и max значения, мы можем всегда определить какой step (шаг) будет использоваться при переходе. Если step равен 1 , будет доступно 10 значений для выбора. Мы также можем воспользоваться преимуществом нового элемента output , с которым мы ознакомились в предыдущем совете. Шаг 2: CSS Далее мы добавим немного стилей. Мы также используем :before и :after для информирования наших пользователей о том, какие значения определены в качестве минимального ( min ) и максимального ( max ) значения. Большое спасибо Реми и Брюсу, которые научили меня данному трюку в статье «Вступление в HTML5.» В коде, приведенном выше, перед и после нашего ползунка мы добавилии значения, которые использовали в качестве min и max соответственно. Шаг 3: Javascript Определяем поддерживает ли браузер эту технологию. Если нет — мы предупреждаем пользователя, что демо не будет работать. Динамично обновляем элемент output , если пользователь двигает слайдер. Отслеживаем событие, когда пользователь уводит курсор мыши от слайдера, считываем значение и сохраняем его в локальном хранилище. Затем, когда пользователь в следующий раз обновит страницу, ползунок и поле вывода будут автоматически устанавливаться в свое последнее состояние. Готовы к решению реальных задач? Возможно не до конца, но это действительно весело готовиться к этому! Загрузи исходники кода, и попробуй все примеры самостоятельно. Но только используй Opera. Благодарю за прочтение статьи! Мы рассмотрели достаточно много материала, но на самом деле лишь поверхностно коснулись того, что возможно в HTML5. Я надеюсь, это послужит хорошей основой для дальнейшего развития! HTML: основы для начинающих HTML – язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают текстовые редакторы типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки — , чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих. Визуальные редакторы Новички, только ступившие на путь изучения HTML, часто начинают свою работу с программ, позволяющих создавать сайты без каких-либо знаний. В них можно просто расположить элементы на экране так, как они будут отображаться в браузере. Казалось бы, вот он — источник вечной благодати, позволяющий избавиться от большинства веб-разработчиков. Но не всё так просто, так как у визуальных редакторов есть масса недостатков, которые делают невозможным их использование в серьёзных проектах. Все эти программы создают много ненужных тегов, которые делают конечный вариант страницы громоздким и неоптимальным. Конечно, в наш век скоростного интернета это имеет меньшее значение, чем раньше, но есть ряд причин, по которым лаконичный и грамотно написанный сайт получается более практичным, чем его собрат, созданный в визуальном редакторе. Веб-страница, сделанная в такой программе, будет плохо обрабатываться поисковыми роботами, так как для них важен каждый килобайт кода, а громоздкий и нелогичный код с кучей семантических ошибок едва ли придётся им по вкусу. Помимо этого, редакторы часто отстают от времени, становясь неактуальными, а тратить ресурсы на их развитие нецелесообразно, так как ни один профессионал не пользуется этими продуктами. Поэтому каждый, кто хочет работать в сфере создания сайтов, должен знать основы HTML. Как упоминалось выше, теги описывают браузеру структуру веб-страницы. Большинство из них имеют открывающий и закрывающий тег, но далеко не все. Например, . , где вместо точек находится содержимое. Первый из них показывает, где начинается тег, а второй закрывает его. Внутри могут находиться другие элементы разметки страницы, они могут вкладываться друг в друга подобно матрёшке. Тут важно своевременно закрывать теги, чтобы страница отображалась корректно. Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и атрибуты. Атрибут может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«. », где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы. Структура документа Каждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега , сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы. Потом идут основные парные структуры, составляющие «скелет» сайта. Первый тег, в который вложены все остальные — . . Всё, что находится за его пределами, не распознаётся браузером как веб-страница, так что он открывает документ и закрывает его. Этот тег является обязательным для любого документа. В нём также содержатся ещё несколько обязательных тегов, которые будут рассмотрены ниже. Внутри тега . содержится информация технического характера, которая не будет отображаться на странице, но, тем не менее, является важной частью документа HTML. Основы сайта закладываются именно в этом месте, здесь выбирается кодировка и вводится название страницы. Оно содержится внутри обязательного тега . . Отображается название в верхней части браузера, где также можно разместить небольшую иконку, характеризующую содержимое страницы. Желательно сразу указать кодировку документа для его корректного отображения. Это можно сделать при помощи тега . Метатеги предоставляют данные о структуре страницы и обычно располагаются внутри head. Знание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег
  • . В готовом виде это выглядит примерно вот так: , где href указывает на местоположение файла, а type — на его тип. Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них: — применяется для выделения подстроки, на которую будет распространяться особый стиль, описанный в css; — создаёт ссылку на веб-странице; адрес перехода задаётся атрибутом href; — выделяет абзац из текста; содержимое абзаца находится между открывающим и закрывающим тегами; — нумерованный список, элементы которого заключаются в парный тег ; — маркированный список, в котором, так же как и в нумерованном, элементы обозначаются тегом ; — заголовки документа (цифра обозначает уровень заголовка, то есть — главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней почти невозможно встретить на просторах интернета), также важно помнить, что на странице может быть лишь один заголовок ; — жирный текст; — курсив; — вставка картинки на интернет страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения); — вставка видео на веб-страницу; — тег, вставляющий в документ аудио файл. Это далеко не все теги, необходимые для создания собственной веб-страницы, но их вполне достаточно, чтобы заложить основы HTML для начинающих. Развитие языка HTML привело к тому, что каждый тег обзавёлся массой атрибутов, да и требования к внешнему виду веб-страниц существенно возросли. Код стал громоздким и неудобным, сложно было прочитать его, не то что адаптировать или изменить. К тому же, если на вашем сайте десять страниц, на которых много заголовков, отмеченных зелёным цветом, а вам вдруг захотелось сделать их красными, то придётся попотеть, изменяя каждый вручную. С появлением каскадных таблиц стилей этот процесс стал простым и логичным, да и HTML-код стал куда более читаемым. Применение CSS Для создания веб-страниц необходимо знать основы HTML и CSS, так как сейчас без знания каскадных таблиц стилей делать в этой сфере нечего. В них задаются атрибуты для любого элемента, распространяющиеся на весь документ. Таким образом, можно задать цвет сразу для всех элементов Для того чтобы подключить файл css к документу, существует тег link. Чуть выше был описан принцип его использования, но он не является единственным вариантом объединения всех стилей в одном месте. Есть ещё тег , который располагается в «голове» документа и позволяет прописать стили, не используя файлы CSS. Не обязательно пользоваться либо одним методом, либо другим. Их можно успешно комбинировать для получения наилучшего результата. Для создания файла с таблицами стилей нужно создать файл с расширением .css, например, Styles.css. JavaScript Нередко человек, решивший заняться разработкой веб-страниц, понимает, что для его задач недостаточно тех средств, которые предлагает HTML. Основы позволят создать красивую страницу, но что делать, если вдруг понадобилось сделать её интерактивной? Для этих целей существует уникальный сценарный язык программирования, который прекрасно взаимодействует с HTML. Называется он JavaScript, так как задумывался как младший брат популярного языка Java. Сегодня эти языки обзавелись существенными различиями, и пропасть между ними только растёт. JavaScript может расширить возможности HTML, он позволяет создавать и редактировать теги. Также при помощи этого замечательного инструмента можно работать с Cokie, загружать данные с сервера, не перезагружая страницу, сделать сайт более интерактивным, чем позволяют возможности HTML. Есть у этого языка и ограничения, которые связаны с безопасностью. Если JavaScript используется не на серверной части, то он будет выполняться в условиях, ограничивающих его возможности, дабы злоумышленники не могли задействовать вредоносный код на любом компьютере. Редакторы Основы HTML для новичка предполагают знания о наиболее удобных и практичных программах для создания веб-страниц. Как было написано выше, визуальные редакторы, такие как Dreamweaver и ему подобные, не подходят для этих целей. Так что же, писать теги в обычном блокноте? Этот вариант также сомнителен, так как стандартный блокнот не располагает никакими специальными инструментами для вёрстки. С этой задачей может неплохо справиться Notepad++. Большой плюс этого продукта в том, что он имеет открытый код и распространяется абсолютно бесплатно. В нём присутствует удобная подсветка синтаксиса и автоматическое закрывание тегов. Notepad++ также предоставляет широкий выбор языков интерфейса, а его возможности легко расширяются при помощи многочисленных дополнений. Sublime Text 3 — программа, похожая на Notepad++, но распространяющаяся на платной основе. Именно она покорила сердца большинства разработчиков. Sublime Text 3 идеально подходит для JavaScript, CSS и HTML. Основы работы с ней придётся изучать самостоятельно, но оно того стоит. В ней заложены воистину безграничные возможности для тонкой настройки, что позволяет максимально подогнать программу под свои нужды. Основы HTML и CSS для начинающих Как видите, изучить искусство создания веб-страниц не так уж и сложно, как кажется на первый взгляд. Всего несколько месяцев практических занятий превратят вас из робкого пользователя в начинающего разработчика. Научиться вёрстке гораздо проще, чем освоить какой-нибудь язык программирования или Linux. На самом деле тегов HTML не так уж и много, важно понять практический аспект их применения. Не лишним в этом деле будет навык работы в Adobe Photoshop. Эта программа позволяет работать с фотографиями, картинками и прочими графическими элементами веб-страницы. На данный момент именно «Фотошоп» лучше всего справляется с такими задачами, конкурентов у него немного. Для тех, кому этот продукт компании Adobe пришёлся не по нраву, есть Lightroom, GIMP, Illustrator и другие программы с похожими функциями. Что даёт знание HTML Навыки создания веб-страниц очень актуальны сегодня, так как интернет расширяется не по дням, а по часам. Каждое предприятие, любой, даже самый маленький магазинчик, мастерские и спортивные клубы — все хотят иметь собственный сайт. И конечно же, для этого им понадобится разработчик, владеющий CSS и HTML. Основы просто освоить, после чего дело за практикой. Так как технологии вёрстки постоянно развиваются, то фронтенд-разработчики всегда будут востребованы. Тот, кто решит посвятить себя этой интересной отрасли, никогда не останется без работы.
  • 4. Теперь без атрибутов Type для ссылок и скриптов
  • 28 особенностей, советов и техник HTML5, которые необходимо знать
  • 1. Новый Doctype
  • 2. Элемент figure
  • 3. Переопределенный элемент Не так давно, я использовал элемент для создания подзаголовков, которые близко связаны с логотипом. Это очень удобный презентационный элемент; однако сейчас это будет не корректным использованием. Элемент small сейчас переопределен более специализировано для отображения мелкого текста. Представь краткий блок об описании авторских прав на твоем сайте; в соответствии с новым опредлением элемент может быть корректно содержать эту информацию. Элемент small сейчас относится к «маленькому тексту». 4. Больше нет атрибута type для элементов script и link. Ты возможно до сих пор добавляешь атрибут type в тэги элементов link и script Это уже не нужно. При объявлении обоих этих тэгов уже предполагается, что они ссылаются на определенные таблицы стилей и скрипты соответственно. Таким образом, мы можем удалить в целом type . 5. Брать в кавычки или нет. . В этом вопрос. Помни, что HTML5 это не XHTML. Ты не обязан помещать атрибуты в кавычки, если не хочешь этого делать. Ты не обязан добавлять закрывающий тэг. Фактически в этом нет ничего плохого, если это делает твою жизнь намного проще. Для меня это на самом деле проще. Попробуй и ты. Но если ты предпочитаешь более структурированные документы, во всех смыслах, ты можешь использовать кавычки. 6. Сделай свой контент редактируемым Современные браузеры понимают новый стильный атрибут, который может быть использован в элементах, называемый contenteditable . Как можно предположить из названия, он позволяет пользователю редактировать любой текст, содержащийся в элементе, включая его дочерние элементы. Существует множество способов использования нечто подобного, включая приложения списков дел, использующих преимущества локального хранилища. Или, как мы узнали из прошлого совета, мы можем написать это так: 7. Поля ввода Email Если мы используем значение «email» атрибута type для форм ввода, мы можем проинформировать браузер о возможности ввести строки, соответствующие только валидным email адресам. Да, все верно: встроенная валидация форм «на лету» скоро будет доступна! Мы пока не можем на все 100% положиться на результаты данной проверки по понятным причинам. Браузеры более ранних версий, которые «не понимают» значение email атрибута type, отображают поля ввода самими что ни на есть обычным образом. В то же время, мы не можем зависеть от валидации браузера. Решение на стороне сервера по-прежнему должно быть реализовано. Также стоит учесть, что все современные браузеры достаточно нестабильны, когда дело доходит до использования элементов или атрибутов, которые не поддерживаются ими полностью. Например, Opera поддерживает проверку форм email, только если определен атрибут name . Однако, она не поддерживает атрибут placeholder , который будет рассмотрен более подробно в следующем совете. В итоге, не завися пока от этих форм валидации, мы все равно можем их использовать. 8. Заполнители Прежде мы были вынуждены использовать немного Javascript для создания заполнителей для областей текста (textbox). Конечно, ты можешь изначально назначить атрибут value как ты считаешь нужным, но как только пользователь удаляет этот текст и снимет фокус с него, щелчком мыши вне этого поля, его содержимое снова станет заданным по умолчанию. Атрибут placeholder исправляет эту ситуацию. Опять же, поддержка этой функции достаточно сомнительна во всех браузерах, однако, с каждым новым релизом ситуация будет меняться к лучшему. К тому же, если браузер такой, как Firefox или Opera, в настоящее время не поддерживает атрибут placeholder , ничего страшного. 9. Локальное хранилище Благодаря локальному хранилищу(не введенным с HTML5, а упомянутому ради удобства), мы можем организовывать расширенную «память» браузера введенных данных, даже после его закрытия или обновления страницы. «Локальное хранилище устанавливает пространство на домене. Даже закрывая и открывая заново браузер и переходя на тот же сайт, все данные из полей сохраняются в локальном хранилище. -QuirksBlog Хотя очевидно, что данное хранилище не поддерживается всеми браузерами, мы можем изучить этот метод для работы, наиболее заметно это в Internet Explorer 8, Safari 4 и Firefox 3.5. Учти только то, что для компенсации отсутствия поддержки данной технологии в старых браузерах, ты должен сперва определить существует ли свойство window.localStorage. 10. Семантичный Header и Footer Прошли времена подобного кода: Блоки, изначально, не имели семантичной структуры — даже после появления атрибута id . Теперь в HTML5 у нас появилась возможность использовать элементы и . Разметка, приведенная выше, может быть переписана следующим образом: Это в полной мере позволяет создавать в своих проектах сложные по структуре разделы header и footer Не надо путать эти элементы с заголовком и подвалом твоего сайта. Они просто ссылаются на эти контейнеры. По существу, имеет смысл размещать в элементе footer , к примеру, мета-информацию в нижней части статьи блога. 11. Еще о дополнениях работы с формами в HTML5 Изучи новые полезные дополнения HTML5 по работе с формами в небольшом видео-совете. 12. Internet Explorer и HTML5 К сожалению, Internet Explorer по-прежнему привносит множество пререканий при работе с новыми HTML5 элементами. Все элементы, по умолчанию, имеют значение inline атрибута display Для того, чтобы убедиться в том, что новые элементы HTML5 отображаются корректно, как блочный элемент, необходимо стилизовать их таковыми. К сожалению, Internet Explorer будет все равно игнорировать эти стили, потому что он понятия не имеет, что, например, элемент header сам по себе блочный. К счатью, существует простой фикс этой проблемы: Достаточно странно, но этот код кажется включает Internet Explorer. Для упрощения использования данного метода в дальнейшем, Рэмми Шарп создал скрипт, на который можно ссылаться, как на HTML5 факел. Этот скрипт также исправляет часть вопросов с печатью. 13. hgroup Представь, что в заголовке моего сайта имеется его имя, немедленно следующее за подзаголовком. Используя тэги ≪h1> и ≪h2> соответственно для создания разметки в HTML4 до сих пор не было возможности семантично проиллюстрировать взаимоотношения между этими двумя элементами. К тому же, использование тэга h2 привносит больше проблем, с точки зрения иерархии, когда он описывает и другие заголовки на странице. Используя элемент hgroup , мы можем группировать заголовки вместе без влияния на поток вывода документа. 14. Атрибут для обязательных полей Формы поддерживают новый атрибут required , который указывает, естественно, является ли конкретное поле для ввода обязательным. В зависимости от твоих предпочтений написания кода, ты можешь объявить этот атрибут двумя путями: Либо более структурированным способом: Любой из представленных методов работает. В браузерах, которые поддерживают этот атрибут, этот код не позволит отправить форму, если обязательное поле не заполнено. Вот небольшой пример: мы также используем атрибут placeholder, потому что нет никаких припятствий, чтобы этого не делать Если обязательное поле остается пустым и форма отправляется, поле будет подсвечено. 15. Атрибут Autofocus Опять же, HTML5 снимает необходимость использования Javascript-решений. Если конкретное поле ввода должно быть выбрано по умолчанию (с фокусом), теперь мы можем использовать атрибут autofocus . Любопытно, пока я сам предпочитаю использовать более XHTML подход(с использованием кавычек и т.д.) и пишу «autofocus=autofocus» , хоть это и странно. Таким образом, скоро мы будем использовать подход с использованием одного ключевого слова. 16. Поддержка аудио Mozilla и Webkit еще не определились до конца с форматом аудио. Firefox хочет использовать файл формата .ogg, когда как Webkit-браузеры отлично взаимодействуют с распространенным .mp3 расширением. Это означает следующее, что ты, как минимум, должен создавать две версии для аудио. Когда Safari загружает страницу, браузер может не распознать .ogg формат, пропустит его и, соответственно, обратиться к mp3 версии. То учти, что IE, как обычно, не поддерживает воспроизведение аудио, а Opera 10 и более ранние версии могут работать только с .wav файлами. 17. Поддержка видео Также как элемент , мы также можем использовать HTML5 видео в новых браузерах. На самом деле, совсем недавно YouTube анонсировал новый встроенную поддержку HTML5 видео для своих роликов, для браузеров, которые поддерживают эту технологию. К сожалению, опять же, потому что HTML5 спецификация не определяет конкретного кодека для видео, решение о выборе кодека остается за разработчиками браузеров. Пока Safari и Internet Explorer 9 могут поддерживать видео в формате H.264 (который могут вопроизводить Flash-плееры), Firefox и Opera используют свободные форматы Theora и Vorbis. Опять же, для отображения HTML5 видео, ты должен учитывать оба формата. Chrome может корректно обрабатывать видео, которое кодировано в форматах «ogg» и «mp4». Есть несколько моментов, на которые стоило бы обратить внимание. Мы не обязаны объявлять атрибут type ; однако, если мы не будем объявлять этот атрибут, браузер должен будет определить его самостоятельно. Можно сэкономить немного пропускной способности, если самому объявить атрибут type Не все браузеры понимают HTML5 видео. Под элементом source , мы можем также предложить ссылку для скачивания или встроенную Flash-версию видео. Твое дело. Атрибуты controls и preload будут более подробно рассмотрены в слелующих двух пунктах. 18. Предзагрузка видео. Атрибут preload делает именно то, о чем ты мог бы предположить. Хотя изначально ты должен решить хочешь ли ты, чтобы браузеры осуществлял предварительную загрузку видео. Так ли это необходимо? Возможно, если посетитель получает доступ к странице, которая специально создана для отображения видео, несомненно видео предварительно должно быть загружено, тем самым сэкономив пользователю немного времени. Видео будет предварительно загружаться, если имеется следующее объявление preload=»preload» или просто добавлен атрибут preload . Я предпочитаю последний вариант, так как он менее многословный. 19. Отображение контрольной панели Если ты используешь каждый из этих советов и трюков, ты мог заметить, что приведенный выше код отображает видео как картинку, без каких-либо элементов управления. Для отображения элементов управления, мы должны определить атрибут controls в элементе video . Только, пожалуйста, помни, что каждый браузер воспроизводит свой плеер по-своему. 20. Регулярные выражения Как часто ты пишешь регулярные выражения для проверки определённых текстовых полей? Но благодаря новому атрибуту pattern , мы можем вставить регулярное выражение напрямую в нашу разметку. Если ты достаточно знаком с регулярными выражениями, ты знаешь, что шаблон [A-Za-z] <4,10>принимает только прописные и строчные буквы. Также эта строка должна быть длиной минимум 4 и максимум 10 знаков. Обрати внимание, что мы объединили все новые атрибуты! Если ты не знаком с регулярными выражениями, направляйся сюда. 21. Определение поддерживаемых атрибутов В чем прелесть этих атрибутов, если мы не имеем возможности определить заранее поймет ли их браузер? Хорошо, но есть несколько вариантов определить это заранее. Мы обсудим два. Первый вариант: использовать отличную библиотеку Modernizr. Кроме того, мы можем создать и анализировать эти элементы, чтобы определить какие из браузеров способны их понять. Например, в нашем предыдущем примере, если мы хотим определить поддерживает ли браузер атрибут pattern , мы должны добавить немного Javascript на нашу страницу: На самом деле, это достаточно популярный метод определения браузерной совместимости. Библиотека jQuery использует данный метод. В коде, приведенном выше, мы создаем новый элемент input , и сразу же определяем распознается ли атрибут pattern для этого элемента. Если да — браузер поддерживает данную функциональность. Помни, что все это основывается на JavaScript! 22. Маркировка элементов Подумай о подсвеченной маркировке элемента. Строка, помещенная в данный тэг, должна согласовываться с текущими действиями пользователя. Например, если я ищу «Открой своё сознание» на каком-либо блоге, я могу использовать немного Javascript-кода для того, чтобы обвернуть каждое появление этой строки с помощью тэгов . 23. Когда именно надо использовать Некоторые из нас изначально относятся с спорят когда именно мы должны использовать простые, стандартные div ы. Сейчас мы можем пользоваться элементами header , arcticle , section и footer . Если ли четко определенные моменты, когда следует использовать div ? Конечно! Div ы должны использоваться, когда нет более лучшего элемента для данной задачи. Например, если тебе необходимо поместить блок кода специально в элемент-обвертку с целью дальнейшего позиционирования контента, элемент 24. Что необходимо немедленно начать использовать. Ведутся разговоры, что HTML5 не будет закончен до 2022, поэтому многие люди продолжают его игнорировать, что является большой ошибкой. На самом деле, есть несколько функций HTML5, которые мы можем использовать в своих проектах прямо сейчас! Ну а более простой, чистый код — это всегда хорошо, как минимум. В сегодняшнем небольшом обучаещем видео, я покажу несколько из них 25. Что не является HTML5 Люди могут быть прощены за то, что удивительные Javascript малообъемные переходы, сгруппированы во всеобъемлющем HTML5. Эй, даже Apple непреднамеренно способствал этой идее. Для интересующихся «не разработчиков» это простой способ соответствовать современным веб-стандартам. Однако, для нас, несмотря на кажущуюся семантичность, важно понимать, что это не HTML5. SVG: Не HTML5. По-крайней мере, 5 лет. CSS3: Не HTML5. Это CSS. Геолокация: Не HTML5. Хранилище на стороне клиента: Не HTML5. Понятие изначально фигурировало в спецификации, но позже оно было удалено из нее, так как некоторые специалисты были обеспокоены тем, что спецификация становилась слишком сложной. И теперь эта технология выведена в отдельную спецификацию. Web Sockets: Не HTML5. Также было выведено в отдельную спецификацию. Несмотря на то, сколько различий тебе необходимо, все эти технологии могут быть сгруппированы в современный веб-стэк. На самом деле, разветвленные спецификации до сих пор управляются теми же людьми. 26. Атрибут Data Сейчас мы официально имеем поддержку особых, пользовательских атрибутов для всех HTML элементов. В то время как, ранее мы могли иметь дело с таким конструкциями: . валидатор подобную конструкцию мог не пропустить. Но сейчас, когда мы уже не относим придуманный нами атрибут к атрибуту «data», мы можем официально использовать этот метод. Если вы хоть раз передавали важную информацию посредством имени такого атрибута, как class (возможно для использования в Javascript), то эта новая возможность является большим подспорьем! HTML сниппет Получение значения пользовательского атрибута Также этот метод может быть использован в твоих CSS, как и в этом глупом и хромом примере по CSS изменению текста. Ты можешь увидеть демо размещенного выше эффекта на JSBIN. 27. Элемент вывода Как ты, возможно, догадался элемент output используется для вывода результатов вычислений. Например, если ты хочешь отобразить координаты курсора мыши или сумму нескольких чисел, эти данные должны быть помещены в элемент output . В качестве простого примера, давай вставим сумму двух чисел в пустой элемент output с помощью Javascript после того, как кнопка submit будет нажата. Пожалуйста, только учти, что поддержка элемента output до сих пор немного нераспространенная. Во время написания этой статьи, у меня получалось нормально использовать этот элемент только в Opera. Что и было отражено в коде, приведенном выше. Если браузер не распознает этого элемента, то он просто сообщит вам об этом. В противном случае, браузер определит элемент вывода с именем «sum» и установит его значение, равное 15 , соответственно, после того, как форма будет отправлена на сервер. Элемент output может также содержать атрибут for , который отражает имя элемента, с которым он связан, подобно логике работы атрибута label . 28. Создание ползунков HTML5 предоставляет новый вид элементов input — range Особенно примечательно, что он может содержать атрибуты min , max , step и value и др. Хотя только Opera сейчас поддерживает это новшество полностью, будет просто восхитительно, когда мы сможем в полной мере пользоваться этой технологией. Для быстрой демонстрации, давайте создадим ползунок, который позволит пользователям оценить насколько хорош «Total Recall». Мы не будем создавать приближенное к реальной жизни решение, а просто покажем простоту реализации. Шаг 1: Разметка В начале создадим разметку. Заметь, для того, чтобы установить min и max значения, мы можем всегда определить какой step (шаг) будет использоваться при переходе. Если step равен 1 , будет доступно 10 значений для выбора. Мы также можем воспользоваться преимуществом нового элемента output , с которым мы ознакомились в предыдущем совете. Шаг 2: CSS Далее мы добавим немного стилей. Мы также используем :before и :after для информирования наших пользователей о том, какие значения определены в качестве минимального ( min ) и максимального ( max ) значения. Большое спасибо Реми и Брюсу, которые научили меня данному трюку в статье «Вступление в HTML5.» В коде, приведенном выше, перед и после нашего ползунка мы добавилии значения, которые использовали в качестве min и max соответственно. Шаг 3: Javascript Определяем поддерживает ли браузер эту технологию. Если нет — мы предупреждаем пользователя, что демо не будет работать. Динамично обновляем элемент output , если пользователь двигает слайдер. Отслеживаем событие, когда пользователь уводит курсор мыши от слайдера, считываем значение и сохраняем его в локальном хранилище. Затем, когда пользователь в следующий раз обновит страницу, ползунок и поле вывода будут автоматически устанавливаться в свое последнее состояние. Готовы к решению реальных задач? Возможно не до конца, но это действительно весело готовиться к этому! Загрузи исходники кода, и попробуй все примеры самостоятельно. Но только используй Opera. Благодарю за прочтение статьи! Мы рассмотрели достаточно много материала, но на самом деле лишь поверхностно коснулись того, что возможно в HTML5. Я надеюсь, это послужит хорошей основой для дальнейшего развития! HTML: основы для начинающих HTML – язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают текстовые редакторы типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки — , чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих. Визуальные редакторы Новички, только ступившие на путь изучения HTML, часто начинают свою работу с программ, позволяющих создавать сайты без каких-либо знаний. В них можно просто расположить элементы на экране так, как они будут отображаться в браузере. Казалось бы, вот он — источник вечной благодати, позволяющий избавиться от большинства веб-разработчиков. Но не всё так просто, так как у визуальных редакторов есть масса недостатков, которые делают невозможным их использование в серьёзных проектах. Все эти программы создают много ненужных тегов, которые делают конечный вариант страницы громоздким и неоптимальным. Конечно, в наш век скоростного интернета это имеет меньшее значение, чем раньше, но есть ряд причин, по которым лаконичный и грамотно написанный сайт получается более практичным, чем его собрат, созданный в визуальном редакторе. Веб-страница, сделанная в такой программе, будет плохо обрабатываться поисковыми роботами, так как для них важен каждый килобайт кода, а громоздкий и нелогичный код с кучей семантических ошибок едва ли придётся им по вкусу. Помимо этого, редакторы часто отстают от времени, становясь неактуальными, а тратить ресурсы на их развитие нецелесообразно, так как ни один профессионал не пользуется этими продуктами. Поэтому каждый, кто хочет работать в сфере создания сайтов, должен знать основы HTML. Как упоминалось выше, теги описывают браузеру структуру веб-страницы. Большинство из них имеют открывающий и закрывающий тег, но далеко не все. Например, . , где вместо точек находится содержимое. Первый из них показывает, где начинается тег, а второй закрывает его. Внутри могут находиться другие элементы разметки страницы, они могут вкладываться друг в друга подобно матрёшке. Тут важно своевременно закрывать теги, чтобы страница отображалась корректно. Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и атрибуты. Атрибут может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«. », где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы. Структура документа Каждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега , сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы. Потом идут основные парные структуры, составляющие «скелет» сайта. Первый тег, в который вложены все остальные — . . Всё, что находится за его пределами, не распознаётся браузером как веб-страница, так что он открывает документ и закрывает его. Этот тег является обязательным для любого документа. В нём также содержатся ещё несколько обязательных тегов, которые будут рассмотрены ниже. Внутри тега . содержится информация технического характера, которая не будет отображаться на странице, но, тем не менее, является важной частью документа HTML. Основы сайта закладываются именно в этом месте, здесь выбирается кодировка и вводится название страницы. Оно содержится внутри обязательного тега . . Отображается название в верхней части браузера, где также можно разместить небольшую иконку, характеризующую содержимое страницы. Желательно сразу указать кодировку документа для его корректного отображения. Это можно сделать при помощи тега . Метатеги предоставляют данные о структуре страницы и обычно располагаются внутри head. Знание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег
  • . В готовом виде это выглядит примерно вот так: , где href указывает на местоположение файла, а type — на его тип. Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них: — применяется для выделения подстроки, на которую будет распространяться особый стиль, описанный в css; — создаёт ссылку на веб-странице; адрес перехода задаётся атрибутом href; — выделяет абзац из текста; содержимое абзаца находится между открывающим и закрывающим тегами; — нумерованный список, элементы которого заключаются в парный тег ; — маркированный список, в котором, так же как и в нумерованном, элементы обозначаются тегом ; — заголовки документа (цифра обозначает уровень заголовка, то есть — главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней почти невозможно встретить на просторах интернета), также важно помнить, что на странице может быть лишь один заголовок ; — жирный текст; — курсив; — вставка картинки на интернет страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения); — вставка видео на веб-страницу; — тег, вставляющий в документ аудио файл. Это далеко не все теги, необходимые для создания собственной веб-страницы, но их вполне достаточно, чтобы заложить основы HTML для начинающих. Развитие языка HTML привело к тому, что каждый тег обзавёлся массой атрибутов, да и требования к внешнему виду веб-страниц существенно возросли. Код стал громоздким и неудобным, сложно было прочитать его, не то что адаптировать или изменить. К тому же, если на вашем сайте десять страниц, на которых много заголовков, отмеченных зелёным цветом, а вам вдруг захотелось сделать их красными, то придётся попотеть, изменяя каждый вручную. С появлением каскадных таблиц стилей этот процесс стал простым и логичным, да и HTML-код стал куда более читаемым. Применение CSS Для создания веб-страниц необходимо знать основы HTML и CSS, так как сейчас без знания каскадных таблиц стилей делать в этой сфере нечего. В них задаются атрибуты для любого элемента, распространяющиеся на весь документ. Таким образом, можно задать цвет сразу для всех элементов Для того чтобы подключить файл css к документу, существует тег link. Чуть выше был описан принцип его использования, но он не является единственным вариантом объединения всех стилей в одном месте. Есть ещё тег , который располагается в «голове» документа и позволяет прописать стили, не используя файлы CSS. Не обязательно пользоваться либо одним методом, либо другим. Их можно успешно комбинировать для получения наилучшего результата. Для создания файла с таблицами стилей нужно создать файл с расширением .css, например, Styles.css. JavaScript Нередко человек, решивший заняться разработкой веб-страниц, понимает, что для его задач недостаточно тех средств, которые предлагает HTML. Основы позволят создать красивую страницу, но что делать, если вдруг понадобилось сделать её интерактивной? Для этих целей существует уникальный сценарный язык программирования, который прекрасно взаимодействует с HTML. Называется он JavaScript, так как задумывался как младший брат популярного языка Java. Сегодня эти языки обзавелись существенными различиями, и пропасть между ними только растёт. JavaScript может расширить возможности HTML, он позволяет создавать и редактировать теги. Также при помощи этого замечательного инструмента можно работать с Cokie, загружать данные с сервера, не перезагружая страницу, сделать сайт более интерактивным, чем позволяют возможности HTML. Есть у этого языка и ограничения, которые связаны с безопасностью. Если JavaScript используется не на серверной части, то он будет выполняться в условиях, ограничивающих его возможности, дабы злоумышленники не могли задействовать вредоносный код на любом компьютере. Редакторы Основы HTML для новичка предполагают знания о наиболее удобных и практичных программах для создания веб-страниц. Как было написано выше, визуальные редакторы, такие как Dreamweaver и ему подобные, не подходят для этих целей. Так что же, писать теги в обычном блокноте? Этот вариант также сомнителен, так как стандартный блокнот не располагает никакими специальными инструментами для вёрстки. С этой задачей может неплохо справиться Notepad++. Большой плюс этого продукта в том, что он имеет открытый код и распространяется абсолютно бесплатно. В нём присутствует удобная подсветка синтаксиса и автоматическое закрывание тегов. Notepad++ также предоставляет широкий выбор языков интерфейса, а его возможности легко расширяются при помощи многочисленных дополнений. Sublime Text 3 — программа, похожая на Notepad++, но распространяющаяся на платной основе. Именно она покорила сердца большинства разработчиков. Sublime Text 3 идеально подходит для JavaScript, CSS и HTML. Основы работы с ней придётся изучать самостоятельно, но оно того стоит. В ней заложены воистину безграничные возможности для тонкой настройки, что позволяет максимально подогнать программу под свои нужды. Основы HTML и CSS для начинающих Как видите, изучить искусство создания веб-страниц не так уж и сложно, как кажется на первый взгляд. Всего несколько месяцев практических занятий превратят вас из робкого пользователя в начинающего разработчика. Научиться вёрстке гораздо проще, чем освоить какой-нибудь язык программирования или Linux. На самом деле тегов HTML не так уж и много, важно понять практический аспект их применения. Не лишним в этом деле будет навык работы в Adobe Photoshop. Эта программа позволяет работать с фотографиями, картинками и прочими графическими элементами веб-страницы. На данный момент именно «Фотошоп» лучше всего справляется с такими задачами, конкурентов у него немного. Для тех, кому этот продукт компании Adobe пришёлся не по нраву, есть Lightroom, GIMP, Illustrator и другие программы с похожими функциями. Что даёт знание HTML Навыки создания веб-страниц очень актуальны сегодня, так как интернет расширяется не по дням, а по часам. Каждое предприятие, любой, даже самый маленький магазинчик, мастерские и спортивные клубы — все хотят иметь собственный сайт. И конечно же, для этого им понадобится разработчик, владеющий CSS и HTML. Основы просто освоить, после чего дело за практикой. Так как технологии вёрстки постоянно развиваются, то фронтенд-разработчики всегда будут востребованы. Тот, кто решит посвятить себя этой интересной отрасли, никогда не останется без работы.
  • 4. Больше нет атрибута type для элементов script и link.
  • 5. Брать в кавычки или нет.
  • 6. Сделай свой контент редактируемым
  • 7. Поля ввода Email
  • 8. Заполнители
  • 9. Локальное хранилище
  • 10. Семантичный Header и Footer
  • 11. Еще о дополнениях работы с формами в HTML5
  • 12. Internet Explorer и HTML5
  • 13. hgroup
  • 14. Атрибут для обязательных полей
  • 15. Атрибут Autofocus
  • 16. Поддержка аудио
  • 17. Поддержка видео
  • 18. Предзагрузка видео.
  • 19. Отображение контрольной панели
  • 20. Регулярные выражения
  • 21. Определение поддерживаемых атрибутов
  • 22. Маркировка элементов
  • 23. Когда именно надо использовать
  • 24. Что необходимо немедленно начать использовать.
  • 25. Что не является HTML5
  • 26. Атрибут Data
  • HTML сниппет
  • Получение значения пользовательского атрибута
  • 27. Элемент вывода
  • 28. Создание ползунков
  • Шаг 1: Разметка
  • Шаг 2: CSS
  • Шаг 3: Javascript
  • HTML: основы для начинающих
  • Визуальные редакторы
  • Структура документа
  • — главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней
  • ;
  • Применение CSS
  • JavaScript
  • Редакторы
  • Основы HTML и CSS для начинающих
  • Что даёт знание HTML
  • HTML начало

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

    Создание HTML документов

    Для того, чтобы создать HTML документ необходимо:

    1. Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
    2. Набрать произвольный текст и разметить его HTML тегами;
    3. Cохранить файл с расширением .htm или .html.

    Базовый документ HTML

    Ниже приведен в своей простейшей форме пример HTML-документа:

    Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:

    HTML теги

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

    Особенности HTML

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

    Любое количество пробелов идущих подряд, на веб-странице отображается как один

    Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. Это же правило относится к символам табуляции и переносу текста. Поэтому не ставьте лишних пробелов, поскольку это лишь увеличит общий объем файла, но никак не изменит вид документа в браузере. В качестве образца возьмем один текст и напишем его в коде HTML по-разному (пример 3.1).

    Пример 3.1. Способы написания текста в коде HTML

    Несмотря на разное написание, отображаться эти строки будут одинаково.

    Исключением из этого правила является тег

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

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

    Нет расстановки переносов в тексте

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

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

    Текст занимает ширину окна браузера

    Если вы просто напишите одну длинную строку в коде HTML, то в браузере она будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса. Что произойдет, если в тексте нет ни того, ни другого символа? Браузер не сможет создать переносы и отобразит текст одной строкой. Если она шире окна браузера, то неминуемо появится горизонтальная полоса прокрутки.

    Основы HTML5 или учимся верстать на HTML5

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

    Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.

    Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.

    Верстка div (старая)

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

    Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

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

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

    Теги HTML5

    Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:

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

    — данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.

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

    — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

    — в этот тег должен входить низ Вашего сайта (Футер)

    — в данный тег входят групы заголовков сайтов, например

    — данный тег включает в себя всю навигацию на сайте (меню).

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

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

    — данный тег выводит аудио на сайте.

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

    — в этот тег должны входить список меню, например ul li.

    — сюда входят время и дата на сайте. Например на блогах дата размещения поста.

    — вставляет видео на страницу.

    — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу
    .

    Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

    А вот как он выглядит по новому:

    Ну как Вам разница? :-) По моему существенная. Так же ещё проще стал тег . Он был такой:

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

    Верстка (новая)

    Перед тем как приступить к вёрстке нам между тегами и нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

    Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:

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

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

    Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div с классом headerInner —

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

    Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом . В старой вёрстке этот главный блок выглядел так

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

    Вывод

    Друзья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.

    Опять рекомендую Вам переходить Вам на новую технологию.

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

    Основы 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.

      Семантическая структура для HTML5 страницы. Семантика в HTML5

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

      Семантическая структура для HTML5 страницы

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

      Рисунок — Семантическая структура для HTML5 страницы.

      DOCTYPE и meta теги в заголовке страницы

      Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head :

      Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

      Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные

      Заголовок страницы

      Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

      Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

      Замечание по поводу тега H1

      Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)

      До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

      Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

      Контент на странице

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

      Оформление статьи

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

      На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime=»2015-09-30″ или с указанием часов минут и секунд datetime=»2015-09-30T15:25:55″ . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

      Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

      Сайдбар или колонка с виджетами

      Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

      Тег section

      Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги (

      ) для обозначения темы секции.

      В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

      Пример использования тега section в списке с перечислением городов:

      Подвал сайта оформляется тегом

      Заключение

      Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

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

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

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

      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).

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

      Особенности идеального 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’шками?

      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. Какую кодировку использовать?

      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‘ы:

      _________
      Текст подготовлен в ХабраРедакторе

      Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

      25 советов и описание HTML5

      Дата публикации: 2012-03-18

      От автора: статья об описании HTML5, эта отрасль развивается действительно очень быстро! Если вы не будете осторожны, вас оставят за бортом. Если вы чувствуете себя немного пораженным происходящими изменениями и обновлениями HTML5, воспользуйтесь этой статьёй, как примером того, что вы должны знать.

      1. Новый тип документа

      Всё ещё используете надоедливый, трудно запоминаемый формат XHTML?

      Зачем? Переключитесь на новый тип документа HTML5. Вы будете жить дольше, как сказал бы Douglas Quaid.

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

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

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

      2. Элемент Figure

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

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

      This is an image of something interesting.

      3. Переопределение

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

      «Элемент small теперь переименован в «small print»»

      4. Теперь без атрибутов Type для ссылок и скриптов

      Вы, возможно, ещё добавляете атрибут type тегам
      и

      28 особенностей, советов и техник HTML5, которые необходимо знать

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

      1. Новый Doctype

      До сих пор используешь этот надоедливый, сложнозапоминающийся XHTML doctype?

      Если так, то зачем? Начни использовать новый HTML5 doctype. Ты проживешь дольше — как бы сказал Дуглас Квейд

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

      2. Элемент figure

      Рассмотрим следующую разметку для изображений:

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

      3. Переопределенный элемент

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

      Элемент small сейчас относится к «маленькому тексту».

      4. Больше нет атрибута type для элементов script и link.

      Ты возможно до сих пор добавляешь атрибут type в тэги элементов link и script

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

      5. Брать в кавычки или нет.

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

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

      6. Сделай свой контент редактируемым

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

      Или, как мы узнали из прошлого совета, мы можем написать это так:

      7. Поля ввода Email

      Если мы используем значение «email» атрибута type для форм ввода, мы можем проинформировать браузер о возможности ввести строки, соответствующие только валидным email адресам. Да, все верно: встроенная валидация форм «на лету» скоро будет доступна! Мы пока не можем на все 100% положиться на результаты данной проверки по понятным причинам. Браузеры более ранних версий, которые «не понимают» значение email атрибута type, отображают поля ввода самими что ни на есть обычным образом.

      В то же время, мы не можем зависеть от валидации браузера. Решение на стороне сервера по-прежнему должно быть реализовано.

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

      8. Заполнители

      Прежде мы были вынуждены использовать немного Javascript для создания заполнителей для областей текста (textbox). Конечно, ты можешь изначально назначить атрибут value как ты считаешь нужным, но как только пользователь удаляет этот текст и снимет фокус с него, щелчком мыши вне этого поля, его содержимое снова станет заданным по умолчанию. Атрибут placeholder исправляет эту ситуацию.

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

      9. Локальное хранилище

      Благодаря локальному хранилищу(не введенным с HTML5, а упомянутому ради удобства), мы можем организовывать расширенную «память» браузера введенных данных, даже после его закрытия или обновления страницы.

      «Локальное хранилище устанавливает пространство на домене. Даже закрывая и открывая заново браузер и переходя на тот же сайт, все данные из полей сохраняются в локальном хранилище.
      -QuirksBlog

      Хотя очевидно, что данное хранилище не поддерживается всеми браузерами, мы можем изучить этот метод для работы, наиболее заметно это в Internet Explorer 8, Safari 4 и Firefox 3.5. Учти только то, что для компенсации отсутствия поддержки данной технологии в старых браузерах, ты должен сперва определить существует ли свойство window.localStorage.

      Прошли времена подобного кода:

      Блоки, изначально, не имели семантичной структуры — даже после появления атрибута id . Теперь в HTML5 у нас появилась возможность использовать элементы и . Разметка, приведенная выше, может быть переписана следующим образом:

      Это в полной мере позволяет создавать в своих проектах сложные по структуре разделы header и footer

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

      11. Еще о дополнениях работы с формами в HTML5

      Изучи новые полезные дополнения HTML5 по работе с формами в небольшом видео-совете.

      12. Internet Explorer и HTML5

      К сожалению, Internet Explorer по-прежнему привносит множество пререканий при работе с новыми HTML5 элементами.

      Все элементы, по умолчанию, имеют значение inline атрибута display

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

      К сожалению, Internet Explorer будет все равно игнорировать эти стили, потому что он понятия не имеет, что, например, элемент header сам по себе блочный. К счатью, существует простой фикс этой проблемы:

      Достаточно странно, но этот код кажется включает Internet Explorer. Для упрощения использования данного метода в дальнейшем, Рэмми Шарп создал скрипт, на который можно ссылаться, как на HTML5 факел. Этот скрипт также исправляет часть вопросов с печатью.

      13. hgroup

      Представь, что в заголовке моего сайта имеется его имя, немедленно следующее за подзаголовком. Используя тэги ≪h1> и ≪h2> соответственно для создания разметки в HTML4 до сих пор не было возможности семантично проиллюстрировать взаимоотношения между этими двумя элементами. К тому же, использование тэга h2 привносит больше проблем, с точки зрения иерархии, когда он описывает и другие заголовки на странице. Используя элемент hgroup , мы можем группировать заголовки вместе без влияния на поток вывода документа.

      14. Атрибут для обязательных полей

      Формы поддерживают новый атрибут required , который указывает, естественно, является ли конкретное поле для ввода обязательным. В зависимости от твоих предпочтений написания кода, ты можешь объявить этот атрибут двумя путями:

      Либо более структурированным способом:

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

      Если обязательное поле остается пустым и форма отправляется, поле будет подсвечено.

      15. Атрибут Autofocus

      Опять же, HTML5 снимает необходимость использования Javascript-решений. Если конкретное поле ввода должно быть выбрано по умолчанию (с фокусом), теперь мы можем использовать атрибут autofocus .

      Любопытно, пока я сам предпочитаю использовать более XHTML подход(с использованием кавычек и т.д.) и пишу «autofocus=autofocus» , хоть это и странно. Таким образом, скоро мы будем использовать подход с использованием одного ключевого слова.

      16. Поддержка аудио

      Mozilla и Webkit еще не определились до конца с форматом аудио. Firefox хочет использовать файл формата .ogg, когда как Webkit-браузеры отлично взаимодействуют с распространенным .mp3 расширением. Это означает следующее, что ты, как минимум, должен создавать две версии для аудио.

      Когда Safari загружает страницу, браузер может не распознать .ogg формат, пропустит его и, соответственно, обратиться к mp3 версии. То учти, что IE, как обычно, не поддерживает воспроизведение аудио, а Opera 10 и более ранние версии могут работать только с .wav файлами.

      17. Поддержка видео

      Также как элемент , мы также можем использовать HTML5 видео в новых браузерах. На самом деле, совсем недавно YouTube анонсировал новый встроенную поддержку HTML5 видео для своих роликов, для браузеров, которые поддерживают эту технологию. К сожалению, опять же, потому что HTML5 спецификация не определяет конкретного кодека для видео, решение о выборе кодека остается за разработчиками браузеров. Пока Safari и Internet Explorer 9 могут поддерживать видео в формате H.264 (который могут вопроизводить Flash-плееры), Firefox и Opera используют свободные форматы Theora и Vorbis. Опять же, для отображения HTML5 видео, ты должен учитывать оба формата.

      Chrome может корректно обрабатывать видео, которое кодировано в форматах «ogg» и «mp4».

      Есть несколько моментов, на которые стоило бы обратить внимание.

      1. Мы не обязаны объявлять атрибут type ; однако, если мы не будем объявлять этот атрибут, браузер должен будет определить его самостоятельно. Можно сэкономить немного пропускной способности, если самому объявить атрибут type
      2. Не все браузеры понимают HTML5 видео. Под элементом source , мы можем также предложить ссылку для скачивания или встроенную Flash-версию видео. Твое дело.
      3. Атрибуты controls и preload будут более подробно рассмотрены в слелующих двух пунктах.

      18. Предзагрузка видео.

      Атрибут preload делает именно то, о чем ты мог бы предположить. Хотя изначально ты должен решить хочешь ли ты, чтобы браузеры осуществлял предварительную загрузку видео. Так ли это необходимо? Возможно, если посетитель получает доступ к странице, которая специально создана для отображения видео, несомненно видео предварительно должно быть загружено, тем самым сэкономив пользователю немного времени. Видео будет предварительно загружаться, если имеется следующее объявление preload=»preload» или просто добавлен атрибут preload . Я предпочитаю последний вариант, так как он менее многословный.

      19. Отображение контрольной панели

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

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

      20. Регулярные выражения

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

      Если ты достаточно знаком с регулярными выражениями, ты знаешь, что шаблон [A-Za-z] <4,10>принимает только прописные и строчные буквы. Также эта строка должна быть длиной минимум 4 и максимум 10 знаков.

      Обрати внимание, что мы объединили все новые атрибуты!

      Если ты не знаком с регулярными выражениями, направляйся сюда.

      21. Определение поддерживаемых атрибутов

      В чем прелесть этих атрибутов, если мы не имеем возможности определить заранее поймет ли их браузер? Хорошо, но есть несколько вариантов определить это заранее. Мы обсудим два. Первый вариант: использовать отличную библиотеку Modernizr. Кроме того, мы можем создать и анализировать эти элементы, чтобы определить какие из браузеров способны их понять. Например, в нашем предыдущем примере, если мы хотим определить поддерживает ли браузер атрибут pattern , мы должны добавить немного Javascript на нашу страницу:

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

      Помни, что все это основывается на JavaScript!

      22. Маркировка элементов

      Подумай о подсвеченной маркировке элемента. Строка, помещенная в данный тэг, должна согласовываться с текущими действиями пользователя. Например, если я ищу «Открой своё сознание» на каком-либо блоге, я могу использовать немного Javascript-кода для того, чтобы обвернуть каждое появление этой строки с помощью тэгов .

      23. Когда именно надо использовать

      Некоторые из нас изначально относятся с спорят когда именно мы должны использовать простые, стандартные div ы. Сейчас мы можем пользоваться элементами header , arcticle , section и footer . Если ли четко определенные моменты, когда следует использовать div ? Конечно!

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

      Например, если тебе необходимо поместить блок кода специально в элемент-обвертку с целью дальнейшего позиционирования контента, элемент

      24. Что необходимо немедленно начать использовать.

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

      25. Что не является HTML5

      Люди могут быть прощены за то, что удивительные Javascript малообъемные переходы, сгруппированы во всеобъемлющем HTML5. Эй, даже Apple непреднамеренно способствал этой идее. Для интересующихся «не разработчиков» это простой способ соответствовать современным веб-стандартам. Однако, для нас, несмотря на кажущуюся семантичность, важно понимать, что это не HTML5.

      1. SVG: Не HTML5. По-крайней мере, 5 лет.
      2. CSS3: Не HTML5. Это CSS.
      3. Геолокация: Не HTML5.
      4. Хранилище на стороне клиента: Не HTML5. Понятие изначально фигурировало в спецификации, но позже оно было удалено из нее, так как некоторые специалисты были обеспокоены тем, что спецификация становилась слишком сложной. И теперь эта технология выведена в отдельную спецификацию.
      5. Web Sockets: Не HTML5. Также было выведено в отдельную спецификацию.

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

      26. Атрибут Data

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

      . валидатор подобную конструкцию мог не пропустить. Но сейчас, когда мы уже не относим придуманный нами атрибут к атрибуту «data», мы можем официально использовать этот метод. Если вы хоть раз передавали важную информацию посредством имени такого атрибута, как class (возможно для использования в Javascript), то эта новая возможность является большим подспорьем!

      HTML сниппет

      Получение значения пользовательского атрибута

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

      Ты можешь увидеть демо размещенного выше эффекта на JSBIN.

      27. Элемент вывода

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

      В качестве простого примера, давай вставим сумму двух чисел в пустой элемент output с помощью Javascript после того, как кнопка submit будет нажата.

      Пожалуйста, только учти, что поддержка элемента output до сих пор немного нераспространенная. Во время написания этой статьи, у меня получалось нормально использовать этот элемент только в Opera. Что и было отражено в коде, приведенном выше. Если браузер не распознает этого элемента, то он просто сообщит вам об этом. В противном случае, браузер определит элемент вывода с именем «sum» и установит его значение, равное 15 , соответственно, после того, как форма будет отправлена на сервер.

      Элемент output может также содержать атрибут for , который отражает имя элемента, с которым он связан, подобно логике работы атрибута label .

      28. Создание ползунков

      HTML5 предоставляет новый вид элементов input — range

      Особенно примечательно, что он может содержать атрибуты min , max , step и value и др. Хотя только Opera сейчас поддерживает это новшество полностью, будет просто восхитительно, когда мы сможем в полной мере пользоваться этой технологией.

      Для быстрой демонстрации, давайте создадим ползунок, который позволит пользователям оценить насколько хорош «Total Recall». Мы не будем создавать приближенное к реальной жизни решение, а просто покажем простоту реализации.

      Шаг 1: Разметка

      В начале создадим разметку.

      Заметь, для того, чтобы установить min и max значения, мы можем всегда определить какой step (шаг) будет использоваться при переходе. Если step равен 1 , будет доступно 10 значений для выбора. Мы также можем воспользоваться преимуществом нового элемента output , с которым мы ознакомились в предыдущем совете.

      Шаг 2: CSS

      Далее мы добавим немного стилей. Мы также используем :before и :after для информирования наших пользователей о том, какие значения определены в качестве минимального ( min ) и максимального ( max ) значения. Большое спасибо Реми и Брюсу, которые научили меня данному трюку в статье «Вступление в HTML5.»

      В коде, приведенном выше, перед и после нашего ползунка мы добавилии значения, которые использовали в качестве min и max соответственно.

      Шаг 3: Javascript

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

      Готовы к решению реальных задач? Возможно не до конца, но это действительно весело готовиться к этому!

      Загрузи исходники кода, и попробуй все примеры самостоятельно. Но только используй Opera.

      Благодарю за прочтение статьи! Мы рассмотрели достаточно много материала, но на самом деле лишь поверхностно коснулись того, что возможно в HTML5. Я надеюсь, это послужит хорошей основой для дальнейшего развития!

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

      HTML – язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают текстовые редакторы типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки — , чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих.

      Визуальные редакторы

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

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

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

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

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

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

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

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

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

    • . В готовом виде это выглядит примерно вот так:
    • , где href указывает на местоположение файла, а type — на его тип.

      Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них:

      • — применяется для выделения подстроки, на которую будет распространяться особый стиль, описанный в css;
      • — создаёт ссылку на веб-странице; адрес перехода задаётся атрибутом href;

      — выделяет абзац из текста; содержимое абзаца находится между открывающим и закрывающим тегами;

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

      — главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней

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

      ;

    • — жирный текст;
    • — курсив;
    • — вставка картинки на интернет страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения);
    • — вставка видео на веб-страницу;
    • — тег, вставляющий в документ аудио файл.

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

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

    Применение CSS

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

    Для того чтобы подключить файл css к документу, существует тег link. Чуть выше был описан принцип его использования, но он не является единственным вариантом объединения всех стилей в одном месте. Есть ещё тег , который располагается в «голове» документа и позволяет прописать стили, не используя файлы CSS. Не обязательно пользоваться либо одним методом, либо другим. Их можно успешно комбинировать для получения наилучшего результата. Для создания файла с таблицами стилей нужно создать файл с расширением .css, например, Styles.css.

    JavaScript

    Нередко человек, решивший заняться разработкой веб-страниц, понимает, что для его задач недостаточно тех средств, которые предлагает HTML. Основы позволят создать красивую страницу, но что делать, если вдруг понадобилось сделать её интерактивной? Для этих целей существует уникальный сценарный язык программирования, который прекрасно взаимодействует с HTML. Называется он JavaScript, так как задумывался как младший брат популярного языка Java. Сегодня эти языки обзавелись существенными различиями, и пропасть между ними только растёт.

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

    Редакторы

    Основы HTML для новичка предполагают знания о наиболее удобных и практичных программах для создания веб-страниц. Как было написано выше, визуальные редакторы, такие как Dreamweaver и ему подобные, не подходят для этих целей. Так что же, писать теги в обычном блокноте? Этот вариант также сомнителен, так как стандартный блокнот не располагает никакими специальными инструментами для вёрстки. С этой задачей может неплохо справиться Notepad++. Большой плюс этого продукта в том, что он имеет открытый код и распространяется абсолютно бесплатно. В нём присутствует удобная подсветка синтаксиса и автоматическое закрывание тегов. Notepad++ также предоставляет широкий выбор языков интерфейса, а его возможности легко расширяются при помощи многочисленных дополнений.

    Sublime Text 3 — программа, похожая на Notepad++, но распространяющаяся на платной основе. Именно она покорила сердца большинства разработчиков. Sublime Text 3 идеально подходит для JavaScript, CSS и HTML. Основы работы с ней придётся изучать самостоятельно, но оно того стоит. В ней заложены воистину безграничные возможности для тонкой настройки, что позволяет максимально подогнать программу под свои нужды.

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

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

    Не лишним в этом деле будет навык работы в Adobe Photoshop. Эта программа позволяет работать с фотографиями, картинками и прочими графическими элементами веб-страницы. На данный момент именно «Фотошоп» лучше всего справляется с такими задачами, конкурентов у него немного. Для тех, кому этот продукт компании Adobe пришёлся не по нраву, есть Lightroom, GIMP, Illustrator и другие программы с похожими функциями.

    Что даёт знание HTML

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

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