Создать свой сайт очень легко, но что для этого надо??? Да ничего особенного, достаточно только уметь пользоваться клавиатурой и быть на уроне среднего пользователя. То есть уметь пользоваться ещё и инетом, нажимать кнопочки своего браузера. По умолчанию это IE – Интернет Эксплоэр, встроенный в операционную систему Windows, которой пользуются большинство. Всё что я написал ниже, вы можете просто скопировать в созданную у себя на винте директорию, начиная с <html> и посмотреть как это всё смотрится в браузере. Или на моём сайте пройдя по ссылке - announcement.html, на главной странице. Потом, поэкспериментировав с текстами и картинками, всё это, или даже лучше. Можете разместить на халявном хостинге или оставить на своём компе и прописать адрес доступа по IP, в соей локальной сети. Или вообще, купить свой домен. Конечно же, для начала надо иметь минимум знаний по общим терминам интернета, но всё что касается своего Web-строительства, я описал ниже!!!
Вот так я создал свой собственный сайт. Для начала, надо сказать, что у меня три высших образования но, ни одного специального, хотя два первых и были техническими. И значит, я умею «читать и писать», ну а тебе дорогой читатель, сейчас, достаточно уметь пользоваться клавиатурой и интернетом. Чтобы и себе создать что-то подобное. Для примера скопировав мой html код. Ну а я, чтобы это написать, прочитал много специальной литературы, но так как в ней. Проще говоря, много лишнего, для среднего пользователя, которому, по существу и необязательно знать всё, от и до! То я выбрал только самую суть. И вот, что из этого получилось. Сначала оно существовало на личном компе, но с появлением, «халявного» хостинга. Я перенёс его туда и теперь, всё о чём здесь написано. Можно посмотреть на http://ugin63.narod.ru/, где есть даже страничка созданная именно так. Начиная с <html>, аббревиатура из английских букв, означающих – Hyper Text Markup Language. Что по-русски, звучит как: - язык сверх разметки текста, или ещё проще. Его форматирование и вёрстка и соответственно никакого программирования здесь нет.
Итак, для начала я создал на отдельном диске своего компа, отдельную директорию (папку) для будущей страницы (порядок, прежде всего:). D:\первые шаги\ Потом открыл блокнот (notepad) и написал, а потом скопировал оттуда следующий текст:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать!
</body>
</html>
Потом сохранил этот документ, присвоив ему имя *.html D:\первые шаги\index.html . Затем открыл, Internet Explore. Файл - Открыть - кнопка Обзор - Наш документ (index.html). Первое, что я понял, что (html) это то, что нужно зля создания сайта. Второе, что Html не является языком программирования, он предназначен для разметки текстовых документов (т.е. для форматирования текста). То, как будет выглядеть текст, определяют метки (tags или тэги). Пример тэга: <br> (перенос текста на другую строку, что-то вроде Enter:). Если попробовать между тэгами Body его понатыкать. То получиться чёрте что. Т.е. все, что находится между < такими скобками > - это тэг. Текст, не находящийся между такими скобками < > - весь виден при просмотре в браузере. Как мы видим на моём примере тэгов много и они разные. <html> Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий: выглядит он так </html> и только так, всегда по умолчанию. Некоторые тэги, вроде <br>, не требуют закрывающего тэга. Но вернемся к моему сайту.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать!
</body>
</html>
<head> </head> - голова документа
<body> </body> - тело документа. Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации. Например <title> - заголовок. Зачем он? Откройте IE (Internet Explore) с любым документом и устремите свой взгляд выше всех командных строк (на заголовок окна)... Увидели?:) Все тэги, расположенные между <body> </body> - непосредственное содержание документа. Для начала мне понадобилась палитра (все цвета интернета - не забудьте прочитать там инструкцию. Сохранив палитру у себя на диске. Зачем все это? А затем, что все цвета прописываются именно таким способом. Например, белый цвет - ffffff. Но вернемся к моей страничке. Я окрасил слова Добро Пожаловать в красный. <font color="#CC0000">Добро пожаловать! </font> Потом попробовал вместо СС0000 поподставлять другие значения цветов.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать! </font>
</body>
</html>
Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже. Как же еще задавать цвета в документе? - вспомним об открывающем теге <body>: <body text="#336699"> Это значит, что весь текст страницы будет, синим, кроме текста, для которого мы специально прописали <font></font> (если цвет в <body> не задавать, то по умолчанию он будет черным).
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font>
</body>
</html> Со цветами для текста, я разобрался и стал думать о фоне. Цвет фона устанавливается в уже мне знакомом тэге <body>: <body bgcolor="#ffffff"> Для наглядности я прописал, белый цвет, если цвет в <body> вообще не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше уж прописывать цвет фона в body.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font>
</body>
</html> Обратите внимание: мы одновременно можем прописать в теге <body> и цвет текста в документе, и цвет фона (это на всякий случай, если вы еще не поняли:). <body text="#336699 bgcolor="#ffffff"> Да, просто я пожалел глаза своих друзей, знакомых и случайного посетителя. Не следует также употреблять слишком много различных цветов на своей страничке, это, как и яркий фон, отвлекает от содержания, мешает прочтению и выставляет тебя самого в не лучшем свете. Пример: Девочка в ярко-Розовых джинсах и противном салатовом топике с надписью Kiss me, безусловно, привлечет внимание, но надолго ли? Я не такая девочка и стал рассматривать параграфы. Которые вводятся тэгом: <p></p> С помощью параграфов я стал центрировать текст: <p align="center">текст</p> С помощью параграфов мы можем выровнять текст по левому краю: <p align="left">текст</p> Или по правому краю документа: <p align="right">текст</p> Теперь я ввёл параграфы в свой документ и посмотрел наглядно, что получилось. В своём сайте я подставил параграф с параметром центрирования текста (center), и попробовал подставить в параграф другие параметры со значениями Left или Right).
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff">
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> </p>
</body>
</html>
Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что к параграфу уже не нужен тэг <br> для переноса строки, т.к. перенос задается по умолчанию. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный
<p align="center"> <center>текст</center>
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff">
<center>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> </center>
</body>
</html>
Все было бы хорошо, если бы у тэга <p> не существовало бы еще и четвертого, но опасного значения (атрибута): <p align="justify">текст</p> Это мой любимый атрибут параграфа, он выравнивает текст по обоим краям документа, и все становится милым и аккуратным. Почему же это опасный атрибут? Да не работает он в старых версиях браузеров, поэтому у тех, кто использует старые браузеры, он может не действовать (не отображаться), и вся красота - лепота да аккуратность сойдет на нет (т.е. текст выровняется в таком случае по левому краю документа). Тем не менее, я атрибутом justify злоупотребляю.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff">
<center>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> </center>
<p align="justify">
Я давно начал знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг?
</p>
</body>
</html>
Я тут набросала текст вступления. Потом вставил пример в свой документ, но посмотрите на него. Мне кажется, что фраза "Здравствуйте, это моя первая страница" так и просится, чтобы ее выделили. Для этого можно использовать разные заголовки:
<H1> текст </H1>
<H2> текст </H2>
<H3> текст </H3>
<H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6>
Мне пришлось немного пожертвовать красотой, чтобы сразу наглядно все продемонстрировать. Зато всем видно и то, что существуют шесть уровней заголовков, и то, что соответственно буковки у каждого разного размера, и то, что тут у нас такая же ситуация как с параграфами (принудительный перенос строки). Да, заметьте, заголовок выделяется жирным текстом, это тоже одно из его свойств, очень удобно:) В пример я ввел заголовок третьего уровня <H3></H3> (мой любимый размер. Смотрите, что получилось.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Я давно начал знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится еще один виртуальный друг?
</p>
</body>
</html>
Заголовки предназначены для выделения небольшой части текста (строки, фразы), НО, если я захотел выделить большой фрагмент текста, или только одно слово, при этом без переноса строки, то как быть? С заголовками такое не пройдет, поэтому вспомнил о тэге <font></font>:
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>
Опять пришлось пожертвовать красотой. Итак, параметр size задает размер шрифта, но, в отличие от заголовков, текст не выделяется жирным шрифтом (о курсиве, жирном шрифте и т.п.) и нет принудительного переноса.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Я давно начал знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <font size="+1"> еще один виртуальный друг? </font></p> </body></html> (прим.) В своём сайте я выделил слова "еще один виртуальный друг?", пусть все думают, что я горю желанием завести еще одного виртуального друга. Прежде, чем рассказывать дальше, хочу предупредить, что есть такая опасная болезнь у дизайнеров, как гигантомания. Её симптомы: непомерно большие размеры шрифта, гигантские кнопища на пол экрана, вместо маленьких и милых кнопочек, и толстый (жирный) во всех случаях текст. Поэтому напоминаю: стандартный size (по умолчанию) ="+0".Теперь настала пора поговорить о том, как делал курсив, подчеркнутый текст, полужирный текст и фиксированный текст:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<u> Подчеркнутый текст </u>
Тут все просто, можете их сами понатыкать, где хочется для пробы, а в примере я снова помучаю виртуального друга:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Я давно начал знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b> еще один виртуальный друг? </b>
</p>
</body>
</html>
Теперь пара строк о фиксированном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой ширины, оттого и зовется фиксированным. А тэг для него следующий: <tt> fixed - фиксированный шрифт </tt> В своём сайте я его вводить не буду (сами, если хотите), т.к. он и так фиксированным шрифтом выделен.<pre> текст (куча пробелов) текст </pre>Текст между <pre> и </pre> тоже фиксированный, но тут есть одна большая особенность, он не только фиксированный, но еще и выводится с точностью до пробела так, как вы его набили в блокноте, сей странный тэг может быть полезен, допустим, для форматирования стихотворений, не злоупотребляйте им, т.к. он коварный и противный. Запомните, к одному фрагменту текста может применяться сразу несколько тэгов: <tt><b><i> текст </i></b></tt> В моём сайте текст фиксированный, полужирный и курсивный (вот так-то:), так что не бойтесь использовать различные комбинации тэгов, экспериментируйте, но с умом. Хочу прежде, чем мы перейдем к картинкам, также упомянуть об одном интересном атрибуте тэга <font>: <font face="ARIAL"> текст (шрифт Arial)</font> С помощью атрибута face в своём сайте я задала шрифт Arial. Таким образом, и вы можете задать и какой-нибудь экзотический шрифт для своей страницы, но это немного рискованно, т.к. у вашего посетителя может не оказаться такого шрифта, поэтому все, же лучше задавайте стандартные (Arial, без надсечек), Times Roman (пропорциональный), Courier (равноширинный) и другие). Как рисовать, как пользоваться графическими редакторами я вас учить не буду, я пользовался Adobe Photoshop и Image Styler 1.0, т.к. именно этими двумя я в основном и пользуюсь. Запомните, страница (сайт) не должна представлять из себя супер графического изыска, который весит сотни килобайт, т.к. это жестоко, ни одна живая душа не выдержит подобной пытки (грузить долго). Вот, например, эта страница, содержание которой ты тщательно изучаешь) весит в картинках не более 6 килобайт (это общий вес всех картинок, а не вес каждой. Также я посоветую не изощряться с анимированными картинками они отвлекают внимание от содержания странички, а анимированная картинка не к месту смотрится как золотое колье на немытой шее. Сайт, всё-таки, ещё только начального уровня. Теперь я с чистой совестью поведаю, как вставлял картинки в документ: <img src="my.jpg"> Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Мой пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так: <img src="my/my.jpg"> Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой: <img src="../my.jpg"> Если картинка лежит на другом сайте, то путь прописывается полностью: <img src="http://www.homepage.ru/my/my.jpg"> Для вашего удобства я положил картинку в ту же директорию, что и документ, на сайте я использую именно ее (запомните тэг img не требует закрывающего тэга).
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<img src="primtocodephoto.gif">
Я давно начал знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? </b></p> </body></html> Посмотрите, что у нас получилось. Не очень симпатично, не так ли? Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Идем дальше, чтобы узнать, как я это сделал. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Например, у тэга <p> - <p align="justify">. Параметр align есть и у картинок: <img src="pr1.png" align="left"> Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right: <img src="pr1.png" align="right"> Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):
(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">
Кроме параметра align существует еще несколько параметров:
(1) - <img src="pr1.png" Vspace="10">
(2) - <img src="pr1.png" Hspace="30">
(3) - <img src="pr1.png" alt="моя фотография">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">
Теперь последуют объяснения по пунктам. (1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек. В моём примере расстояние равно 10 пикселям. (2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам). (3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В моём случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой, что экономит трафик. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась. (4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире). (5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой... (6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Я ввёл следующие параметры для моей картинки: <img src="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Моя картинка прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография".
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">
Я давно начал знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет, познакомится со мной, и у меня появится <b> еще один виртуальный друг? </b><br><br> На фотографии изображен я. в целом заметно, что я вполне ещё ничего<br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке? Кто знает, может быть мы и в реальной жизни станем друзьями.
</p>
</body>
</html>
Как расположить саму картинку в центре экрана (справа, слева). Здесь все очень просто, картинки, как и текст можно расположить при помощи параграфов (<p></p>), это наглядно представлено в моём сайте. Да, чуть не забыл сказать о том, что картинку можно сделать фоном документа. Это безобразие прописывается в открывающем тэге боди:
<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg">
Параметр Background и указывает на то, где лежит фоновая картинка, в нашем примере он указывает на то, что моя фоновая картинка лежит в той же директории (папке), что и документ. Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем. Теперь пора поговорить о ссылках. Моя страничка состоит из нескольких документов. Один из них главный (index.html или main.html) - он открывается первым и должен обязательно лежать на моём сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных. Ссылкой на эти другие документы (части страники) может быть всё, текст, фраза, слово, а может быть и картинка. Для начала я создал новый документ (в мойм примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумал. Пусть prf.html - документ с моими фотографиями. Тогда я без зазрения совести фразу "посмотреть мои фотографии" сделал ссылкой на prf.html:
<a href="prf.html">посмотреть мои фотографии</a>
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же как в случае с картинками:
(1) - <a href="prf.html">мои фотографии</a>
(2) - <ahref="photos/prf.html">мои фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>
В случае (1) документ лежит в той же директории (папке), что и документ, в котором я ссылаюсь на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) я ссылаюсь на сайт http://www.homepage.ru, где лежит нужный мне документ. Как видите все просто. Но есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать, а иначе по умолчанию он будет просто безобразным, поэтому вспомним об открывающем тэге боди:
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
А к чему: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В моём сайте цвета одинаковые, но они могут быть разными, также не карается законом, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой). Так я прописал цвета для ссылки и саму ссылку в документе:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">
Я давно начал знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли
<a href="prf.html">посмотреть мои фотографии</a>
почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> <b</b><br><br> На фотографии изображен я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html>
Ничего хитрого. Теперь следует запомнить то, что ссылка на мойпочтовый ящик прописывается так:
<a href="mailto:pochta@mail.ru"> pochta@mail.ru - пишите письма </a>
Запомните это раз и навсегда и не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик – другое, да, но цвета всех ссылок в документе одинаковые. Как я уже упоминал, ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка:
<a href="prf.html"> <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> </a> Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку pr1.png:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#ffffff" link="#339999" alink="#339999" vlink="#339999">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<a href="prf.html"><img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"></a> Я давно начал знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли:
<a href="prf.html">посмотреть мои фотографии</a>,
почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> <b> </b><br><br> На фотографии изображен я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимся, поболтаем, чайку попьем в кафешке? Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html>
Теперь посмотрите, что у меня получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0" <img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" border="0"> Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) Как это делал это я? Да все по тому же принципу:
<a href="http://www.melody.ru/music.mp3"> скачать песню </a>
Если адрес указан таким способом:
<a href="http://www.melody.ru/"> музыкальный сайт </a>
То это означает, что в указанном каталоге есть файл вроде index.html, который загрузится по умолчанию. Но поговорим особо о картинках, многие из вас, наверное, сталкивались с таким явлением: когда жмешь на маленькую картинку, то загружается большая в том же или в новом окне. Как это делается? Тут никаких хитростей: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg):<a href="big.jpg"> <img src="small.jpg"> </a> В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга <a></a> есть параметр target:
<a href="big.jpg" target="_blank"> <img src="small.jpg"> </a> Итак, target="_blank" - указывает на то, что документ (картинка в моём случае), на который ведет ссылка, откроется в новом окне браузера (Explorer`а). В мой сайт я это вводить не буду. Т.к. не хочу заводить большие картинки на сайте. Вот я и добрался до не очень часто используемых тэгов. Как же так? - возмутится бедный мой спутник - А таблицы? А фреймы? - Ну, это будет далее. А сейчас о списках. Что такое списки? Это лучше демонстрировать на наглядном примере: Текст один. Текст другой. Текст сякой. Текст эдакий. Скорее всего, вы с этим сталкивались. Все это удобно в определенных ситуациях. Теперь разберемся, какими же тэгами обозначаются списки:
<li>Текст один</li>
<li>Текст другой</li>
<li>Текст сякой</li>
<li>Текст эдакий</li>
Да-да, все опять оказалось очень простым:) Именно тэгом <li></li> они и задаются. Возникает вопрос: можно ли помимо закрашенного кружочка прописать еще чего-нибудь подобное? По умолчанию - (1)Полый кружок - (2)Не будь таким квадратным - (3)У тэга <li> есть параметр type:
В случае (1) - <li type="disk">,
в случае (2) - <li type="circle">,
в случае (3) - <li type="square">.
Это один из вариантов. Если вы пользовались текстовыми редакторами (допустим Уордом), то бы знаете, что такое Табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается в право). Похожая фунция есть и в хтмл: <ul>Ваш текст</ul>Чтобы отступ (табуляция) был больше надо вкладывать тэг <ul> в самого себя: <ul><ul>Два отступа</ul></ul>.<ul><ul><ul>Три отступа</ul></ul></ul> Зачем я завела разговор об этом тэге, вместо того, чтобы рассказать о том, что еще можно сделать со списками? Хм:) ну, у меня все со злым умыслом:Сдвиг один.Сдвиг другой.Сдвиг сякой Хочу обратить ваше внимание, что это прописано без параметра type, но при помощи тэга <ul>:
<ul><li>Сдвиг один</li></ul>
<ul><ul><li>Сдвиг другой</li></ul></ul>
<ul><ul><ul><li>Сдвиг сякой</li></ul></ul></ul>
- Списки (от Manual.ru)
- Списки (от Html - Начальный курс)
В последнее время я все реже и реже встречаю такой элемент, как линии. Теперь их увидишь разве что в гостевых книгах, или на форумах. Линия задается тэгом <Hr> и не требует закрывающего тэга: - Вот такая она, в форме канавочки. У линии есть много разных параметров:
(1) <Hr align="right"> (center или left)
(2) <Hr width="30%"> (ширина линии в процентах/пикселях)
(3) <Hr size="6"> (толщина линии)
(4) <Hr NoShade> (отмена объемности)
(5) <Hr color="cc0000"> (цвет линии, только в IE)
Выглядит все это так - Первый (1): Второй (2): Третий (3): Четвертый (4): Пятый (5): Вот и вся премудрость с линиями. Естественно, эти параметры могут употребляться одновременно. Не злоупотребляйте параметром Color, т.к. он действует только в Интернет эксплорер (если вам так хочется все же цветную линию, то сделайте, допустим красную картинку 1x1 пиксель и вставьте ее в свой документ. Тут вам приходятся параметры картинок height и width. Пусть height=1, а width=500 - вот вам и линия:). Не считайте линию изжившей себя, я думаю как элемент дизайна она может быть вполне полезной.
Теперь о спецсимволах. Они не так часто употребляются, но тем не менее они необходимы:
(1) - < - <
(2) - > - >
(3) - " - "
(4) - - пробел
(5) - & - & Т.к. все заключенное между < - > браузер воспринимает как тэг, то, чтобы ввести символ скобки в текст для него придумали спецсимвол (1 или 2). Теперь вы знаете, на какой мучение я был обречён, когда начала писать этот рассказ, ох уж эти примеры:) Кавычка (3). В принципе не обязательно ее так прописывать, браузеры понимают этот значок прекрасно, но кто знает: береженного - бережет. Символ пробела (4). Зачем он нужен? Ну, допустим вам понадобилось пять пробелов подряд, а тэг <pre> с его принудительным переносом строки вам вовсе не нужен, вот тогда поймете, ведь спецсимвол пробела можно написать хоть тысячу раз:). Но тут существует одно но: слово1 слово2 слово3 = слово1 слово2 слово3 Ни одно из этих слов не перенесется на другую строку без двух других, и хотя посетитель увидит обычную фразу, где между словами стоит пробел, но по идее это же одно длинное слово, а не три, т.к. - неделимый символ пробела:) - учтите и используйте с умом. И последний символ &, т.к. он несчастный используется для написания спецсимволов, то для него добрые люди тоже придумали спецсимвол & . Спецсимволы не надо включать ни в какие тэги, надеюсь, вы это поняли, считайте их просто текстом. Полную коллекцию спецсимволов вы можете изучить здесь. А можете и не изучать. Долго ли, коротко ли, но я добрался до таблиц. При создании сайтов таблицы используются очень часто. Например, Постройка.ру (родной сайт учебника) не обошлась бы в своем оформлении без таблиц никак. Или вот еще пример, сайта, на котором хостится мой сайт. Оформление, которого тоже не обошлось бы без таблиц (заметьте, ни одной картинки, когда пройдете главы о таблицах без труда сможете сверстать подобное). Таблица задается тэгом:<table></table>Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их. <tr></tr> - строчка таблицы<td></td> - столбец (ячейка) таблицы. И так, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделил ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук: Сначала задаем строки. В моём сайте их две. Теперь в каждой строке зададим по три столбца (ячейки):
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Мой вам совет, для начала рисуйте таблицу на листе бумаге, чтобы все наглядно видеть. Итак, теперь нам надо заполнить получившийся каркас:
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>
Надеюсь мы поняли, что первая цифра в загадочных надписях - это номер ряда, а вторая номер столбца (1х2 - первый ряд, второй столбец и т.д). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так:
1x1 1x2 1x3
2x1 2x2 2x3
Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В нашем случае мы задаем фон для каждого столбца.
<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>
Вот, что у меня получилось. Итак, как помнится я решил создать вот такую таблицу: А получилось у меня еще только вот такая таблица: В чем же дело? А в том, что я не задали высоту и ширину ячейкам таблицы нашей. Вспомнив о параметрах height и width - и вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах. В моём случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2 </td>
<td width="50" bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699"> 2x3 </td>
</tr>
</table>
Сразу предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. Вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому наибольшему ряду, помните ряд - это не ячейка, поэтому я задал в своём сайте ширину для каждой ячейки (столбца). Вы тоже можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально, в процентах от общей ширины (высоты) таблицы или пикселях. Теперь я почти получил то, что хотел. Теперь мне осталось лишь выровнять содержимое внутри таблицы:
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr></table>
И... готово! В каждой ячейке (столбце) могут находится и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы). И тэги, которые мы применяем для форматирования текста - все те же. Поскольку содержимое каждой ячейки как бы обстановка отдельной комнаты, то и тэги для центрирования текста пришлось прописать в каждой ячейке. Вернемся к моему сайту, и поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том, как можно сделать так, чтобы содержимое ячейки не только располагалось, ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим аттрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находиться в середине ячейки (наверху или внизу): Вот вам и наглядный пример, а теперь как это пишется:
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>1x3</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699" valign="top"> <center>2x3</center> </td>
</tr>
</table>
Я прописал valign не для всех ячеек, только для тех, где я захотел чтобы текст располагался сверху или снизу, чтобы зря не тратить время и усилия. Существование параметра valign значительно облегчает нашу с вами жизнь, страшно даже подумать, как пришлось бы мучиться, если бы его не было. Теперь поговорим о параметрах colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда). Теперь чтобы было все понятно обратимся к примерам. В этом примере мы использовали параметр colspan=2, прописав его для ячейки 1х1. Код будет выглядеть следующим образом:
<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699"> <center>2x3</center> </td>
</tr>
</table>
Прошу вас обратить внимание, на то, что параметр width для ячейки 1х1 в моём примере не указан, если вас так тянет задавать этот параметр, то моём примере для ячейки 1х1 его надо было бы прописать равным 100 пикселям, т.к. все-таки ячейка 1х1 длиннее других в два раза. И второе на что прошу вас обратить внимание, в моём примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, т.к. ячейка 1х1 равна сама по себе двум ячейкам по длине (что мы и указали параметром colspan). Если бы я прописал ячейку 1х3, тогда у нас получилась бы такая ерунда: Теперь, когда я разобрался с параметром colspan, разберемся с параметром rowspan. Принцип действия тут тот же: Попробуйте сами написать код для такой таблицы (подсказываю, тут у нас должна исчезнуть ячейка 2х3). Если ничего не получится, то вы можете посмотреть ответы здесь, а кто все понял, тот молодец. Итак, мы остановились на такой таблице: Давайте, подумаем, что же еще можно сделать с ней... хм... ну, например можно избавиться от пространства между ячейками таблицы: Такая красота достигается с помощью атрибута cellspacing, равного нулю: <table cellspacing=0>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
Можно наоборот увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое: Как видите, и то, и другое мы можем использовать как дизайнерский прием, т.к. даже уже на моих примерах это смотрится не стандартно. Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добаляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее я для начала прижму текст ячеек первого ряда к верху, в нижнего - к низу, используя атрибут valign: Теперь задам атрибут cellpadding=5: Вот теперь всем должно стать понятно, что такое пространство между содержимым ячейки и ее границами, и что делает тэг cellpadding. Сравним получившееся с предыдущей таблицей: мы прекрасненько видим, что у нас добавилось пространство по бокам, снизу и сверху, причем это пространство никакими картинками и текстом заполнено быть не может, как и пространство между ячейками, когда мы задаем cellspacing. Для тех, кто все еще не может составить код сам - вот он (для последнего варианта таблицы): <table cellpadding=5>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699" rowspan="2" valign="top"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>2x2</center> </td>
</tr>
</table>
Когда я учился делать таблицы, то я упоминал о вложенных таблицах. Что же это такое и в чем их особенность? Это обычные таблицы, которые располагаются в ячейках другой таблицы, и больше ничего особенного в них нет... почти. Допустим у нас уже есть большая таблица, две колонки которой забиты текстом какого-то отчета, а третья между ними для красоты: С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но, тем не менее, само их присутствие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете. Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете: буки 65% населения; бяки 2 0% населения; др. 15% населения. За сим всё. И так, перед нами таблица из одного ряда, с тремя ячейками (столбцами), в третьей ячейке нельзя не заметить вложенную таблицу. Теперь код:
<table>
<tr>
<td width="200" valign="top" background="blue.gif" align="center">
С каждым днем в интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутсвие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.</td>
<td width="10" background="white.gif"> </td>
<td width="200" valign="top" background="blue.gif" align="center">
Вот таблица, которая показывает сколько бук, бяк и других обитает в интернете:
<br><br>
<table cellspacing="3">
<tr>
<td width="50" background="white.gif">буки</td><td background="white.gif">65% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">бяки</td><td background="white.gif">20% населения</td>
</tr>
<tr>
<td width="50" background="white.gif">др.</td><td background="white.gif">15% населения</td>
</tr>
</table>
<br><br>
За сим все</td>
</tr>
</table>
Увы, код получился объемный, но зато в нем нет ничего сложного: вложенная таблица от обычной ничем не отличается. Но все же здесь есть некоторые нюансы, на которые следует обратить внимание: background="картинка.gif" - раньше мы говорили о параметре bgcolor, который задает цвет фона для таблицы (ряда, ячейки), а параметр background задает фоновую картинку для таблицы (ряда, ячейки). А теперь сам нюанс: вроде было бы логичнее прописать просто белый фон для вложенной таблицы (bgcolor="#ffffff"), а не мучаться, создавая просто белую картинку и делая ее фоном (background="white.gif"), ведь так оно быстрее. Да, быстрее, но дело в том, что если IE (Internet Explorer) отображает параметр bgcolor для вложенных таблиц, то NN (Netscape Navigator) этот параметр для вложенных таблиц отказывается отображать, поэтому приходиться идти обходным путем, используя background. Вот так я и убил двух зайцев сразу: узнал, что можно задать background для таблиц, да при этом ознакомились с некоторыми тонкостями ремесла. Теперь будем добивать оставшихся заек:
<td width="10" background="white.gif"> </td>
Давайте обратимся к коду нашей таблицы и вспомним, что эту ячейку я ввел для красоты. Чтобы ячейка не пустовала, в нее введен (символ неразрывного пробела). Это не просто так. Дело в том, что есть любители использовать конструкцию типа: <td></td>. Вот такую конструкцию NN просто напросто игнорирует, т.к. не любит пустых ячеек, поэтому для корректного отображения вашей таблицы везде вставляйте в пустые ячейки или , или мелкую картинку 1х1 пикселей. И последняя зайка: align="center" (right, left). Помните, я говорил о параметре align, так вот, как видите, его можно задать для содержимого ячейки (см. мой сайт), только вот удобного align="justify" тут нет. Вот, пожалуй и всё, теперь поговорим о рамках. Рамка вводится параметром border. Зададим рамку равную 3 пикселям: <table border="3 Выглядеть это будет вот так: таблица с рамкой, моей рамке я могу задать цвет. Пусть он будет черный в моём примере:
<table border="3" bordercolor="#000000">
таблица с рамкой Вот и вся премудрость. В руководствах и справочниках вы можете встретить параметры bordercolorlight и bordercolordark - эти параметры понимает только ИЕ (Internet Explorer), поэтому не рекомендую их употреблять. Вобще-то не так трудно создать таблицу, гораздо труднее, чтобы это выглядело под разными браузерами одинаково. Возьмем те же рамки. Различные таблицы в IE Различные таблицы в NN. Полагаю это достаточно наглядный пример (есть над, чем задуматься). Я советую по возможности проверять, как выглядит ваш документ под разными браузерами и разрешениями, т.к. при этом могут проявиться такие дефекты, о которых вам доселе было неведомо. Конечно, можно махнуть рукой на пользователей NN (и прочих подобных), и радоваться тому, что в ИЕ выглядит все как надо, но это лишь свидетельствует о невысоком уровне кодера (верстальщика). Ну, уж если вы можете махнуть рукой на тех, кто не желает использовать ИЕ, то вот на то, что у разных пользователей разное разрешение экрана вы не должны забывать. Для тех, кто не знал: два самых используемых разрешения - 800x600 и 1024x768. Никогда не стоит забывать о том, что вашу страницу могут смотреть под большим или меньшим разрешением, и что нет абсолютной гарантии, что вы настолько мастерский верстальщик и в этом случае ваши таблицы не поедут куда-нибудь. Например, к бабушке черта (да-да, сколько раз говорилось, сколько написано об этом, а толку практически никакого, интересно, почему многие не желают этого понимать). Собственно это все о таблицах. Вот я добрался и до фреймов (frames). Что же это такое и чем они замечательны? Фреймы позволяют нам открыть в окне браузера - не один, а сразу несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта). Это можно использовать по-разному. Некоторые дизайнеры, при помощи фреймов воплощают свои сумасшедшие задумки. И повергают в восхищение публику, некоторые используют фреймы, потому что их сайту просто не возможно без фреймов обойтись, а некоторые используют фреймы, потому что им так удобнее - это все хорошо, главное, чтобы оно не смотрелось ужасно и некрасиво и было удобно для вашего посетителя. Итак, для того, чтобы наш любимый браузер показал одновременно несколько документов. Надо создать специальный фрейм-документ, в котором мы укажем, сколько документов откроется в одном несчастном окне браузера. Сколько места будет занимать каждый, каким образом они будут располагаться (не все так просто, как хотелось бы:). Т.к. первый документ на сайте, который показывается посетителю это index.html, то мы его и будем мучать, пусть он будет фрейм-документом. Создадим документ index.html:
<html>
<head>
<title>Хождение по фреймам</title>
</head>
</html>
На первый взгляд - вполне стандартное начало, только вот... опа! нет тэга body! И это не ошибка, фрейм-документ не содержит тэга body, такого обязательного в других случаях. Что ж, не будем грустить о тэге body, и найдем ему вполне достойного заместителя:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset></frameset>
</head>
</html>
Здравствуйте Frameset, какое красивое имя, говорят, что вы решили изменить кое-что в жизни нашего сайта и ввести фреймы. Очень приятно, мы всегда рады новым и практичным решениям. Теперь надо найти frameset достойных помощников и задать ему некоторые жизненно необходимые параметры, но это на следующей ступеньке. Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант - logo.html, menu.html, content.html - о котором я упоминал. Расположить мы можем это по-разному, вот для примера четыре варианта из множества возможных. Итак, сначала создадим такой вариант:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</head>
</html>
Теперь мне следует объясниться...Начнем с параметра rows - в моём примере это выглядит так: rows="100,*,150" - а если перевести, то мы получим следующее - "... мой документ делиться на несколько рядов (строк). Высота первого ряда - 100 пикселей, третьего - 150, а второй занимает все оставшееся пространство", - полагаю, здесь должно быть все ясно. Тэг frame сообщает браузеру, какие же документы у меня будут в каждом ряду (строке). В моём случае: первый ряд - logo.html (документ с логотипом), второй ряд - займет документ с непосредственным содержанием (content.html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду, то вам следует поменять его местами с content.html
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html>
Посмотрите, что у меня получилось. Опаньки... Поменять-то мы их местами - поменяли, а вот теперь надо задать новые значения параметру rows, чтобы меню у нас снова занимало только 150 пикселов по высоте, а содержание - все остальное:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html>
Вот теперь другое дело. Все-таки от перемены мест слагаемых кое-что меняется... И я начну всё с небольшого фокуса: заменив параметр rows, на cols -
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html>
Ну-ка, посмотрите мой пример. Ловкость рук и никакого мошенства. Параметр cols делит окно моего браузера не на ряды, а на колонки. Давайте переведем это - cols="100,150,*": "... Мой документ теперь делится на колонки. Первая колонка имеет ширину - 100 пикселов, вторая - 150, а третья занимает все оставшееся место". Кстати, я получил еще один из четырех вариантов. Я могу делить окно браузера либо на ряды, либо на колонки, с помощью параметров тэга <frameset> Cols и Rows. Другого способа деления не существует. Одновременно эти параметры использовать нельзя. При помощи rows мы разбиваем окно на ряды и задаем какую высоту будет иметь каждый ряд, при помощи cols разбиваем окно на колонки и задаем какую ширину будет иметь каждая колонка. Кстати, ширина и высота могут задаваться не, только, в пикселях, но и в процентах от общей ширины (высоты) окна: <frameset cols="10%,15%,75%"> Помните, что в сумме это все должно равняться 100%. А, то бывают, же умники... Раньше я сказал, что мы можем делить окно только на ряды или колонки. Тогда как же расположить наши документы в окне так, как указано на рисунках? А разве я говорил, что ряд в свою очередь нельзя разбить на несколько колонок, а колонку на несколько рядов? Нет, не говорила. Начнем с первого рисунка: Каким образом я буду делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на две колонки, в которых будут располагаться документы menu.html и content.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<???>
</frameset>
</head>
</html>
Принцип построения ясен, только вот как обозначить ряд, разбитый на две колонки? Тут мне поможет господин Frameset.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
</html>
Для тех, кто не уследил за движениями моих рук, поясняю. Первый ряд я оформил как положено, при помощи тэга frame. Во втором ряду на сцену выгодит тэг <frameset></frameset>. С помощью параметра cols тэга <frameset></frameset> я поделил второй ряд на две колонки (первая шириной 150 пикселов, вторая по ширине занимает все оставшееся пространство). А тэги <frame>, которые содержит <frameset></frameset> определяют какие документы будут показаны в колонках (menu.html и content.html). Теперь разберем вариант, изображенный на втором рисунке: Здесь я буду делить окно на колонки. Вторая колонка будет содержать в себе документ content.html (содержание), а первую колонку я разобью на два ряда, и помещу в них документы logo.html и menu.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html>
Вот так. Ничего сложного здесь нет. Допустим, я решил остановиться на последнем варианте, значит буду приводит это в более-менее нормальный вид. Для начала избавился от полосы прокрутки (скроллинга) во фрейме с logo.html.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html>
Scrolling - параметр тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появиться только тогда, когда она нужна. Собственно, параметр scrolling="auto", можно не прописывать, т.к. если параметр scrolling не задан, то полоса прокрутки появиться, если она нужна, а если нет - ее не будет. Теперь я избавлюсь от рамок между фреймами. Для этого я использую параметр border, с которым мы раньше уже встречался. Итак, border="0".
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html>
Так уже лучше. Но все же, что-то еще хочется исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html>
Теперь давайте познакомимся с параметрами тэга <frame> marginheight и marginwidth. Marginheight определяет ширину (в пикселях) верхнего и нижнего полей фрейма, а marginwidth определяет ширину левого и правого полей фрейма. В нашем примере я избавились от полей во фрейме, содержащим logo.html, задав значение marginheight и marginwidth равное нулю. Итак, обратимся к моему сайту. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме. А мне бы, надо сделать так, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать? Для начала, господа, познакомьтесь с новым параметром тэга <frame> - name. Пустим name в дело:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*" border="0">
<frameset rows="100,*">
<frame src="logo.html" scrolling="no" marginwidth="0" marginheight="0">
<frame src="menu.html">
</frameset>
<frame src="content.html" name="window-1">
</frameset>
</head>
</html>
Параметр name задает имя для фрейма (в моём случае для того, который содержит документ content.html). Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью параметра тэга <a> target (target="имя_фрейма"). Как это выглядит? Обратимся к документу menu.html.
<html>
<head>
<title>Документ с Меню</title>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html">Главная</a>
<a href="tumki.html">Тумки</a>
<a href="bumki.html">Бумки</a>
<a href="tururumki.html">Турурумки</a>
<a href="tra-la-la.html">Траляля</a>
</center>
</body>
</head>
</html>
Вот такой он, в моём случае. Теперь для каждой ссылки укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).
<html>
<head>
<title>Документ с Меню</title>
<body background="cherti3.gif" text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff">
<center>
<a href="content.html" target="window-1">Главная</a>
<a href="tumki.html" target="window-1">Тумки</a>
<a href="bumki.html" target="window-1">Бумки</a>
<a href="tururumki.html" target="window-1">Турурумки</a>
<a href="tra-la-la.html" target="window-1">Траляля</a>
</center>
</body>
</head>
</html>
Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом я не приложил никаких особых усилий, а только изменил немного два документа. Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно. Для этого надо параметру target задать значение _top: <a href="project.html" target="_top">Мой проект о рыбках</a> Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы). Сейчас поговорим об IFrame - "плавающем" фрейме. Я не буду рассказывать, как делается IFrame (т.к. "плавающие" фреймы поддерживаются только IE), я лишь расскажу, что это такое. Итак, IFrame - "плавающий" или встроенный фрейм. Пользователи Интернет Эскплорер, наверное, много раз встречали его на различных сайтах. Это очень удобно, поэтому некоторые создатели страниц (сайтов) позволяют себе забыть о пользователях Несткейпа, и я их прекрасненько понимаю. Зайдите на Дефорум.ру. На заглавной странице Новости сделаны при помощи IFrame. Т.е. мы видим, что IFrame позволяет мне вставить в мой документ, другой документ (в моём примере документ с новостями), я могу расположить встроенный фрейм по отношению к другим элементам документа (тексту и картинкам) как мне хочется (IFrame имеет фиксированные, неизменяющиеся размеры, поэтому ничего никуда не уползет и не раcширится), и мы также видим, что IFrame - это действительно очень удобно. Что? Я вижу досаду на твоем лице читатель, тебе хочется узнать как создавать такую замечательную штуку, и ты думаешь, что в этот раз я мог бы отступить от принципа "видно подо всем". Нет уж. Я не особо вредный, но в этот раз буду, не сколько из принципа, сколько мне хотелось бы, чтобы читатель начал сам искать разную информацию по теме, ведь я в рассказе могу дать только основу, а более глубоко придется все же погружаться самим. На этом повествование о фреймах закончено. Раньше я говорил о разных способах выделения текста (курсиве, полужирном шрифте, подчеркивании и других). Какие же еще теги определяют стиль шрифта, используются для его форматирования? Это - Big, Small, Strike (или S), Sub и Sup. 1) Big представляется крупным шрифтом, а Small малым шрифтом относительно основного текста: <small> Малый </small>Нормальный текст<big> Большой </big> 2) Тэги Strike и S представляют текст перечеркнутым шрифтом:<strike> Перечеркнутый </strike><s> Перечеркнутый </s> Какая разница между S и Strike? Да никакой. Просто один из них появился в более ранней спецификации, а другой в более поздней, но оба они имеют право на жизнь.3) Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодится? Ну, например при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:). Верхний индекс <sup>sup</sup>Нижний индекс <sub>sub</sub>.Еще в самом начале рассказа, я говорил о тэге Br, который осуществляет принудительный перевод текста на другую строку (т.е. аналогичен нажатию клавиши Enter, когда мы форматируем текст в обычном текстовом редакторе). Сейчас я расскажу о параметре тэга Br - Clear. Зачем он нужен? Допустим текст обтекает какой-либо объект (например, картинку): А мне нужно, чтобы текст после слов обрывался, и уже продолжался под картинкой. Вы, конечно, можете ввести несколько тэгов br и решить эту проблему. Но если вдруг картинка (объект) будет большой, текста много, то тут вы уже явно не обойдетесь несколькими br, тут вам придется употребить их с десяток и больше. Так вот, чтобы мне не пришлось мучаться в таких ситуациях, и существует параметр clear. Теперь пример кода: <img src="clearpri.gif" align="left"> <br clear="left У параметра clear существует несколько значений - all, left, right. All - завершить обтекание объекта текстом. Left - завершить обтекание текстом объекта, выровненного по левому краю. Right - завершить обтекание текстом объекта, выровненного по правому краю. В моём примере я задал clear="left", т.к. моя картинка выровнена по левому краю. Вот и вся премудрость. Я уже говорил о картинках и том, как картинку сделать ссылкой. Вы, наверное, также знаете, что можно сделать так, чтобы при нажатии на разные области (части) одной и той же картинки, вы попадали на разные страницы, это называется - навигационная карта. Разговор о том, как создавать навигационные карты, растянется на несколько страниц, но не пугайтесь, на самом деле это совсем не трудно.
Сначала теория.
Навигационные карты задаются тэгом Map. Тэг Map включает себя тэг Area, которые определяют геометрические области внутри карты и ссылки, связанные с каждой областью. То есть, куда вы попадете при нажатии на какую-либо часть моей карты.
<map><area...><area...><area ...></map>
Дальше уже будем тренироваться на конкретных примерах. Для начала нам нужна картинка. Возьмем такую: Картинка простая - всего лишь голубой прямоугольник (240х140 пикселов). Представьте, что прямоугольники №1 и №2, нарисованные на нем, - это изображения каких-либо кнопок, а голубое - какой-то сложный фон. Чтобы не создавать сложную таблицу, я решил не резать картинку на много частей и не вычленять кнопки, я решил поступить проще - создать навигационную карту, где области №1 и №2 (прямоугольники) будут ссылками. Итак, я уже знаю, что геометрические области и то, куда пользователь попадет при нажатии на них, определяет тэг Area, естественно, при помощи своих параметров. Это параметры shape и coords. Параметр shape - определяет форму области (будет ли она прямоугольником (shape="rect"), кругом (shape="circle") или многоугольником (shape="poly")). Сейчас я работаю с прямоугольной областью, поэтому: <map><area shape="rect"></map> Параметр coords - определяет координаты (положение моей геометрической формы). Число координат и порядок их значений зависят от выбранной мной формы. "Стоп! стоп!" - скажете вы, - "Какие координаты?" - Те самые, вспоминайте школу и уроки геометрии. Полагаю, что это всем должно быть ясно. Отсчет ведется от левого верхнего угла картинки, считайте его началом координат (0;0). Если мы работаем с прямоугольной областью, то нам нужны координаты верхнего - левого и нижнего -правого углов области. Порядок записи координат для параметра coords следующий: <area shape="rect" coords="x1,y1,x2,y2"> В моём примере у прямоугольника №1 координаты такие: x1=25, y1=36, x2=114, y2=98 Значит код будет выглядеть следующим образом:
<map>
<area shape="rect" coords="25,36,114,98">
</map>
Теперь пропишу, куда будет ссылаться наша область, для этого нам понадобится уже знакомый нам параметр href:
<map>
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>
Все бы хорошо, но этого все еще не достаточно, чтобы картинка стала ссылкой, нам нужно еще указать имя карты и связать ее с картинкой. У тэга Map есть параметр name - имя карты, давайте назовем карту - karta1:
<map name="karta1">
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>
Для того, чтобы связать карту с картинкой, надо использовать атрибут usemap="#имя_карты" для картинки:
<img src="bluerects.gif" usemap="#karta1">... Куча текста и всякого содержания, или ничего...
<map name="karta1">
<area href="drugoy_document.html" shape="rect" coords="25,36,114,98">
</map>
Смотрим результат (жмите на прямоугольник №1). Для создания круглой области мне нужны будут координаты ее центра (x и y) и длинна радиуса (R) в пикселях. Т.е. порядок записи следующий:
<area shape="circle" coords="x,y,R">Давайте будет опять работать с геометрической областью №1. В нашем случае координаты для маленького круга будут такие: x=46, y=48; а длина радиуса - R=35. Запишем:
<map>
<area shape="circle" coords="46,48,35">
</map>
Теперь, когда самое главное записано, пропишу имя карты, куда она ссылается и привяжу карту к рисунку:
<img src="mapcircle.gif" usemap="#karta2">... Куча текста и всякого содержания, или ничего...
<map name="karta2">
<area href="drugoy_document_2.html" shape="circle" coords="46,48,35">
</map>
Кстати, для карты мы можем прописать ALT для каждой области, сейчас у меня только одна область, но все равно, пропишем для нее ALT:
<img src="mapcircle.gif" usemap="#karta2">... Куча текста и всякого содержания, или ничего...
<map name="karta2">
<area href="drugoy_document_2.html" shape="circle" coords="46,48,35" alt="маленький круг">
</map>
Теперь при наведении на область №1 будет всплывать подсказка, что же это такое??? Давайте посмотрим результат, нажмите на первый круг. Вот я, наконец, добрался и до многоугольников. Страшно? На самом деле тут нет ничего страшного. Я указываю точки (координаты углов), они как бы соединяются, и я могу получить очень разнообразные фигуры (посмотрите на фигуру 2, правда, здорово? Используя poly, я могу делать самые разнообразные области, от скромного треугольника до шикарной звезды. Сейчас я буду работать с фигурой №2, потому что у нее меньше углов. Для начала задам тип области:
<map>
<area shape="poly">
</map> Координаты пишутся по следующему принципу:
<area shape="poly" coords="x1,y1,x2,y2,...,xN,yN">Расшифровывается это так: "координаты первого угла (x1,y1), координаты второго угла (x2,y2), еще много углов и их координат (...), координаты последнего угла (xN,yN)". Т.е. для нашего пятиугольника запись полностью будет выглядеть так:
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x5,y5">Теперь подставлю реальные значения координат в мой код:
<map>
<area shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
Дальше уже прописываю ссылку, имя карты, и привязываю карту к рисунку (это везде по одному и тому же принципу):
<img src="mappoly.gif" usemap="#karta3">... Куча текста и всякого содержания, или ничего...
<map name="karta3">
<area href="drugoy_document_3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map>
Теперь проверю, получилось ли у меня это безобразие (в этот раз вторая фигура, жмите). И не забуду прописать первую область (шестиугольник) - x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4=96, x5=54, y5=96, x6=16, y6=58. Теперь я расскажу еще о нескольких нюансах и завершу разговор о картах: 1 - Я могу одновременно использовать разные области, например круг и многоугольник:
<img src="mappoly.gif" usemap="#karta3">... Куча текста и всякого содержания, или ничего...
<map name="karta3">
<area href="drugoy_document_3.html" shape="circle" coords="46,48,35,">
<area href="drugoy_document_3.html" shape="poly" coords="168,9,232,29,200,97,223,129,153,119">
</map> 2
Мои области могут пересекаться (бывает, руки кривые). Это не смертельно, главное помнить, что в этом случае при нажатии на область пересечения приоритет имеет область, которая указана первой. То есть пользователь пойдет на страницу, куда он ссылается. Но можно и не мучатся с картами, а найти на просторах интернета специальную программу, с помощью которой без труда можно карту расчертить, и не прописывать все вручную - это может сэкономить время, силы, нервы. Иногда возникает такая ситуация: мне нужно сделать ссылку не на другой документ, а внутри того же документа - закладку, в народе называемую якорем (смотрите пример, понажимайте там на ссылочки). Такая навигация внутри одного и того же документа весьма удобна. Создавалась она двумя способами. Способ первый - с помощью атрибута name (имя закладки) тега A: <H2>Григорий Остер, "Вредные советы.<BR>Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE>
Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3><A name="stih1">Стих первый</A></H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3><A name="stih2">Стих второй</A></H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3><A name="stih3">Стих третий</A></H3>
<PRE>
... тра-ля-ля 3...
</PRE>
Заголовки (стих первый, стих второй, стих третий) в моём примере я его сделал закладками, использовав параметр тега A - name:
<A name="stih3">Стих третий</A> Затем, без стеснения, мы сделали на них ссылки:
<A href="#stih3">Ссылка на стих третий</A> Заметьте - <A href="#stih3"> - символ решетки (#) перед именем закладки, на которую мы ссылаемся, обязателен. Вы можете ссылаться на закладку и из других документов, тогда ссылка будет выглядеть следующим образом:
<A href="ancorpri.html#stih3"> Ссылка на стих третий из какого-то другого документа </A> или <A href="http://www.mysite.ru/ancorpri.html#stih1"> Ссылка на стих третий из какого-то другого документа </A> Способ второй - есть такой атрибут (параметр) - id, который назначает тегу (элементу) уникальное имя в пределах одного документа (кроме тегов Base, Head, Html, Meta, Script, Style, Title). Что мешает мне задать id, например, тегу H3 (заголовкам)? <H2>Григорий Остер, "Вредные советы.<BR>Книга для непослушных детей и их родителей".</H2>
<A href="#stih1">Ссылка на стих первый</A><BR>
<A href="#stih2">Ссылка на стих второй</A><BR>
<A href="#stih3">Ссылка на стих третий</A><BR><BR>
<PRE> Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно.
</PRE>
<H3 id="stih1">Стих первый</H3>
<PRE>
... тра-ля-ля 1...
</PRE>
<H3 id="stih2">Стих второй</H3>
<PRE>
... тра-ля-ля 2...
</PRE>
<H3 id="stih3">Стих третий</H3>
<PRE>
... тра-ля-ля 3...
</PRE> Посмотрите, внешне ничего не изменилось и все действует так же, как и в первом примере, поэтому я использовал спокойно любой из этих двух способов. Также хочу вас преостеречь, никогда не делайте так: <A href="#stih">Ссылка на ...</A><BR><A name="STIH">Закладка</A> Если вы, например, напишите имя закладки большими буквами, а ссылаясь укажете это имя маленькими, то браузер может посчитать это за два разных имени (а может и за одно), поэтому во избежание ошибок учитывайте это, и пишите имена в одном регистре. На этом мучения с закладками закончены. Наверное, пройдясь по тексту, вы уже поняли, что некоторые теги и некоторые атрибуты (параметры) тегов поддерживаются не всеми броузерами. Не будем искать причин почему (да и откуда мне лично знать, что толкает производителей браузеров придумывать свои специфические теги или атрибуты, о которых в спецификации нет ни слова, а также мне не ведомо почему браузеры не поддерживают некоторые теги и атрибуты, которые по идее должны поддерживать, т.к. в той же спецификации эти теги и атрибуты упомянуты), лучше расскажу о некоторых специфических атрибутах для тега Body, которые вам когда-нибудь да пригодятся. Раньше я говорил о атрибутах тега <frame> marginheight (определяет ширину (в пикселах) верхнего и нижнего полей фрэйма) и marginwidth (определяет ширину левого и правого полей фрэйма). Подобные атрибуты можно задать и для тега Body, что весьма полезно, если и вы захотите убрать поля, которые есть всегда по умолчанию (см. пример, вот они какие эти отступы (поля) по умолчанию), или наооборот, увеличить их. Давайте, в моём примере я буду рассматривать вариант, когда нам нужно убрать поля документа: <Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0"> Topmargin - определяет ширину верхнего и нижнего полей документа, leftmargin - определяет ширину левого и правого полей документа. Чтобы убрать поля я приравнял эти параметры к нулю. Можете посмотреть, что у меня получилось. Вы можете удивиться, в чем же специфичность этих параметров. Дело в том, что topmargin и leftmargin поддерживаются только Internet Explorer. Но не стоит расстраиваться, Нетскейп не окажется за бортом, т.к. для этого и других браузеров есть свои аналогичные специфические параметры для тега Body - marginheight и marginwidth. Marginheight - аналогичен topmargin, а marginwidth - аналогичен leftmargin. Теперь, чтобы убрать отступы и для NN, и для IE, надо просто прописать все эти параметры: <Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> Таким образом и в IE все будет хорошо, и NN будет не обижен. Специфические теги, поддерживаемые только браузером Internet Explorer или только Netscape - Волшебное заклинание (заметки о полях) и на этот раз речь пойдет о теге Marquee - бегущей строке (текста). Тег Marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют. Т.к. сия болезнь массовая, то мне придется рассказать подробно о теге Marquee (те у кого броузер не IE будут в этой главе оставлены за бортом, т.к. не будут видеть примеров, хотя традиционная ссылка в конце может их утешить).
<marquee height="10" width="270" bgcolor="#99CCFF">Бегущая строка, высота - 10, ширина - 270 пикселов, фон - 99CCFF</marquee> Как видите, все просто. Все атрибуты мне уже знакомы: bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки. Также для бегущей строки можно задать и другие знакомые мнеатрибуты - hspace, vspace и align. В мой пример я их вводить не буду, вы можете сами. <marquee height="10" width="270" loop="2">Бегущая строка</marquee> Параметр loop задает сколько раз прокрутится строка, в нашем примере указано loop="2" - 2 раза, а это значит, что к тому моменту, когда вы дойдете до этого примера, строка может уже не бежать, поэтому обновите страницу и убедитесь в правоте моих слов - строка пробежит только два раза. Далее будут лишь описания параметров без примеров и смотрите, что будет получаться. Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю. Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое. Теперь, когда я разобрался со всеми параметрами тега Marquee, я немного позанудничаю, призывая читателя все же быть разумным и не особо злоупотреблять этим тегом. Вернитесь хотя бы к первому примеру. Посмотрите на него задумчиво и признайтесь, что он мешал вам сосредоточиться на чтении и ознакомиться с рассказом (да, всё со злым умыслом). Посмотрели, поняли, к чему я веду, и решили в дальнейшем не мучать своего посетителя подобным образом без особой нужды. Обещанное утешение пользователям Netscape и других браузеров, которые не IE - ссылка на скрипты бегущей строки. Я полагаю, что это вы сможете увидеть (кстати, это альтернатива Marquee): - JavaScript. Разные бегущие строки. Пока что все, надеюсь, что всё это вы читаете на моём сайте, или хотя бы просто скопировали с него и положили к себе. Надеясь, что когда-нибудь он может пригодиться!!! Самое простое в этом рассказе, это то что создав на своём диске отдельную директорию. И открывая файлы из неё (предварительно разбив весь мой рассказ на отдельные). В своём браузере, вы наглядно будете иметь много страничек и создать или выбрать одну для своего сайта!!!
С уважением Ugin Filippoff!!!