Горизонтальная линия

Простой новый тег <hr> рисует в окне горизонтальную линию, не требует закрывающего тега. Часто применяется при верстке страницы в качестве декоративного элемента.

Имеет ряд атрибутов, align -выравнивание с одним из трёх значений (center, left, right) может быть применен, если задана длина линии атрибут width в пикселях или процентах. Так же можно задать толщину линии атрибут - size, цвет атрибут - color, и при необходимости отключить тень линии noshade.

Пример:

<html>
<head>
<title>Горизонтальная линия</title>
</head>
<body>
Это просто линия по умолчанию: <hr>
<hr>
Это линия без тени: <hr noshade >
<hr noshade>
Это линия окрашенная в кранный цвет: <hr color="#ff0000">
<hr color="#ff0000">
Линия длиной 250 пикселей: <hr width="250">
<hr width="250">
Линия длиной 250 и толщиной 5 пикселей: <hr width="250" size="5">
<hr width="250" size="5">
Линия длиной 500, толщиной 50, синяя: <hr width="500" size="50" color="#0000ff">
<hr width="500" size="50" color="#0000ff">
Примеры выравнивания:
<hr align="left" width="250" size="5">
<hr align="center" width="250" size="5">
<hr align="right" width="250" size="5">
<hr>
</body>
</html>

По моему достаточно просто и эффективно.

Бегущая строка

Тег <marquee> заставляет текст помещённый в него двигаться в том или ином направлении, проще говоря делает его бегущей строкой. Бегущая строка имеет ряд настроек скроллинга, которые задаются следующими атрибутами:

behavior - определяет тип скроллинга, может иметь следующие значения:

· alternate - колебательные движения от края к краю

· scroll - прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны

· slide - прокручивание текста c остановкой.

scrollamount - скорость бегущей строки от 1 до 10.
loop задает количество прокруток бегущей строки.

direction - направление движения текста. значения:

· up - вверх,

· down - вниз,

· left - влево,

· right - вправо.

bgcolor - цвет фона бегущей строки,
height - высота строки,
width - ширина строки.

Пример:

<html>
<head>
<title>Бегущая строка</title>
</head>
<body>
<div align="center"><h2>Бегающие строки</h2></div>
<marquee>Бегущая строка по умолчанию</marquee>
<marquee direction="right">Бегущая строка слева направо</marquee>
<marquee behavior="alternate">Бегущая строка бегает от края к краю</marquee>
<marquee scrollamount="10">Бегущая строка со скоростью 10</marquee>
<marquee scrollamount="1">Бегущая строка со скоростью 1</marquee>
<marquee direction="right" loop="2">Эта строка будет прокручиваться только два раза</marquee>
<marquee behavior="slide">Бегущая строка с остановкой</marquee>
<marquee bgcolor="#b40000">Бегущая строка с фоном</marquee>
<marquee width=400>Бегущая строка с ограничением ширены прокрутки</marquee>
<marquee direction="up">Бегущая строка снизу вверх</marquee>
<marquee hspace="300">Бегущая строка с отступами от границ</marquee>
</body>
</html>

Ну думаю, сами разберётесь, что к чему. Попробуйте использовать различные сочетания атрибутов для достижения нужного Вам эффекта. Добавлю лишь то, что с текстом бегущей строки можно делать то же самое, что и с обыкновенным текстом: менять размер, цвет, стиль, шрифт, сделать фразу из строки ссылкой.. прописывая нужные теги внутри тега <marquee>

Комментарии

Комментарии используются для того, чтобы облегчить свой собственный труд, а так же упростить понимание другим человеком кода Вашей странички. Пишутся они непосредственно в коде html документа, однако браузер не выводит эти "пометки" на экран. Для того чтобы заставить браузер игнорировать какой либо текст его необходимо заключить вот в такой набор символов:

По принципу:

Использовать комментарии очень полезно, разрабатывая большие и сложные по своей структуре документы, для того, чтобы потом самому с легкостью в нём ориентироваться..

Пример:

<html>
<head>
<title>Мой первый сайт</title>
</head>
<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">
<center>

<table width="640" height="480" cellpadding="5" cellspacing="2" border="1">
<tr>
<td colspan="3" height="30" bgcolor="#b2ff80">
<center><img src="graphics/privet.jpg" width="200" height="40" alt="Привет мир!!!"></center>
</td>
</tr>

<tr>
<td height="30" width="33%" bgcolor="#ffa0cf">
<center><b><a href=" index.html">Обо мне!!!</a></b></center>
</td>
<td width="33%" bgcolor="#c0e4ff">
<center><b><a href=" myfoto.html">Здесь мои фотки!!</a></b></center>
</td>
<td bgcolor="#c0e4ff">
<center><b><a href="mailto:karlson@kruha.ru">Напишите мне письмо..</a></b></center>
</td>
</tr>


<tr>
<td colspan="3" valign="top" bgcolor="#b2ff80">
<img src="graphics/foto.jpg" align="left" hspace="10" width="100" height="90" alt="Это моя фотка!!!">
<p align="justify">   Разрешите представиться Карлсон! … … …</p>
</td>
</tr>

</table>

</center>
</body>
</html>

Как видите старый пример ничем не изменился зато ориентироваться в его коде стало значительно легче.

Полезные советы:

· Писать сайты на своём компьютере конечно дело хорошее, но пора задумываться о том, как Ваше творчество разместить в сети Интернет. О том как это сделать читайте в статье Публикация сайта: (http://www.webremeslo.ru/publication/publication2.html). А совет собственно заключается в том, что на данном этапе обучения Вам пора обзавестись своим собственным местом (хостом) "тренировочным плацдармом" на каком либо сервере.. а также собственным именем сайта (доменом)... для начала, это место и имя могут быть бесплатными, даже я бы сказал должны быть бесплатными.. Там, в этом месте на сервере, Вы будите тренироваться выкладывать свои страницы., смотреть как и с какой скоростью они загружаются, так же Вы сможете показать своё творение миру (а можете и не показывать) и друзьям. Почему этим стоит заняться именно на данной стадии обучения? Да потому что с помощью того, что мы изучили, Вы уже можете делать вполне пристойные сайты!! нет конечно до конца обучения ещё рано, да и предела совершенствования мастерства как известно нет.., но это послужит хорошей тренировкой и так сказать поднимет Ваш морально боевой дух!!)) Знаете как это приятно, увидеть свою работу в действии!? Но, ещё раз повторюсь, о том как это дело провернуть читайте в статье "Публикация сайта".

<6 7 8910 11 12 >

Дата добавления: 2016-02-02; просмотров: 869;