ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 02.04.2024
Просмотров: 323
Скачиваний: 0
СОДЕРЖАНИЕ
Как списки помогают организовать нам информацию
Как создать список на вашей странице
Объединение нескольких столбцов в одну ячейку
Предварительное форматирование
Где вы сможете найти графику, изображения и рисунки
Как поместить изображение на страницу
Оптимальные размеры изображений
Как браузеры работают с прозрачными изображениями
Создание прозрачных gif-изображений
Создание якоря и присвоение ему якоря
Компоновка ссылок в виде списков
Текст ссылок должен быть понятным
Как работают изображения-карты
Изображения-карты не являются новой технологией
Различия между серверными и клиентскими изображениями-картами
Разбиение изображения на фрагменты
Совершенствования веб-страницы
Развертывание веб-страницы в веб-узел
Уроки html'а. Урок # 1.
Язык HTML не сложен для изучения, но в нем есть несколько тонкостей. На самом деле HTML в основном интуитивен и его легко читать. Он близок к английскому. В любом случае, HTML учить легче чем английский...
Независимо от того, как выглядит ваша страница и какую информацию вы хотите отобразить, существует три тега, которые в соответствии со стандартами HTML должны присутствовать на каждой странице:
<HTML> - Сообщает браузеру, что документ создан на HTML.
<HEAD> - Отмечает вводную и заголовочную части HTML-документа.
<BODY> - Отмечает основной текст и информацию.
Эти тэги необходимы Web-браузеру для определения различных частей HTML-документа, они не оказывают прямого влияния на внешний вид WEB-страницы. Они необходимы для того, чтобы последующие нововведения в HTML правильно интерпретировали вашу страницу, а также для того, чтобы она выглядела одинаково в часто используемых браузерах. Например, на хостинге (место, где вы расположите веб-страницу) веб-сервером, создавая список имеющихся HTML-документов (подобных вашему), запускается программа, которая использует только эти тэги. Таким образом, если на странице нет этих тэгов, она не будет включена в этот список. Список этот используется для поиска по хостингу. К примеру, если Вы расположите свою страничку на Narod.RU, то при наличии этих тэгов Ваша страница будет доступна для поиска по Narod.RU.
<HTML> и </HTML>.
Эти тэги сообщают браузеру, что текст между ними следует интерпретировать как HTML-текст. Поскольку документы HTML чисто текстовые, тэг <HTML> говорит о том, что файл написан на языке HTML (HyperTextMarkupLanguage - Язык гипертекстовой разметки).
Создавая новый HTML-файл, в первую очередь необходимо ввести данную пару тэгов. Для этого наберите <HTML> в самом начале текста. Затем наберите его напарника - </HTML> - в конце. Теперь весь текст, написанный между ними, будет принят браузерам за текст HTML. Правый слэш (/) используется для обозначения закрывающихся тэгов. Большинство HTML-тэгов парные: один открывает (<HTML>), другой закрывает (</HTML>). Их действие распространяется только на тот текст, который находится между ними.
Страница выглядит таким образом:
|
файл: index.html |
|
<HTML> </HTML> |
Теперь введем тэги <HEAD> и </HEAD>. Они должны быть между тэгами <HTML> и </HTML>. Эти тэги отмечают ту информацию в документе, которая будет служить названием.
В этих тэгах должна содержаться следующая информация:
<TITLE>Design LAB</TITLE> - Между этими двумя тэгами необходимо ввести заголовок Вашей странички.
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> - Эту строчку нужно вставить, если Вы создаете свой документ на блокноте или другом простейшем текстовом редакторе.
Посмотрим как выглядит страничка теперь:
|
файл: index.html |
|
<HTML> <HEAD> <TITLE>Design LAB</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> </HEAD> <BODY> </BODY> </HTML> |
Но открыв на браузере эту страницу, мы ничего не увидим. Логическая цепочка открытия и закрытия больших (длинных) тэгов дает понять что за чем открывается и когда закроется.
Тэги <BODY> и </BODY>. С их помощью можно изменить стиль страницы, перед тем как набрать текст. К примеру, необходимо сделать так, чтобы текст был белым на черном фоне, а ссылки (посещенные, не посещенные или локальные) - светло-зелеными. В этом случае, необходимо дополнить тэг <BODY> следующими параметрами:
|
файл: index.html |
|
<HTML> ... <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME"> ... </BODY> </HTML> |
BGCOLOR="BLACK" - цвет фона - черный.
TEXT="WHITE" - цвет текста - белый.
LINK="LIME" - цвет не посещенной ссылки - салатовый.
VLINK="LIME" - цвет посещенной ссылки - салатовый.
ALINK="LIME" - цвет локальной ссылки - салатовый.
Итак, теперь попробуем создать текст. К примеру, нам нужно сделать ссылку на страничку с информацией о создателе сайта.
|
файл: index.html |
|
<HTML> <HEAD> <TITLE>Design LAB</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> </HEAD> <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME"> На этой страничке есть информация <a href="about.html">про меня</a> </BODY> </HTML> |
Открыв эту страничку на браузере в таком виде, мы получим примерно следующее.
|
preview: index.html |
|
На этой страничке есть информация про меня |
При наведении курсора мыши на надпись про меня он (курсор) примет форму руки. И далее, кликнув по надписи, мы попадем на страничку about.html., где расположена информация об авторе.
Уроки html'а. Урок # 2.
У многих браузеров существует история посещенных страниц. Скажем, если я когда-то был на вашем сайте, и заходил в раздел про меня, то я увижу эту ссылку другим цветом. По умолчанию этот цвет фиолетовый, но изменив в <BODY> значение VLINK="LIME", мы увидим посещенную ссылку салатовым цветом. А еще можно сделать так, чтобы кликав на ссылку, скрывающаяся за ней страница открывалась в новом окне. Синтаксис таков:
|
<a target="_blank" href="http://cray.vision.krg.kz/~Sam/dlab">Design Lab</a> |
Отсюда видно, что кроме параметра HREF (что значит "направление", "расположение"), здесь присутствует target="_blank". Этот параметр и дает команду открывать ссылку в новом окне.
Язык HTML понимает 2 вида цветовых переменных: HEX и Color. Color - это ввод цвета словом, как в английском языке (red - красный, blue - синий и т.д.). А очень интересно устроены HEX-значения. Давайте посмотрим на эту таблицу:
|
|
#110000 |
|
#330000 |
|
#550000 |
|
#990000 |
|
#ff0000 |
|
|
#001100 |
|
#003300 |
|
#005500 |
|
#009900 |
|
#00ff00 |
|
|
#000011 |
|
#000033 |
|
#000055 |
|
#000099 |
|
#0000ff |
В HEX палитре числа представлены парами. Т.е. можно присмотревшись заметить то, что первая пара влияет на красный цвет, вторая пара чисел влияет на зеленый цвет, и третья пара - на синий (#RRGGBB). А сейчас я представлю вам палитру текстовых цветов:
|
|
red |
|
cyan |
|
lime |
|
pink |
|
fuchsia |
|
|
green |
|
gray |
|
maroon |
|
navy |
|
olive |
|
|
blue |
|
purple |
|
silver |
|
teal |
|
yellow |
Заголовки
Итак, продолжим набивать текстом нашу страницу. Поговорим о заголовках. Подобно названию страницы, заголовки должны быть краткими и полезными. Существует шесть размеров шрифта заголовков (они пронумерованы от одного до шести, причем первый номер соответствует самому крупному размеру шрифта). Итак, давайте взглянем на эти виды заголовков:
|
Пример заголовка - размер 1 Пример заголовка - размер 2 Пример заголовка - размер 3 Пример заголовка - размер 4 Пример заголовка - размер 5 Пример заголовка - размер 6 |
Заголовки отображаются Web-браузерами намного крупнее и жирнее стандартного текста. Это хороший способ выделять различные части Web-страницы.
Чтобы воспользоваться заголовком с размером букв первого номера, нужно обозначить выделяемый текст тегами <H1> и </H1>. Давайте попробуем ввести заголовок в нашу страницу. Этот текст должен располагаться в части, отдельной тегами <BODY> и </BODY>.
|
файл: index.html |
|
<HTML> <HEAD> <TITLE>Design LAB</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> </HEAD> <BODY BGCOLOR="BLACK" TEXT="WHITE" LINK="LIME" ALINK="LIME" VLINK="LIME"> <H1>Моя Домашняя Страничка</H1> На этой страничке есть информация <a href="about.html">про меня</a> </BODY> </HTML> |
И вот что мы получим в результате:
|
preview: index.html |
|
Моя Домашняя Страничка На этой страничке есть информация про меня |
Написав <H1>, мы активизировали команду "Заголовок #1". Написав </H1>, мы закрыли эту команду. Весь текст который находился между этими тегами был подвластен команде "Заголовок #1".