Почему важен DOCTYPE и как его правильно использовать
Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на PHP, MySQL, Javascript. А также другим технологиям необходимым для выпуска качественных сайтов. Начать решил с самого «верха», с HTML тэгов. Буду рад, любым комментариям 🙂
Сразу оговорюсь, что бОльшая часть информации я нашел в интернете, внизу статьи будут приведены ссылки на источники. Часть информации была переведена совместно с google translate.
Итак:
Почему так важен DOCTYPE
Вроде бы вы сделали все правильно, но ваш сайт почему-то не выглядит или не работает, как ожидалось, в последних версиях броузеров.
Вы написали правильный стандартный XHTML код и стандартный CSS. Вы воспользовались стандартной спецификацией для работы с DOM (Document Object Model), чтобы управлять динамическими элементами на странице. И все-таки, в броузерах, которые казалось бы сделаны с соблюдением именно этих стандартов, ваш сайт не работает. Скорей всего, ошибка кроется в неправильном заголовке DOCTYPE.
Что такое HTML?
Эта небольшая статья расскажет вам о заголовках DOCTYPE, которые работают, а также объяснит практическое и теоретическое значение этого, казалось бы отвлеченного от реальности, тега.
Что такое DOCTYPE?
Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE — ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.
Тег DOCTYPE также важен для правильного отображения и работы страницы в броузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win).
Тег DOCTYPE, в атрибутах которого указывается полный URI (полный web-адрес), сообщает броузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта.
Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, броузер перейдет в «загадочный» (quirk) режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т.е. так, как писали в конце 90-ых годов.
В этом режиме броузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще в бог знает что).
Понятно, что для вас эти выкрутасы не желательны. Но именно это вы и получите, если будете пользоваться неполным или неправильным тегом DOCTYPE.
Проблема
Когда создавали NN4, IE4 выполняли правила CSS не совсем в соответствии со стандартом. Реализация Netscape была просто ужасной, IE4 подошел к реализации стандарта лучше, но тем не менее, реализовал его не до конца. Хотя IE 5 Windows исправил множество ошибок IE 4, но оставались другие сбои в CSS (в основном в модели окон (window model)).
Поэтому, когда соответствие стандартам стало важным, W3C поставил производителей браузеров перед жестким выбором.
Приблизится к спецификации W3C было одним из решений проблемы, но если бы производители браузеров просто изменили реализацию CSS, чтобы соответствовать стандартам полностью, многие веб-сайты, «поползли» бы в большей или меньшей степени или оказались полностью неработоспособными. Такое сближение с соблюдением стандарта повлекло бы за собой проблемы. С другой стороны, не приведение к соответствию стандартов могло бы внести вечную путаницу в эпоху войны браузеров.
Решение
- позволить веб-разработчикам, которые знали о стандартах, выбирать какой режим использовать.
- продолжать показывать старые страницы по старым (совместимым) правилам. (quirks mode)
Иными словами, всем браузерам необходимо было работать в двух режимах: режим совместимости для старых правил, и строгого режима для стандарта.
IE Mac был первым браузером использовавшим оба режима, а Windows IE 6, Mozilla, Safari, Opera и последовали его примеру.
IE 5 Windows, а также старые браузеры, как Netscape 4, постоянно заблокированы в режиме совместимости.
Решение о выборе, какой режим отображения требуется вызвать, было найдено в использовании «DOCTYPE» переключения. Согласно стандартам, любой (X) HTML документ должен иметь DOCTYPE который рассказывает всему миру, какой тип (X) HTML документа он использует.
Допустимые DTD
| DOCTYPE | Описание |
| HTML 4.01 | |
| Строгий синтаксис HTML. | |
| Переходный синтаксис HTML. | |
| В HTML-документе применяются фреймы. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| Документ написан на XHTML и содержит фреймы. | |
| XHTML 1.1 | |
| Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам. | |
HTML 4.01 DTDs
- HTML 4.01 Strict — Не разрешает презентационной (оформительской) разметки, аргументируя тем, что этоим должен заниматься CSS.
- Transitional DTD позволяет некоторые устаревшие аттрибуты и элементы
- Если используются фреймы — должен быть использован frameset doctype
XHTML 1.0 DTDs
- XHTML Strict DTD самый строгий существующий DTD: устаревшие (см ниже) теги не поддерживаются, и код должен быть написан правильно
- XHTML Transitional DTD такой же как XHTML Strict DTD, но старые теги разрешены. Это НАИБОЛЕЕ ПОПУЛЯРНЫЙ в настоящий момент DTD.
- XHTML Frameset DTD единственный XHTML DTD который поддерживает фреймы.
XHTML 1.1 DTD
Это новый DTD, который имеет строгость как у XHTML 1.0 Strict, и основан на фреймворке и модулях описанных в Modularization of XHTML (не стал искать что это такое :).
Статистика использования различных DTD
Получается что Более 50% сайтов работают в режиме quirk mode — то есть в режиме IE4!
Устаревшие тэги и аттрибуты
Устаревшие тэги в алфавитном порядке
Устаревшие HTML / XHTML аттрибуты тегов. Все они могут быть заменены CSS стилями.
Разница между HTML и XHTML (указаны правила для XHTML)
- Тэги должны быть написаны в нижнем регистре, вместо , как это было в HTML, нужно писать:
- Все теги должны закрываться, или с использованием тэга со слешем в паре, как параграф ( ) например, или самозакрывающиеся тэги, как например (
). - Все теги должны быть правильно вложены друг в друга, без перекрытий
- Не должны использоваться устаревшие теги
- Все аттрибуты должны быть набраны в нижем регистре
- Все значение аттрибутов должны быть заключены в одинарные или двойные кавычки
- Все аттрибуты должны использоваться в длинной форме, а не в короткой: disabled=»disabled» в XHTML против DISABLED в HTML
- Структура должна быть отделена от контента. Например тег
— это часть контента (параграф) и вы не можете поместить в него например таблицу, потому что таблица это часть структуры (форматирования).
Совместимость и IE8
IE8 имеет четыре режима: IE 5.5 режим совместимости, IE 7 стандартный режим, IE в 8 стандартном режиме и IE 8 в режиме совместимости.
Выбор способа зависит от данных из различных источников: DOCTYPE, meta элементов, заголовков HTTP, периодически загружаемых данных от Microsoft (!), интрасети, настроек, сделанных пользователем, настроек сделанных администратором, наличия сайта в блеклисте microsoft и прочее!
Схема (черт ногу сломит) определения в каком режиме работать браузеру IE8
Источники информации
upd: немного подправил ошибки
Источник: habr.com
Для чего нужна папка на хостинге: «public_html «?
Для чего эта папка на хостинге и что в ней должно храниться?
комментировать
в избранное up —>
[поль зоват ель забло киров ан] [25.7K]
4 года назад
Это «главная» папка для любого пользователя услугами хостинг провайдера. На сервере таких фирм каждому пользователю отводится свое место для размещения различных файлов. Это несколько папок. И как-правило папка public_html создается для того чтобы именно в нее пользователь загрузил свои файлы и папки и файлы. Такое вот молчаливое согласие большинства хостинг провайдеров.
Всем удобно.
автор вопроса выбрал этот ответ лучшим
Источник: www.bolshoyvopros.ru
Doctype HTML — что это? Что нужно знать об элементе
Что бы ни говорили скептики, прогресс по-прежнему остается явлением, остановить которое невозможно. Однако, в то время как одни возмущаются затянувшимся переездом на лунные дачи, другие буквально погружаются в панику, ибо поспеть за изменениями становится все сложнее и сложнее. Примером подобные «догоняющих» являются представители профессий, связанных с высокими технологиями.
В то время как большинство веб-дизайнеров, программистов и верстальщиков гораздо лучше соответствуют духу времени, нежели какая-нибудь «баба Нюра», которая получает информацию с недельным запозданием, да еще и со значительными искажениями, реальное положение вещей оказывается несколько иным. Соответствовать уровню прогресса в сфере новых технологий довольно сложно. Рассмотрим простой пример: еще каких-то 5-10 лет назад разработчик онлайн-игр на Adobe Flash мог бы достичь ощутимого успеха, многочисленные «Веселые фермеры» являются тому подтверждением. Однако уже сегодня данная технология постепенно отмирает, уступая место более современному, но менее изученному основным большинством HTML5. К слову, именно HTML5 и является одним из «персонажей» нашей сегодняшней истории, посвященной будням HTML-верстальщиков.
Doctype HTML — что это такое?
Это высокотехнологичный памятник жертвам прогресса технологий. Лихие 90-е, которые отличились не только «боевой» обстановкой в нашей стране, но и вполне себе настоящей войной браузеров, принесли в мир сразу несколько продуктов, которые позволяли пользователям компьютеров бороздить просторы всемирной сети. Вот только есть одна загвоздка – популярные тогда Netscape Navigator и Internet Explorer смотрели на одни и те же страницы совершенно по-разному, соответственно, и создатели сайтов создавали абсолютно разные страницы для данных программ.
Стандарты? В те годы о них говорить было бессмысленно – W3C существовала в зачаточном состоянии, а продвигавшая свой IE Microsoft вообще славилась тем, что предпочитала изобретать свои собственные, не совместимые ни с чем велосипеды. Тем не менее к концу того жуткого (для веб-разработчиков) десятилетия ситуация все-таки нормализовалась: появилось некое подобие стандартов, которые пусть и не полностью, но все-таки соблюдались всеми популярными браузерами.
Однако положение дел оказалось таковым, что стандарты консорциума и производителей браузеров оказались, мягко выражаясь, не во всем схожими. Вы вполне могли создать абсолютно правильную с точки зрения HTML, CSS и DOM страницу, но предпочитаемый вами браузер упорно показывал не то, что вы ожидали увидеть.
Тем не менее время шло, разработчики все-таки наконец решили задуматься не только о конкурентной борьбе, но и о веб-мастерах, и появился он – Doctype HTML. Это специальный тэг, рассказывающий браузеру о том, как именно следует рассматривать ту или иную страницу.
Для чего нужен Doctype в HTML-коде?
До появления адекватных стандартов, которым начали следовать повсеместно, многие разработчики браузеров старались перетянуть одеяло на себя, создавая собственные методы подхода к той или иной технологии. В результате одна и та же страница выглядела в разных браузерах по-разному. Впрочем, об этом мы уже рассказывали, вот только не упомянули о том, что, когда производители программ для веб-серфинга опомнились, возникла другая, не менее занятная проблема.
Представьте ситуацию: вы – типичный веб-разработчик конца 90-х годов. Так уж вышло, что большую часть времени вы проводите в браузере Internet Explorer 4. Внезапно Microsoft решает одуматься и делает свой новый браузер более «правильным», в результате чего становится не совсем ясно, как теперь писать сайты и что делать с теми, которые уже созданы. Естественно, если у вас есть достаточное количество времени, вы могли бы переписать свой HTML-код таким образом, чтобы он соответствовал новым стандартам, но ведь люди – ленивые существа.
Именно в этот момент Doctype HTML оказывается наиболее уместным «изобретением». В зависимости от того, какой именно тип документа указан в начале страницы, браузер будет выбирать наиболее подходящий для данного случая механизм отрисовки. Если же Doctype в HTML-коде отсутствует, браузер уйдет в режим совместимости (как правило, но вовсе не обязательно). В результате тот же Internet Explorer 6 (пусть архив ему будет пухом) при отсутствии тега Doctype ведет себя так, словно вы работаете в его четвертой версии.
Виды Doctype
Тег Doctype насчитывает несколько разновидностей, которые можно разделить на определенные категории. Во-первых, он описывает основные типы языка разметки: HTML 4.01, HTML 5, XHTML 1.0 или XHTML 1.1. Во-вторых, каждый из этих языков имеет свои подразделы, указывающие на «коэффициент придирчивости», т. е. на то, как жестко следует HTML-код установленным W3C стандартам. Правда, во втором случае есть два исключения – HTML5 и XHTML 1.1 не имеют каких-либо подвидов и имеют только одну форму Doctype HTML. Но об этом чуть позже…
Строгий подход: Doctype Strict
Если вы предпочитаете создавать HTML-код, соответствующий каждой букве закона валидатора, то дополнительным стимулом (помимо собственной заинтересованности) может стать использование Doctype Strict. Если же вы планируете использовать более продвинутый XHTML 1.0, то строчка, с которой будет начинаться каждый элемент, должна выглядеть так:
Выбор строгого шаблона Doctype HTML Public гарантирует, что любое отклонение от стандарта будет подмечено браузером, после чего неправильно использованный тег будет проигнорирован. В частности, в строгом режиме любой тег, будь то форма, изображение или другой элемент, обязаны располагаться внутри блочных тегов. Если вы решите обойтись без этого, то браузер попросту не отобразит данный элемент, а список ошибок верстки пополнится парочкой записей.
Кроме того, целый ряд тегов, позволяющих форматировать текст, также желательно исключить – строгий режим подразумевает использование CSS.
Человечный подход: Doctype Transitional
Если суровый метод строгого шаблона вам не подходит или же вы попросту привыкли идти против правил, всегда есть возможность прибегнуть к более гуманному типу Doctype HTML Public. W3C позаботились о тех, кто не хочет отказываться от привычек и желает работать в более мягких условиях, создав шаблон Transitional, представляющий переходную модель подхода к валидации. Данный шаблон дает вам возможность беспрепятственно позволять себе некоторые вольности, например, запрещенные Strict-шаблоном теги, а также многие другие подходы к верстке, которые не потеряли актуальности с конца 90-х годов.
«Мягкий» Doctype HTML 4 объявляется следующим образом:
Для XHTML строка вновь выглядит несколько иначе, однако общая тенденция сохраняется:
На сегодняшний день, несмотря на то, что каждый верстальщик стремится соответствовать Strict-шаблону, именно переходный Doctype является наиболее популярным. Тем не менее у данного шаблона есть одно условное ограничение: валидатор будет «браковать» любые страницы, в которых имеются фреймы. Если же вам необходимо прибегнуть к данному методу верстки, стоит обратить внимание на следующий – последний шаблон.
От общего к частному: Doctype Frameset
Подход при проверке страницы на соответствие шаблону Frameset в целом аналогичен таковому у Transitional, однако, помимо перечисленных выше «вольностей», данный шаблон дает вам возможность использовать фреймы. Других отличий Frameset не имеет, поэтому остается лишь перечислить строки для объявлений, для HTML 4.01 и для XHTML 1.0:
На острие прогресса
Естественно, упомянув в начале данной статьи все набирающий популярность стандарт HTML5, мы никак не могли обойти вниманием и этот язык разметки. Забавно, что W3C считает данную версию HTML основной, поэтому ее Doctype HTML 5 выглядит довольно скромно. Иными словами, данное определение типа означает, что браузеру необходимо работать с «чистым» HTML, каковым и считается сегодня HTML5, в то время как привычная для многих четвертая версия считается потенциально устаревшей.
Прочие разновидности Doctype
На сегодняшний день существует еще несколько разновидностей шаблонов Doctype, большая часть которых касается XHTML. В то время как вторая версия данного языка разметки так и не вышла в свет, став частью вышеупомянутого HTML5, вариации ее первой версии, несмотря на не самую высокую распространенность, живы и здравствуют.
Так ли важен Doctype?
Возможно, некоторые начинающие «писатели» на HTML будут пытаться игнорировать объявление типа страницы. Что ж, если они не вынесли важной информации из вышенаписанного, приведем один простой пример. Вот пример страницы, использующей Transitional-шаблон:
Все выглядит так, как и должно было выглядеть по задумке дизайнера, однако стоит нам «перепутать» Doctype, и мы получаем следующее:
Как видите, страница претерпела значительные изменения: исчез фоновый рисунок, меню превратилось в изуродованный список, некоторые классы CSS попросту проигнорированы, кроме того, у страницы «отрос» второй скроллбар.
Надеемся, данный пример достаточно доступно объясняет всю важность вышенаписанного, поэтому нам остается лишь сохранять внимательность или, в идеальном случае, учиться писать код, проходящий strict-валидацию. Успехов вам!
Источник: fb.ru
Что такое корень сайта
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Корневой каталог сайта (корень) — это папка на веб-сервере, в которой находятся все файлы ресурса.
Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA
Представьте себе чемодан со множеством отделений. Вы открываете его и видите: в чемодане лежат рубашки, брюки, белье. В 3-х внутренних отделениях вы разместили туалетные принадлежности, галстуки, носки. А одно из внутренних отделений имеет карман, закрывающийся на замок — там лежат ваши документы. Отделения чемодана — это папки.
Все, что лежит в нем — это файлы веб-ресурса. Сам чемодан — это ваш веб-проект. А когда вы его открываете и видите все содержимое, не заглядывая во внутренние отделения — это и есть корневой каталог сайта.
В зависимости от хостинга название корневой папки может быть:
HTDOCS, public_html, www и т.п.
Как зайти в корневой каталог сайта
Стоит отметить, что попасть в корень веб-проекта можно несколькими способами:
Через панель управления
Рассмотрим, где находится и как попасть в корневой каталог веб-сайта на примере хостинга beget.
Зайдите в панель управления хостингом и выберете раздел “Файловый менеджер”.
Вы сразу попадете в корневой каталог веб-сервера, где корень каждого веб-сайта имеет название “ДОМЕН”.
При нажатии на соответствующую папку вы увидите каталог public_html, который и является корнем выбранного сайта.
При помощи ftp-клиента
Это программа, которая устанавливается на ваш компьютер. Она позволяет подключаться к серверу, просматривать все файлы, которые на нем находятся и принадлежат вашему порталу.
Введите учетные данные, адрес ресурса.
Вы попадете прямо в корень веб-ресурса.
Через панель управления сайтом
В многих CMS есть возможность просмотреть все файлы, в том числе корневой каталог.
Если на вашем веб-ресурсе установлена CMS MODx — зайдите в админ-панель, выберите в левом меню вкладку “Файлы” — попадете в корень, где размещены все файлы и папки интернет-сайта.
Все вышеуказанные методы нужны не только для просмотра корня, но и для загрузки файлов (документы, картинки и т.п.). В панели управления хостингом и в ftp-клиенте открываются два окна — в одном — корень сайта, в другом — ваш локальный ПК. Вы можете напрямую работать с содержимым: удалять файлы, загружать их на сервер, переименовывать, изменять URL-адрес.
Для чего необходим доступ к корню
Обычно доступ требуется, когда при интеграции со сторонним сервисом нужно подтвердить право владения доменом. Обычно требуется загрузить в корень сайта файл сервиса с необходимыми настройками.
Рассказать о статье:
Качественный контент на ваш сайт
– Создание контента.
– Адаптация уже имеющихся на сайте материалов.
– Проверка информации на актуальность.
29.01.2018 29063
Нейромаркетинг: что это такое Нейромаркетинг «собрал в себе» все способы влияния на человека, чтобы побудить его потреблять больше. Эйл Смидс в 2002 году объединил два слова: нейробиология и маркетинг. Получившийся термин описывает коммерческое использование открытий нейробиологии. С помощью изучения мозга стояла задача понять потребителя и повысить продажи. Обычный пример: если вы ходили по магазинам, то, наверно, замечали, как в одном…
11.03.2018 26258
Front-end разработчик – это программист, основная задача которого состоит в разработке пользовательского интерфейса, то есть UI дизайна. Другими словами, данный специалист отвечает за внешнюю часть веб-ресурса в браузере, с которой контактируют посетители. Именно поэтому он должен сделать интерфейс максимально удобным и интуитивно понятным, чтобы взаимодействие и процесс поиска нужного раздела или информации не занимало у человека много времени и переходов…
27.06.2018 44289
Конкурсы –– один из способов продвижения блога. С их помощью вы общаетесь с аудиторией, привлекаете в блог новых подписчиков и активизируете старых. Суть в том, что вы обещаете участникам подарок за то, что они тем или иным образом расскажут о вас другим пользователям. Этот метод раскрутки считается эффективным. Какие виды розыгрышей можно провести Существуют три механики, которые маркетологи советуют чередовать…
Источник: semantica.in
Как формируется ссылка на файл хостинга?
Что такое ссылка, пользователи интернета знают, но как формируется прямая ссылка на файл хостинга, многие даже не догадываются. На самом деле все просто. Дочитав статью до конца, в этом убедитесь.
Знать это всем и не обязательно, но кто создает сайты, музыкальные открытки, имеет блог и вообще имеет хостинг, информация в статье окажется очень полезной.
Сделать музыкальную открытку или сайт – это еще часть дела!
Чтобы открытка или сайт ожили, чтобы можно было их показать в интернете, вы заказали себе хостинг и зарегистрировали домен.
Загрузили на хостинг свой сайт или открытку, теперь нужно разобраться как будет выглядеть ссылка на файл хостинга.
Нужно понять принцип, потом ссылку написать будет очень просто. Об этом читайте дальше!
Зайдем через Файловый менеджер на хостинг на ваш сайт.
Cайт – это физическое пространство на хостинге, где хранятся все файлы одного Домена (внутри папки public_html).
Откроем папку public_html двойным щелчком мыши, точно так, как открываем папки на компьютере. Попадаем в «корень сайта» или в «корневую папку».
В корневой папке все выглядит, как и на компьютере. Папки открываются также – двойным щелчком. Чтобы «вернуться назад», нужно нажать наверху на зелененькую стрелку.
Открыть любой файл на хостинге можно через браузер, вставив ссылку на файл в адресную строку браузера.
Ваша ссылка всегда будет начинаться с домена http://VashDomen.ru (VashDomen замените на домен, который у вас зарегистрирован на хостинге), поставьте слеш (наклонная черта) и напишите название файла с расширением (расширение или тип – это то, что стоит после точки в названии файла) http://VashDomen.ru/файл.тип
Такая ссылка откроет файл внутри корневой папки public_html.
Кто обращал внимание, как прописывается путь к файлу или папке на компьютере (например в проводнике), тому легко будет разобраться с тем, как формируется ссылка на файл хостинга.
Путь к файлам и папкам на компьютере
Если назвать файл index.html и загрузить его на хостинг, то само название файла index.html в ссылке прописывать не надо. Достаточно прописать путь к этому файлу.
ВНИМАНИЕ: файл с названием index.html в папке может быть только один!
Так выглядит ссылка на файл хостинга.
Понятно? Если «да», то теперь вы на ссылки будете смотреть другими глазами и поймете, что ссылка на файл хостинга тоже о многом говорит.
Я купила новый домен для музыкальных открыток, дарю ссылку на новейший каталог Музыкальных Открыток http://webotkritka.ru/wo_kaleidoskop.html
Мне интересно знать, насколько была полезна вам информация в статье. Смело пишите всю правду в комментариях! Отвечу!
Другая информация по теме:
C, Уважением, Надежда Шеверова
Источник: nadezdas.ru