Поделиться
Л2-001716.docx
Бегущая строка
2. Простой сайт и использованием таблиц
Начало урока мы с вами посвятим специфическом тэгу, речь пойдет о тэге marquee - бегущей строке (текста).
Тэг marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют:
<marquee height="10" width="270" bgcolor="#99CCFF">
Текст
</marquee>
Как видите, все просто. Текст, который мы помещаем в тэге <marquee></marquee>, становится бегущей строкой.
Некоторые атрибуты тэга <marquee></marquee> вам уже знакомы: bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.
Другие атрибуты:
· direction - задает направление движения бегущей строки - direction=left (right, up, down) - движение влево (вправо, вверх, вниз).
· behavior - поведение строки - behavior=scroll (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Alternate - строка будет двигаться от края к краю.
· scrollamount - скорость движения строки, scrollamount=1. Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.
Ну вот и изучили мы основы HTML. Теперь мы можем написать свой собственный сайт. За основу возьмем следующую таблицу:
|
1 ячейка |
|
|
2 ячейка |
3 ячейка |
|
4 ячейка |
|
Лучше, если бы вы сами написали код такой таблицы. Но если не сможете, смотрите код на следующей странице.
<table cellspacing=5 cellpadding=5>
<tr align=center>
<td colspan=2 height=35 bgcolor=orange>1 ячейка</td>
</tr>
<tr align=center>
<td height=35 width=70 bgcolor=blue>2 ячейка</td>
<td width=70 bgcolor=orange>3 ячейка</td>
</tr>
<tr align=center>
<td colspan=2 height=35 bgcolor=blue>4 ячейка</td>
</tr>
</table>
Давайте, попытаемся на основе его сделать полноценную страницу. Первое, что мы сделаем, введем обязательные тэги и атрибуты для них:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text=white>
<table cellspacing=0 cellpadding=5>
<tr align=center>
<td colspan=2 height=35 bgcolor=orange>1 ячейка</td>
</tr>
<tr align=center>
<td height=35 width=70 bgcolor=blue>2 ячейка</td>
<td width=70 bgcolor=orange>3 ячейка</td>
</tr>
<tr align=center>
<td colspan=2 height=35 bgcolor=blue>4 ячейка</td>
</tr>
</table>
</body>
</html>
Если вы посмотрите, что у нас получилось, то увидите, что таблица маленькая по размеру, а значит, что мы должны изменить значения атрибутов, отвечающих за высоту и ширину таблицы. Убираем все старые значения ширин и высот, и прописываем новые:
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text=white>
<table cellspacing=0 cellpadding=5 width=100%>
<tr align=center>
<td colspan=2 height=150 bgcolor=orange>1 ячейка</td>
</tr>
<tr align=center>
<td width=50% bgcolor=blue>2 ячейка</td>
<td bgcolor=orange>3 ячейка</td>
</tr>
<tr align=center>
<td colspan=2 height=50 bgcolor=blue>4 ячейка</td>
</tr>
</table>
</body>
</html>
Мы задали для всей таблицы ширину 100 процентов от ширины окна браузера. Мы не задали высоту (height), т.к. нельзя задать стопроцентную высоту (во весь экран) для таблиц, это не предусмотрено спецификацией, так что, наша таблица сама растянется, когда мы введем в нее какое-либо содержание (текст, картинки).
Что мы сделаем дальше? Подберем фон для таблицы и сделаем границы. Затем введем текст, который мы использовали в прошлых занятий.
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text=white link=#DDA0DD>
<table cellspacing=0 cellpadding=5 border=1 width=100%>
<tr align=center>
<td colspan=2 height=150 bgcolor=#CD5C5C><h1>Привет, это моя первая страница</h1>
<font face="Comic Sans MS" size=+4 color=#F4A460><b>Добро пожаловать!</b></font></td>
</tr>
<tr align=center>
<td width=50% bgcolor=#2F4F4F><p align=justify>
<font size=+2 color=#B0C4DE>Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность зайти на мою страницу в Internet. Здесь Вы сможете узнать <a href="about_me.html">о моих увлечениях, моей биографии</a>, моей семье, друзьях и работе. Также в скором будущем Вы увидите здесь мои фотографии. <font face=Arial size=+2 color=gray><i> Приятного просмотра.</i> </font> </font>
</p></td>
<td bgcolor=darkorange>3 ячейка</td>
</tr>
<tr align=center>
<td colspan=2 height=50 bgcolor=#708090>4 ячейка</td>
</tr>
</table>
</body>
</html>
Посмотрите страницу в браузере. Если вы обратите внимание, то заметите, что текст слишком близко расположен к краям нашей ячейки и это смотрится не красиво. Что мы можем сделать? Конечно, введем атрибут cellpadding для таблицы. Сделайте это сами на свое усмотрение.
Осталось только вставить какую-нибудь картинку в 3 ячейку и прописать ссылку на адрес электронной почты в 4 ячейке. Ну что сделаем и это. Выберите любую картинку и вставьте ее.
Итак, в последние две
ячейки мы ввели текст, который сделали ссылками на наш почтовый ящик, чтобы наш
посетитель мог написать нам письмо.
<html>
<head>
<title>Моя первая страничка</title>
</head>
<body text=white link=#DDA0DD>
<table cellspacing=0 cellpadding=20 border=1 width=100%>
<tr align=center>
<td colspan=2 height=150 bgcolor=#CD5C5C><h1>Привет, это моя первая страница</h1>
<font face="Comic Sans MS" size=+4 color=#F4A460><b>Добро пожаловать!</b></font></td>
</tr>
<tr align=center>
<td width=50% bgcolor=#2F4F4F><p align=justify>
<font size=+2 color=#B0C4DE>Спасибо Вам, уважаемый посетитель, за то, что Вы нашли время и возможность зайти на мою страницу в Internet. Здесь Вы сможете узнать <a href="about_me.html">о моих увлечениях, моей биографии</a>, моей семье, друзьях и работе. Также в скором будущем Вы увидите здесь мои фотографии. <font face=Arial size=+2 color=gray><i> Приятного просмотра.</i> </font> </font>
</p></td>
<td bgcolor=#FFCC33><img src="me.gif"><br><font color=black>А это я!</font></td>
</tr>
<tr align=center>
<td colspan=2 height=50 bgcolor=#708090><a href= "mailto:myaddress@mail.ru"><font color=yellow>А вот и мой адрес электронной почты, чтобы вы могли мне что-нибудь написать</font></a></td>
</tr>
</table>
</body>
</html>
Итак, подводим итоги: как видите, все достаточно просто. Мы получили с вами аккуратненький и даже оригинальный для начинающего сайтостроителя сайт, которым даже можно немножко гордиться. Такой сайт уже не стыдно показать знакомым и друзьям. Такой сайт уже не стыдно выложить в интернет. Конечно, над ним еще можно поработать, усложнить его, ввести несколько оригинальных изображений, чтобы придать индивидуальности, но это уже работа для вас и вашей фантазии. На этом наше изучение языка разметки HTML подошло к концу. УСПЕХОВ ВАМ!
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
