Дизайнеры тратят часы на оттачивание мастерства для тщательной подгонки мельчайших деталей в дизайне веб сайтов, которые выходят из-под их пера. Однако качество кода очень часто остается весьма низким. Вам нужны доказательства? Посмотрите галереи бесплатных шаблонов CSS. 90% шаблонов не пройдут проверку. Причем, основная часть ошибок является весьма примитивными и их очень легко исправить. В данном уроке рассмотрим типовые ошибки в коде HTML, которые мешают успешному завершению проверки.
Зачем проверять код?Если сайт выглядит отлично в браузере, то зачем проверять код? Типичный вопрос, который задается перед проверкой кода. Но ведь сайт не ограничивается только тем, что видно пользователю. Страницы HTML предназначены для представления данных, а не графических эффектов. Данные должны быть доступными для чтения для всего огромного сообщества людей, которое использует интернет. И читатели могут использовать совсем другие технологии для получения информации, представленной на вашем сайте - например, они могут использовать программу для воспроизведения данных голосом и просто слушать, что написано на вашей странице.
Страница HTML, которая не содержит ошибок, в основном будет корректно отображаться в большинстве браузеров, а также будет соответствовать требованиям будущих технологий. Здесь стоит упомянуть поисковые механизмы, действие которых очень важно для целей SEO. Никто не хочет создавать для них препятствий, а чистый и правильный код гораздо легче воспринимается поисковыми ботами.
Это также вопрос профессионализма. Неправильный код HTML очень похож на грамматические ошибки в надписях на сайте. И хотя клиент может и не заметить ошибок в коде - это не изменяет сущности вопроса. Никто не любит грамматические ошибки в дизайне, но оставлять код HTML с ошибками почему-то не считается таким же постыдным деянием.
Общие ошибкиНиже представлены ошибки, которые выловлены в шаблонах с первой страницы известной галереи CSS шаблонов. Множество сайтов выглядят отлично и даже великолепно, но очень часто качество кода не соответствует качеству дизайна. Хотя большинство таких ошибок может быть исправлено очень быстро и просто.
Самая плохая ошибка - не использовать Doctype ! Отсутствие тега Doctype означает, что браузер будет "догадываться", какой язык использовался для создания документа. Для исправления ошибки нужно указать тип документа вашей страницы .
Не закрыт элемент
Если вы открыли тег где-то в вашем документе HTML, его нужно закрыть в соответствующем месте. Забывчивость в данном вопросе не только приводит к ошибкам при проверке кода, но и может вызвать серьезные проблемы с шаблоном. На рисунке представлена ситуация, когда автор забыл закрыть тег Опускается символ / в самозакрывающихся элементах
Большинство элементов HTML имеет отдельные закрывающие теги, например: . Но есть элементы, такие как input , img и meta , которые являются самозакрывающимися, это означает, что они должны иметь символ / перед закрывающейся скобкой.
Не произведена конвертация специальных символов
В соответствии с предыдущим пунктом, специальные символы, особенно амперсанд, должны быть кодированы в строках URL. Ссылки на сайты, построенные с использованием PHP, часто содержат переменные с использованием символа & , их нужно писать с использованием кода HTML & .
Блочные элементы внутри строчных
Одно из основных правил HTML заключается в том, что блочные элементы НИКОГДА не должны находиться внутри строчных элементов.
Популярный пример ошибки - использование ссылки в заголовке: bananas
- блочный элемент, поэтому он должен оборачиваться вокруг ссылки (строчный элемент): bananas .
Отсутствует атрибут alt у изображения
Каждое изображение в документе HTML должно иметь атрибут alt с описанием содержания картинки. Даже если картинка служит для дизайнерских целей, она должна иметь атрибут alt , но в данном случае его надо оставить пустым, например, alt="" . В другом случае нужно представить описание содержание изображения.
Использование атрибутов подобных width и height 
Вероятно, такое положение является обратной стороной широкого использования редакторов WYSIWYG, которые имеют тенденцию вставлять излишний код HTML. Атрибуты width и height определяются в переходных стандартах типах документа, но если вы задаетесь целью четко следовать стандартам, то наверняка знаете, что все атрибуты, отвечающие за представление элементов на страницах, должны быть перенесены в таблицу стилей CSS, для разделения содержания и дизайна.
Имя класса или ID начинается с цифры
Имя класса, ID или имя атрибута не может начинаться с цифры. Они могут включать цифры, но не в начале слова.
А какова ситуация с проверкой CSS кода?
В отличие от HTML, CSS используется для визуального представления страницы. Таким образом, вопрос “Если страница выглядит хорошо, то зачем проверять код?” в данном случае звучит более убедительно. Неправильный код CSS не оказывает такого влияния на веб страницы, как неправильный код HTML. Однако проверку стоит проводить на предмет обнаружения опечаток и ошибок в коде. Если вы используете новые свойства CSS3, они сделают ваш документ не прошедшим проверку, так как еще не включены в спецификацию, но если вы уверенны, что все правильно, то на такие ошибки можно не обращать внимание.
Объявление типа документа ссылается на правила языка разметки - для того, чтобы браузер отрисовывал содержимое документа правильно.
Различные Типы HTML ДокументаОбъявление типа документа - это не HTML тег; это инструкция для веб браузера о версии языка разметки, на котором написана страница.
Объявление типа документа ссылается на "Определение Типа Документа" или "Document Type Definition" (DTD). DTD устанавливает правила для языка разметки, так что браузеры отрисовывают содержимое корректно.
Объявление типа документа должно стоять на первом месте в HTML документе, до тега .
Совет: Всегда добавляйте тип документа к вашим страницам. Это помогает браузерам отрисовывать страницу правильно!
Тип документа "HTML 4.01 Strict"Определение Типа Документа (DTD) содержит все HTML элементы и атрибуты, но НЕ ВКЛЮЧАЕТ репрезентативные и устаревшие элементы(типа font и center). Наборы фреймов (frameset) не разрешены:
Тип документа "HTML 4.01 Frameset"Это DTD эквивалентно "HTML 4.01 Transitional", но разрешает использование наборов фреймов (frameset) :
Я часто в своих уроках делал такие утверждения, как – «один тэг должен располагаться внутри другого», «у тэга img должен быть атрибут src», «сначала идёт тэг head, а потом body» и так далее. Но я ведь не придумывал всё это на лету, - а руководствовался неким регламентом, автором которого является организация, которая собственно придумывает и утверждает все стандарты, - называется она W3C (Консорциум Всемирной Паутины). Раньше я об этом не упоминал, но стандартов написания HTML существует несколько. И у каждого из них есть свои особенности и правила написания. Связано это с тем, что HTML не стоит на месте, а постоянно развивается.
И если в ранних версиях стандарта, когда не было технологии CSS , с помощью языка разметки можно было создавать как структуру, так и дизайн, то сейчас тенденция намечается совершенно иная, - HTML стал больше ассоциироваться со структурой (фундаментом и кирпичиками), на которых и держится дизайн. CSS здесь - это нечто вроде декоративного элемента, задающего оформительский вид – аналог плитки и обоев, если рассматривать создание сайта как строительство дома. В связи с этим, в новых стандартах HTML, некоторые тэги и атрибуты, отвечающие за дизайн, - объявлены нежелательными (deprecated). То есть, текущая спецификация стандарта их поддерживает, но уже в следующей поддержка будет прекращена.
Есть ещё более строгий стандарт, который называется XHTML , - он так вообще не терпит вольностей с кодом и не прощает грубые ошибки. Самый новый на данный момент – это HTML 5 , за ним будущее, поэтому в дальнейшем мы и будем на него равняться.
С этим вроде бы всё должно быть понятно, - есть несколько стандартов и замечательно. Но вместе с тем, есть браузеры, в задачу которых входит обработка HTML кода, и браузер не всегда может понять, в соответствии с каким стандартом мы пишем и что конкретно имел ввиду пользователь и соответственно как этот код нужно отображать. То ли мы используем переходный HTML (Transitional), и браузер прощает нам многие ошибки, используя «щадящий режим», то ли мы используем режим строгой совместимости XHTML и ошибки нужно обрабатывать со всей строгостью. Иными словами, перед браузером стоит сложная задача.
Как поступает браузер в таком случае? Он отображает код в режиме обратной совместимости , - все явные и неявные ошибки в коде он сглаживает и пытается максимально предугадать что же имел ввиду пользователь. Но тут есть некоторые очевидные недостатки: во-первых, браузер не может знать, что же имел ввиду человек изначально. Во-вторых, у каждого браузера этот режим совместимости может срабатывать по-разному. Что в итоге имеем? Есть код и нету регламента, - на практике это означает что одна и та же разметка, в режиме совместимости, браузером будет отображаться по-разному. Следовательно, нам нужен какой-то способ дать браузеру знать, какой же стандарт мы собираемся использовать.
И такой способ действительно есть, называется он – добавлением определения типа документа .
В коде объявление типа задаётся вот так:
Данной строкой мы даём браузеру понять, что на нашей страничке будет использоваться режим HTML 5. Вставляется это строка в самом начале документа. Попробуйте проделать это в вашем тестовом HTML файле.
На многих сайтах ещё можно встретить такую строчку:
Данная строка означает, что используется стандарт HTML 4.01. Но мы не будем его использовать, поскольку он устаревший. Но тем не менее, он тоже нередко встречается и знать о нём стоит.
Теперь объясню, зачем всё это нужно. Данной строкой мы задали некий стандарт, в соответствии с которым браузер должен выводить наш документ в окно браузера. На практике это означает, что наш HTML код будет более-менее одинаково отображаться во всех браузерах. Всего этого было бы невозможно достичь, если бы мы работали в режиме обратной совместимости (quirks mode ), который включается если объявление типа документа пропускать. В моей практике, связанной с вёрсткой страниц, это было действительно важно. Потому что, объявление DOCTYPE , в итоге решило проблему одинакового отображения страницы во всех браузерах.
Валидация документа.Разумеется, если мы хотим проверить себя на предмет того, не ошиблись ли мы где-либо в соблюдении тех или иных стандартов, нам не обязательно делать это, изучая наш код глазами. Всё это уже давно автоматизировано, ведь есть средство проверки, благодаря которому мы можем узнать, не допустили ли мы каких-то явных ошибок в своей разметке.
На этой страничке мы сможем найти несколько способов проверки:
В нашем случае, скорее всего подойдёт второй или третий вариант.
Я лично использовал третий способ. Мой документ валидацию прошёл успешно, о чём и отрапортовала программа строкой This document was successfully checked as HTML5! на зелёном фоне.
При другом исходе, – надпись будет отображена на красном фоне. Это будет означать, что где-то мы допустили ошибку. Собственно, сама программа укажет где и на какой строке мы ошиблись и в чём именно, правда на английском языке.
Но в моём случае, программа, помимо того, что объявила о том, что валидация прошла успешно, также выдала мне три предупреждения:
1. Using experimental feature: HTML5 Conformance Checker
Дело в том, что стандарт HTML 5 формально ещё не окончательно утверждён консорциумом, который продолжает в него внедрять новые полезные фишки. Но на практике – всё большее и большее количество разработчиков начинают его использовать уже сейчас, чтобы быть готовым к завтрашнему дню.
2. No Character encoding declared at document level
В документе не сказано ни слова о том, какая кодировка используется. Действительно, ведь мы её не указали явно, а значит не факт, что вместо того, чтобы отобразить русские буквы, - браузер отобразит какие-то китайские иероглифы. Происходит так потому, что браузер при отображении документа руководствуется какой-то кодовой таблицей (то есть кодировкой), где каждой букве назначается соответствующий ей кодовый символ. Но то, что в одной кодировке одно число означает одну букву, то в другой – может означать какой-то японский иероглиф. Следовательно, браузеру нужно сообщить, какую кодировку использовать. Если этого не сделать, то браузер всё равно попробует её угадать сам. Но гарантий того, что он сделает это правильно, - совершенно нет.
3. Using Direct Input mode: UTF-8 character encoding assumed
Программа предупреждает, что она по умолчанию использует utf-8.
Что же, тогда не остаётся ничего, кроме как объявить используемую нами кодировку. Делается это вот таким образом:
Сама строка должна быть вложена в элемент head.
Тэг meta относится к разряду служебных тэгов, он как бы сообщает, что есть какая-то информация о странице, которую мы хотим сообщить браузеру. У него, как и у любого другого тэга, есть атрибуты:
http- equiv – это атрибут, в значении которого мы указываем название заголовка.
content – атрибут, в качестве значения которого мы указываем значение заголовка, в данном случае значение заголовка Content-type.
Давайте теперь рассмотрим значения атрибутов, которые только что указали:
Content- Type – говорим браузеру о том, что будем сообщать о том, какой тип у нашего документа. А также, какая кодировка в нём используется.
text/ html; charset= utf-8 – документ типа text/html, который использует кодировку utf-8.
Попробуйте провести валидацию страницы ещё раз. Предупреждающих сообщений теперь быть не должно. Но они могут всё равно остаться, но уже по другой причине. К примеру:
1. Вы используете в своём документе изображения, и у вас в тэге img не задан атрибут alt .
2. В элемент body вложен строчный элемент. В соответствии со спецификацией, в элементе bodyдолжны быть только блочные элементы. А уже в них, могут находиться строчные.
Примеров ошибок может быть много, но упомянуть о всех, в рамках одной статьи проблематично. Однако, если во время валидации, вы встретили какую-то иную ошибку, то напишите о ней в комментариях, - будем разбираться вместе.
- < Назад
- Вперёд >
Для комментирования, вам необходимо зарегистрироваться.
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .
Структура веб-страницы 1. Структура HTML-документаЯзык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,
, , и т.д.
Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
Является потомком одновременно для и .
Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег
Является родительским только для .
Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
И являются дочерними по отношению к .
Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
Являются между собой сестринскими.
1.1. Элемент 1.2. ЭлементРаздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. ЭлементОбязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
| charset | Указывает кодировку символов для текущего HTML-документа: |
| content | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения. |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" . Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: |
| name | Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop . application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: . keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: . Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято. |
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
.paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:
...
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. Элемент
Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
через
директиву @import url
@import url(style.css);
с использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
| crossorigin | Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована. |
| href | Основной атрибут тега, в качестве значения выступает путь к файлу со стилями. |
| hreflang | Определяет язык текста в документе, на который идет ссылка. |
| media | Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
| nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
| rel | Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), . archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. author ссылка на страницу об авторе документа или на страницу с контактными данными автора. bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка. external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. first указывает ссылку, ведущую на первый документ из последовательности документов. help ссылка на документ со справкой. icon определяет путь к иконке, которая будет использована для текущего документа. last указывает ссылку, ведущую на последний документ в последовательности документов. license ссылка на сведения об авторских правах для документа. next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии. nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке. pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него. prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка. prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии. search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок. stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа. tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу. up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре. |
| sizes | Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения: ширинах высота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинах высота (размеры иконки задаются в пикселях), например: ; any - иконка может масштабироваться до любого размера. |
| title | Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
| type | Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" . |
| async | Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). |
| charset | Определяет кодировку символов |
| crossorigin | Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен. use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен. |
| defer | Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. |
| nonce | Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. |
| src | Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу. |
| type | Используются для объявления языка сценария, использованного при составлении содержимого тега. |
В этом разделе располагается все содержимое документа. Для элемента доступны .
| onafterprint | Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. |
| onbeforeprint | Событие, срабатывающее перед отправкой страницы на печать. |
| onbeforeunload | Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. |
| onhashchange | Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 . |
| onmessage | Событие происходит, когда сообщение получено через источник события. |
| onoffline | Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. |
| ononline | Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. |
| onpagehide | Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. |
| onpageshow | Событие происходит, когда пользователь переходит на веб-страницу, после события onload. |
| onunload | Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. |
Здравствуйте уважаемые начинающие веб-мастера. В этом уроке поработаем над внешним видом нашего сайта.
Как я уже писал раньше, внешний вид сайта создаёт , или шаблон.
И в этом уроке, мы научимся изменять шаблон WordPress, то есть менять цвета, размеры, расположение элементов, картинку в шапке сайта, и вообще всё, что мы видим при заходе на сайт.
Но прежде чем начинать, желательно пройти и , или хотя бы иметь под рукой справочную литературу иначе, многое о чём я тут расскажу, будет просто не понятно.
Можно конечно воспользоваться моими , но лучше всё таки подучиться.
Помимо вышеперечисленного Вам необходимо прочитать пост , и выполнить данные в нём рекомендации. Они очень простые.
Начнём с редактирования стандартной темы «Twenty Ten». Эта тема стоит по умолчанию на сборке WordPress, и именно её можно увидеть сразу после установки движка.
На этом ресурсе, кстати, тоже стоит эта тема, только немного подправленная. Вернее переделанная до основания.
Создавать свой web дизайн, мы будем при помощи инструмента Веб-инспектор.
Этот необходимый для разработчика инструмент по умолчанию есть во всех современных браузерах и вызывается клавишей F12.
Так же вызвать его можно, если щелкнуть правой клавишей мыши по странице, и выбрать "Просмотр кода элемента" или "Исследовать элемент"
Дизайн моего сайта уже несколько раз поменялся, и Вы видите давнишний вариант, но сути это не меняет.
Всех возможностей этого инструмента я ещё не знаю (обязательно нужно будет заняться и изучить), но и того что известно хватает для того, чтоб делать с темой всё, что угодно.
Как видите, в большом поле слева находятся строки с html кодом. Каждая стока является html кодом одного из элементов, находящихся в данный момент на странице.
Если навести на неё курсор, то элемент, который ей соответствует на странице, выделится другим цветом, и рядом появится сноска с указанием названия селектора, отвечающего за данный элемент в таблице стилей, и его размер в пикселях.
Если щёлкнуть по этой строке, то она окрасится в синий цвет, как бы зафиксируется, и в поле справа отразятся все свойства и значения заданные, в нашем случае, блоку с меню, в таблице стилей.
Как видим, блок меню в таблице стилей, обозначен селектором #access , и ему заданы следующие значения:
ширина — 940 px
отступ слева — 0 px
Идём ниже
фоновый цвет — жёлтый (изначально был черный)
видимость элемента — видимый
наплывание слева — наверное чтоб не отталкивать заголовок
отступ сверху — 80 px, и размещение по центру
отступ снизу — 30 px
рамка — толщина, сплошная, желтая (изначально чёрная)
Теперь нам известно про этот элемент практически всё, и мы можем, при желании, его подвинуть вниз, или вверх, изменить его цвет, или размер, прижать к любой из четырёх сторон экрана, или скрыть с глаз долой.
Для того, чтоб всё это проделать, нужно пройти в Консоль — Внешний вид — Редактор, и найти там файл style.css
Щёлкаем по нему и, поднявшись по странице чуть выше, видим открывшийся для редактирования файл таблицы стилей. Первым делом копируем весь файл, и сохраняем в каком нибудь редакторе, можно в блокноте .
Вот в этом-то файле нам нужно найти селектор #access . Сначала он появится в разделе » =Structure», но там он находится в группе с другими селекторами, для которых заданны одинаковые свойства и значения.
Не будем пока выводить из этой группы #access , так как ширина, заданная в этой группе, меня, например, устраивала. Опускаемся дальше до раздела «Menu». Вот тут наш блок представлен во всей красе.
Именно здесь можно подвинуть его вверх и вниз, изменив значение в свойстве margin , изменить цвет, а если в свойстве display вместо block поставить none , то сделать невидимым.
Не забываем после каждой манипуляции обновлять файл!
Я специально выбрал для демонстрации блок меню, так как он имеет сложную структуру. Ведь в основном блоке у него находятся ещё блоки ссылок, и текст в этих ссылках, который сам по себе тоже отдельный блок.
Как вы уже заметили, в веб-инспекторе каждая строка начинается с треугольника. Если он направлен вправо, значит в нём скрывается еще несколько строк. Щёлкаем по треугольнику, и нам открывается код элементов, заключённых в блок меню.
В этих элементах, в свою очередь, находятся ещё элементы, и нам надо открыть их все, то есть всё, что находится в блоке меню.
Теперь, перемещая курсор по строчкам в левом поле, в правом поле смотрим, как узнать тот или иной элемент в файле style. css , и прикидываем, какие значения нам хотелось бы изменить.
Затем идём в редактор, находим нужный селектор, и меняем то, что задумали. Покажу что изменил я, чтоб меню приобрело такой вид и функции, как на этом сайте.
Если кому-то захочется вообще убрать это меню со страниц сайта, то для этого нужно пройти Внешний вид > Редактор, и открыть для редактирования файл header.php .
В коде файла находим тег , и удаляем его, и всё что после него, до первого .
Можно сделать его просто невидимым. Для этого в файле style.css , в селектор #access добавляется свойство display:none .
Теперь посмотрим, как заменить картинку в шапке сайта . Допустим, все предложенные в теме изображения Вас не устроили, и Вы решили установить, что-то совершенно своё. Где взять картинку для шапки, можно посмотреть на странице , и когда она будет найдена, или сделана, поместить в папку images темы.
Затем идём в файл style.css , и смотрим, что нужно сделать, чтоб не нужная картинка исчезла, а нужная появилась.
Находим раздел «=Header», в котором собрано всё, что связано с шапкой сайта, и находим там селектор изображения. Затем меняем значение display:block на значение display:none , и картинка исчезает с экрана.
Затем поднимаемся до раздела «=Structure», и в селекторе #wrapper , делаем следующую запись. Свойство background: есть по умолчанию, это фон страницы, так что добавляем свойства только для картинки.
В значении свойства background-image , помещаем адрес новой найденной, или сделанной нами картинки, загруженной предварительно в папку images темы оформления.
Если сайт находится на хостинге, то Эта папка находиться в: имя_сайта > public_html > wp-content> > themes > images.
Если сайт ещё на локальном хостинге, то путь к этой папке: Z > home > имя_сайта > www > wp-content> > themes > images.
В первом случае изображение загружается при помощи файлового менеджера, во втором — изображение просто сохраняется в эту папку.
Здесь, после установки, придется подправлять только свойство background-position , чтоб поаккуратнее разместить шапку на странице, а свойство background необходимо на тот случай, если у кого-то из посетителей картинка в шапке не откроется.
В этом случае шапка будет иметь хотя бы фон.
Делается это следующим образом. Заходим Консоль — Записи — Добавить запись, переключаем редактор в режим HTML, и через загрузчик изображений (Добавить медиафайл), загружаем нужную картинку.
В редакторе появляется код этой картинки. Его нужно скопировать, а "Запись" удалить.
Затем заходим в "Внешний вид — редактор", и открываем для редактирования файл header.php , в котором находим строчку
Сразу после этой строки и вставляем скопированный код картинки. В коде есть класс выравнивания class="aligncenter" , и в зависимости от необходимости aligncenter можно заменить на alignleft , или alignright .
От этого будет зависеть с какого края, или в центре, расположиться изображение.
Если же после сохранения и просмотра, изображение нужно будет ещё немного, куда нибудь подвинуть, то возвращаемся в редактор, и в код картинки, в тег img , вставляем атрибут style со свойством margin :
style="margin:0 0 0 0;"
Где вместо нулей вставляем необходимые размеры отступов, и таким образом сдвигаем картинку в нужном направлении.
Цвет полей можно изменить спустившись немного вниз, до раздела "=Global Elements", в селекторе тега "body". У меня поля были сделаны из размноженной картинки. Я её в дальнейшем убрал и оставил однотонные, но как это сделать (изображение на полях), можете посмотреть.
Если же менять только цвет, то достаточно изменить значение в свойстве background
Размер, вид, и цвет шрифта сайта меняется здесь
А размер, цвет, внешний вид заголовка, и описания сайта в шапке — здесь. Здесь же можно подправить размещение заголовка и описания, при смене картинки шапки.
На этом пока остановимся. Пробуйте, меняйте, двигайте, набивайте руку. Совсем скоро будем переносить сайт на реальный хостинг. Там конечно тоже будем делать некоторые изменения, вот только делать их нужно более уверенно и быстро, и допускать при этом как можно меньше ошибок.
Шаблоны HTML на русском
