HTML и CSS [от А до Я] fontanka edition.

Red Rabbit · Feb 21, 2011

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

Gooos · Feb 21, 2011

fontanka said: ↑

У меня своя методика, я считаю что волокиту такую как:
Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Моя первая веб-страница</title>
</head>

Лучше будет заменить на:
Код HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8">
<title>Моя первая веб-страница</title>
</head>

Не делайте так никто, а автору лучше почитать это http://www.webmascon.com/topics/coding/25a.asp

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы.

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

fontanka · Feb 22, 2011

Я постараюсь написать чего то подобное, просто поймите мне пока сложно это сделать, я очень плохо разбираюсь в СЕ. Работаю с ней неделю всего лишь. Я разбираюсь и парралельно пишу здесь то, что применяю.
Вот таким образом.

fontanka · Feb 22, 2011

Gooos said: ↑

Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

Этого никогда не произойдет. Уже поздно, планировалось что ХНТМЛ с ее жестким синтаксисом должна была выйти посл 4 ХТМЛ и вытеснить его, но решили продолжить. По сути дела ХТМЛ 5 - это абсолютно новый язык, в гугле видел даже как то они его называют на в3.орге, просто решили так назвать чтобы народ не путать. В общем я к тому что всем легче использовать хтмл с щадящим синтаксисом, нежели Х.

С разработкой Х опоздали, надо было до пятерки вставлять, а они не успели. Все сейчас перейдут на поддержку пятерки - и все(особенно касаеться мною люто ненавидимой ИЕ).

Мое мнение что пора перестать мечтать и браться учить от А до Я пятерку, с ее хедерами, футерами и всеми прелестями которые нам подарил Джефри Яффе

Red Rabbit · Feb 22, 2011

fontanka said: ↑

особенно касаеться мною люто ненавидимой ИЕ

ие нормальный браузер. Особенно 9.

upd. А заголовок обязательно должен быть указан, и должен будет указываться до тех пор, пока все браузеры научатся пользоваться единым стандартом, а не кто куда.

fontanka · Feb 22, 2011

Stardoze said: ↑

ие нормальный браузер. Особенно 9.

upd. А заголовок обязательно должен быть указан, и должен будет указываться до тех пор, пока все браузеры научатся пользоваться единым стандартом, а не кто куда.

Вот:

Интернет ресурс. Мнение профессионалов said: ↑

Конечно, Internet Explorer содержит большое количество ошибок в разных версиях, но с помощью условных комментариев с ними можно бороться, добиваясь их устранения. Но вот чего нельзя ничем исправить, так это то, что IE безнадёжно устарел. Пока остальные браузеры включают всё больше свойств CSS3, поддерживают различные новомодные технологии, IE топчется на месте. Выход IE9 не решит проблему, предыдущие версии от этого в одночасье не испарятся. В такой ситуации наилучшим решением будет изящная деградация (graceful degradation) — принцип сохранения работоспособности при потере части функциональности.

на счет дтд у каждого свое мнение, я останось при своем, ну ладно ребят не будем оффтопом заниматься.
Сегодня я добавлю еще несколько уроков.

---------- Сообщение добавлено в 20:12 ---------- Предыдущее сообщение было в 19:45 ----------

hover

Все хотим сделать раскрывающуюся менюшку... выглядело бы очень красиво на соц.сети, перебарщивать конечно не стоит, но и без динамики никуда не катит. Итак, атрибут Ховер Приветствуйте!

Ховер:
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата."элемент:hover { ... }"
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>hover</title>
  <style type="text/css">
   a:link {
    color: #0000d0; /* Цвет ссылок */
    padding: 2px; /* Поля вокруг текста */ 
   }
   a:hover {
    background: #786b59; /* Цвет фона под ссылкой */ 
    color: #ffe; /* Цвет ссылки */ 
   } 
  </style>
 </head>
 <body>

  <p><a href="1.html">Ссылка 1</a></p>
  <p><a href="2.html">Ссылка 2</a></p>
  <p><a href="3.html">Ссылка 3</a></p> 

 </body>
</html>
или например такой можно сделать:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>hover</title>
  <style type="text/css">
   UL {
    width: 180px; /* Ширина меню */
    list-style: none; /* Для списка убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
    font-size: 10pt; /* Размер названий в пункте меню */
   }
   LI UL {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    margin-left: 165px; /* Сдвигаем подменю вправо */
    margin-top: -2em; /* Сдвигаем подменю вверх */
   }
   LI A {
    display: block; /* Ссылка как блочный элемент */
    padding: 5px; /* Поля вокруг надписи */
    text-decoration: none; /* Подчеркивание у ссылок убираем */
    color: #666; /* Цвет текста */
    border: 1px solid #ccc;	/* Рамка вокруг пунктов меню */
    background-color: #f0f0f0; /* Цвет фона */
    border-bottom: none; /* Границу снизу не проводим */
   }
   LI A:hover {
    color: #ffe; /* Цвет текста активного пункта */
    background-color: #5488af; /* Цвет фона активного пункта */
   }
   LI:hover UL { 
    display: block; /* При выделении пункта курсором мыши отображается подменю */
   }
   .brd {
    border-bottom: 1px solid #ccc; /* Линия снизу */
   }
  </style>
 </head>
 <body>

  <ul id="menu">
   <li><a href="russian.html">Русская кухня</a>
    <ul> 
     <li><a href="linkr1.html">Бефстроганов</a></li> 
     <li><a href="linkr2.html">Гусь с яблоками</a></li> 
     <li><a href="linkr3.html">Крупеник новгородский</a></li> 
     <li><a href="linkr4.html" class="brd">Раки по-русски</a></li> 
    </ul> 
   </li> 
   <li><a href="ukrainian.html">Украинская кухня</a> 
    <ul> 
     <li><a href="linku1.html">Вареники</a></li> 
     <li><a href="linku2.html">Жаркое по-харьковски</a></li> 
     <li><a href="linku3.html">Капустняк черниговский</a></li> 
     <li><a href="linku4.html" class="brd">Потапцы с помидорами</a></li> 
    </ul> 
   </li>
   <li><a href="caucasus.html">Кавказская кухня</a> 
    <ul> 
     <li><a href="linkc1.html">Суп-харчо</a></li> 
     <li><a href="linkc2.html">Лилибдж</a></li> 
     <li><a href="linkc3.html">Чихиртма</a></li> 
     <li><a href="linkc4.html" class="brd">Шашлык</a></li> 
    </ul> 
   </li> 
   <li><a href="asia.html" class="brd">Кухня Средней Азии</a></li> 
  </ul>

 </body>
</html>

Gooos · Feb 22, 2011

Ты весь htmlbook.ru сюда собрался скопипастить?

Изучай движки с этого сайта и пости уроки для них. Последнее предупреждение и тему удалю.

HTML и CSS [от А до Я] fontanka edition.

Red Rabbit Tough member

Gooos абырвалГ

fontanka Thread starter Novice member

fontanka Thread starter Novice member

Red Rabbit Tough member

fontanka Thread starter Novice member

Gooos абырвалГ

Share This Page