Введение в HTML.

Введение.

Этот раздел научит Вас работать с языком HTML и делать хорошие сайты.

Добро пожаловать в HTML!

HTML - это язык программирования.

В принципе, создать Web-страницу можно и без знания языка html.

Например, используя Word или FrontPage. Я частично так и делаю.

Однако Word открывает доступ далеко не ко всем возможностям языка. Например, как сделать на нём ссылки, изменяющие свой цвет при изменении указателя? Никак!

Кроме того, Word добавляет массу своих ненужных тегов (команд) (хотя некоторые, полезно поизучать), а ведь, чем меньше страница, тем быстрее она загружается. <Что, в принципе не особо важно - у многих уже выделенные линии>. И есть много других примеров, в которых и нужно знание языка

H T M L.

В принципе, HTML прост.

Самое главное - запомнить структуру документов и то, что всё в HTML записывается в угольных скобках.

Существуют начинающие и завершающие команды (теги).

Начинающая команда пишется как есть, а к завершающей добавляется косая черта (/).

Вот структура языка html:

<HTML>

<HEAD>

</HEAD>

Текст

</HTML>

<HTML> - начало документа, </HTML> - соответственно, конец.

<HEAD> - заголовок документа, </HEAD> - конец заголовка.

В принципе, этого раздела (HEAD) может и не быть, но многие команды должны быть расположены именно здесь, например, команды <TITLE> и </TITLE>

Текст, расположенный между этими командами просмотрщик отправляет на самый верх своего окна.

У почти любого тега есть атрибуты.

Они пишутся через пробел от тега.

Например, тег img (от image – изображение) имеет атрибут src=”путь”.

Данный атрибут задает путь к изображению.

А теперь, давайте начнём изучение HTML.

Щелкните сюда.


About Chm4You!

О программе Chm4You!
Разработчик: Сергей Тарасенко (aka Tarantul)
Версия: Chm4You! 1.2.1
Веб-сайт: http://supex.by.ru
Почта: tarantuls@ukr.net

Компилятор: hhc.exe 4.78.8702.0 (Microsoft)
Динамическая библиотека: hha.dll 4.78.8702.0 (Microsoft)
Декомпилятор: hh.exe 4.78.8702.0 (Microsoft)


Язык HTML.

Язык HTML.

HTML – язык тегов.

Давайте изучим следующее:

Введение в HTML.

I. Работа с текстом.

Как задать размер и определенное начертание шрифта.

Как задать цвет текста и цвет фона.

Как сделать заголовок.

Перенос текста.

Выравнивание текста.

II. Работа со списками.

Основные сведения о списках.

Как сделать заголовок списка.

Как указать, с какого места начинать список.

III. Тег META.

Как сделать загрузку с сервера каждые xxx секунд.

Как добавить информацию для поисковиков.

IV. Бегущая строка.

Как организовать бегущую строку.

Как задать размер строки.

Как задать нужную скорость показа.

Как задать цвет текста и цвет фона бегущей строки.

Вообще, бегущую строку можно использовать во многих ситуациях. Например, можно сделать бегущую строку внизу. Но для этого надо знать Java. Вот что можно сделать с помощью Java:

Бегущая строка внизу (объяснение кода в разделе Java).

V. Разное.

Как задать фрагмент кода как текст.

Как задать специальные символы.

VI. Графика и музыка (мультимедиа).

Как добавить рисунок и задать его размер.

Как сделать, что бы при запуске страницы играла музыка.

VII. Ссылки.

Как добавить ссылку.

Как сделать гиперрисунок (баннер).

VIII. Таблицы.

Основные методы создания таблиц.

Задание числа строк и столбцов.

Как сделать, чтобы текст не переносился на след. строку.

Растягиваем строки и ячейки.

Как задать ширину таблицы или какой-то ячейки.

Как задать выравнивание и размер нужных колонок.

Как определить величину пустого пространства между текстом и границей ячейки.

Как убрать или изменить размер рамки.

Как указать размер промежутка между ячейками.

Задаем цвета таблицы.

IX. Кадры (frames).

Введение в кадровую структуру или что такое кадры.

Как задать простую кадровую структуру.

Подготовка содержимого для кадра и настройка кадров.

Кадровые атрибуты

"Волшебные" целевые кадры.

X. Формы.

Всё о формах в одном документе.


Формы.

Одна из красот Web – интерактивные формы. Они позволяют читателям Web-страниц легко общаться с их владельцами.

Сделать формы просто, но Вы можете долго провозиться, изменяя их дизайн.

Теги для форм:

Формы начинаются с тега <FORM>.

Атрибуты:

METHOD=”POST” – каким методом отправлять.

POST – по электронной почте.

PUT – передать какой-то программе. Мы будем изучать только POST, т.к. PUT – это уже не HTML, а более крутая (и сложная!) вещь - CGI.

ACTION=”xxx” – куда передать. Можно передать по электронной почте, а можно – программе CGI. Будем изучать только первое.

Дальше идет сама форма.

В форме может использоваться следующее:

<INPUT TYPE=”NAME”> – поле ввода имени.

<INPUT TYPE=”PASSWORD”> - поле ввода пароля.

<INPUT TYPE="RADIO"> - поле для выбора.

<TEXTAREA NAME="Комментарии"></TEXTAREA> - поле для ввода текста.

<INPUT NAME="subscribe1" TYPE="checkbox"> - место, где Вы можете поставить крестик.

Атрибуты:

ROWS=5 – количество строк; COLS=50 – количество столбцов.

NAME – название категории (не путайте с INPUT TYPE=”NAME”). Хотя честно говоря не врубаюсь, зачем этот атрибут нужен.

VALUE – значение поля. Хорошо использовать на домашнем компьютере в поле ввода пароля (Вы вводите логин, а пароль вводится сам).

<HTML><HEAD><TITLE>Регистрация на http://kakoy.to.provider.ru/.</TITLE><FORM METHOD="POST" ACTION="mailto:ваш-адрес-электронной-почты"><H1>Регистрация на http://kakoy-to-provider.ru/</H1><FONT SIZE=4.0pt><B>Введите ваш логин: <INPUT TYPE="NAME" NAME="Имя" VALUE="ivan@provider.ru"><br>Введите ваш пароль: <INPUT TYPE="PASSWORD" NAME="Пароль" VALUE="mypassword">

<br>

<br>

На что хотите ли Вы подписаться?

<BR>

Если Вы не хотите подписываться, то ничего не выбирайте.

<BR>

<INPUT NAME="subscribe1" TYPE="checkbox">На новости сети.

<br>

<INPUT NAME="subscribe1" TYPE="checkbox">На рассылку Интернет программ.

<br>

<BR><br>Какой доступ в Интернет Вы хотите получить?<BR><INPUT TYPE="RADIO" NAME="Выбор1" VALUE="Вариант1.">По телефонной линии.<BR><INPUT TYPE="RADIO" NAME="Выбор1" VALUE="Вариант2.">По выделенке.<P><BR>Ваши комментарии по поводу провайдера.<BR><TEXTAREA NAME="Комментарии" ROWS=5 COLS=50></TEXTAREA><BR><INPUT TYPE="SUBMIT" VALUE="Отправить данные"><INPUT TYPE="RESET" VALUE="Очистить"></FORM></HTML>

Выполнив это, вы получите вот такой рисунок:


Кадровые атрибуты.

ROWS= - число и размер строка на странице (в теге FRAMESET).

<FRAMESET ROWS=”20, 80, 20”>

COLS – число и размер столбцов.

NAME= - название кадра

<FRAME SRC=”yourfile.htm” NAME=”main”>

MARGINWIDTH= - он задает горизонтальный отступ между содержимым кадра и его границами. Наименьшее значение этого атрибута равно 1.

Атрибут MARGINHEIGHT= - задает поля в верхней и нижней части экрана.

Атрибут SCROLLING= задает возможность или невозможность прокрутки.

SCROLLING=NO – не будет прокрутки.

SCROLLING=YES – прокрутка будет.

SCROLLING=AUTO – автоопределение (броузер определит сам нужна ли прокрутка).

NORESIZE= запрет перемещения границы кадра.

SRC= - указать какая страница появится в каком кадре.

Атрибут TARGET= - переход к такому-то кадру.

Например: target=”main”.


Введение в кадровую структуру или что такое кадр.

Кадры – одна из наиболее интересных и полезных возможностей HTML. Кадры облегчают доступ к информации на Web-странице и делают её более полезной для читателей. Кадры помогают проектировать пользовательский интерфейс и эффективным образом организовывать расположение данных на экране.

Поскольку кадры появились недавно, некоторым пользователям они кажутся непривычными. Иногда читателям сложно перемещаться по странице с большим числом кадров.

Несомненно, некоторые дизайнеры злоупотребляют кадрами.

Ч то такое кадр?

В каком-то смысле кадр – это какая-то Web-страница. Вводя тег <FRAME>, дизайнер HTML-страницы выделяет отдельную область на экране броузера. В результате человек, просматривающий страницу, может изучать кадр независимо от остальной части страницы.


Задание простой кадровой структуры.

Для начала мы должны представить себе общий вид страницы – где и какого размера будут кадры. Затем можно подумать об их содержании. Ниже приводится код простой кадровой структуры с использованием тега <FRAMESET>. Обратите внимание: страница с кадровой структурой не содержит тега <BODY>

<HTML>

<HEAD>

<TITLE>Простая кадровая страница</TITLE>

</HEAD>

<FRAMESET COLS=”25%, 75%”>

<FRAME SRC=”page1.htm”>

<FRAME SRC=”page2.htm” NAME=”main”>

</FRAMESET>

<NOFRAMES>

Вы смотрите эту страницу броузером, не поддерживающим кадры. Мы рекомендуем вам обновить броузер, чтобы увидеть наши страницы во всей их красе.

</NOFRAMES>

</HTML>

Теперь разбираемся, что чего означает.

FRAMESET COLS изменяет задает размер фреймов.

FRAME SRC задает где находится каждый из фреймов.

Существуют браузеры не поддерживающие фреймы, в таких броузерах выводится информация после <NOFRAMES>.


“Волшебные” целевые кадры.

Имена “волшебных” кадров начинаются с символа подчеркивания (_); никакие другие кадры не могут так называться.

Кадр “_blank”

Если атрибут TARGET= ссылается на “_blank”, то документ всегда будет появляться в новом пустом окне.

Кадр “_self”

Имя “_self” указывает на то, что выбранная страница загружается в тот же кадр, где была активизирована ссылка. Если вы щелкнете мышкой на ссылке в кадре оглавления, выбранная страница окажется в том же самом кадре.

Кадр “_parent”

Документы, вызываемые по ссылке на “_parent”, появляются в родительской кадровой структуре. Это хороший способ окончательно сбить с толку читателей. Да и у вас могут возникнуть трудности в процессе форматирования страниц. Соблюдайте осторожность.

Кадр “_top”.

При указании ссылки “_top” документы появляются в отдельном окне вне кадра. Независимо от вашего желания броузер откроет новое окно просмотра.


Подготовка содержимого кадра.

Теперь давайте загрузим кадры с содержимым. Зададим страницу content.htm в левом кадре, где мы собираемся щелкать мышью, переключаясь между двумя страницами в правом кадре. content.htm – это обычная HTML-страница, построенная как оглавление. На самом деле мы можем взят готовую страницу с оглавлением и использовать её. Имейте в виду, что этот кадр узкий и высокий, так что страница, которая будет в него загружаться должна быть соответствующим образом спроектирована. Теперь мы должны определить, где будут появляться другие страницы при щелчке мышью на ссылке. Поскольку мы хотим, чтобы они отображались в правом кадре, добавим атрибут TARGET= (TARGET=”main”) в тег ссылки. Это означает, что когда пользователь щелкает по ссылке, вызываемая страница появляется в кадре main. Мы отображаем все страница в кадре main, поэтому давайте добавим атрибут TARGET=”main” во все теги ссылок в оглавлении. Если мы не определим атрибут TARGET, то страница появится там, где мы щелкнули мышкой, - в левом кадре, что нас не устраивает, хотя в какой-нибудь другой ситуации подобное поведение было бы очень кстати. Например, вы можете добавить ссылку “Другие пункты оглавления”, которая будет просто выводить следующие ссылки. Имеет смысл сделать оглавление подлиннее, чтобы читатели видели как можно больше ссылок. Но сейчас давайте ограничимся простым примером.

Создайте где-нибудь три файла.

В одном из них запишите оглавление, а в другом – нужную информацию.

А третий файл будет их объединять.

Оглавление будет в левой части, а информация – в правой.

<HTML>

<FRAMESET COLS=”25%,75%”>

<FRAME SRC=”content.htm”>

<FRAME SRC=”main.html”>

</FRAMESET>

</HTML>

Имена main.html и content.html можно заменить на любые другие.


Гиперссылки.

1) Как сделать гиперссылку?

C помощью команды <a href=”путь_к_объекту/объект”></a>

Например:

<a href=”command.com”></a>

2) Как связать с местом внутри файла?

А вот как:

<BODY>

<A HREF=”#Метка1”>текст</A>

………

<A NAME=”Метка1”></A>

Текст такой то.

</BODY>

3) Как сделать ссылку на E-mail?

Напишите:

<a href=”mailto:адрес”></A>

У меня было бы: <a href=”mailto:naymovivan@mail.ru”></A>

Пример:

<HTML>

<FONT SIZE=5>

Обо мне.

<br>

<font size=4>

Наумов Иван Владимирович.

<br>

E-mail:

<A HREF="mailto:inaymov@yandex.ru">inaymov@yandex.ru</A>

<br>

Гостевая книга:

<A HREF="http://inaymov.narod.ru/guestbook/">http://inaymov.narod.ru/guestbook/</A>

</HTML>

Выполнив эту программу, Вы получите следующий рисунок:


Гиперрисунки (кнопки):

Гиперрисунок – смесь гиперссылки и рисунка.

Код:

<a
href="http://www.gde-to-tam.ru"><img
src="http://www.kakoy-to-risunok.ru/papka/risynok.gif" border=0
alt="Nazvanie knopki."></a>

<a href="http://inaymov.narod.ru/utils/"><img src="pic\utils.gif" WIDTH=93 HEIGHT=38 ALT="Утилиты" border=0></A>

Напоминаю еще раз: width – размер по горизонтали, height – по вертикали, border – делать ли рамку, alt=”Утилиты” – какой текст писать, когда рисунок еще не загрузился.

При выполнении указанного выше кода Вы получите следующее:


Бегущая строка внизу.

Код:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<script language="JavaScript">

<!--

var scrollCounter = 0;

var scrollText = "<<< Добро пожаловать на www.какой-то сайт.ru >>>";

var scrollDelay = 45;

var i = 0;

while (i ++ < 140)

scrollText = " " + scrollText;

function Scroller()

{

window.status = scrollText.substring(scrollCounter++,

scrollText.length);

if (scrollCounter == scrollText.length)

scrollCounter = 0;

setTimeout("Scroller()",

scrollDelay);}Scroller();

//-->

</script>


Задание цвета текста и цвета фона бегущей строки.

Атрибут BGCOLOR=

Можно определить цвет фона бегущей строки, задавая либо названия цветов, либо шестнадцатеричные описания в системе rrggbb. Разрешается также указывать цвет пробегающего текста. Теги <FONT COLOR=></FONT> должны располагаться вне тегов <MARQUEE></MARQUEE>, то есть теги для бегущей строки оказываются вложенными в теги FONT.


Как организовать бегущую строку.

Чтобы организовать бегущую строку, наберите следующее:

<MARQUEE>Текст</MARQUEE>

Надо знать атрибуты:

Атрибут ALIGN=

Вы можете разместить текст в верхней (TOP), средней (MIDDLE) или нижней (BOTTOM) области бегущей строки.

Атрибут BEHAVIOR=

Без атрибута BEHAVIOR= текст в бегущей строке будет воспроизводиться справа налево. Атрибут может принимать следующие значения:

SCROLL – текст пробегает по экрану. Это значение по умолчанию.

SLIDE – текст выползает на экран и останавливается.

ALTERNATE – текст выползает, а затем прыгает взад-вперед в области бегущей строки.

Атрибут DIRECTION=

В какую сторону будет пробегать Ваш текст (LEFT или RIGHT).

Атрибут LOOP=

Можно определить, сколько раз Ваш текст будет пробегать по экрану. Например: LOOP=3 – 3 раза.


Как задать размер бегущей строки.

Атрибут HEIGHT=

Позволяет сделать область бегущей строки толще или тоньше. Высота может выражаться в пикселях, задаваться числом, или указываться в виде процентов от высоты экрана.

Атрибут WIDTH=

Атрибут WIDTH= позволяет сделать область бегущей строки длиннее или короче.

Атрибут HSPACE=

Атрибут задает ширину в пикселях левого и правого полей между областью бегущей строки и окружающим её текстом или графикой. Это атрибут бывает очень полезен при размещении бегущей строки в таблице.

Атрибут VSPACE=

С помощью атрибута VSPACE= задается размеру отступа в пикселях сверху и снизу от бегущей строки до текста или графики.


Настройка скорости показа.

Атрибут SCROLLAMOUNT=

Атрибут позволяет задать скорость перемещения текста.

При задании SCROLLAMOUNT=1 ваш текст будет тащиться по экрану.

Атрибут SCROLLDELAY=

Атрибут SCROLLDELAY= немного отличается от предыдущего. Он определяет время в миллисекундах до перерисовки текста бегущей строки. Комбинируя атрибуты SCROLLAMOUNT= и SCROLLDELAY=, вы можете подобрать оптимальную скорость показа строки.


Как добавить информацию для поисковиков.

Добавьте в html-файл две команды:

<META NAME="Keywords" CONTENT="ключевые слова">

<META NAME="Description" CONTENT="описание">

Ключевые слова (keywords) разделяются пробелами.

Описание (description) – описание данной страницы.


Как сделать перезагрузку с сервера каждые xxx секунд.

<HEAD>

<META HTTP-EQUIV="refresh" CONTENT=XXX>

</HEAD>

<BODY>

XXX – количество секунд.


Как сделать, чтобы при запуске страницы играла музыка.

Для этого используется команда:

<BGSOUND SRC="файл" loop=infinite>

Атрибут loop задает сколько раз играть.

Можно играть музыку 1 раз, а можно – всегда – со значением атрибута infinite.

Вот такой пример воспроизведет стандартный музыкальный файл моего сайта:

<BGSOUND SRC=”http://naumov-ivan.narod.ru/music/music.mid”>

Включите колонки и услышите музыку.

Вообще, при наличии микрофона, звуки можно использовать с пользой. Например, записать в файл фразу “Добро пожаловать на мой сайт!”.

Вообще, музыкальный файл может быть:

1) wav-файлом (стандартный Windows формат)

2) midi-файлом.

3) mp3-файлом.


Добавить рисунок.

<IMG SRC=”файл”> - добавить рисунок.

Внимание: старые броузеры поддерживают только формат gif и jpeg, хотя все современные могут поддерживать и bmp и png.

Вот так вот.

Совет: рисунки можно получить со сканера, либо, нажав PrintScreen получить копию экрана. Можно скачать с Интернета, но помните про авторские права.

<BODY BACKGROUND=”файл”></BODY> - делает рисунок фоновым.

Чтобы задать размер, используются атрибуты ”width” и “height”.

“Width” задает размер рисунка по горизонтали, а “height” – по вертикали.

Считается, что при использовании данных атрибутов, рисунок грузится быстрее.

alt=”текст” задаёт текст, который отображается, когда картинка еще не запустилась.

Здесь я думаю, пока всё ясно, картинку и пример приводить не стоит.


Ключевые слова.

Специальные символы.

Ключевое слово | Соответствующий символ
&lt; | <
&qt; | >
&quot; | “
&amp; | &
’’ (два апострофа) | “


Как задать фрагмент программы как текст.

<XMP>текст</XMP> - задать фрагмент программы HTML не как код, а как текст. Применяется в обучающих целях.

ПРИМЕР:

Например, вот такой текст позволит сделать стартовой страницу:

<xmp>

<A href="http://vanek.pp.ru/"

onclick="this.style.behavior='url(#default#homepage)';

this.setHomePage ('http://vanek.pp.ru'); return false;">

Сделать стартовой</A></TD>

</xmp>


Работа со списками.

Основные сведения о списках.

Списки бывают разные (с нумерацией, с точками, с римскими цифрами, буквами).

Вообще есть два метода, но я считаю, что одного хватит.

Тем более что он универсальный.

Этот метод заключается в следующем.

Вы пишите вот это. И вместо <OL TYPE=I> подставляете то, что Вам нужно (либо I – тогда будут использоваться римские цифры, либо A – тогда латинские буквы, либо 1, тогда будет список с нумерацией).

<UL TYPE=CIRCLE> - тег создает маркеры в виде полых квадратов. <UL TYPE=SQUARE> - тег создает сплошные квадратные маркеры.

<HTML>

<BODY>

<OL TYPE=I>

<LI>Европа

<LI>Азия

<LI>Америка

<LI>Австралия

<LI>Африка

<LI>Антарктида

</OL>

</BODY>

</HTML>

Иногда, правда, требуется сделать список с точками.

Для этого используйте следующий фрагмент:

<HTML>

<BODY>

<UL TYPE=SQUARE>

<LI>Европа

<LI>Азия

<LI>Америка

<LI>Австралия

<LI>Африка

<LI>Антарктида

</OL>

</BODY>

</HTML>

Написав сиё, Вы увидите следующее:

  • Европа
  • Азия
  • Америка
  • Австралия
  • Африка
  • Антарктида


Как указать, с какого места начать нумерованный список.

Для этого используется атрибут START=.

Атрибут START= используется для указания того, с какого места в заданном типе нумерации вы хотите начать нумерованный список.

Атрибут value=n присваивает номер определённому пункту списка.

Список.

<OL TYPE=1 start=5>

<LI>Текст1.

<li>Текст2.

<LI>Текст3.

<LI VALUE=10>Текст4.

При выполнении этого документа вы получите следующее:


Как сделать заголовок списка.

У списка может быть заголовок. Для добавления его стоит лишь ввести тег “заголовок списка” (List Header, <LH>), и над списком появится заголовок с красивым отступом от левого края. Закрывающий тег </LH> не требуется.


Как определить ширину пустого пространства между содержимым ячейки и её границами.

Для этого используется тег CELLPADDING=. Он определяет ширину пустого пространство между содержимым ячейки и её границами.

Изучив этот и предыдущие разделы, Вы можете делать трехмерные таблицы. Например, этот код выведет интересную трехмерную таблицу (рисунок под кодом).

<HTML>

<BODY>

<CENTER>

<TABLE CELLPADDING=10 BORDER=16>

<TR><TD ALIGN=CENTER>

<H1>Супер предложение</H1>

<H3>Только с 10.02.2002 по 17.02.2002!</H3>

<TABLE BORDER WIDTH=100%>

<TR>

<TD ALIGN=CENTER>

<I>При копии 6 дисков, мы копируем 1 бесплатно!</I>

</TD>

</TR>

</TABLE>

</TD>

Вот такой рисунок этого кода:


Как задать цвета таблицы.

Атрибут BGCOLOR=

Позволяет определить фоновый цвет для каждой ячейки таблицы.

В любом теге <TD> можно записать атрибут BGCOLOR= и задать тем самым для описываемой ячейки свой цвет фона.

Атрибут BORDERCOLOR=.

Internet Explorer позволяет определять цвет линий, обрамляющих таблицу или ячейку. Все, что для этого нужно сделать, это записать в теге <TABLE> или <TD> атрибут BORDERCOLOR=код цвета.

Атрибуты BORDERCOLORDARK= и BORDERCOLORLIGHT=.

Границы таблиц могут немного выступать, казаться как бы трехмерными.

Этот эффект обычно достигается сочетанием двух оттенков серого цвета. Атрибутами BORDERCOLORDARK= и BORDERCOLORLIGHT= можно задать два цвета для окраски трехмерных краев таблицы или любой ячейки внутри неё. Я люблю, чтобы мои таблицы казались немного выпуклыми, и поэтому, задавая BORDERCOLORDARK=black, добавляю резкости граничным линиям.

Теперь Вы легко можете написать, например, вот такой код:

<HTML>

<BODY>

<TABLE BORDER BORDERCOLORDARK=BLACK

BORDERCOLORLIGHT=GREEN

CELLPADDING=10

CELLSPACING=10>

<CAPTION>

<FONT SIZE=4>

<b>

Разноцветная рамка.

</b>

</CAPTION>

</FONT>

<TR>

<TD BORDERCOLORLIGHT=red BORDERCOLORDARK=BLUE>

<FONT SIZE=4>Какой-то текст 1.</FONT>

</TD>

<TD BORDERCOLORLIGHT=lightgreen BORDERCOLORDARK=violet>

<FONT SIZE=4>Какой-то текст 2.</FONT>

</TD>

</TR>

</TABLE>

Вот такой эффект можно легко сделать с

<BR>

использованием цветов.

</BODY>

</HTML>

Выполнив данный код, Вы получите следующее изображение:


Растягиваем строки и ячейки.

Атрибут COLSPAN=

Теги <TD></TD> и <TH></TH> модифицируются с помощью атрибута (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом COLSPAN=, чтобы растянуть её над любым количеством обычных ячеек.

Атрибут ROWSPAN=

Атрибут задает число строк, на которые растягивается ячейка. Если число >1, то кол-во строк должно находится под растягиваемой ячейкой. Нельзя поместить её внизу таблицы.


Выравнивание.

Атрибут COLSPEC=

Атрибут, используемый совместно с атрибутом UNIT=, определяет, сколько места занимает каждый столбец таблицы и как в нем выравниваются данные.

Применяется только в теге <TABLE>

COLSPEC= перечисляет все столбцы и для каждого из них задает выравнивание и размер. Для столбца (или ячейки) существует пять способов выравнивания: L – по левому краю, C – по центру, R – по правому краю, J – по правому и левому краю и D – по десятичной запятой. Если у вас пять столбцов, вы можете определить ширину и выравнивание для каждого из них следующим образом

<TABLE UNIT=PIXELS COLSPEC=”L10 C15 J25 D30”>

Атрибуты ALIGN= и VALIGN=

Теги <TR>, <TD> и <TH> можно модифицировать с помощью атрибутов ALIGN= и VALIGN=. Атрибут ALIGN определяет выравнивание текста и графики по горизонтали, т.е. по левому и правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:

ALIGN=BLEEDLEFT – прижимает содержимое ячейки вплотную к левому краю.

ALIGN=LEFT – выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом CELLPADDING=

ALIGN=RIGHT – выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом CELLPADDING=


Как задать нужное число строк и столбцов.

Теги <TR></TR>

Теги <TR></TR> (сокращение от Table Row – строка таблицы) окружают каждую строку таблицы. Если в таблице содержится два набора тегов <TR></TR>, в ней будут две строки. Весь текст, другие теги и атрибуты, которые вы хотите поместить в одну строку должны быть помещены между тегами <TR></TR>

Теги <TD></TD>

Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка должна быть окружена тегами <TD></TD>. Число тегов определяет число ячеек.


Основные методы создания таблиц.

Теги <TABLE></TABLE>

Таблица всегда начинается с тега <TABLE> и кончается тегом </TABLE>. Имейте в виду, что если начало и конец таблицы не определены, то никакие табличные команды не будут работать. Кроме того, помните, что тег <TABLE>, как и многие другие, автоматически переводит строку до и после таблицы.


Как сделать, чтобы текст не переносился на следующую строку.

Для этого используется атрибут NOWRAP=

Обычно любой текст в таблице, не помещающийся в одну строку ячейки, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <TH></TH> или <TD></TD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.


Определить ширину промежутков между ячейками.

Для этого служит атрибут CELLSPACING=.

Он определяет в пикселях ширину промежутков между ячейками.


Как убрать или изменить размер рамки.

Для этого служит атрибут BORDER=

Делает рамку.

TABLE BORDER=0 – без рамки.

BORDERCOLOR=BLACK – цвет.


Задаем ширину таблицы или какой-то ячейки.

Атрибут WIDTH=

Задает ширину таблицу или ширину ячейки или группы ячеек (пишем в <TR></TR> или <TH></TH>).

Атрибут UNIT=

Определяет единицы измерения, используемые при указании размеров.

UNIT=EN – en-пробелы.

UNIT=RELATIVE – используется для задания относительной ширины (в %).

UNIT=PIXELS – это значение применяется, когда вам нужно точно знать ширину столбца на экране.

<TABLE UNIT=PIXELS WIDTH=340> сформирует таблицу шириной 340 пикселей.


Как задать цвет текста и цвет фона.

1) Цвет текста изменяется следующей командой:

<FONT COLOR="RED">Красный текст.</FONT>

Вместо RED может стоять любой другой цвет.

2) Цвет фона задается командой:

<BODY BGCOLOR=ЦВЕТ></BODY>

3) Вставляем фон из файла в документ.

<BODY BACKGROUND="рисунок"></BODY>

Советы по фону:

1) Неправильно сделанный фон может мешать читать текст.

2) Не делайте в качестве фона слишком “крутой” рисунок – пользователь просто не станет ждать его загрузки и закроет окно.

3) Вообще, по мнению, некоторых профессионалов Web-дизайнеров, фон должен быть только на домашних страницах, а для серьезных проектов фон не приемлем.

Короче говоря, как в старой песне поётся:

Делайте сами, решайте сами, иметь или не иметь…


Как задать размер и определенное начертание шрифта.

1) Шрифт изменяется следующей командой:

<font face="arial black">

<FONT FACE=”ARIAL BLACK”>

Arial black - название шрифта, можно указать любой другой.

2) Упрощенно, говоря, размер шрифта задается командой:

<FONT SIZE=РАЗМЕР>

Таким способом, правда, чётко задать размер шрифта трудно.

Например: 16 в Word примерно соответствует 4 в данной команде.

3) Более простой способ задания размера (способ применяется при сохранении документа редактором Word) с помощью команды:

<span style='font-size:14.0pt'></style>

Здесь Вы можете задать чёткий размер шрифта.

(Написав 16.0pt вы и получите шрифт 16).

Не забывайте завершающий тег </style>!

4) Можно указать начертание (жирный, курсив, подчеркнутый).

При команде:

<B>Текст</B>

Текст будет отображен жирным шрифтом.

Команда

<I>Текст</I>

Отображает делает текст курсивом.

Курсив переводится с какого-то языка, как “Italic”.

А если требуется подчеркнуть текст, то

Используется команда:

<U>Текст</U>

Можно написать текст полужирным курсивом, комбинируя команды <B>текст</B> и <I>текст</I>

То есть:

<B><I>текст</B></I>

А если еще добавить к этому делу <U></U>, то получится подчеркнутый полужирный текст, выделенный курсивом.

5) Иногда используются верхние и нижние индексы, а также большой и маленький шрифт.

Чтобы сделать верхний индекс используется команда <SUP>, а чтобы сделать нижний, то команда <SUB>.

Чтобы сделать увеличенный шрифт, то используйте простой тег - <big>, а чтобы сделать уменьшенный, то <small> - соответственно.

V<SUB>m<BIG>= 22,4*10<SMALL><SUP>-23<BIG>моль<BIG>/<SUB>л

Этот пример выведет значение молярного объема (химия).


Перенос.

1) Перенос текста на следующую строку.
Создайте файл “second.html” с помощью

“Блокнота” и наберите в нём какой-нибудь текст.

Вы увидите, что текст находится на одной строке.

Чтобы перенести, используется тег (команда)

<BR>

Существует ситуации, когда разрывать текст нельзя ни в коем случае.

Для этого используется тег:

<NOBR>

Название этой фирмы нельзя разрывать ни в коем случае!

</NOBR>

2) ЧТОБЫ СДЕЛАТЬ АБЗАЦ, ИСПОЛЬЗУЕТСЯ КОМАНДА <P>.


Работа с заголовками.

1) Любой нормальный (и не очень) html-документ имеет заголовок.

Чтобы создать заголовок, используется тег

<title>Заголовок</title>

Если заголовок не указан, то в качестве заголовка указывается имя файла с путём.

Например, без этого тега заголовок моей главной страницы имел бы вид

http://naumov-ivan.narod.ru/index.html

Заголовки в тексте

Заголовки бывают разные (разного уровня).

Чтобы их различать, существует команда <H№>. Заголовок

первого уровня имеет название <H1>, второго - <H2>. После <H№> пишется текст

заголовка. А всё это дело завершается тегом </H№>

Пример:

<H1>Добро пожаловать! </H1>

И еще, чем больше номер, тем меньше размер заголовка.


ВЫРАВНИВАНИЕ ТЕКСТА.

Способ выравнивания очень важен с точки зрения читаемости и эстетики. Выравнивание играет очень большую роль, определяя каким образом текст будет располагаться на странице.

Обычно текст выравнивается по левому краю, а правый край – неровный. Однако можно выравнивать не только по левому краю, но и по центру и по правому краю.

Вообще, бывают следующие способы выравнивания:

· по левому краю: это стандартное выравнивание.

· по правому краю: при этом выравнивании левый край будет неровным.

· по центру. Центрирование текста создает визуальное выделение. И помните, что центрированный текст текст выглядит более интересно, но и читать его долгое время утомительно.

· По ширине. В этом случае и левый и правый край выравнивается.

1) Для выравнивания используются команды:

<P ALIGN=RIGHT>

Текст.

</P>

RIGHT – вправо

LEFT – влево

CENTER – центровка.

2) Все современные броузеры поддерживают предыдущих тег, но остались и такие броузеры, которые его не поддерживают. В таких ситуациях используют тег:

<CENTER>

3) Кроме HTML, для выравнивания можно использовать таблицы стилей. Для этого используется команда: text-align: value, где value – left (по левому краю), right (по правому краю), center (по центру), justify (по ширине).

Кроме того, существуют малоизвестные, но, тем не менее, полезные теги:

1) Использование тега списка (<DL>) напоминает применение отступов. Тег <DL> был создан для форматирования текста, определяющего какой-то термин.

2) <BLOCKQUOTE> добавляет поля слева и справа от текста. Это полезный тег, поскольку он позволяет расположить текст компактно в центре странице. При использовании <BLOCKQUOTE> несколько раз текст всё больше сжимается к центру.

3) Internet Explorer допускает применение атрибутов LEFTMARGIN=n и TOPMARGIN=n в теге <BODY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. TOPMARGIN= определяет верхнее поле. Число n показывает ширину поля в пикселях. Например, тег <BODY LEFTMARGIN=”40”> создаст на всей странице левое поле шириной 40 пикселей.

Иногда возникает необходимость использовать табуляцию. Для этого используется команда <TAB INDEWNT=n>, где n-число en-пробелов (en-пробел - приблизительно равен одной букве).