Препроцессор pug / jade

HTML Exam — Get Your Diploma!

W3Schools’ Online Certification

The perfect solution for professionals who need to balance work, family, and career building.


More than 25 000 certificates already issued!

The HTML Certificate documents your knowledge of HTML.

The CSS Certificate documents your knowledge of advanced CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The Python Certificate documents your knowledge of Python.

The jQuery Certificate documents your knowledge of jQuery.

The SQL Certificate documents your knowledge of SQL.

The PHP Certificate documents your knowledge of PHP and MySQL.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The Bootstrap Certificate documents your knowledge of the Bootstrap framework.

Язык

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

Чтобы указать язык для какого-либо содержимого, используется атрибут lang в любом элементе разметки с заданием кода требуемого языка. Код для русского языка — ru, а для английского — en. Коды для других языков можно узнать на странице people.w3.org/rishida/utils/subtags.

Вставить в веб-страницу информацию о языке легче всего через элемент <html>:

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

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors Colors RGB HEX HSL

HTML CSSHTML Links Links Link Colors Link Bookmarks

HTML Images Images Image Map Background Images The Picture Element

HTML TablesHTML Lists Lists Unordered Lists Ordered Lists Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Формула с расшифровкой параметров (элементов)

<!DOCTYPE «//// //» «» >, где

  •  — корневой элемент на веб-странице, часто /;
  •  — этот параметр для файла может принимать два значения: (публичный) и (локальный);
  •  — указывает на наличие регистрации у разработчика DTD внутри ISO (международная организация). Может быть или .
  •  — название организации стандартизации (W3C);
  •  — определение типа страницы, например ;
  •  — имя документа;
  •  — язык описания объектов (по умолчанию английский );
  •  — адрес страницы, на которой находится описание для указанного типа документа. Из этой спецификации браузер узнает, как отображать страницу с допустимыми тегами.

Различное отображение HTML документов в браузере зависит от объявленного Doctype

При использовании одних и тех же HTML-тегов в старых кривых браузерах и современных, придерживающихся стандартов (Mozilla и браузеры на его основе, Mac IE 5, Windows IE 6, Safari, Opera 7+ и Konqueror 3.2) можно обнаружить два основных режима отображения web-страницы. В одном случае браузер пытается представить страницу в соответствии с рекомендациям CSS и (X)HTML. В другом случае отображение страницы происходит как в старых, далеких от стандартов браузерах. В Mozilla эти два состояния известны как «the Standards mode» и «the Quirks mode», т.е. как стандартный режим и неопределенный соответственно.

Кривое и нестандартное поведение старых ущербных браузеров, таких как Netscape Navigator 4.x и IE 5 для Windows называется «quirks». Иногда страница бывает написана так, что ее разметка изначально некорректна.

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

Doctype HTML

Doctype’ın ortaya çıkmasının nedeni internetin ilk yıllarında web standartlarının belli kurumlar tarafından belirlenmiyor oluşudur. İnternetin karanlık dönemleri olarak adlandıracağımız bu çağda doğru kodlamaktan ziyade insanlar bir şekilde kodlama yapabilmeye çalışıyordu. Tıpkı kodlamada olduğu gibi internet tarayıcılarında da farklılıkların olması sayfaların farklı şekilde yorumlanmasına neden oluyordu.

Bu nedenle sürüm sorunu kaynaklı hataları gidermek amacıyla son derece basit bir çözüm olan Doctype çözümü ortaya atıldı. Doctype’ın sitenin <html> etiketinin en üstünde tanımlanması ve Doctype’ın üzerinde başka hiçbir verinin yer almaması kararlaştırıldı. Böylece internet sayfalarının ilk olarak Doctype’ı tarayıcı tarafından taranarak sayfanın tipi daha kolay belirlenebilir.

Basit bir örnekle Doctype kullanılan bir HTML sayfası oluşturarak Doctype’ın kullanımını pekiştirelim;

Doctype’ı tanımlamak için kullanmanız gereken versiyon değerleri olacağını muhtemelen biliyorsunuzdur. HTML dosyaları için kullanılabilecek Doctype HTML biçimleri şu şekilde olmalıdır;

HTML5 için Doctype kodu/>

<!DOCTYPE html>

HTML 4.01 Strict için Doctype kodu/>


<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» “http://www.w3.org/TR/html4/strict.dtd»>

HTML 4.01 Transitional için Doctype kodu/>

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

HTML 4.01 Frameset için Doctype kodu/>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» “http://www.w3.org/TR/html4/frameset.dtd»>

XHTML 1.0 Strict için Doctype kodu/>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

XHTML 1.0 Transitional için Doctype kodu/>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

XHTML 1.0 Frameset için Doctype kodu/>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>

XHTML 1.1 için Doctype kodu/>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

Doctype HTML5/>

HTML5 günümüz açısından standartlara hem en uygun hem de en çok kabul gören yeni nesil HTML sürümüdür. HTML5 ile kodlar artık eski standartlardan sıyrılıyor ve hem çok daha sade hem de kullanışlı bir hal alıyor. Yukarıda da örneklerini görmüş olduğunuz üzere HTML5 ile kodlanan bir sayfa için Doctype belirlemek son derece kolay ve zahmetsizdir. HTML5’de Doctype tanımlaması yapmak için <html> etiketinden önce <!DOCTYPE html> etiketini yazmanız, tarayıcılara sayfanın HTML5 standartlarıyla hazırlandığını bildirmek için yeterli olacaktır.

Сравниваем DOCTYPE для HTML 1.0 и HTML 4.01 на примерах

Переходный синтаксис

  • 1.0:

    Есть все элементы и атрибуты HTML. С устаревшими и презентационными. Фреймов нет. А разметка должна быть сделана как качественно созданный XML.

  • 4.01:

    Тут есть все элементы и атрибуты HTML, в том числе устаревший тег шрифта. А также новые. Фреймов нет.

Строгий синтаксис

  • 1.0:

    В этом уже нет устаревших и презентационных элементов. Всё ещё нет фреймов. От разметки ждут вида хорошо сформированного XML.

  • 4.01:

    Есть все элементы и атрибуты без устаревших. Фреймов нет.

Фреймы

  • 1.0:

    Здесь определение типа документа как у переходного с XHTML 1.0, но можно пользоваться содержимым фреймов.

  • 4.01:

    Тут DTD как у переходного HTML 4.01 переходный, но тоже есть фреймы. Сейчас применяется редко, потому что фреймы устарели.

Миксины (Mixins)


Миксины позволяют создавать повторяющиеся блоки

Преобразуются в функции и могут принимать аргументы

Миксины могут принимать блоки pug контента, для последующего преобразования

Двойные блоки в миксине можно создавать так 

Миксины могут принимать неявные аргументы, которые берутся из аргументов переданных в миксин

Миксины можно использовать с &attributes

Поскольку Pug пытается определить, является ли содержимое скобок атрибутами или аргументами, лучше использовать запись +link()(class=»btn»), во избежании возможных ошибок. Синтаксис +link(class=»btn» ) также действителен, но не рекомендован.

Можно указать бесконечное количество аргументов, используя синтаксис “rest arguments”

Переменная в атрибуте миксина:

Миксин в атрибуте миксина:

Миксины в атрибуте миксина:

Параметры

Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег <html>.

Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.

Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и — (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.

Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.

Имя — уникальное имя документа для описания DTD.

Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

URL — адрес документа с DTD.

Наиболее часто используемые варианты DOCTYPE:

Строгий (Strict): <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>Переходный (Transitional):<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>XHTML 1.0 Strict doctype<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>XHTML 1.0 Strict doctype<?xml version=»1.0″ encoding=»UTF-8″?> <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> С фреймами (Frameset):<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>

Описание типа документа HTML5

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

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

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

Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.

Все это порождает непростой вопрос: если HTML5 — живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode). В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode), который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером. За некоторыми исключениями, браузеру совершенно безразлично, какой именно тип документа указан в описании. Он просто проверяет, что страница имеет какое-либо описание типа документа. Описание типа документа HTML5 просто самое короткое действительное описание типа документа, которое задействует режим стандартов браузера.

Группа значений атрибута NAME

«keywords» (ключевые слова)

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


Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.

HTML-код с «keywords»:

«description» (описание страницы)

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

Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

HTML-код с «description»:

«Author» и «Copyright»

Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

HTML-код с «author»:

«Robots»

Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

  • index — страница должна быть проиндексирована;
  • noindex — страница не индексируется;
  • follow — гиперссылки на странице учитываются;
  • nofollow — гиперссылки на странице не учитываются
  • all — включает значения index и follow, включен по умолчанию;
  • none — включает значения noindex и nofollow.

HTML-код с «robots»:

HTML 4.01 Validation

If your HTML document contains HTML codes according to the rules specified by w3c, then your HTML document is called as a valid HTML document.

w3resource always encourage you to write valid HTML codes. Infact all the pages of w3resource.com are valid xhtml 1.0 pages.

There are several ways to check if your HTML code is valid.

If you search using «w3c validation «, it takes you to the validation service offered by w3c. There are three ways to check if your HTML code is valid in w3c validation service.

1) You can provide the url of your HTML document.

2) You can directly input the HTML code to be validated.

3.) You can upload the HTML file and check validation

w3c validation service not only checks if your HTML code is validated, but also offers suggestions to rectify if any portion of your HTML code is not satisfying the validation.

Previous: HTML commentsNext: HTML html tag and element

Значение тега doctype: Зачем он нужен и какой выбрать?

Любой код веб-сайта начинается с определения типа документа (DTD — document type definition(описание типа документа)) браузерами, для корректного отображения сайта на экранах наших мониторов. А чтобы помочь браузеру определиться, необходимо указать тип документа, который используется на сайте. Для этого, существует тег <DOCTYPE>. Для чего нужно указывать тип документа? Нужно это, потому что html существует в нескольких версиях языка. И кроме того, существует расширенный язык разметки (XHTML — Extensible Hypertext Markup Language), который отличается от html синтаксисом. И если этого не делать, веб-браузер может «запутаться» и не корректно отобразить нашу страницу. Поэтому, мы рассмотрим какие бывают типы документа. Ниже, я предложу табличку с разновидностями основных типов документов — <DOCTYPE>:

DOCTYPE Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> Строгий синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> Переходный синтаксис HTML.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> HTML-документ, с применением фреймов.
HTML 5
<!DOCTYPE html> Для всех документов.
XHTML 1.0
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»> XHTML-документ, с применением фреймов.
XHTML 1.1
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> Такой же, как и строгий синтаксис XHTML, но допускается добавление модулей.

Теперь, попробуем разобрать по кусочками, что же содержит DOCTYPE. html — указывает элемент верхнего уровня, то есть самую основу кода. Для HTML, это тег <html>.

PUBLIC — определяет публичность документа. Данный тип документа является публичным.

«-» — указывает, зарегистрирован или нет разработчик типа документа в международной организации по стандартизации (International Organization for Standardization, ISO). Имеет два значения: минус или плюс. Минус — не зарегистрирован. Плюс — зарегистрирован. Но для W3C, указывается «-»

W3C — организация разработавшая DTD.

DTD — тип документа. Для HTML и XHTML указывается DTD.

HTML 4.01 Transitional (как пример) — имя документа, его версия и синтаксис, который он использует.

EN — язык на котором написан документ. И естественно, HTML и XHTML используют английский язык.

http://www.w3.org/TR/html4/loose.dtd — адрес документа с описанием документа (DTD).

Вот столько информации несет в себе самая первая строка HTML или XHTML кода. Но все же могут возникнуть проблемы с определением насколько соответствует наш документ выбранному синтаксису или нет. Для этого, существует валидатор разметки, который поможет нам определить на сколько валиден (правильный) наш код. Валидатор предоставляется той же организацией. которая является официальным разработчиком DTD. Находится он на сайте http://validator.w3.org/.

Итак, нам остается только определиться с выбором. И выбрать <DOCTYPE> для нашего документа. Здесь каждый должен выбирать сам отталкиваясь от той информации, которую мы сегодня изучили. Вот такой получился вступительный, теоретический пост. А дальше нас создание своего html-документа, а возможно и целого сайта на html, без использования каких-либо CMS, для администрирования.

На этом у меня все. Надеюсь, данный пост будет полезен И поможет разобраться в вопросе, о DOCTYPE.

Удачи!

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()


С этим читают