Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Несколько правил написания кода

Автор: sergejzr 16.6.2005, 20:32

Как мы знаем, XHTML набирает обороты и синтаксис определён у него намного строже "старого" HTML.
Мы стараемся не отставать. Именно код в формате XHTML, например будет правильно подсвечен в тэгах "code".
Вот пара нехитрых пунктов, которые помогут нам сделать код не только удобночитаемым но и правильноподсвечиваемым!

-------------------------------------------------------------------------------------------------------------------------------------

Каждый открытый тэг ДОЛЖЕН иметь иметь своего закрывающего брата.

ПРАВИЛЬНО:here is a paragraph.here is another paragraph.
НЕПРАВИЛЬНО:here is a paragraph.here is another paragraph.
Значения аттрибутов ДОЛЖНЫ находится в кавычках. Даже если они являются числами.

ПРАВИЛЬНО: <td rowspan="3">
НЕПРАВИЛЬНО: <td rowspan=3>
Аттрибуты НЕ СУЩЕСТВУЮТ сами по себе, но только в паре со своим значением

ПРАВИЛЬНО:<dl compact="compact">
НЕПРАВИЛЬНО:<dl compact>
Одиночные элементы закрыты в себе слэшем

ПРАВИЛЬНО:  <hr/>
НЕПРАВИЛЬНО:  <hr>
(thanks PHP-DIRECTOR):
Пишите только в нижнем регистре:

ПРАВИЛЬНО: <a href="index.php">ссылка</a>
НЕПРАВИЛЬНО: <а HREF="index.php"></а>
Необходимо соблюдать последовательность закрытия тегов:

ПРАВИЛЬНО: Слово
НЕПРАВИЛЬНО: Слово
(thanks dm9):
Не использовать сокращённую запись для пары тэгов, для которых в спецификации предусмотрено внутреннее содержимое.

ПРАВИЛЬНО: <div></div> <td></td>
НЕПРАВИЛЬНО: <div /><td />

Наоборот, одиночные по спецификации разбивать на пару можно:
ПРАВИЛЬНО: 
ПРАВИЛЬНО: <hr></hr>
(Спасибо Nuxx) Спецсимволы начинаются с & и кончаются ; Это означает, что сам по - себе амперсанд необходимо экранировать.

ПРАВИЛЬНО: <a href="index.php?mod=1&cat=212">link</a>
НЕПРАВИЛЬНО: <a href="index.php?mod=1&cat=212">link</a>

------------------------------------------------------
Свой код можно полностью проверить на соостветствие стандарта с помощью валидатора от W3C.
http://validator.w3.org/

Актуальная спецификация полностью:
http://www.w3.org/TR/xhtml1/#h-4.3

Подтолкнул на мысль: http://vingrad.ru/@Irokez

Пишите в новом стандарте smile

И да подсветится всё правильно и без ошибок!

Автор: Black 16.6.2005, 21:36

Хочу добавить пару пунктов:

5. Пишите только в нижнем регистре:

Правильно: <a href="index.php">ссылка</a>
Неправильно: <A HREF="index.php"></A>
6. Необходимо соблюдать последовательность закрытия тегов:

Правильно: Слово
Неправильно: Слово

Автор: sergejzr 16.6.2005, 21:43

Абсолютно согласен smile

Автор: dm9 16.6.2005, 22:58

Не использовать сокращённую запись для пары тэгов, для которых в спецификации предусмотрено внутреннее содержимое.

Правильно: <div></div> <td></td>
Неправильно: <div /><td />

Наоборот, одиночные по спецификации разбивать на пару можно:
 
<hr></hr>
Тем не менее, сама же спецификация так делать не рекомендует, по крайней мере для — из-за непредсказуемого поведения браузеров.

Автор: Gold Dragon 17.6.2005, 08:10

sergej.z
у меня вопрос к тебе, ты предлагаешь использовать синтаксис XHTML? То есть начинать отказываться от спецификации HTML4 или же так писать исключительно с целью правильной подсветки?

Автор: sergejzr 17.6.2005, 09:25

Цитата(Red @ 17.6.2005, 07:10)

То есть начинать отказываться от спецификации HTML4 или же так писать исключительно с целью правильной подсветки?

XHTML более строг, "валиднее" и значит "правильнее". Не думаю. что ХТМЛ надолго задержится после того, как все бразеры станут понимать XHTML в полной мере.

Когда подсветку писали, исходили из новых стандартов. Но дело не только в ней, а и в приучивания себя к новому и правильному стилю написания веб страниц.

Автор: Се ля ви 17.6.2005, 12:18

Цитата(sergej @ 16.6.2005, 20:32)

Именно код в формате XHTML, например будет правильно подсвечен в тэгах "code".

А какой версии XHTML? Я вот сейчас XHTML 2.0 уже смотрю, вышел, а я с заморочками 1.1 ещё не полностью разобрался... smile

Все бежит, летит вперёд...

Автор: dm9 17.6.2005, 12:50

Всё вышесказанное верно для 1.0, дальше не знаю.

Цитата

XHTML 2.0

Ух нифига.
А давно?

Автор: Gold Dragon 17.6.2005, 12:52

Цитата

Все бежит, летит вперёд..

Надо всё же ориентироваться не на новые стандарты, а на сегодняшнюю их поддержку, да за новостями следить. Какой смысл в этом, если основные браузеры будут поддерживать HTML4 ещё несколько лет и не переходить на чистый XHTML

Автор: PROCESSOR 17.6.2005, 15:22

Разве теги обязательно писать в нижнем регистре ? Так в спецификации написано ?

 - чем отличается от . Если не отличается , то в чём смысл ?

.... - я даже такого представить не мог. А оказывается работает ...

А в кратце - основное отличие XHTML от HTML можно ...

Автор: Gold Dragon 17.6.2005, 15:36

Цитата(PROCESSOR @ 17.6.2005, 15:22)

Разве теги обязательно писать в нижнем регистре ? Так в спецификации написано ?

в XHTML обязательно

Цитата

XHTML™ 1.0:
The Extensible HyperText Markup Language
....
4. Отличия от HTML 4
....
4.2 Имена элементов и атрибутов должны быть в нижнем регистре

Документы XHTML должны использовать нижний регистр для всех имён элементов и атрибутов HTML. Это необходимо, поскольку XML чувствителен к регистру, например, <li> и <LI> это различные теги.

Автор: dm9 17.6.2005, 15:59

Цитата(PROCESSOR @ 17.6.2005, 16:22)

А в кратце - основное отличие XHTML от HTML можно ...

PROCESSOR, да здесь, собственно, основное приведено.

Автор: sergejzr 17.6.2005, 18:07

PROCESSOR там вверху есть ссылка на спецификацию. Сейчас вставлю ещё ссылочку на валидатор smile

Автор: Се ля ви 18.6.2005, 17:50

Цитата(dm9 @ 17.6.2005, 12:50)

Цитата (Се ля ви @ 17.6.2005, 13:18)
XHTML 2.0

Ух нифига.
А давно?

Цитата

27 May 2005: The seventh public Working Draft of XHTML 2.0 has been published. Formal issues and error reports on this specification shall be submitted to www-html-editor@w3.org (archive).

Седьмой драфт - я сам не очень понял, что это значит, но думаю, что-то типа релиза. Со спецификацией можно ознакомиться тут (http://www.w3.org/TR/2005/WD-xhtml2-20050527/, http://www.w3.org/TR/2005/WD-xhtml2-20050527/xhtml2.pdf)

От, такие дела...

P.S. Кстати span там есть, гы!.. smile

Автор: dm9 18.6.2005, 18:08

Не, ну драфт есть драфт... не релиз smile

Но я и про это не знал. Так что спасибо. Кстати, наконец они нормальную структуру спецификации сделали. С 4.0 не сравнится.

Цитата

P.S. Кстати span там есть, гы!.. smile

Ишшо бы

)

Добавлено @ 18:11
ЛОЛ smile

)))))))))))))

Editors:
Jonny Axelsson, Opera Software
Mark Birbeck, x-port.net
Micah Dubinko, Invited Expert
Beth Epperson, Websense
Masayasu Ishikawa, W3C
Shane McCarron, Applied Testing and Technology
Ann Navarro, WebGeek, Inc.
Steven Pemberton, CWI (HTML Working Group Chair)

Автор: sergejzr 18.6.2005, 18:29

Цитата(Red @ 17.6.2005, 11:52)

Всё, что описанно выше поддерживается и сегодня smile

Автор: Се ля ви 20.6.2005, 11:18

Цитата(dm9 @ 18.6.2005, 18:08)

ЛОЛ )))))))))))))

Editors:
Jonny Axelsson, Opera Software

Угумц, меня тоже порадовало! Вдруг, действительно со времянем опера по поддержке стандартов с FireFox`ом поспорит - тогда сам, наверное, перейду на неё smile

Автор: $дмитрий 21.9.2005, 10:39

еще по спецификации:
1. обязательно обьявлять тип документа
2. в теге img прописывать alt

Автор: boombick 26.9.2005, 13:15

Цитата

2. в теге img прописывать alt

Alt, даже пустой необходим для корректного отображения текстовыми браузерами...
А то они будут впуливать что-нибудь типа src="bla-bla-bla"...

Автор: R.M. 5.10.2005, 08:49

На сколько я знаю Мозилла не держит параметр alt, достойное ему заменение title

Автор: sergejzr 5.10.2005, 10:26

Цитата

На сколько я знаю Мозилла не держит параметр alt, достойное ему заменение title

C чего бы она не поддерживала? smile

alt и title две разные вещи. alt - альтернативный текст. Пишется, если у юзера картинки отключены. title - всплывающая подсказка при наведении мыша.
alt обязателен, title естественно нет. Лучше конечно оба прописывать, независимо от браузера

Автор: boombick 5.10.2005, 11:01

По-любому лучше оба...
Ибо Мозилла действительно не показывает альт при включенных картинках...
А титл показывает

Автор: sergejzr 5.10.2005, 12:54

Цитата(boombick @ 5.10.2005, 10:01)

Ибо Мозилла действительно не показывает альт при включенных картинках...

Почему alt должен показываться при включенных картинках? alt - заменитель картинки

Цитата(sergej @ 5.10.2005, 09:26)

lt - альтернативный текст. Пишется, если у юзера картинки отключены.

Автор: boombick 5.10.2005, 13:32

Согласен.
Но порой интересно бывает дать пользователю некую информацию с помощью всплывающей подсказки...
Второстепенной важности!

Автор: CyClon 5.12.2005, 15:21

(thanks PHP-DIRECTOR):
Пишите только в нижнем регистре:

ПРАВИЛЬНО: <a href="index.php">ссылка</a>
НЕПРАВИЛЬНО: <A HREF="index.php"></A>

ИСКЛЮЧЕНИЯ:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

Добавлено @ 15:26
X. Прописывать META-Теги, хотя бы самые неоходимые.
ПРАВИЛЬНО:

Код


<head>
<title><?php echo $site_name; if (isset($section)) { echo "&nbsp;// $section"; } ?></title>
<link href='design/styles/style.css' type='text/css' rel='stylesheet'>
<meta http-equiv='content-type' content='text/html; charset=windows-1251'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='cache-control' content='no-cache, must-revalidate'>
<meta name='description' content='<?php echo $site_description; ?>'>
<meta name='keywords' content='<?php echo $site_keywords; ?>'>
<meta name='author' content='lisenko denis'>
<meta name='copyright' content='copyright (c) soulkeepers clan'>
<meta name='resource-type' content='document'>
<meta name='revisit-after' content="1 days">
<meta name='robots' content="all">
</head>

НЕПРАВИЛЬНО:

Код


<head>
<title><?php echo $site_name; if (isset($section)) { echo "&nbsp;// $section"; } ?></title>
<link href='design/styles/style.css' type='text/css' rel='stylesheet'>
</head>

Автор: CyClon 5.12.2005, 15:33

Придерживаться структуры:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>{TITLE}</title>
<link href='{...ПУТЬ...}' type='text/css' rel='stylesheet'>
{META TAGS}
</head>
<body>
{CONTENT}
</body>
</html>

Автор: CyClon 6.12.2005, 16:25

P.S. Некоторые не замечаю что кроме br и hr одиночными тегами являютс img, meta, link и т.д.
А то я токо в br понаставил / а так все по старому smile

))

Автор: set36 20.4.2006, 13:35

Необходимо также знать что в XHTML ссылки типа:

Цитата

?set=content&mc=2

не допустимы.
Вместо этого следует писать полный путь к сайту, и не забывать, что параметры мы передаём php-файлу, а не директории.

Автор: dm9 20.4.2006, 13:59

set36, дай ссылку на пункт спецификации, в котором это написано. Не помню такого.

Автор: set36 22.4.2006, 02:09

Пункта такого нет(вродебы).

Но если ссылки пишешь:

Код

?set=content&mc=2

и выдаешь в заголовках content-type text/xhtml (application/xhtml, application/xml итд), то ёпера и мозилла стопорятся на том, что параметра mc= у данного тэга нет[хоть и написаны ссылки в кавычках](валидатор тоже матерится на такую тягу).

(а ие вообще никогда не обрабатывает :=))) )

А когда ссылки собираешь начиная c http:// , то ругацца перестаёт.

Вывод: ко всем ссылкам через ПХП привинчиваем $SERVERURL ., и дописываем скрипт которому передаём параметры[в случае с индексом не обязательно, но зачем нагружать сервер тупыми запросами?..]

Автор: dm9 23.4.2006, 03:17

1. Никакой сервер никакими тупыми запросами не перегружается. Это клиент генерирует полный URI на базе того, что написано в href (src, action).

2. ?set=content&mc=2 - это неверная запись. Верная ?set=content&mc=2. Причём это относится как в полным, так и "урезанным" ссылкам. И всё везде, кстати, работает.

Автор: grinmax 28.5.2006, 15:41

Правильно по стандарту XHTML 1.0

<img src="im/10.gif" alt=""/>

не забывайте на конце "/"

Автор: 7910 8.7.2006, 15:26

Что делать, если по спецификации HTML 4 теги нужно писать в верхнем регистре, а по спецификации XHTML - в нижнем. Бытует мнение, что в будущем HTML должен будет соответствовать XHTML, и хотелось бы уже сейчас писать на будущее, чтоб потом не переписывать.Так в каком регистре лучше писать теги, чтобы сейчас документ был валидным и потом переделывать не пришлочь?

Автор: sergejzr 10.7.2006, 12:17

Цитата(sergej.z @ 16.6.2005, 18:32

)

Пишите только в нижнем регистре:

ПРАВИЛЬНО: <a href="index.php">ссылка</a>
НЕПРАВИЛЬНО: <A HREF="index.php"></A>

Автор: MaXL 13.7.2006, 13:13

а ещё небольшой вопрос обязательны ли ковычки?
Пример
<a href=index.php>ссылка</a>
<a href="index.php">Ссылка</a>

Автор: dm9 13.7.2006, 13:23

Да.

Автор: aloyn 26.9.2006, 14:27

Даже SpyLog-у досталось...

Цитата

Info Line 246 column 50: entity was defined here.
<a href="http://u####.04.spylog.com/cnt?cid=783204&f=3&p=0" target="_blank">

Автор: Illuminaty 26.9.2006, 18:31

еще бы не досталось smile

вылидный выриант:

Код

<a href="http://u####.04.spylog.com/cnt?cid=783204&f=3&p=0" target="_blank">

Автор: Nuxx 3.11.2006, 18:31

Еще прошу обратить внимания на спецсимволы - такие как амперсанд, в частности.

НЕПРАВИЛЬНО: <a href="index.php?mod=1&cat=212">link</a>
ПРАВИЛЬНО: <a href="index.php?mod=1&cat=212">link</a>

Подробно можете посмотреть спецсимволы (и не только) в Dreamweavere.

Добавлено @ 18:34

Цитата(Illuminaty @ 26.9.2006, 18:31)

еще бы не досталось smile

вылидный выриант:

Код

<a href="http://u####.04.spylog.com/cnt?cid=783204&f=3&p=0" target="_blank">

Код

target="_blank"

не валидно.

Автор: SelenIT 3.11.2006, 18:37

Цитата(Nuxx @ 3.11.2006, 18:31

)

target="_blank" не валидно.

С Transitional/Loose DOCTYPE - валидно. Но все равно, жутко несовременно и "идеологически неправильно".

Автор: sergejzr 3.11.2006, 18:40

Nuxx, спасибо

Автор: OlegNT 4.12.2006, 10:16

В скриптах прописывать параметр не language, а type (а лучше оба на переходном этапе)

И заключать весь JavaScript-код в [CDATA[ ... ]]

Код


<script type="text/javascript" language="javascript">
//<![CDATA[

JavaScript-код

//]]>
</script>

Автор: ARMICRON 8.2.2007, 19:01

Цитата

(thanks dm9 с вопроса MaXL):
Аттрибуты обязательно писать в кавычках
ПРАВИЛЬНО: <a href="index.php">ссылка</a>
НЕПРАВИЛЬНО: <а href=index.php></а>

В связи с этим такой вопрос - какие виды кавычек можно использовать ( " ", ' ', ` `) ?

Автор: Gold Dragon 9.2.2007, 11:20

<a href="index.php">ссылка</a>

на это валидатор у меня ругается, хотя ссылки отлично работают
<a href='index.php'>ссылка</a>
<a href=`index.php`>ссылка</a>

Автор: boombick 12.3.2007, 17:48

Цитата(sergejzr @ 16.6.2005, 21:32

)

НЕПРАВИЛЬНО: <a href="index.php?mod=1&cat=212">link</a>
НЕПРАВИЛЬНО: <a href="index.php?mod=1&cat=212">link</a>

Исправьте в верхней строчке НЕПРАВИЛЬНО на ПРАВИЛЬНО smile

А то смущает...

Автор: GZep 12.3.2007, 18:09

Цитата(sergejzr @ 16.6.2005, 20:32

)

Аттрибуты обязательно писать в кавычках

Не атрибуты, а значения атрибутов.
Это правило написано два раза.

Автор: BuShaRt 30.4.2007, 23:42

set36,
ms твой не атрибут вовсе, а элимент в GET запросе и не PHP единым богаты обработчики.

Цитата(sergejzr @ 16.6.2005, 20:32

)

(Спасибо Nuxx) Спецсимволы начинаются с & и кончаются ; Это означает, что сам по - себе амперсанд необходимо экранировать.ПРАВИЛЬНО: <a href="index.php?mod=1&cat=212">link</a>НЕПРАВИЛЬНО: <a href="index.php?mod=1&cat=212">link</a>

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

И тут еще вопрос был, про то, как значение артибутов обромлять...
Подходят и одинарные и двойные кавычки
<primer at1='1' at2="2">

Выбор в принципе не важен, но есть один момент, если (x)html код выводиться динамически т.е. используються языки программирования (на пример PHP), то нужно использовать тот тип, который не будите использовать в языках программирования, чтобы не пришлось экранировать кавычки....

Код


//выведет ошибку
print '<primer at1='1' at2="2">';
//Ошибку не выведит, но лишняя беда с эканированием
print '<primer at1=\'1\' at2="2">';
//Все счастливы...
print '<primer at1="1" at2="2">';

Автор: Uratsakidogi 30.4.2007, 23:46

Цитата(BuShaRt)

Валидный код должен быть удобным для чтения, а у нас получаеться лес глухой...

Именно поэтому урл должны быть внятнго вида, а не такие монстры. ;)

Автор: SelenIT 1.5.2007, 00:11

Цитата(OlegNT @ 4.12.2006, 10:16

)

И заключать весь JavaScript-код в [CDATA[ ... ]]

...здесь возникает резонный вопрос: много ли толку будет от всей этой валидности-перевалидности, если всё равно отдаваться это в 99.9% случаев будет с "неподобающим" Content-type: text/html (а не application/xhtml+xml, для которого, собственно, лишь и имеют смысл "сидаты" и прочие XML-ные "навороты")? smile

Автор: BuShaRt 1.5.2007, 13:34

Uratsakidogi,
по моему как раз и предлагают сделать моснтров smile

Автор: Uratsakidogi 1.5.2007, 14:07

Что index.php?mod=1&cat=212, что index.php?mod=1&cat=212 — одинаковая фигня.
Нужно копать глубже.

Автор: sergejzr 1.5.2007, 14:14

Цитата(SelenIT @ 30.4.2007, 23:11

)

Дык ты же программист. как напишешь, так и будет. Отдавай правильные заголовки, или забей на XML.

Цитата(BuShaRt @ 1.5.2007, 12:34

)

по моему как раз и предлагают сделать моснтров

Существуют правила и их надо придерживаться. XML возможно не лучший способ передачи данных, но это единственный стандартизированный. А монстровские урли лучше всего убирать через rewrite. как например на нашем форуме и сделано.

Автор: BuShaRt 2.5.2007, 08:50

sergejzr,
smile

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

Я на пример плохо понимаю в URL форума, какой переменной что присвоенно...

Автор: SelenIT 2.5.2007, 09:35

Цитата(BuShaRt @ 2.5.2007, 08:50

)

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

http://www.w3.org/TR/xhtml1/#C_12. И кавычки тут не влияют. Влияет вышеупомянутая CDATA, но внутрь атрибута её не запихнёшь...

Автор: BuShaRt 2.5.2007, 11:49

SelenIT,
Ладно, допустим при верстке мы можем этот момент отследиться, а что делать с формами?

Код


<form action="index.php" method="get">

</form>

Автор: SelenIT 2.5.2007, 13:04

А формы здесь причем? Они же в HTML-код URL-строку не вписывают...

Автор: BuShaRt 2.5.2007, 14:09

SelenIT,
Горе мне горе... smile

Сразу не сообразил, что в тоге мы получим вполне читабильную ссылку smile

А закорючки остануться только в исходнике HTML.

Автор: mr.Anderson 13.5.2007, 21:09

Не нашел я тут стилистических правил написания кода. smile

Позвольте добавить?

1. Не забываем делать отступы между логическими блоками кода. Не надо лепить все в кучу.

Код


<!-- Правильно -->
<html>

 <head> <!-- Заголовочный блок, информация о странице -->
  <title>My Title</title>
 </head>

 <body>
  <!-- Чего-то там в теле документа :) -->
 </body>

</html>

<!-- Неправильно -->
<html>
<head>
<title>MyTitle</title>
</head>
<body>
</body>
</html>

2. Не забываем делать отступы от левого края, иллюстрируя вложенность тегов (пример выше).

3. Время от времени комментируем код. Не надо кидать в меня тухлыми помидорами, даже профи это иногда может потребоваться, если код в несколько сотен строк (пример выше).

Автор: GZep 13.5.2007, 21:29

Цитата(mr.Anderson @ 13.5.2007, 21:09

)

Не забываем делать отступы

вот я хотел спросить: что именно подразумевается под отступами? \t или 4 пробела или 1 пробел.
Меня интересует как правильно делать, или такого стандарта нет?

Автор: mr.Anderson 13.5.2007, 22:03

Вроде, стандартов нет, но кто говорит - 1 пробел нужен, кто - 2, а кто Tab юзает. ИМХО, это на усмотрение самого программера. Мне вот удобно 1 пробел ставить.

Автор: Uratsakidogi 13.5.2007, 23:36

GZep, советую 1 таб.

Автор: GZep 14.5.2007, 13:53

жду человека, который посоветует 4 пробела... smile

Автор: Replicator 14.5.2007, 15:54

Советую 4 пробела smile

А при релизе можно и обфускацией заняться - поудалять все пробелы вообще.

Автор: sergejzr 14.5.2007, 16:19

Цитата(mr.Anderson @ 13.5.2007, 20:09

)

Не нашел я тут стилистических правил написания кода. smile Позвольте добавить?

Вообще-то это лучше и желательно в новую тему. Т.к. стиль в стандарт не входит.

Автор: naxellar 13.7.2007, 08:46

Лучше Tab. Потому как каждый в своем редакторе может настроить длину Tab и любой код будет с приятным ему отступом.

Автор: vassiliy9 1.9.2007, 21:46

Справочник по CSS всё доступно и понятно.
размер: 171 KB

http://depositfiles.com/files/1641654
http://letitbit.net/download/fdbec5735287/--------------CSS.chm.html

Автор: 1demirov1 5.1.2008, 15:56

Цитата(sergejzr @ 17.6.2005, 09:25)

Совершенно согласен. http://www.jodie.ru
HTML скоро просто станет плохим тоном, как например верстка таблицами (а не каскадные стили ccs). Да и давно пора упорядочить как и "язык оформления" и так и его понимание браузерами.

Если Создать стандарт, которого все будут придерживаться, то может и исчезнет проблема "кроссбраузерности" http://www.journal.knigka.info, что в свою очередь очень облегчит жизнь web-мастерам.
http://www.kamenskih.net

Автор: WebDisaster 6.1.2008, 10:03

Цитата(1demirov1 @ 5.1.2008, 15:56

)

HTML скоро просто станет плохим тоном

Угу. Особенно если учесть, что уже http://www.alistapart.com/articles/previewofhtml5
И ещё одно http://softwaremaniacs.org/blog/2005/12/19/xhtml-you-say/ про XHTML.

Автор: SelenIT 11.1.2008, 16:55

Можно еще поучаствовать в http://forum.vingrad.ru/forum/topic-179771.html по САБЖу (желательно после прочтения последней ссылки WebDisasterа, конечно ;). Буду благодарен за новые свидетельства отличий в отображении аналогичного кода при XTML- и HTML4.01-доктайпах одного подвида (Strict/Transitional). А кто найдет таковые без смены Content-type - тому благодарность в двойном размере!

Автор: eee 14.4.2008, 01:18

мда, все по феншую))) чувствую лет там через 10 тут появится топ аля "правила написания кода" где пользователи будут узнавать, а чем же отличается XHTML от XML

Автор: SelenIT 14.4.2008, 01:40

Цитата(eee @ 14.4.2008, 01:18

)

а чем же отличается XHTML от XML

Только определенным пространством имен и (до XHTML5) определенным DTD. Это его подмножество smile

. Тут как раз, в отличие от кучи нюансов с XHTML vs. HTML, все уже сейчас достаточно ясно...

Автор: eee 14.4.2008, 20:17

SelenIT, я имел ввиду что люди позже будут так спрашивать smile

но все равно спасибо))

Автор: Fedrus 17.4.2008, 15:01

В тему обсуждений о пользе и "надо ли это вообще"
Вот сейчас дочитываю книжку "Мастерская CSS...." Энди Бадда и случайно зашел в эту тему.
Вот что могу посоветовать как интересный пример показывающий силу http://www.csszengarden.com/ (там можно посмотреть на разные темы с боку осцществленные исключительно средствами CSS) и сомневающимся в пользе http://www.shaybakova.com/articles/advantage_CSS.php.
PS может это уже все знают но все же интересный сайт про темы

Автор: SelenIT 18.4.2008, 07:27

Fedrus, пользы CSS и микроформатов никто не отрицает, как для XHTML, так и для валидного HTML4.01/HTML5.

С точки зрения отделения структуры документа от оформления (путем выноса оного в CSS), разницы между HTML и XHTML нет никакой. XHTML не запрещает кодить таблицами, а HTML4 вполне позволяет верстать смысловыми блоками. Кривыми руками и в валиднейшем XHTML можно наворотить такого, что волосы встанут дыбом (в т.ч. у поисковиков;), прямыми можно и на HTML написать валидный, компактный и семантичный код (вдобавок одинаково интерпретируемый всеми браузерами, включая IE).

А действительно неоспоримые преимущества XHTML - в его XML-ности (можно обрабатывать его с помощью XSLT, внедрять в него MathML, SVG и др. XML-языки...). Проявляются они лишь при отдаче с правильным Content-type. Которого, увы, не поддерживает и, судя по всему, не собирается поддерживать IE...

Автор: hkdkest 24.6.2009, 14:11

http://codingrus.ru/readarticle.php?article_id=42

Автор: BlackRu 16.9.2009, 11:39

И что мне теперь, каждый год переписывать движок сайта...

Автор: NDenis 16.9.2009, 12:11

BlackRu, а что мешает сразу писать правильно?

Автор: BlackRu 27.9.2009, 18:18

А если html-код интегрирован с php и кавычки вызывают проблемы?
Каждый раз экранировать?

Автор: bars80080 27.9.2009, 18:35

не пиши интегрированный php-код с html-разметкой

Автор: ksayri 10.2.2010, 23:50

http://www.xiper.net/training/semantic-html/. В частности как использовать заголовки, как верстать меню и прочее. Начинающим будет полезно.

Автор: SelenIT 5.3.2010, 14:31

ksayri, сорри, но на первый взгляд очень сильно смахивает на клон htmlbook.ru. Включая его немногочисленные, но досадные ляпы (напр., cite — ни разу не "строчный аналог blockquote", которым на самом деле является q, а цитируемый источник, библиографическая ссылка)…

Автор: ksayri 6.3.2010, 19:25

спасибо за указанную ошибку - исправили.

Автор: Violator 29.3.2010, 12:10

ksayri,
на главной сразу бросилась в глаза статья о теге address
самое интересное что в конце статьи приводите линк на спецификацию, которую сами то и не прочитали, внутри address должны располагаться только инлайн элементы, исправьте
<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->

Автор: KatyaXml 28.12.2010, 10:54

Цитата(SelenIT @ 3.11.2006, 18:37)

Цитата(Nuxx @ 3.11.2006, 18:31

)

target="_blank" не валидно.

С Transitional/Loose DOCTYPE - валидно. Но все равно, жутко несовременно и "идеологически неправильно".

а как современно и правильно?

Автор: SelenIT 30.12.2010, 23:01

KatyaXml, дата того поста не смущает? ;)

Тогда, 4 года назад однозначно считалось, что сайт вообще не должен навязывать пользователю, где открывать ссылки (в том же окне, в новом табе и т.п.). Но с тех пор многое изменилось, появился HTML5 (в котором target у ссылок опять разрешен), и общая установка стала помягче: можно использовать, если точно знаешь, что это действительно нужно. Например, для хелп-страничкик к сложной форме или интерфейсу...

Автор: CmndrAlexGreen 24.3.2011, 11:02

Уважаемые, подскажите, а можно ли обьявлять ссылкой все содержимое div'а. На практике вроде работает нормально, но не будет ли в дальнейшем кривизны и есть ли какие то нормы или ссылкой по сути может быть что угодно?

пример:

Код


                    <div class="box"><a href="" title="">
                    <h3 class="bl">&nbsp;</h3>
                    <ul class="11">
                    <li>текст текст</li>
                    <li><img src="img/60.png" alt=""/></li>
                    </ul>
                    <b class="clear"></b></a>
                    </div>

Автор: bars80080 24.3.2011, 14:44

кривизна возможна и очень загибистая. но закономерностей тут сообщить не могу

к примеру, делал примерно следующее:
<a class="a1" href="">text
 <div>
 <a>text1</a>
 </div>
</a>

суть была при наведении на ссылку по
a.a1:hover div { display: block; }
до этого слой был скрыт. что прекрасно работало, пока не вставил ссылку в слой. в итоге блок всегда показывался, и был значительный сбой в стилях. что в ФФ, что в хроме

победить не удалось. только переписав структуру

Автор: mcTep 27.3.2011, 19:14

CmndrAlexGreen, насколько мне известно ссылка инлайновый элемент и в нее блочный элемент совать нельзя. Вроде даже валидатор ругается.

Но его можно обмануть сунув туда например spanи сделать ему display:block; Тогда все валидно будет, но опять же теги заголовков, списков и параграфов идут лесом.

Автор: CmndrAlexGreen 27.3.2011, 23:57

Я решил не заморачиваться и просто назначил одну и туже ссылку вначале для текста, а потом и еще для картинки идущей под текстом. По сути куда не нажмеш, все равно по ссылке перейдеш.

Автор: SelenIT 31.3.2011, 02:14

В HTML5 блочные элементы в ссылку вставлять http://html5doctor.com/block-level-links-in-html-5/. Нужна внимательность в старых IE, там возможны глюки с hover-ом, курсором и т.п. (впрочем, со span:display-block тоже).

А вот ссылку в ссылку пихать нельзя никогда, ни при каких доктайпах и условиях (а также кнопку в ссылку, ссылку в кнопку и т.п. интерактивные элементы друг в друга). Просто по логике - вот что будет, если в самолет, летящий, к примеру, в Париж, "вставить" другой самолет, летящий в Токио? :)

Автор: bars80080 31.3.2011, 14:19

Цитата(SelenIT @ 31.3.2011, 02:14

)

Просто по логике - вот что будет, если в самолет, летящий, к примеру, в Париж, "вставить" другой самолет, летящий в Токио? smile

некорректный пример, могу привести отмашку: ссылка в ссылке - это как один самолёт на другом, при этом они прекрасно разделяются. в какой мы сели - туда и полетим

http://www.buran.ru/images/jpg/mb_06-1.jpg

Автор: SelenIT 31.3.2011, 14:54

"На" — это не "в" smile

. Ссылка на ссылке прекрасно делается (и работает) с помощью позиционирования. А когда внутри — у браузера случается когнитивный диссонанс ("куда мне переходить? по внешней ссылке? по внутренней? по обеим сразу? мне что, разорваться?") smile

Автор: bars80080 31.3.2011, 19:03

Цитата(SelenIT @ 31.3.2011, 14:54

)

у браузера случается когнитивный диссонанс ("куда мне переходить? по внешней ссылке? по внутренней? по обеим сразу? мне что, разорваться?")

его проблемы, прямо скажем. вот в actionScript предусмотрен блок всплывания события по цепочке элементов. почему браузер не научили такой простой вещи - не понятно

Автор: SelenIT 31.3.2011, 19:27

Всплывание событий снизу вверх, как и перехват сверху вниз, в браузерах есть (в JS). Хочется странного — можно пользоваться этими механизмами на здоровье. Но самой основе браузера, тупой проги для перехода по ссылкам, такие сложности и неоднозначности ни к чему. И страничкам тоже. Можно реальный пример из жизни, где в маленьком кусочке посреди нормальной ссылки ВНЕЗАПНО понадобилось устроить переход в совсем другое место?

Автор: bars80080 31.3.2011, 22:57

Цитата(SelenIT @ 31.3.2011, 19:27

)

где в маленьком кусочке посреди нормальной ссылки ВНЕЗАПНО

это вырожденный пример. ссылки давно уже не используются только в качестве ссылки. могут иметь дополнительный хинт, к примеру. а если хочется в этот хинт загнать ещё ссылки? при этом хинт, прекрасно бы согласовался с a:hover без лишней мутоты с js и лишних элементов

Автор: SelenIT 3.4.2011, 03:01

Цитата

при этом хинт, прекрасно бы согласовался с a:hover без лишней мутоты с js и лишних элементов

Но основная часть хинта поневоле осталась бы кликабельной и вела бы по ссылке, что вряд ли сильно понравилось бы юзеру. Раз всё равно используется дополнительный элемент для хинта (вместо стандартного title), не вижу беды в еще одном элементе - -обертке, на которую тоже можно повесить :hover (а IE6 пусть катится куда ему пора;)...

Автор: Gold Dragon 3.4.2011, 08:11

// offtop

начало темы было интересным, а сейчас тут вообще про что? smile

Автор: poziman 19.12.2011, 19:50

Интересная вещь. Про то, что нужно ставить всегда слэш в одиночных тегах я не знал. Я думал, что это только xhtml применяется. Или здесь автор попутал?

Автор: ksnk 19.12.2011, 20:26

poziman, Это - про правила написания кода в местном редакторе-подсвечивалке. Он тут сделан на xhtml, хотя исправно и правильно подсвечивает все. Объясняется этот топик тем, что он стартовал более 6 лет назад, когда трава была зеленее и перспективы xhtml толще smile

Автор: Denispopov11 20.12.2011, 18:48

Полезная информация. Даже не являясь новичком, сделал для себя несколько открытий

Автор: SelenIT 10.1.2012, 17:24

Цитата(sergejzr @ 16.6.2005, 20:32

)

Наоборот, одиночные по спецификации разбивать на пару можно:
ПРАВИЛЬНО: 
ПРАВИЛЬНО: <hr></hr>

Ну ёлки ж новогодние. А черные буквы (не красные и не зеленые) в спеках вообще кто-нибудь читает? http://www.opennet.ru/docs/RUS/XHTML1/#guidelines, например?

Цитата

Используйте также для пустых элементов синтаксис минимизированных тегов, например, , поскольку альтернативный синтаксис , допустимый в XML, во многих существующих пользовательских агентах приводит к непредсказуемым результатам.

Вообще, в свете официального признания XHTML тупиковой веткой и массовым переходом браузеров на HTML5-парсер, предлагаю эту ветку открепить, т.к. советы в ней на сегодняшний день практически неактуальны (а отквоченное выше — так и просто вредно).

Автор: Nikita95 3.3.2012, 18:39

Доброго времени суток! Ребят такая проблема, у нас небольшой город и мы сделали свою лок сеть,без выхода в инет,я установил движок,залил скрипт соц сети типа в контакте,чтобы было понятней на денвире,как и где прописать код чтобы доменом был не айпишник а кпримеру никита.нет повторюсь выхода в инет нет чисто локально, если кто то знает помогите пожалуйста,мне сказали нужно пару строк прописать,так это я и сам знаю,но где и какие не знаю.
Зарание благодарен!!

Автор: Kratos 2.4.2012, 09:13

Самая распространенная ошибка, W3C не пройдет валидацию

Правильно: <img src="/image.png" alt="noimage" title="this is sparta" />

Не правильно: <img src="/image.png" alt="noimage" title="this is sparta">

Да и в принципе нужно закрывать все одиночные теги , <hr /> и т.п.

Автор: KosmoBoy 25.6.2012, 11:21

Цитата(Kratos @ 2.4.2012, 09:13)

Насчёт закрытия/незакрытия тэга BR существует много споров. Но я лично предпочитаю закрывать! smile

Подробнее об том написано здесь: http://template-css.com/35-ponyatie-tega-html.html

Автор: Gold Dragon 25.6.2012, 21:36

Цитата(KosmoBoy @ 25.6.2012, 12:21

)

Насчёт закрытия/незакрытия тэга BR существует много споров.

существует спецификация, а не мнение.. в HTML 5 допускается не закрывать даже

Автор: SelenIT 6.7.2012, 12:15

Цитата

Насчёт закрытия/незакрытия тэга BR существует много споров. Но я лично предпочитаю закрывать!

Никаких споров не существует. В HTML4- его закрывать запрещено, в XHTML — необходимо (но допускается "самозакрывающая" сокращенная запись — всеми любимая " "). В HTML5 можно писать и " ", и " ", но к "закрытию тега" этот слеш никакого отношения не имеет (он просто с гарантией игнорируется, тогда как в HTML4 по строгим правилам SGML это было http://www.webdevout.net/articles/beware-of-xhtml#net " >"). Теперь синтаксис — исключительно вопрос вкуса, но не надо себя обманывать smile

В XHTML5, как и в XHTML1, можно писать и " ", и " ".

Добавлено @ 12:17

Цитата(Kratos @ 2.4.2012, 09:13

)

Самая распространенная ошибка, W3C не пройдет валидацию

Воистину. W3C — организация, а не язык разметки, поэтому валидировать его нет смысла smile

И да, писать с умным видом устаревшие цитаты, не понимая их смысла — ужасно распространенная ошибка. Не только в вебе, к сожалению...

Автор: vitya12 2.8.2012, 00:24

Спасибо.. Мне помогло!

Автор: Genn 8.8.2012, 20:12

Цитата(sergejzr @ 16.6.2005, 20:32)

Как мы знаем, XHTML набирает обороты...

давно XHTML поддерживаюсь. и от сотрудников требую

доктайпы не забываем!!!!!

Автор: Kasko882 2.10.2012, 22:10

Спасибо за советы)) Создам себе мануал, по правилам написания кода и буду сраться придерживаться его smile

Автор: beland 18.3.2013, 13:21

Цитата(Black @ 16.6.2005, 21:36)

Хочу добавить пару пунктов:

5. Пишите только в нижнем регистре:

Правильно: <a href="index.php">ссылка</a>
Неправильно: <A HREF="index.php"></A>
6. Необходимо соблюдать последовательность закрытия тегов:

Правильно: Слово
Неправильно: Слово

про регистр..не знал. но подозревал smile

лучше всего проверять потом. валидатором

Автор: benni 21.3.2013, 23:53

Цитата(Се ля ви @ 17.6.2005, 12:18)

Цитата(sergej @ 16.6.2005, 20:32)

Именно код в формате XHTML, например будет правильно подсвечен в тэгах "code".

А какой версии XHTML? Я вот сейчас XHTML 2.0 уже смотрю, вышел, а я с заморочками 1.1 ещё не полностью разобрался... :( Все бежит, летит вперёд...

да..я бы не сказал что там особо что то поменялось))

Автор: ЖАН61 7.10.2014, 13:48

Привет всем!
Не нашел как можно создать свою тему, поэтому спрашиваю в этой ветке.
В хроме сайт выглядит нормально, а в мозиле и IE все сдвинуто в право и увеличен масштаб. Картинка становится дефектной. Уменьшил масштаб страницы со 100% на 80 % и вид сайта нормализовался.
Сайт еще не загружен в интернет, открываю его через нотпад.
Вот эта страничка форума с моим вопросом в хроме выглядит нормально, а в мозиле ее масштаб увеличен, но это не портит общую картину. Все блоки находятся на своих местах.
А в моем случае увеличение масштаба привело к сильному сдвиганию центральных блоков в право. Не красивая картинка.
Видимо все дело именно в фиксированном размере и увеличении маштаба.
Но у других верстальщиков картинка сайта не портится в разных браузерах, потому что они что то для этого делают дополнительно. Что и как?

Автор: Alexiya 19.12.2014, 21:03

ЖАН61, сложно судить ибо я не вижу ссылку на ваш сайт и соответствено ничем не могу подсказать