HTML и CSS. Изучение языков и web-технологий

О чём речь

noreply@blogger.com (Sergey) — Mon, 11 Nov 2019 12:46:00 +0000

Разбирать теги не буду.
Есть много книг, в том числе, неплохой краткий справочник по тегам HTML.
Плюс собственно сам документ HTML 4.01 Specification

Хочется выделить основные интересные моменты размещения данных на странице.

Литература:

Jason Cranford Teaque. DHTML AND CSS for the world wide web.
HTML 4.01 Specification

Эффект прозрачности для изображений в тексте поста

noreply@blogger.com (Sergey) — Wed, 23 Dec 2009 12:33:00 +0000

Чтобы картинка в тексте изменяла свою прозрачность при наведении на неё курсора мыши достаточно использовать псевдо-классы для линков.

Например,

Класс нужен, чтобы применять эффект только там, где необходимо.
Вот так, на примере эволюции человека:

Прекрасно работает в Firefox и MS IE !

Бегущий текст

noreply@blogger.com (Sergey) — Thu, 12 Nov 2009 14:37:00 +0000

MARQUEE - довольно интересный тег, который часто используется на страницах.
В переводе - маркер, инструмент для выделения текста.

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

К сожалению, он не читается стандартным. Его вообще нет в спаецификации w3c.
Тег был создан Microsoft для своего браузера. Утверждается, что его поддерживают основные браузеры.

Для того, чтобы список останавливался при наведении мыши на область прокрутки, добавляются две функции на события onMouseOver и onMouseOut:

< marquee behavior="scroll" direction="up" onmouseout="this.start();" onmouseover="this.stop();" >

.... 

marquee list </marquee>

Получается вот такой бегущий список:

Web технологии и языки программирования
Изучаем PHP
Изучаем HTML и CSS
Изучаем XML-XSLT

Интересные вещи из жизненного опыта
Learning English

.....

Перемещаем мышь на область бегущего текста - движение останавливается, перемещаем за пределы - опять бежим...
Firefox тоже поддерживает этот тег. Но с некоторыми странностями.
Например, если, направление (direction) прописать в тексте html - всё работает красиво по всем направлениям.
Но если менять направление налету - как это сделано кнопочками в моём примере,
то не всё так прекрасно. Хотя в Miscrosof IE - всё работает чисто.

Приходится это просто учитывать.

Ещё одна особенность.
Высота (длина списка) для тега marquee первоначально считается самим браузером.
То есть этот тег не наследует свойство height из родительского элемента (например - div).
Поэтому высоту height надо указывать обязательно, чтобы красиво вписаться в родительский элемент.

Да, конечно, эффект бегущей строки (бегущего списка), можно реализовать с помощью javascript. При острой необходимости это и придётся делать. Но там, где тег marquee работает корректно - можно не заморачиваться.

Лучше было бы сделать его стандартным в W3C. Может, когда-нибудь это и произойдёт...

Размещение данных на странице

noreply@blogger.com (Sergey) — Thu, 12 Nov 2009 10:44:00 +0000

Самое главное, конечно, - это контент.

Любой элемент размещается в прямоугольной области.
Для управления размещением контентом надо использовать два тега - div и span.

<div> пример div элемента </div>

<span> пример span элемента </span>