Разделы
сайта:Поиск
Итак, Вы хотите создать свой сайт! Хорошо, потому что получается, что я не зря писал эту статью! Здесь мы рассмотрим пример создания простейшей страницы на HTML!.
Вместо введения
HTML - язык, который размечает текст, т.е. расставляет по тексту специальные метки (они называются тегами). Эти метки являются командами браузеру, который отображает полученный отформатированный текст на экране. Тэги пишутся в угловых скобках. Текст, содержащий тэги, хранится в обычном текстовом файле, с разрешением .htm и .html. Наша задача - "объяснить" браузеру, как должна выглядеть страница на экране!
Ближе к делу
Ниже я приведу пример простейшей страницы:
<head>
<title>Здесь должно быть название страницы</title>
</head>
<body bgcolor="Yellow" text="Green">
Текст страницы пишется здесь!
</body>
</html>
Страница начинается тегом <html>, а заканчивается </html>. Это что-то вроде "больших скобок", в которые заключена вся страница. Тэги <html> и </html> парные, они отличаются друг от друга только наличием слэша (/) Тег <html> - открывающий, а тег со слэшем </html> - закрывающий.
После тега <html> надо писать парный тег <head>. Он выделят раздел страницы, в котором описывается служебная информация! В этом теге можно указать много различных параметров, но для начала мы рассмотрим тег <title>.
Тег <title> тоже, парный, описывает заголовок Вашей страницы, и будет считаться, с точки зрения html, оффициальным названием Вашей страницы.
Теперь мы рассмотрим парные теги <body>, которые собственно являются главными.
Вы наверное заметили, что внутри угловых скобок открывающего тега <body> указано ещё одно слово - bgcolor. Это параметр тега. В данном случае это параметр цвета фона, на котором будет размещён текст Вашей страницы. А "Yellow" - это значение параметра, которое задаёт странице жёлтый цвет. Слово "Yellow" можно изменять на другое, и соответственно цвет поменяется, так же можно вместа слова указывать код цвета, понятный браузеру, к примеру #6699CC. А слово text - параметр, отвечающий за цвет страницы, в нашем случае он зелёный.
Ну вот, вроде бы простейшее освоили, согласитесь, этого мало!
Вот вам добавочка:
<head>
<title>Здесь должно быть название страницы</title>
</head>
<body bgcolor="Yellow" text="Green">
<hr width="30%" align="left" color="Blue">
<b>Жирный текст!</b><br>
<i>Этот текст курсивный!</i><br>
<u>А этот подчёркнутый!</u><br>
<hr width="30%" align="left" color="Blue">
</body>
</html>
Теперь разберём нововведения.
Новый тег <hr> (от horisontal rule - горизонтальная строка), простой, но очень полезный, потому что отделяет один блок текста от другого. По-умолчанию длинна линии равна длине страницы, а параметр width задаёт ей длинну, в нашем случае на 30% страницы. Параметр align указывает на положение линии: right, center, left. Ещё один параметр color указывает на цвет, подобно bgcolor в <body>. Вы заметили новый тэг <b> во второй строчке после <body>, он тоже парный, открывается перед текстом, и закрывается после него. Нужен он для того, чтобы выделять текст жирным начертанием. Тег <i>, тоже парный, и служит для выделения курсивного начертания текста. Тег <u> подчёркивает текст. После каждой строчки следует тег <br> (от английского break - разрыв) - этот тег принудительно обрывает строчку, и текст, стоящий после него отображается на другой строчке.
Добавление картинки
Сайт с интересным графическим дизайном смотрится всегда лучше чем обычный, серый. Для того, что бы "оживить" сайт, Вам можно добавить туда картинки, это можно сделать следующим кодом:
<img src="http://zhekinside.narod.ru/Baners/ZhekinsideBaner4.gif" alt="...zhekinside...ЖЕкиН САйТ...Скрипты...CSS...СОфТ...ОБоИ...ИГрЫ..." width="81" height="30">
Картинка вставляется непарным тегом <img>, в ней указываются параметры src - адрес рисунка, alt - подсказка, которая всплывает при наведении, а если рисунок незагружается (это может быть вызванно ошибками на сервере, то вместо нео отображается текст. Ещё два параметра width, указывающий на длинну рисунка, и height, указывающий на ширину, описыватль их небуду, по-моему и так понятно зачем они, но совет: если рисунок большего размера, чем Вы можете позволить, то просто задайте параметры width и height, как Вам нужно!.
Создание таблицы
Использование таблиц является непременным атрибутом любой современной Web-страницы. С одной стороны, описание таблиц хорошо стандартизированно и разные браузеры обычно отрахают их одинаково, с другой - таблицы позволяют очень гибко расставлять элементы дизайна страницы в нужных местах. Рассмотрим вставку простейшей таблицы 2x2
<tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
Таблицу вставляет парный тег <table>. Таблица состоит из строк, каждая из которых вставляется парным тегом <tr> ( от table row - строка таблицы). Строка состоит из ячеек. Ячейка вставляется парным тегом <td>. Чтобы границы ячеек были видны, надо установить параметр таблицы BORDER="1". Параметр bordercolor отвечает за цвет границ таблицы, а параметры cellpadding="0" cellspacing="0" указывают на промежуток между ячейками и строками
Собственно главное
Главное в HTML как ни крути - Ссылки!
Ссылка - это некоторая область документа (текст или изображение),
по которойможно щёлкнуть мышью. В результате произойдёт переход
к другому документу (или к другой части этого же). Сделаем ссылкой
часть текста, например в предложении "Все дороги ведут на ЖЕкиН
САйТ" Слово "ЖЕкиН САйТ":
Все дороги ведут
на <a href="http://zhekinside.narod.ru/"
title="Супер сайт!">ЖЕкиН САйТ</a>
Ссылки
организуются при помощи парного тега <a> параметр href
указывает, по какому адресу надо перейти, после щелчка по ссылке,
параметр title задаёт текст подсказки, при наведении мышки,
текст, который находится между тегами <a>, является
видимым текстом ссылки.
В больших документах требуются ссылки
на отдельную часть документа, это делается так: Во-первых, Вам надо
сначала обозначить то место, где Вы хотите поставить якорь(куда
потом приведёт ссылка), это делается так <a name="yakor">,
а Во-Вторых в ссылке В параметре href Вам надо указать
"#yakor"
По умолчанию ссылки, которые мы ещё
не посещали, выделены синим цветом, а ссылки, где уже побывали,
- сиреневым. если Вы хотите поменять эти параметры, Вам нужно установить
их как параметры <body>: Link - цвет непосящённых
ссылок, VLINK - цвет посящённых ссылок, ALINK - цыет
ссылки, по которой мы кликнли мышью, но ещё не отпустили.
Ссылку
так же можно сделать через рисунок, для этого между тегами <a>
надо вставить код картинки (смотреть выше)
ИгнатьЕвГений | http://zhekinside.narod.ru/ | Stranger1989@mail.ru | 5.01.2005
Ссылки:
