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

Словарь терминов
толкование терминов встречающихся при cоздании и раскрутке сайтов.

Поисковые системы
принцип работы поисковых систем, алгоритмы, факторы ранжирования.

Интересные статьи
здесь каждый найдёт для себя интересные статьи и ответы на вопросы связанные с созданием сайта.

Заработать в Интернете
реальные способы для вебмастера и не только, начни своё дело.

Известные люди
раздел содержит краткие биографии и истории из жизни людей повлиявших на ход истории Интернета.

Раскрутка сайта
эффективное продвижение сайта, выведи свой сайт на первые позиции.

Сайт на HTML 5 - примеры кода

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

HTML 5 - новые возможности

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

С развитием HTML 5 разрабатывается стандарт семантической разметки, который уже поддерживается Яндексом и, кстати, рекомендуется им к применению.

Содержание:

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

Применение HTML 5 достаточно актуально и для мобильных устройств, потому что новинки Apple и Mac, вместе с последней версией Apple Safari web browser, поддерживают новую версию языка гипертекстовой разметки, а также CSS 3 и JavaScript.

  • Упрощенная вставка на web-страницу аудио- и видеоматериалов, без дополнительных плагинов.
  • Многоколоночная верстка текста.
  • Возможность рисования на web-страницах.
  • Дополнительная поддержка мобильных устройств.
  • Поддержка работы в оффлайновом режиме (при отключении от Интернета).

Многие web-дизайнеры боятся, использовать технологии нового стандарта, из-за отсутствия поддержки некоторых браузеров ссылаясь на то, что это связывает им руки и не даёт применить все свои профессиональные возможности. А вот когда новая версия HTML 5 будет полностью протестирована и официально принята и одобрена общественностью, тогда они и выйдут из тени и поднимут Интернет на совершенно иной уровень, полный захватывающих возможностей.

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

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

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

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

Если ты, дорогой друг, знаком с вёрсткой html-документа, то наверное использовал тег div, которым приходилось определять контейнеры в различных частях страницы. В новой версии HTML 5 для каждой части страницы имеется свой элемент.

  • header - определяет верхнюю область сайта (шапка) или раздела в которой расположен заголовок. Закрывающий тег обязателен.
  • nav - объединяет ссылки навигации по сайту, допускается использовать несколько тегов < nav > в документе. Закрывающий тег обязателен.
  • section - задает раздел документа, который может включать в себя заголовки, шапку, подвал и текст. Закрывающий тег обязателен.
  • article - задает описание сайта или web-страницы. Закрывающий тег обязателен.
  • footer - задаёт нижнюю область сайта (подвал) или раздела, в нём обычно располагается имя автора, дата, контактная и правовая информация. Закрывающий тег обязателен.
  • aside - создает блок сбоку от контента для расположения рубрик, меток и другой информации. Закрывающий тег обязателен.
  • figure - применяется для группирования любых элементов, например, изображений и подписей к ним. Закрывающий тег обязателен.
  • mark - помечает текст как выделенный, который ничем не отличается от обычного, но его вид может быть изменен посредством css. Закрывающий тег обязателен.
  • time - текст находящийся внутри тега обозначается как дата или время. Закрывающий тег обязателен. Атрибуты:
    • datetime - задает дату и время.
    • pubdate - указывает дату публикации.
  • progress - используется для отображения прогресса завершенности задачи, изменение значения происходит через JavaScript. Закрывающий тег обязателен. Атрибуты:
    • value - текущее значение.
    • max - максимальное значение.
  • meter - используется для вывода значения в определенном диапазоне, в основном для отображения числовых значений. Закрывающий тег обязателен. Атрибуты:
    • value - обязательный атрибут, задаёт значение.
    • min - задает максимальное значение.
    • max - задает минимальное значение.
    • low - определяет предел для низкого значения.
    • high - определяет предел для высокого значения.
    • optimum - оптимальное значение.
  • audio - добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице, путь к файлу задается через атрибут src или вложенный тег < source >. Закрывающий тег обязателен. Атрибуты:
    • autoplay - звук начинает играть сразу после загрузки страницы.
    • controls - добавляет панель управления к аудиофайлу.
    • loop
    • - повторяет воспроизведение звука с начала, после его завершения.
    • preload
    • - используется для загрузки файла вместе с загрузкой веб-страницы.
    • src
    • - указывает путь к воспроизводимому файлу.
  • video - Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице, путь к файлу задается через атрибут src или вложенный тег < source >. Закрывающий тег обязателен. Атрибуты:
    • autoplay - видео начинает воспроизводиться автоматически после загрузки страницы.
    • controls - добавляет панель управления к видеоролику.
    • height - задает высоту области для воспроизведения видеоролика.
    • loop - повторяет воспроизведение видео с начала, после его завершения.
    • poster - указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
    • preload - используется для загрузки видео вместе с загрузкой веб-страницы.
    • src - указывает путь к видеофайлу.
    • width - задает ширину области для воспроизведения видеоролика.
  • menu - предназначен для отображения списка пунктов меню, аналогично тегам < ol > и < ul > внутри контейнера < menu > список создается с помощью тегов < li >. Закрывающий тег обязателен. Атрибуты:
    • label - устанавливает видимую метку для меню.
    • type - определяет тип меню.
  • command - создает команду в виде переключателя, флажка или обычной кнопки, < command > располагается внутри < menu >. Закрывающий тег не нужен. Атрибуты:
    • checked - активирует команду, доступен только если type установлен как radio или checkbox.
    • disabled - задает, доступна команда или нет.
    • icon - адрес изображения, которое показывается как команда.
    • label - наименование команды.
    • radiogroup - задает имя группы переключателей, доступно только если type установлен как radio.
    • type - определяет тип команды (checkbox, command, radio), по умолчанию command.
  • datagrid - создает список вариантов, которые можно выбирать при наборе в текстовом поле.
  • details - используется для хранения информации, которую можно скрыть или показать по требованию пользователя, по умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.

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

Удачи!



Полезно почитать:
Как заработать деньгиВыбор хостинга для сайтаБесплатные игры онлайн
Как заработать на своём сайте
только лучшие и проверенные способы.

Как создать сайт для заработка
два самых денежных варианта.

Как заработать в интернете новичку
для тех кто ищет дополнительный заработок.

Партнерские программы
лучшие партнёрки для заработка в сети.

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

Психология
интересные статьи по психологии и современным психологическим технологиям, рекламе и PR в интернете.

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

Интернет
история возникновения Интернета, психология поисковых запросов и т.п.