|
О XHTML
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 17:19:00 | Сообщение № 1
|
admin
| Что такое XHTML
1.XHTML-это язык разметки для WEB-браузеров и альтернативных устройств (моб. телефоны, pda, коммуникаторы, пейджеры, текстовые браузеры и т.д)
2.XHTML-это переопределение HTML, как приложения XML (мощный мета-язык разметки)
3.XHTML-Extensible Hypertext Markup Language (расширенный язык разметки гипертекста)
4.XHTML-Следующая ступень развития html (последняя версия 4.01, обновляться не будет) плавно перетекающего в XML. Является эдаким мостом между HTML и XML
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 17:21:56 | Сообщение № 2
|
|
admin
| Структура XHTML страницы
Сразу оговорюсь: разбирать будем xhtml страницу; структура html практически идентична структуре xhtml, только в html можно пропустить один пункт – определение типа документа (шапку страницы)
Структура как единое целое:
Ну что же, начнем. Сперва взглянем на структуру xhtml страницы в целом, чтобы разложить ее на части и уже затем разбирать эти части. По пунктам:
1. Определение типа документа (шапка страницы).
2. Заголовок страницы (head - голова).
3. Тело документа (body - тело).
Пункт 2 и 3 находятся между тегами <html> и </html> - по сути эти 2 пункта и есть документ, точнее его содержимое. Только то, что содержится в пунктах 2 и 3 влияет на то, что мы увидим в итоге при просмотре страницы через браузер (программа, которой вы пользуетесь для просмотра страниц в Интернете). Напрашивается вопрос: зачем 1ый пункт? Читаем дальше =)
Нужна ли шапка?
Ответ: Не обязательно, если это html страница и обязательна, если это xhtml. Задача этой части страницы довольно расплывчата: ...Чтобы документ был действительным... Но она необходима. Объявление типа и версии документа - вот цель шапки страницы. И кто бы чтобы вам не говорил, я советую не забывать про эту, несомненно, нужную, часть страницы, независимо html это или xhtml. Разберем на примере:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
где,
html - объявление корневого типа документа.
PUBLIC - объявление о публичной доступности документа.
W3C - организация, ответственная за создание и поддержку схемы DTD.
DTD - тип объекта (схемы DTD).
XHTML 1.0 Transitional - версия языка документа.
EN - код языка, используемого в документе.
"http://www.w3.org/TR/xhtml1-transitional.dtd" - URI (адрес в сети на схему DTD).
Голова документа
Простейший пример:
<head>
<title>Заголовок</title>
</head>
Разберем. Значит все, что между <head> и </head> и есть голова страницы. Элемент title, что присутствует в примере - единственный обязательный (все остальные элементы использовать или не использовать решать вам, в зависимости от нужд) элемент этой части страницы. Он отвечает за название заголовка страницы, что будут видеть посетители этой страницы.
Что же это за остальные элементы головы страницы? Это мета-теги, предоставляющие информацию пользователю и поисковым службам (meta), стили (script), скрипты (script, object), привязки на различные файлы стилей (link), привязка ссылок страницы на базу (base).
Оптимальный пример головы страницы:
<head>
<title>Заголовок</title>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
<base href="http://vashsait.wen.ru" /> <link rel="stylesheet" media="all" type="text/css" href="/main.css"/>
</head>
В этом примере есть заголовок - title, meta-тег, отвечающий за тип (MIME-тип) и кодировку документа, база (base) для использования на странице не прямых ссылок на файлы и страницы с вашего сайта (т.е. без http://vashsait.wen.ru, напр.: /papka1/file.doc), и линк-привязку (link) на файл стиля css.
Тело документа
Все что между <body> и </body> и есть тело документа - содержимое страницы, что одно и то же. Все многообразие элементов (тегов) страницы находиться именно тут, и на их изучение и уходит львиная доля нашего с вами времени.
Теперь главное научиться представить с закрытыми глазами структуру xhtml/html страницы, это очень важно. Попробую помочь вам:
1.Шапка(<!Doctype>)
<html>
2.Голова(<head>)
3.Тело(<body>)
</html>
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 17:23:43 | Сообщение № 3
|
|
admin
| Разновидности XHTML
Как и html,xhtml имеет несколько версий и схем. Перечислим по порядку:
XHTML 1.0-реализует более строгие принципы разметки чем html, но это наилучший вариант для перехода на xhtml,т.к. большинство браузеров (устаревшие версии) еще не полностью подчиняется стандартам W3C и не всегда корректно работают с CSS. Эта версия наиболее схожа с html 4.01. Имеет 3 схемы (на выбор): Strict, Transitional, Frameset (смотрите ниже). Расширение страницы .xhtml, .xht или .html
XHTML 1.1-Чувствуется влияние XML. С введением модуляризации авторы документов получают средства истинной расширяемости. Более жесткие требования к действительности, чем у XHTML 1.0. В частности почти все атрибуты тегов заменяет css, расширение странички только .xhtml или .xht и некоторые другие особенности. Включает в себя одну схему: Strict (см. далее). Не один браузер полностью не поддерживает xhtml 1.1 но работа кипит!
XHTML 2.0-Еще в разработке, Не один браузер не держит сие чудо. Отличии от предыдущих версий масса, например, исчезли некоторые дескрипторы (теги) и появились новые. Для любопытных: вместо элемента img будет использоваться элемент object, элемент line заменит элемент br и это только малая часть изменений
Следует упомянуть что XHTML 1.0 породило несколько своих разновидностей: XHTML MP и XHTML Basic (смотрите отдельные статьи)
Схемы DTD:
Strict-самая строгая схема, запрещает использование большинства атрибутов элементов (тегов) страниц, фреймов, устаревших и нерекомендуемых тегов (вместо всего этого рекомендуется использовать CSS, проверяйте свои страницы на валидаторе: здесь и быстро разберетесь)
Transitional-переходная схема, наиболее актуальная ныне, запрещает лишь фреймы и требует соблюдения синтаксиса XHTML (этого любая схема требует)
Frameset-схема прямо из 90-ых, разрешает использование фреймов в странице
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 17:25:54 | Сообщение № 4
|
|
admin
| Чем XHTML отличается от HTML
Синтаксически:
1. Все теги, атрибуты, значения большинства атрибутов, должны быть в нижнем регистре (Не заглавными). Исключение составляет некоторые элементы DOCTYPE и конечно же содержание элементов (не будем же мы писать все слова маленькими буквами).
2. Все значения атрибутов должны быть в "кавычках" ,например align="center"
3. Обязательно должны присутствовать объявление DOCTYPE, элементы head и title, элементы html и body, и пространство имен:
4. Теги должны иметь правильную вложенность, неправильно:
Структурно:
1. В недалеком прошлом браузеры не придерживались стандартов (в то время - рекомендаций) W3C, поэтому html страничка по-разному отображалась или вообще не отображалась в разных браузерах. Теперь разработчики сотрудничают с W3C и в скором будущем, написав страничку по стандартам и правилам xhtml, вы будете уверены что она везде отобразится правильно. Осталось дождаться новых версий IE, Mozila, OPERA и OpenWave браузеров
2. Во времена "войн браузеров" разработчиками браузеров было придумано масса "самопальных" элементов, которые корректно работали только в их продукции, увеличивая неразбериху и усложняя работу разработчиков сайтов (многие делали несколько версий сайтов из-за этого). XHTML пресекло эту ошибку - стандарты W3C остановило "войну браузеров"
3. Отказ от атрибутов тегов в пользу стилей (css) - мощного инструмента разметки документов. Таким образом, отделяя структуру документа от представления документа
4. В Xhtml присутствует XSL-расширяемый язык стилей
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 17:27:52 | Сообщение № 5
|
|
admin
| Схемы DTD для XHTML
Как и html, xhtml схем DTD (Заголовки xhtml страниц, подверждающие действительность xhtml страниц). Перечислим по порядку (Для вашего удобства прибавлю элементы html и head с полезными атрибутами):
XHTML MP:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<base href="http://ingvarr.wen.su" />
<link rel="stylesheet" media="all" type="text/css" href="/main.css" />
<title>XHTML MP</title>
</head>
XHTML 1.0 Strict:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<base href="http://ingvarr.wen.su" />
<link rel="stylesheet" media="all" type="text/css" href="/main.css" />
<title>XHTML MP</title>
</head>
XHTML 1.0 Transitional:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<base href="http://ingvarr.wen.su" />
<link rel="stylesheet" media="all" type="text/css" href="/main.css" />
<title>XHTML MP</title>
</head>
HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<base href="http://ingvarr.wen.su" >
<link rel="stylesheet" media="all" type="text/css" href="/main.css" >
<title>XHTML MP</title>
</head>
объявление xml:<?xml version="1.0" encoding="utf-8"?> не обязательно. Его отсутствие даже повысит доступность вашего сайта. Оптимальный выбор доступности сайта:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<base href="http://xhtml.wen.ru" />
<link rel="stylesheet" media="all" type="text/css" href="/main.css" />
<title>XHTML MP</title>
</head>
Страница с такой схемой должна быть в формате .html - сервер должен отдавать такую страницу с MIME-типом text/html (если вы на хостинге то эти настройки производятся в .htaccess, если на конструкторе то не парьтесь-все уже настроено). Ее откроют даже старинные комп. браузеры. Но если ваш сайт предназначен для мобил и сравнительно новых версий комп. браузеров то ЛУЧШИЙ ВАРИАНТ - XHTML MP и Strict. Страницы со схемами Strict и MP лучше отдавать в формате .xhtml, хотя можно и в .html - но валидатор будет ругаться...и возможны небольшие лаги в некоторых браузерах. З.Ы во всех выше изложенных примерах измените ссылки на ваш сайт и css файл. Регистр буковак=) нужно соблюдать. И не забудьте прописать кодировку в теге meta (utf-8).
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:31:09 | Сообщение № 6
|
|
admin
| О CSS
Что такое CSS?
CSS-Cascading Style Sheets (Каскадируемые таблицы стилей). Каскадируемые значит накладывающиеся друг на друга (т.к. таблица стилей может быть не одна и связана со страницей также нескольками способами, каждый из которых имеет свой приоритет, то браузер в определенной последовательности, продиктованной этими самыми приоритетами, накладывает таблицы на страницу(-ы) и выводит результат)
Анатомия CSS
Рассмотрим пример:
p {color: green; background: white} - правило CSS
Он означает, что содержимое элементов <p> в странице (текст) будет выводиться зеленым цветом и на белом фоне.
Таблица стилей состоит из одного или несколько правил CSS. Каждое правило состоит из 2 частей: селектора (p) и описания (все что в фигурных скобках). Описание в свою очередь состоит из свойства (например, color) и значения (например green).
Виды стилей CSS
Внешний лист стилей (Связанный)-текстовый документ, существующий отдельно от XHTML-страниц, которыми он управляет (1 лист можно связать хоть с 1000 страниц). Связывается со страницами с помощью элемента link или style в заголовке страницы (head):
<head>
...
<link rel="stylesheet" media="all" type="text/css" href="http://site.wen.ru/main.css" />
...
</head>
Или:
<head>
...
<style media="all" type="text/css">
@import url("http://site.wen.ru/main.css")
</style>
...
</head>
В данных случаях media="all" означает что таблица стилей предназначена для всех устройств, type="text/css" объявляет MIME-тип документа, ну а ссылка в обоих случаях на css файл.
Вложенный лист стилей - таблица стилей включена в документ . Вот пример использования:
<head>
...
<style media="all" type="text/css">
p {text-align: center; color: blue; }
h5 {text-align: left; color: aquamarine; }
</style>
...
</head>
Этот тип css не так экономен как внешний (но он по своему полезен-см. далее)...но существует еще более неэкономный:
Последовательный (встроенный) лист стилей - применяется к отдельным элементам, пример:
<body>
...
<h4 style="color: red;">Заголовок</h4> <img style="border: 2px;" alt="photo" src="/img.jpg" /> ...
</body>
Как вы понимаете этот тип css вообще не экономит разметку нашей страницы и он не чем не лучше того же font, но опять же он по своему полезен. Чем же?Смотрим дальше
Приоритеты CSS
Допустим вы с помощью внешнего листа прописали цвет текста и он действует на всех страницах сайта (один файл css связан со всеми страницами). А тут вдруг понадобилось, чтобы именно в этой страничке цвет текста был другим. И что же теперь для одной страницы делать отдельный файл css? Нет! С помощью вложенного стиля прописываем нужный цвет текста в этой страничке и все! Вложенные стили имеют более высокий приоритет по сравнению с внешним листом стилей и поэтому подавляет его, но только там где "возник спор" между ними - остальные правила внешнего листа стилей вложенный не трогает. Встроенный (последовательный) лист стилей подавляет и внешний и вложенный лист стилей. Он полезен, когда нужно присвоить определенное свойство одному элементу страницы.
Стоит упомянуть о приоритетах по источнику:стиль определенный ближе к тегу имeeт больший пpиopитeт, чем стиль oпpeдeлeнный дaльшe. Также и стиль класса в связке с каким-либо тегом, приоритетнее стиля этого тега
Приемы в CSS
Некоторые полезные приемы в css:
h1,h2,h3,p,strong {color: green; font: 12pt bold} - таким образом можно облегчить разметку страницы, несколько селекторов и одно описание!
p>b {color: green; font: 12pt bold} - это значит что данное описание нужно применять к элементам b, принадлежащим элементу p (вложенным в элемент p). Некоторые браузеры приходится тыкать носом, таким образом, когда они в упор не хотят видеть нужный элемент (часто это элементы li, входящии в элемент ul). Этот прием полезен и в других случаях (подумайте каких)
* {color: green; font: 12pt bold} - описание будет применено ко всем элементам страницы
p img {margin: 0} - контекстный селектор, описание будет применено ко всем элементам img входящими (являющимся дочерними) в элемент p, еще пример: html p b {color: green; font: 12pt bold} - всем элементы b, входящим в элемент p, котрый является дочерним элемента html, будет присвоено данное описание
Стоит упомянуть что селекторами являются также селекторы id и class, рассмотрим пример:
...
.gh1 {color: green; font: 12pt bold}
#tg1 {color: red; font: 12pt bold} ...
.gh1-это селектор класса (класс), чтобы его задействовать делаем так:
<b class="gh1">text</b>
#tg1-это селектор id (id), чтобы его задействовать делаем так:
<b id="tg1">text</b>
Отличаются они тем, что id можно применять в странице единожды, а класс хоть миллион раз
Все вышеизложенные приемы можно применять к селекторам class и id. Так же можно комбинировать эти приемы
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:33:53 | Сообщение № 7
|
|
admin
| Основы CSS:
Так что же такое CSS? Каскадные листы стилей представляют собой список параметров, задающий внешний облик содержания страницы. Проще говоря, это список элементов страницы (тегов, классов, идентификаторов, псевдоклассов), для каждого из которых задана отдельная инструкция его отображения в браузере пользователя.
Например, каскадный лист стилей содержит 2 элемента (правильнее - селектора, пусть это будет элемент " a" и " p", то есть ссылка и абзац соответственно) с инструкциями их отображения. Пусть инструкция к элементу " а" говорит о том, чтобы ссылка была зеленого цвета, а инструкция к элементу " p" говорит о том, чтобы абзац был с размером шрифта 14, цвет всего абзаца был красным и выравнение его было по середине. Теперь, когда этот лист стилей применен к какой либо странице, все (или отдельные) ссылки в ней будут зеленого цвета, а все (или отдельные) абзацы будут иметь 14 размер шрифта и т.д (как сделать чтобы стиль был применен к отдельным абзацам и ссылкам я опишу позже).
Т.е. теперь вам не нужно задавать свойства для каждого элемента в отдельности по всей странице! С CSS вы экономите время и снижаете размер ваших страниц. Тут следует заметить, что 1 лист CSS можно связать хоть с тысячью страниц и ко всем им будут применены инструкции этого листа стилей.
Вы наверное заинтересованы: а много ли в CSS этих самых инструкций (правильнее будет описаний) вообще? Ответ: ДОСТАТОЧНО, для того чтобы заменить трудоемкие и устаревшие элементы типа font,b,blink и т.д.! Плюс ко всему этому CSS содержит массу возможностей, которых нет ни в xhtml, ни в html.
Думаю с этим мы разобрались?Напоследок пример стиля который мы рассматривали выше, вот он:
a {color: green;}
p {font-size: 14px; color: red; text-align: center;}
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:34:29 | Сообщение № 8
|
|
admin
| Плюсы css
Обзор CSS:
1. CSS является стандартным языком разметки для web/wap документов. С его помощью можно управлять цветами, типографическими параметрами, размером и местоположением элементов и изображений на странице;
2. Несмотря на мощь и точность, создавать правила CSS можно легко и вручную.
3. CSS не повышает трафик - один файл CSS может использоваться всеми страницами сайта, что поможет вам сэкономить
4. CSS задумывался своими создателями (W3C) для замены табличной разметки HTML, фреймов и других приемов оформления документов, но, как мы увидим, он может быть высокоэффективен и при сочетании с ними в переходных, смешанных разметках
5. Чистая CSS-разметка в сочетании со структурным XHTML-кодом может помочь дизайнерам отделить внешний вид от структуры, повысив доступность сайта и легкость его обслуживания;
Преимущества CSS:
1. Экономия трафика, снижение времени загрузки страниц;
2. Снижение нагрузки на сервер
3. Сокращение времени на разработку и дизайн сайта
4. Сокращение времени на обновление и обслуживание
5. Повышение совместимости с разными платформами благодаря использованию Web-стандартов;
6. Повышение доступности за счет удаления некоторых, многих или всех элементов оформления из кода
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:36:34 | Сообщение № 9
|
|
admin
| CSS псевдоклассы
Псевдоклассы предназначены для управления элементами, недостижимыми с помощью обычных селекторов. В CSS2 их несколько. Пример использования псевдокласса:
p:first-line {color: red;}
В данном случае правило CSS задает текст первой строки абзаца (элемент p) красным цветом.
Все псевдоклассы:
:first-child - первый потомок элемента.
:link - непосещенные ссылки.
:visited - посещенные ссылки
:hover - элемент, над которым находится указатель мыши.
:activate - активизированный элемент.
:focus - элемент, имеющий фокус.
:lang - текущий язык.
:first-line - первая строка абзаца.
:first-letter - первая буква абзаца.
:before - располагает содержание перед элементом.
:after - располагает содержание после элемента.
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:37:59 | Сообщение № 10
|
|
admin
| Основы языков разметки:
Итак, начнем: Сперва определимся, что же такое язык разметки?! Будь то html, wml, xhtml или что то другое, неважно, понятие у них общее: Язык Разметки - это инструмент, средствами которого мы с вами форматируем содержимое страницы: текст, изображения и другие объекты. Тут важно обратить внимание на понятие разметка. Привиду аналогию: разметать колоду карт по столу. Теперь представьте, что вместо карт у вас текст, изображения, флэш-анимация и прочее. Все это вы располагаете на странице, как вы пожелаете.
Вернемся к средствам разметки языка xhtml ( все ниже перечисленное относиться и к html ). Что же это за средства, которыми мы форматируем страницу? Это элементы языка разметки, в народе просто: "теги". Хотя если быть точным, элемент языка разметки представляет собой пару или один тег (также теги еще называют "Дескрипторами"). Схема элемента,непустого:
<Тэг атрибут="значение">..Содержание..</Тэг>
Пустого:
<Тэг атрибут="значение" /> Как видите у пустого элемента нет содержания и закрывающего тега. Тут следует отметить что название элемента и тега одинаковы,атрибутов в элементе может быть несколько,в качестве содержания обычно выступает либо текст, либо другой элемент(ы). Для чего нужны атрибуты? Объяснить трудно, проще показать: <p align="center">Text</p> - здесь элемент "p" заставляет вывести текст "Text" в виде абзаца, а атрибут "align" со значением center заставляет этот текст на странице выровняться по центру.
Так все же, что делают эти самые элементы?! Аналогия с картами: распологают карты в нужных местах стола, раскрашивают карты и стол,заключают их в таблицы, рамки, заставляют их мигать, меняют их размер и многое другое. Теперь вспомните что карты это текст,картинки и прочие, и представьте что у нас может выйти. В html/xhtml достаточно большое колличество элементов на каждый случай жизни (в xhtml их около сотни), хотя многие из них редко используются.
Сама по себе страница, допустим xhtml страница, представляет собой txt документ с расширением .html или .xhtml, т.е обычный файл .txt переименованый в файл.html (.xhtml,.xht), внутри же смесь текста и тегов, но не просто смесь а упорядоченная смесь со своей структурой, а не просто хаотическое скопление элементов.
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:40:04 | Сообщение № 11
|
|
admin
| Что такое W3C?
W3C:
W3C - Организация World Wide Web Consortium (W3C) (http://www.w3c.org), созданная в 1994 году, занимается созданием спецификаций и руководств для развития web и обеспечения совместимости различных технологий, В данный консорциум входит около 500 организаций. Директор организации Тим Бернерс-Ли (Tim Berners Lee, http://www.w3.org/people/berners-lee), разработал в 1989 году стандарты языка HTML и World Wide Web. Созданные W3C стандарты включаютв себя HTML, CSS, XHTML, DOM (Document Object Model). На протяжении нескольких лет W3C именовала эти спецификации "рекомендациями", из-за чего компании-участники, такие как Netscape и Microsoft, применяли их на практике не так уверенно, как следовало бы. В 1998 году после создания проекта Web Standarts (www.Webstandards.org) эти спецификации стали именоваться Web-стандарты. Данный маркетинговый ход помог добиться точной и полной поддержки в любом браузере или Internet-устройстве.
Другой аналогичной организацией является European Computer Manufactures association (ECMA), отвечающая за язык ECMAScript, более известный под названием standart JavaScript.
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:41:06 | Сообщение № 12
|
|
admin
| XHTML-Язык будущего?
10 Главных причин перехода на XHTML
1. XHTML является текущим стандартом разметки гипертекста, заменившим html
2. XHTML совместим с другими продуктами на базе XML - языками, протоколами, и приложениями, чего не скажешь о HTML
3. XHTML более последователен, чем HTML, что снижает вероятность возникновения ошибок
4. XHTML является мостом к будущим версиям XHTML. Когда появится стандарт XHTML 2.0-будет легче на него перейти, чем с HTML
5. Старые браузеры так же корректно отображают XHTML, как и HTML
6. Новые версии браузеров "любят" XHTML (в частности, XHTML 1.0), он предоставляет многие функции, недоступные в HTML
7. XHTML так же хорошо работает в беспроводных устройствах, программах для чтения информации с экрана и других пользовательских устройствах, как и в традиционных браузерах, что часто устраняет необходимость создания отдельных версий для беспроводных устройств и повышает доступность сайта
8. XHTML является частью семейства Web-стандартов (также включающего в себя CSS и W3C DOM), что позволяет контролировать внешний вид и поведение страницы на разных платформах, браузерах и устройствах
9. Использование XHTML ведет к повышению доступности вашего сайта и одинакового отображения страниц в браузерах разных производителей
10. Использование XHTML может выработать у вас привычку проверять страницы валидаторами, что сэкономит время на тестировании и отладке и поможет избежать основных ошибок, например отсутствие атрибута alt в img
5 Главных причин не переходить на XHTML
1. У вас как у дизайнера почасовая оплата
2. Вам нравится создавать отдельные версии сайта для каждого браузера
3. Вам подсказывает внутренний голос.
4. Вы уходите из WAP/WEB-дизайна.
5. Вы не знаете правил XHTML.
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:44:42 | Сообщение № 13
|
|
admin
| Стилизация страницы
Стилизируют страницы обычно с помощью css файлов, но тогда весь ваш сайт будет выглядеть однообразно. Чтоб появилось разнообразие, вы должны употребить новый стиль страницы. И если надо изменить 1 или 2 страницы, то для этого не надо писать таблицу цветов css, а надо просто воспользоваться тэгом "style"! Этот тэг имеет более высокий приоритет чем css-таблица, т.е. между тэгом и таблицей больший приоритет у тэга.
~ Тэг "style" располагается в "голове" документа,т.е. внутри тэга "head",но после тэга "title".
~ Тэг "style" оптимален для тех,кто не разбирается в css-таблицах, но может послужить пособием для написания таблицы, т.к. css и содержание тэга "style" очень похожи (но разница есть).
Вобщем, если вы - начинающий wap/web мастер,не знающий,что такое css, то тэг "style" специально для вас!
Вот полное содержание тэга "style":
<style>body { text-align:center;background-color:#FFFFD7;color:darkgreen;text-decoration:underline;font-weight:normal;margin:1px;padding:0px 1px 1px 0px; }a { color:brown;text-decoration:bold; }div { text-align:center;background-color:yellow;color:brown;margin:3px;padding:1px 0px 1px 0px; }.adiv { color:darkred }.2cop { background-color:yellow;color:black; }</style>
Пояснения:
body- стиль тела страницы (цвет страницы в целом, цвет текста, отступы от границ экрана в пикселах и т.д.)
a - цвет ссылок (и декорации/украшения к ним)
div - заголовок страницы (фоновый цвет заголовка, цвет текста в заголовке, отступы и т.д.)
.adiv - цвет ссылки в заголовке (точка обязательна, т.к. это добавочный элемент стиля; чтобы такая ссылка появилась, надо использовать тэг <div class="здесь пишем без точки то, что было с точкой">)
.2cop - цвет копирайта и цвет текста в нем (по сути это тоже div)
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:46:08 | Сообщение № 14
|
|
admin
| Аббревиатура
Термины и Аббревиатура:
FPI - Formal Public Identifer (Формальный публичный идентификатор)
URI - Uniform Resource Identifer (Универсальный Идентификатор Ресурса)
MIME - Multipurpose Internet Mail Extensions (Многоцелевые расширения электроной почты, как это не странно)
HTML - HyperText Markup Language (Гипертекстовый язык разметки)
XHTML - Extensible HyperText Markup Language (Расширяемый гипертекстовый язык разметки)
XSLT - Extensible StyleSheet Language Transformations (Расширяемый Язык Преобразований Таблиц стилей. Предназначен для изменения структуры документа XML или его преобразования в документ на другом диалекте XML)
XML - Extensible Markup Language (Расширяемый Язык разметки)
FTP - File Transfer Protocol - сетевой протокол, с помощью которого можно загружать и выгружать файлы в сеть.
XSL FO - Extensible StyleSheet Language Formating Objects (Язык обьектов форматирования, XSL FO - представляет собой словарь XML, предназначенный для описания вывода документов XML на экран)
XPath - Язык XPath представляет собой подмножество XSL, используещееся языком XSLT для идентификации отдельных частей документа XML
SGML - Standart Generalized Markup Language (Генеральный Стандарный язык разметки, стандартизирован в ISO)
DNS (Domain Name System) - система преобразования доменных имен (напр.,xhtml.pp.ru) в IP-адреса (напр. 88.212.197.112) и наоборот.
HTTP - (HyperText Transfer Protocol) - протокол, которым мы пользуемся когда юзаем по сети (WWW/WAP).
IP - (Internet Protocol) - протокол, обеспечивающий глобальную адрессацию компьбтеров в сети Интернет.
IMAP - (Internet Message Access Protocol) - протокол, обеспечивающий доступ к электр. почте, более сложный чем POP-протокол.
Форматы файлов:
.css - каскадные таблицы стилей
.doc - расширение текстовых документов MS Word
.asp - формат динамических страниц в интернете, формируются в результате запроса пользователя к БД
.avi - формат хранения видеоинформации (клипы,фильмы)
.3gp - формат хранения видеоинформации для мобильных устройств
.bak - формат резервных копий документов,созданных в процессе работы многих программ
.bmp - формат растровой графики (напр. в Paint)
.cdr - формат рисунков, созд. в программе CorelDraw
.cfg - конфигурационный файл,хранящий настройки
.com - исполняемый программный файл
.dll - динамически подключаемые библиотеки. Использ. сразу несколькими программами
.exe - формат исполняемых программ, запускает программу
.gif - формат растровой графики с 256-цветной палитрой
.php - формат скрипта - программы серверного языка программирования PHP
.txt - формат текстового документа
.sys - то же самое что exe например для Symbian смартфонов
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:46:49 | Сообщение № 15
|
|
admin
| История в датах | Событие | Дата |
|---|
| Разработан SGML | 1986 | | Разработан HTML | 1992 | | Разработан HTML+ | 1993 | | Основание Консорциума W3C | 1994 | | Разработан HTML 2.0 | 1995 | | Разработан HTML 3.2 | 1996 | | Разработан HTML 4.0 | 1997 | | Разработан XML | 1998 | | Разработан HTML 4.01 | 1999 | | Разработан XHTML и XHTML 1.0 | 2000 | | Разработан XHTML Basic | 2000 | | Разработан XHTML 1.1 | 2001 | | Разработан XSL | 2001 |
|
| |
|
|
| ingvarr | (63321) Вне сайта Дата: 19.09.2015, 18:50:56 | Сообщение № 16
|
|
admin
| Вопрос-Ответ
Как переделать wml страницу в html?
Если на компьютере, то существуют специальные утилиты для этой задачи. Если нет, то открываем вручную: сносим все до <card> , вставляем туда Шапку html страницы (DTD+html+head), <card> и </card> меняем на <html> и </html> . Редактируем редкие wml теги, если такие найдете, под html.
Можно ли ставить скрипты на Wen,Kmx сайтах?
Сразу скажу PHP, Perl скрипты НЕЛЬЗЯ, но можно использовать JavaScript и WMLs, эти скриптовые языки программирования выполняются на стороне клиента.
Как связать CSS файл с html/xhtml страницей?
Мало связать свою страницу с чужим листом стилей CSS, эффект будет максимум на 20-30%. Нужно править оба файла под себя.
Как удалить и заменить Index.Wml на Index.Html на Wen.Ru?
Создаете index.html или index.xhtml, после чего можете удалить Index.Wml. Можно после создания index.html или index.xhtml не удалять Index.Wml. Тогда, если браузер пользователя поддерживает html, то он попвдет на index.html или index.xhtml, а если у него старый телефон без поддержки html, то он попадет на Index.Wml.
Как вставить JavaScript?
<script type="text/javascript" charset="utf-8" >...<script> где вместо ... содержание Скрипта. Либо добавьте атрибут src="http://sait.wen.ru/name.js" с ссылкой на скрипт.
|
| |
|
|
| sezonoj | (2) Вне сайта Дата: 06.03.2016, 16:45:17 | Сообщение № 17
|
Рядовой
Группа: Житель
| Я уже несколько лет делаю книги в формате ePub, для которых готовлю тексты в xhtml (InDesign позволяет даже экспортировать в ePub, но файлы xhtml нужно немного править). Ну, кроме обложек, иллюстраций там не было. Попробовал сделать журнал, и тут вскрылась проблема с иллюстрациями. Если они размещаются по центру, то есть между абзацами текста, никаких проблем нет, а в соответствующем стиле css я указываю text-align:center;
Проблемы возникает при необходимости размещения картинки по правому или левому краю. Ну, обычно делаю так.
<p><img src="Jegorov.jpg" alt="Jegorov" width="160" style="margin-left:10px" height="200" align="right" /><strong>текст абзаца.</strong></p>
В "Transitional" такое проходит, а в "Strict" нет. Проверка даёт следующую ошибку
«Тег "img" не имеет атрибута "align" в активных версиях.[XHTML 1.0 - строгий режим]»
Валидатор ePub выдаёт примерно такую же ошибку.
Пытался сделать класс ".pravo" в css. Но без особого успеха.
Вот и вопрос, как в "строгом режиме" разместить фото слева или справа, чтобы текст обтекал его с полем 12 px?
|
| |
|
|
| sezonoj | (2) Вне сайта Дата: 06.03.2016, 17:18:03 | Сообщение № 18
|
|
Рядовой
Группа: Житель
| Прошу прощения, сам нашёл ответ. В css нужно прописать
.pravo {
float: right;
text-indent: 0pt;
padding-left:10px
}
|
| |
|
|
