Команды в HTML называются тегами. Начинаем набирать документ с тега <HTML> - название языка. Естественно, закончить документ надо будет командой </HTML>. Обращаю Ваше внимание на то, что HTML - двойная команда, ее надо закрывать с помощью / , но только В САМОМ КОНЦЕ документа, иначе все, что написано после нее просто не будет воспринято.
Следующим номером идет <HEAD> - то есть голова документа.
За словом <TITLE> идет информация, которая будет появляться на самой верхней строчке экрана. Естественно, это должна быть какая-то приятная вещь. Или, на худой конец, информационная. Например, название документа. Она может включать до 40 символов, считая пробелы. <TITLE> - команда, которую надо обязательно закрывать. Для этого используется /.
<META NAME="" CONTENT=""> таких строк в документе может быть много, они используются, в основном, для обеспечения работы поисковых систем. Этот тег одинарный, закрывать его не нужно.
Совет от Викуси :
Набирать можно в любом текстовом редакторе, хоть в том же ворде, или notepad, но!!! запоминать как TextOnly, при этом ручками проставляя вместо расширения txt -> htm. Это я экспериментально выяснила. Я сейчас делаю так (это наиболее удобно). Вхожу в Internet Explorer (ты, наверное, тоже через него в интернет лазаешь?), но в режиме работы offline (то есть не в сети). Вхожу в меню wiew (Вид) в строку source (в виде HTML). Там открывается файл в Notepad (Блокнот). Его я не трогаю, а открываю новый. В нем все и набираю ручками (команды), сохраняю так, как написала выше. А потом через Internet Explorer просматриваю, что получилось (сразу будет в том виде, в каком надо). Чтобы открыть файл для просмотра, надо в меню File (Файл) выбрать Open (Открыть), а там браузером выбрать нужный файл.
Устанавливаем цвет фона; цвет, размер и форму букв основного текста и ссылок.
Далее идет тeг со словами body bgcolor (определяет цвет фона),link (цвет ссылок), vlink (цвет использованных ссылок), alink (цвет активных ссылок). #ffffff белый цвет, #000000 черный цвет, #808080 нейтральный серый цвет, #0000ee ярко-синий цвет, как правило используемый для маркировки гипертекстовых ссылок, #551a8b тускло-синий цвет, как правило используемый для отработавших ссылок, #ff0000 красный цвет, удобный для обозначения активных ссылок, #c0c0c0 серебристый цвет, #800080 пурпурный цвет, #008000 зеленый цвет, #00ff00 лимонный цвет (лайм), #808000 оливковый цвет. #ffff00 желтый цвет, #0000ff голубой цвет. Для начала достаточно?
Определители цветов стоят практически в любой графической программе (типа Фотошопа). Цвет определяется шестью знаками - от 0 до f. Первые два символа отвечают за красный цвет, третий и четвертый - за зеленый, а два последние - за синий цвет. Чем "старше" символ, тем интенсивнее цвет.
Еще коды цветов можно посмотреть
Фон можно заменить картинкой.
Видоизменяем предыдущую строку с помощью команды BACKGROUND. risunok1.jpg можно использовать готовый, а можно нарисовать самим, например в Paint. (Пуск-Программы-Стандартные-Paint). Рисунок (пока разбираем примеры) лучше сохранить в той же самой папке, что и Домашняя страничка. Иначе придется указать весь путь до него.
Вставляем картинки и фотографии.
С помощью этой строки Вы вставите картинку foto1.gif по левому краю (ALIGN=LEFT), высота картинки (HEIGHT) будет 103 пикселя, ширина (WIDTH) 446 пикселей, ширина окантовки (BORDER) 10 пикселей. Если эти параметры не указать, то картинка будет такой, какая она и есть - не увеличенная и не уменьшенная, и размещаться будет без окантовки по левому краю. Если надо разместить картинку справа, пишем RIGHT вместо LEFT.
Совет от Викуси :
Чтобы привести гигантский размер отсканированной фотографии к нормальному виду надо поискать где-нибудь в программе что-нибудь типа Image size - и там поменять разрешение где-нибудь до 72 пикселей на дюйм. А в фотошопе элементарно этот размер меняется.
Делаем ссылки.
Слово "Александра" появится в вашем документе подчеркнутым, цвета, определенного для линков, и при нажатии на него Вы переместитесь на страничку под именем sasha в папке (директории) sasha. Как видите, команду A HREF надо закрывать с помощью /А.
Вставляем свой собственный почтовый адрес.
Как видите, ничего сложного. Все почти так же, как и в предыдущем примере. Слово center подразумевает расположение Вашего почтового адреса по центру. Если Вы не хотите, чтобы все дальнейшее располагалось по центру, этот тег нужно закрыть с помощью /.
Изменяем шрифт.
В результате ввода этой строки получится слово "однажды", написанное курсивом, "в студеную" - жирным курсивом, "зимнюю" - просто жирным шрифтом, "пору" - обычным шрифтом. Однажды в студенуюзимнюю пору...
Итак, для жирного шрифта используем <B>, для курсива - <I>, для их отмены </B> и </I>.
Размещаем страничку на сервере.
Совет от Викуси:
Дают место под странички бесплатно на www.hotmail.ru - 16Mb и пока без баннеров.
Ольга Павлова: Но там надумаешься каким образом свои файлы на их сервер положить. И объяснить они сами как следует не могут. Нужна программа-клиент, FAR например. Поэтому всем рекламирую , там все очень просто.
Совет от Викуси:
Раньше я странички в FrontPage делала, но все люди, сведущие в web-дизайне, меня ногами за это били, так как, вроде, глючная программа, так что теперь и не знаю, какую программу лучше посоветовать. Я сейчас вообще просто по образу и подобию сразу теги "словами" пишу.
Совет от Кати С. :
Хочу согласиться с Викусей, что сейчас почему-то все FrontPage ругают, так что, я теперь сама решила поискать что-то другое...Может, рискну занятся Flash-ем, там говорят, море возможностей! И ещё есть очень хороший редактор, называется Allaire Home Site. А насчет размещения странички, то могу посоветовать www.ussr.to, или www.az.ru там теперь дают аж по 30Мб!!! И картинки грузятся намного быстрее, чем на narod.ru. И мне кажется, удобнее размещать и редактировать. Хотя это, вообще-то на любителя...
Таблицы
Одним из важнейших элементов HTML- документа являются таблицы. Как правило, они используются для того, чтобы располагать объекты в требуемых местах. Этот сайт создан с помощью таблиц.
Таблица открывается тегом <TABLE> , а закрывается тегом </TABLE> . Вся информация, содержащаяся внутри таблицы должна располагаться между этими тегами. В открывающем теге таблицы следует поместить атрибут BORDER, который устанавливает толщину линии таблицы. Если BORDER=0, то линия таблицы видна не будет.
Заготовка таблицы будет выглядеть так: <TABLE BORDER=2> </TABLE>
Команда TABLE поддерживает следующие атрибуты (далее все рассмотрено на примерах):
ALIGN - задает выравнивание текста по горизонтали и может принимать значения: BLEEDLEFT (вплотную налево), LEFT (лево) CENTER (по центру) RIGHT (вправо).
BACKGROUND - Значением атрибута служит файл, задающий фоновое изображение для таблицы. Работает не во всех браузерах.
BGCOLOR - Задает цвет фона таблицы. Работает не во всех браузерах.
BORDER - Задает ширину окантовки таблицы в пикселях. Если значение атрибута равно нулю, окантовка становится невидимой.
CELLPADDING - Задает ширину пустого пространства (в пикселях) между содержимым таблицы и ее окантовкой.
CELLSPACING - Задает интервал между ячейками таблицы (в пикселях)
HSPACE - Задает размер пустого пространства в пикселях справа и слева от таблицы.
VSPACE - Задает размер пустого пространства в пикселях над и под таблицей.
WIDTH - Задает ширину таблицы в пикселях или в процентах от ширины окна.
HEIGHT - Задает высоту таблицы в пикселях или в процентах от ширины окна.
Теперь создадим внутреннюю структуру таблицы. Горизонтальная табличная строка задается тегами <TR> </TR> , и является основой построения таблицы. Вертикальные столбцы таблицы организуются в каждой строке тегами <TD> </TD> , число пар этих тегов в строке таблицы соответствует числу столбцов.
Команда <TR> поддерживает следующие атрибуты:
ALIGN: BLEEDLEFT (вплотную налево), LEFT (лево) CENTER (по центру) RIGHT (вправо).
BACKGROUND;
BGCOLOR;
BORDER;
VALIGN - Задает выравнивание текста по вертикали и может принимать значения: TOP (по верхней части) MIDDLE (по средней части) BOTTOM (по нижней части) BASELINE (по базовой линии).
Команда <TD> поддерживает следующие атрибуты:
ALIGN: BLEEDLEFT (вплотную налево), LEFT (лево) CENTER (по центру) RIGHT (вправо).
BACKGROUND, BGCOLOR,
COLSPAN - Ячейка таблицы раздвигается на количество столбцов, указанных в значении атрибута.
NOWARP - Отключает автоматическое распределение по ячейке. Будет отображаться лишь та часть текста, которая умещается в ячейке по длине.
ROWSPAN - Ячейка таблицы раздвигается на количество строк, указанных в значении атрибута.
VALIGN ,WIDTH .
Простейшая таблица три на три ячейки в HTML выглядит следующим образом:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Введя эти команды в HTML документ, Вы получите на экране следующее изображение:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Помните, что таблица представляет собой элемент изображения, в принципе ничем не отличающийся от графического образа или строки текста. Ее можно располагать по центру, левой или правой кромке экрана точно так же, как и любой другой объект.
С помощью атрибута CELLPADDING можно задать размер пустого пространства между содержимым таблицы и ее окантовкой, как это видно в следующем примере:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
В результате его выполнения на экране мы увидим следующее:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Как видно из примера, по умолчанию таблица принимает форму содержащихся в ней строк. Ширина каждого столбца во второй и третьей строках автоматически выставляется такой же, как и в первой строке. Такое форматирование может быть изменено с помощью атрибутов COLSPAN и ROWSPAN, которые объединяют ячейки таблицы по горизонтали и по вертикали. Написав, допустим, <TD COLSPAN=2> мы принудительно растянем ячейку таблицы таким образом, чтобы она соответствовала двум находящимся под (над) ней, как видно в приведенном ниже примере:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
После выполнения этот пример выглядит так:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Размеры таблицы определяются введенными в нее строками (или графическими образами) только в том случае, если эти размеры никак не заданы принудительно. Их можно задать, введя в тег <TABLE> ширину и (или) высоту таблицы при помощи атрибутов WIDTH и HEIGHT. Значения этих атрибутов можно задавать в пикселях (при этом размеры таблицы будут определены жестко вне зависимости от размера окна просмотра), или в процентах от ширины или высоты окна просмотра. Для указания ширины или высоты в процентах следует поставить после цифрового значения атрибута знак % (например HEIGHT=25%).
Попробуем задать нашей таблице ширину 500 пикселей и высоту 200 пикселей:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
На экране результат выполнения этих строк будет выглядеть так:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Теперь мы можем отформатировать расположение текста в каждой ячейке. Для этого используются атрибуты ALIGN и VALIGN. Следующий пример показывает возможности такого форматирования. Не забывайте, что значения атрибутов ALIGN и VALIGN нужно писать только большими буквами.
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
После выполнения этот текст выглядит так:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Вид таблицы можно модифицировать, задавая различную толщину окантовки таблицы и ее разделительных линий. Для задания толщины окантовки используется атрибут BORDER тега <TABLE> , как это видно из примера:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Результат выполнения этого примера будет таким:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Разделительные линии таблицы модифицируются при помощи атрибута CELLSPACING, значением которого является толщина линии в пикселях, как это видно из примера:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
При выполнении этот пример выглядит так:
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Первая колонка
Вторая колонка
Третья колонка
Делаем фотоальбом.
Простейший фотоальбом можно создать с помощью следующих тегов:
Название альбома
Альбом будет иметь следующий вид:
Название альбома
Количество ячеек можно сделать любым.
Если у вас возникли вопросы - пишите : oh-lala@mail.ru
