Язык html для начинающих.

Язык HTML - это не язык программирования, как полагают некоторые.
Язык HTML- язык гипертекстовой разметки теста.

Язык html предназначен для создания веб-страниц, т.е файлов,
размеченных таким образом, чтобы любые программы просмотров
(браузера) на компьютерах с разными системами видели их одинаково.

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

Уроки по языку html, размещенные здесь, дадут Вам самые минимальные
знания, необходимые только для того, чтобы начать. Со временем
Вам придется изучить все основательнее. Но, когда Вы поймете
самую суть применения языка html, Вам будет очень просто это
сделать.

Урок 1. Самые главные теги.

HTML - это язык гипертекстовой разметки. Это не язык программирования,
как полагают некоторые, а просто способ разметки текста.

Веб-страница представляет собой текстовый файл с расширением
*.html или *.htm.

Знаки разметки называются тегами, бывают парными и непарными.
Парные, в свою очередь, состоят из открывающего и закрывающего
тегов и обозначаются значками 〈...〉и 〈/...〉.

Любой html документ заключается между тегами 〈html〉〈/html〉состоит из двух основных частей: головы
(〈head〉... 〈/head〉) и тела (〈body〉...
〈/body〉). В голове находится название Вашего документа
(〈title〉... 〈/title〉) и некоторые служебные
теги, о них позже. Читатель видит только то, что находится
в теге (〈body〉... 〈/body〉). Выглядит все это
вот таким образом:

〈html〉

〈head〉

〈title〉

Здесь название Вашей странички

〈/title〉

〈/head〉

〈body〉

Здесь то, что видит Ваш читатель

〈/body〉

〈/html〉

Это самая наипростейшая страница. А теперь откройте блокнот
и напечатайте (не скопируйте, а именно напечатайте) то,
что Вы видите. Можно печатать все хоть в одну строчку, браузер
этого все равно не поймет, он реагирует только на команды.
Но чтобы Вам было удобней работать дальше, печатайте каждую
новую команду с новой строки.

Теперь нажимайте "файл", "сохранить как",
и в имени файла задайте любое имя вот так: имя.html

Все, блокнот закрываем, он нам больше не понадобится. Открываем
созданный веб-документ, видим в нем только фразу "Здесь
то, что видит Ваш читатель". Теперь во вкладке "Вид"
нажимаем "Просмотр html кода". У Вас открылся
блокнот с напечатанным Вами документом. Теперь можете между
открывающим и закрывающим тегами 〈body〉 и 〈/body〉 писать все, что Вам вздумается.

Написали, нажали "сохранить", в веб-документе
во вкладке "Вид" нажимаете "Обновить".
Теперь Вы должны увидеть то, что написали. Вот только это
будет один сплошной текст без абзацев.

Как менять размер шрифта, выделать жирным или курсором,
создавать абзацы - обо всем этом в следующем уроке.

А пока Вы можете готовить в текстовом формате выпуски своих
будущих рассылок. Через три-четыре недели Вы сможете оформить
в html-коде свой первый выпуск.

Урок 2. Форматирование текста.

Сегодня мы отформатируем текст, который Вы
написали между тегами 〈BODY〉 ... 〈/BODY〉 .

Сначала мы выделим заголовок текста. Это
делается при помощи тегов 〈H1〉 ... 〈/H1〉 Причем
цифра 1 означает самый крупный заголовок, с увеличением номера
Ваш заголовок будет становиться все мельче, и тот, что будет
заключен в теги 〈H6〉 ... 〈/H6〉 окажется самым
мелким.

Не забывайте, что эти теги предназначены
именно для заголовков. Как определить размер шрифта текста,
мы узнаем чуть позднее.

А пока придадим нашему сплошному, без всяких
абзацев тексту, приличный вид. Мы можем это сделать при помощи
тега 〈p〉 ... 〈/p〉, выделяющего параграф. Параграфы
текста, размеченного этими тегами, будут отделяться друг от
друга пустой строкой. Например:

〈p〉Зайку бросила
хозяйка, под дождем остался зайка, 〈/p〉 〈p〉со скамейки
слезть не мог, весь до ниточки промок.〈/p〉

Выглядеть в веб-документе это будет так:

Зайку бросила хозяйка,
под дождем остался зайка,

со скамейки слезть не мог, весь до
ниточки промок.

Но еще нам не мешало бы разделить каждый параграф на две
строчки, верно? Это можно сделать при помощи тега переноса
строки: 〈br〉. Этот тег непарный, то есть закрывающего
тега не имеет.

〈p〉Зайку бросила хозяйка, 〈br〉под
дождем остался зайка, 〈/p〉 〈p〉со скамейки слезть
не мог, 〈br〉весь до ниточки промок.〈/p〉

Вот что у нас получилось:

Зайку бросила хозяйка,


под дождем остался зайка,

со скамейки слезть не мог,

весь до ниточки промок.

Мы подошли к незнакомому слову: атрибут.
Атрибут указывается в открывающем теге и определяет его дополнительные
возможности.

Попробуем изменить выравнивание нашего параграфа.
По умолчанию текст выравнивается по левому краю. Если мы хотим
это изменить, мы можем воспользоваться атрибутом align. Это
делается так:

〈p align="center"〉 - выравнивание по центру,


〈p align="left"〉 - выравнивание по левому
краю,

〈p align="right"〉 - выравнивание по правому
краю,

〈p align="justify"〉 - выравнивание по ширине
страницы.

〈p align="center"〉Зайку
бросила хозяйка, 〈br〉под дождем остался зайка, 〈/p〉 〈p
align="left"〉〉со скамейки слезть не мог,
〈br〉весь до ниточки промок.〈/p〉. И вот
что вышло:

Зайку бросила хозяйка,

под дождем остался зайка,

со скамейки слезть не мог,


весь до ниточки промок.

Для того, чтобы выделить часть текста жирным
или курсивом (у меня в прошлом выпуске написано почему-то
курсором, прошу прощения за опечатку), мы используем теги
〈strong〉жирный〈/strong〉
и 〈em〉 курсив〈/em〉.
Некоторые знают теги 〈b〉жирный
〈/b〉 и〈i〉курсив〈/i〉.
Это означает то же самое, но устаревающий вариант, который
также применяется, но лучше привыкать к новому. В эти теги
мы заключаем непосредственно тот текст, который хотим таким
образом выделить.

〈p〉Зайку 〈strong〉бросила〈/strong〉
хозяйка, 〈br〉под дождем 〈em〉остался зайка〈/em〉,
〈/p〉

И получилось:

Зайку бросила хозяйка,


под дождем остался зайка,

Маленькие уточнения. Неважно, какими буквами
Вы пишете теги, маленькими или заглавными. И атрибут выравнивания
Вы точно так же можете применить и к своему заголовку.

Итак, Вы можете придать своему набранному
тексту приличный читаемый вид. Если это еще не выпуск рассылки,
то Вам следует поспешить. В следующем уроке мы рассмотрим
тег 〈font〉, который даст Вам возможность определить
название, размер и цвет используемых шрифтов, а это значит,
что самый простенький выпуск рассылки Вам будет сделать уже
под силу.

Урок 3. Определение шрифта, его размера и цвета.

Сегодня мы рассмотрим тег ⟨font⟩
... ⟨/font⟩. Он позволяет с помощью своих атрибутов
определить, какой шрифт будет использоваться, его размер и
цвет.

Как Вы помните, атрибут ставится в открывающем теге.

Атрибут face. Определяет гарнитуру
шрифта. Здесь не стоит увлекаться разными экзотическими шрифтами.
Их может не оказаться у того, кто будет читать Ваш текст.
Лучше пользоваться легкими для чтения моноширинными (все буквы
одной ширины) шрифтами типа tahoma, verdana.

Например, ⟨font face="arial"⟩.

Атрибут size. Определяет размер шрифта и принимает значения
от 1 до 7. По умолчанию равен 3.

Например, ⟨font size="4"⟩

Атрибут color. Определяет цвет. Может принадлежать и другим
тегам, где нужно обозначить цвет.

Например, ⟨font color="blue"⟩.

Цвет можно определять как английским названием, так и выбирать
из палитры цветов. Палитру цветов Вы можете скачать здесь:
http://www.artlebedev.ru/tools/colors/

Например, ⟨font color="#CC0000"⟩

Атрибуты можно объединять. ⟨font
face="arial" size="4" color="#336699"⟩.

Зайку ⟨font size="5"⟩"бросила⟨/font⟩
хозяйка. ⟨font face="arial" size="4"
color="#336699"⟩.И зачем она это сделала?⟨/font⟩

И вот что получилось:



Зайку бросила хозяйка. И
зачем она это сделала?

И еще немного о форматировании текста.
Иногда нужно части текста придать вид цитаты, то есть сделать
отступы справа и слева. Для этого нужно заключить этот текст
между тегами ⟨blockquote⟩ ...⟨/blockquote⟩.
И Ваш текст приобретет вид этого параграфа.

В следующем выпуске рассылки мы поговорим
о ссылках. Но Вы уже можете выпустить свой первый выпуск,
пусть даже и без ссылок. Чтобы освежить в памяти, что для
этого нужно сделать, Вы можете зайти на мой сайт и посмотреть
7-ой выпуск этой рассылки.

Те, кто решился и сделал, не стесняйтесь,
пишите. Ведь опубликование адреса Вашей рассылки прибавит
Вам подписчиков. А разве не это наша цель?

Урок 4. Свойства шрифта.

font-family - определяет тип (название)
шрифта, например:

h1{font-family: verdana;} - заголовок
h1 выполняется шрифтом verdana

font-size - задает размер шрифта,
определяется в пикселах, милиметрах, сантиметрах, процентах от базового
размера...

p{font-size: 15px} - параграфы будут
напечатаны шрифтом размером в 15 пикселей.

font-style - задает стиль шрифта.


font-style: normal; - нормальный стиль,
используется по умолчанию.

font-style: italic; - курсив.

font-style: oblique; - наклонный шрифт.

font-weight - задает вес шрифта, т.е.
толщину написания букв.

font-weight: normal; - нормальный,
используется по умолчанию.

font-weight: lighter; - немного светлее
нормального.

font-weight: bolder; - немного темнее
нормального.

font-weight: bold; - жирный

font-weight: 100; - задается числами
100, 200, 300, 400, 500, 600, 700. 400 соответствует нормальному
начертанию, 700 - жирному.

Например:

h1
{font-family : Verdana; font-size : 18px; font-style: italic;
font-weight: bold;} -
все заголовки h1 будут выполнены шрифтом verdana размером 18 пикселей
курсивом жирным шрифтом.

.al {font-family
: Verdana; font-size : 18px; font-style: italic; font-weight:
bold;} - все элементы, которым будет присвоен
class="al" будут выполнены шрифтом verdana размером 18
пикселей курсивом жирным шрифтом.

Как прикрепить таблицу стилей к документу, в котором она будет
использоваться, Вы знаете из урока 2.

Если что-то вызывает затруднения, пишите, возможно, что-то нужно
рассмотреть более подробно и подкрепить дополнительными примерами.

Урок 5. Списки.

Сегодняшняя наша тема - списки. Списки бывают нумерованные
и ненумерованные.

Нумерованные списки располагаются внутри тегов 〈ol〉... 〈/ol〉. По умолчанию нумерация будет выполняться
арабскими цифрами, начиная с 1. Каждая строчка внутри этого
списка располагается между тегами 〈li〉... 〈/li〉.
Причем тег 〈/li〉является необязательным, может ставиться,
но если нет, то не важно.

Например:

Если мы хотим, чтобы нумерация списка производилась
по-другому, то нужно добавить к тегу 〈ol〉атрибут type,
определяющий стиль нумерации.

type="A" – заглавные буквы A, B, C ...

type="a" – строчные буквы a, b, c ...

type="I" – большие римские числа I, II, III ...

type="i" – маленькие римские числа i, ii, iii ...

type="1" – арабские числа 1, 2, 3 ..., применяется
по умолчанию.

Если нам нужно начать нумерацию не с первой цифры или буквы,
то здесь пригодится атрибут start, приравненный к значению,
которое будет идти первым.

Например:

Ненумерованный список выглядит точно так же, но вместо тегов
〈ol〉... 〈/ol〉мы используем теги 〈ul〉...
〈/ul〉. Здесь атрибут type определяет форму пули перед
строчками списка.

type="disk" – закрашенный кружок, применяется по
умолчанию

type="circle" – незакрашенный кружок

type="square" – квадратик

Например:

Списки можно
и вкладывать друг в друга. Например:

Урок 6. Таблицы.

Вот мы и добрались до таблиц. Что они нам дают?

Таблицы - это замечательное средство для верстки веб-страниц.
Вот посмотрите пример использования таблицы в этой рассылке.

Таблицы строятся при помощи всего трех тегов.

Саму таблицу определяют открывающий и закрывающий теги ⟨TABLE⟩...⟨/TABLE⟩.

Внутри этого контейнера лежат теги, определяющие строки ⟨TR⟩...⟨/TR⟩.
Сколько строк в таблице, столько раз они и повторяются.

Внутри тегов ⟨TR⟩...⟨/TR⟩ лежат теги ⟨TD⟩...⟨/TD⟩,
определяющие ячейки, точно так же, сколько ячеек, столько
и тегов ⟨TD⟩...⟨/TD⟩.

На конкретном примере это будет выглядеть вот так:

По умолчанию таблица будет расположена у
левого края экрана. Для того, чтобы разместить ее по-другому,
мы можем вернуться к уже знакомому нам атрибуту align. Помните,
мы использовали его для форматирования текста? Здесь все делается
точно так же.

⟨TABLE align="center"⟩Ваша
таблица будет находиться в центре экрана⟨/TABLE⟩.

Как видите, ничего
нового. Стоит заметить, что здесь находится в центре сама
таблица, а то, что внутри - располагается по умолчанию в ячейках
с левой стороны. Поэтому, если Вы хотите выровнять текст внутри
ячеек по-другому, Вам просто нужно будет снова воспользоваться
атрибутом align для ячейки. ⟨TD
align="center" ⟩Текст в ячейке выравнивается
по центру⟨/TD⟩.

Попробуйте создать самостоятельно такую таблицу
и напишите что-нибудь в ячейках. Вы увидите, что у Вас будут
меняться размеры таблицы и ячеек. Чтобы этого не происходило,
мы должны задать их размеры. Это делается с помощью атрибутов
WIDTH (ширина) и HEIGHT (высота). Эти атрибуты принимают значения
в пикселах или процентах. Высоту обычно можно и не устанавливать,
ячейки и сама таблица будут вытягиваться вниз по мере их наполнения,
а вот ширину приходится определять почти всегда. Атрибуты
высоты и ширины применяются одинаково как для самой таблицы,
так и для ячеек в ней.



⟨TABLE align="center" WIDTH="50%"
HEIGHT="200"⟩Ваша таблица будет находиться в
центре, займет 50% экрана в ширину и ее высота будет 200px⟨/TABLE⟩

Пока все. А в следующем выпуске мы будем определять
рамки и поля нашей таблицы.

Урок 7. Таблицы. Продолжение.

Будем считать, что простую таблицу Вы уже умеете делать.

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

Атрибут border определяет толщину
линии в пикселях. Мы может задать ее и равной 0, тогда наша
рамка станет невидимой.

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

⟨TABLE border="1" bordercolor="#006633"⟩

⟨TR⟩

⟨TD⟩Первая ячейка⟨/TD⟩

⟨TD⟩Вторая ячейка⟨/TD⟩

⟨/TR⟩

⟨/TABLE⟩

Мы получили таблицу, состоящую из одной
строчки, в которой расположены две ячейки, рамки таблицы зеленые
толщиной 1 px.

Точно так же мы можем и задавать цвет поля таблицы, делаем
это при помощи атрибута bgcolor

⟨TABLE border="1" bordercolor="#006633"
bgcolor="#FFFF00"⟩

⟨TR⟩

⟨TD⟩Первая ячейка ⟨/TD⟩

⟨TD⟩Вторая ячейка⟨/TD⟩

⟨/TR⟩

⟨/TABLE⟩

И вот что получили:

Цвет мы можем определять и для каждй ячейки отдельно.

⟨TABLE border="1" bordercolor="#006633"⟩

⟨TR⟩

⟨TD bgcolor="#FFFF00"⟩Первая ячейка⟨/TD⟩

⟨TD bgcolor="#66FFFF"⟩Вторая ячейка⟨/TD⟩

⟨/TR⟩

⟨/TABLE⟩

А в следующем выпуске мы будем делать сложные
таблицы.