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

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

 
Мистический роман
БЛИЗКАЯ ДАЛЬ
Татьяны Катушонок

Купить в магазинах:
Близкая даль
Близкая даль
Близкая даль
Близкая даль
Близкая дальБлизкая даль
Озарение души
Сборник стихов Татьяны Катушонок
Осознание красоты спасет мир
Web technologies and programming languages
Web технологии и языки
PHP
Изучаем PHP
Клиент-сервер
XML - XSLT
Изучаем XML
Преобразования
Javascript и AJAX
Три кита
Листенеры
HTML и CSS
Размещение данных на странице
Бегущий текст
Эффект прозрачности для изображений в тексте поста

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

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

Литература:
  1. Jason Cranford Teaque. DHTML AND CSS for the world wide web.
  2. HTML 4.01 Specification

Ярлыки: ,

Подпишись на новости HTML и CSS по e-mail
posted by Sergey @ 04:46   0 comments
Эффект прозрачности для изображений в тексте поста
среда, 23 декабря 2009 г.
Просто рабочий конспект
Чтобы картинка в тексте изменяла свою прозрачность при наведении на неё курсора мыши достаточно использовать псевдо-классы для линков.

Например,

<style type="text/css">
.snapshot_area a img {
    border: 0px none;
    filter:alpha(opacity=70);
   -moz-opacity: 0.7;
    opacity: 0.7;
    khtml-opacity: 0.7;}

.snapshot_area a:hover img {
    border: 0px none;
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    khtml-opacity: 1.0;}
</style>

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

Прекрасно работает в Firefox и MS IE !
Подпишись на новости HTML и CSS по e-mail
posted by Sergey @ 04:33   0 comments
Бегущий текст
четверг, 12 ноября 2009 г.
Просто рабочий конспект

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

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

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

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

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

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



.....

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

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

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

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

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

Ярлыки: , , ,

Подпишись на новости HTML и CSS по e-mail
posted by Sergey @ 06:37   0 comments
Размещение данных на странице
Просто рабочий конспект
Самое главное, конечно, - это контент.

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

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

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

Ярлыки: , , ,

Подпишись на новости HTML и CSS по e-mail
posted by Sergey @ 02:44   0 comments
Близкая даль
Подпишись на новости Javascript и AJAX письмом:

Напишите ваш e-mail :

Delivered by FeedBurner

Предыдущий пост
Архив
Линки
Статистика

Subscribe in a reader

Powered by FeedBurner

BLOGGER

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