HTML - hypertextmarkuplanguage
или, по-русски, язык разметки гипертекста - никакой на самом деле не язык программирования, а набор инструкций для программы-просмотрщика (броузера). Чтобы писать странички непосредственно в html-коде вам потребуется обычный текстовый редактор или, что удобнее, такая программа, как, например, HomeSite или Arachnophilia (ни в коем случае не MicrosoftFrontPage или NetscapeComposer - эти программы в первую очередь сделаны для опосредованного, "визуального" создания страничек, то есть в них с собственно html-кодом вы можете вовсе не иметь дело; но они могут не все, допускают кучу бесящих издержек и создают огромное количество лишних участков кода).
Ещё раз: хтмл - не язык программирования. Имея "словарик", хтмл-код можно читать, как относительно связный текст. И ещё одно: "делание" страничек требует минимальных систематических знаний по хтмл-у, не надо запоминать всё, что написано в многочисленных руководствах по хтмл-у. Решайте задачи по мере их возникновения.
Поехали
Язык хтмл состоит из т.н. "тэгов". (TAG - бирка, метка). Большая часть тэгов состоит как бы из двух частей, между которыми содержится текст, который увидит посетитель странички, свойства этого текста описываются этим тэгом. В первой части содержится само "имя" тэга и, если это нужно, некоторые параметры. Вторая часть содержит только имя тэга с предваряющей его косой чертой. Например: </pre> Такая конструкция сигнализирует броузеру, что к последующему содержанию странички этот тэг (в нашем случае тэг "<pre>") уже не относится.
Некоторым тэгам закрывающая часть не нужна, например, тэгу <br>, который указывает броузеру, что следующий за ним текст следует начать выводить с новой строки.
Пример:
<html>
<head>
<title>Стишок</title>
</head>
<body>
Однажды, в студеную зимнюю пору
Сижу за решеткой, в темнице сырой.
Гляжу, поднимается медленно в гору
Вскормленный в неволе орел молодой.
И шествуя важно, в спокойствии чинном,
Мой верный товарищ, махая крылом,
В больших сапогах, в полушубке овчинном,
Кровавую пищу клюет под окном!
</body>
</html>
Разбор примера:
<html> - указывает броузеру, что файл, который к нему попал - не просто текстовый, а документ html.
В пределах тэга <head>...</head> указывается, в основном, служебная информация, о ней - при необходимости, позже. Единственное, что следует отметить, это находящийся в этих пределах тэг <title>...</title> - В нём указывается "Заголовок" странички, который выводится в синей полосе вверху окна броузера.
В пределах тэга <body>...</body> находится как раз то, что будет собственно в окне броузера. "Перевод" примера:
<Начало документа хтмл>
<блок служебной информации>
<заголовок странички>Стишок<конец заголовка>
<начало тела документа>
Однажды, в студеную зимнюю пору
Сижу за решеткой, в темнице сырой.
Гляжу, поднимается медленно в гору
Вскормленный в неволе орел молодой.
И шествуя важно, в спокойствии чинном,
Мой верный товарищ, махая крылом,
В больших сапогах, в полушубке овчинном,
Кровавую пищу клюет под окном!
<конец тела документа>
<конец документа хтмл>
Если скопировать содержимое примера в отдельный файл, назвать этот фал "как_нибудь.htm" и открыть этот файл в броузере, вы увидите ваш стишок, записанный в одну строку. Дело в том, что хтмл не воспринимает символ перевода каретки на новую строку. Кроме того, он не воспринимает более одного пробела, поэтому не важно, сколько пробелов между словами было в исходном тексте - на экране броузера останется только один. О том, что нужно делать, когда нужно больше пробелов, будет сказано ниже.
Чтобы разбить текст на строки, нужно в конце каждой строки поставить тэг <br> (о нём мы уже вскользь упоминали). Вот так:
<html>
<head>
<title>Стишок</title>
</head>
<body>
Однажды, в студеную зимнюю пору<br>
Сижу за решеткой, в темнице сырой.<br>
Гляжу, поднимается медленно в гору<br>
Вскормленный в неволе орел молодой.<br>
И шествуя важно, в спокойствии чинном,<br>
Мой верный товарищ, махая крылом,<br>
В больших сапогах, в полушубке овчинном,<br>
Кровавую пищу клюет под окном!
</body>
</html>
Теперь ваш стишок выглядит уже более привычно для глаза.
Попробуем усложнить задачу. Заствим вывести текст белым шрифтом на черном фоне. Задать цвет шрифта можно несколькими способами: первый, который мы рассмотрим вначале, сделает белым весь текст на страничке (если для отдельного блока текста не указано иного - этот случай рассмотрим вторым). Есть ещё один способ - использовать css, но об этом позже.
Оба примера, которые мы собираемся привести, требуют от нас использования т.н. параметров тэгов.
ПАРАМЕТРЫ ТЭГОВ
Это такие инструкции, которые сами по себе тэгами не являются и отдельно не используются, а описывают свойства содержимого (например, текста или картинки) какого-то тэга. Например, чтобы сделать весь текст на страничке белым необходимо к тэгу body добавить параметр text="white". Делаетсяэтотак:
<html>
<head>
<title>Стишок</title>
</head>
<body text="white">
Однажды, в студеную зимнюю пору<br>
Сижу за решеткой, в темнице сырой.<br>
Гляжу, поднимается медленно в гору<br>
Вскормленный в неволе орел молодой.<br>
И шествуя важно, в спокойствии чинном,<br>
Мой верный товарищ, махая крылом,<br>
В больших сапогах, в полушубке овчинном,<br>
Кровавую пищу клюет под окном!
</body>
</html>
Если открыть такую страничку, то скорее всего вы не увидите ничего - т.к. белые буквы сольются с фоном. Сделаемфончерным:
<html>
<head>
<title>Стишок</title>
</head>
<body text="white" bgcolor="black">
Однажды, в студеную зимнюю пору<br>
Сижу за решеткой, в темнице сырой.<br>
Гляжу, поднимается медленно в гору<br>
Вскормленный в неволе орел молодой.<br>
И шествуя важно, в спокойствии чинном,<br>
Мой верный товарищ, махая крылом,<br>
В больших сапогах, в полушубке овчинном,<br>
Кровавую пищу клюет под окном!
</body>
</html>
Договоримся называть ту часть параметра тэга, которая пишется без кавычек и обозначает, что собственно мы хотим изменить (напримерbgcolor или text) - собственно параметром, а то, что мы пишем в кавычках имея в виду то, каким образом мы хотим изменить параметр - значением параметра. Легко догадаться, что поменяв в примере black и white на, например red, blue, gray, yellow вы измените цвета фона или текста. Можете поупражняться.
А что, если нужно задать определённые свойства не всему тексту на страничке, а только отдельному куску (второй пример)? Это тоже можно сделать несколькими способами.
Например, изменить свойства шрифта. Для нужно сделать так:
<font>кусок текста, который мы изменяем</font>
Это для начала. Теперь нужно дописать к тэгу <font> необходимые параметры, например:
размер size (значения: 14pt - "четырнадцатый" - вы можете ввести любое число, +1 - увеличить на 1 пункт, -1 - уменьшить на 1 пункт)
цвет color (значения: black, white, red, green, blue и т.д. или шестнадцатеричный код цвета - как его указывать и откуда брать расскажу ниже)
Вывести текст курсивом можно так: <i>текст</i>
i - от слова italic (так легче запомнить)
<html>
<head>
<title>Стишок</title>
</head>
<body text="white" bgcolor="black">
<font size=+1 color="blue">
Однажды, в студеную зимнюю пору<br></font>
<i>Сижу за решеткой, в темнице сырой.</i><br>
<strong>Гляжу, поднимается медленно в гору</strong><br>
<font color="red"><i><strong>Вскормленныйвневолеорелмолодой.</strong></i></font><br>
И шествуя важно, в спокойствии чинном,<br>
<strong><font color="red"><i>Мойверныйтоварищ, махаякрылом,</i></strong></font><br>
В больших сапогах, в полушубке овчинном,<br>
Кровавую пищу клюет под окном!
</body>
</html>
Обратите внимание на четвёртую и шестую строчки: в окне браузера они выглядят одинаково, а если вы взглянете на код, то увидите, что тэги, которые их описывают, расположены в разном порядке (но они тоже одинаковы). Вывод: порядок - не важен. Он может быть важен для вас - чтобы не запутаться.
Теперь о шестнадцатеричных кодах цветов. Понятно, что всю гамму оттенков не опишешь словами red, green, blue и т.д. Чтобы задать произвольный цвет (не важно, чему - фону, тексту, бортику таблицы или чему-то ещё) нужно использовать не словесное обозначение, а упомянутый код.
Шестнадцатеричный код цвета легко узнать почти в любой графической программе. Например, в Photoshop достаточно один раз щелкнуть на образце текущего цвета внизу панели инструментов, вызвав диалог выбора цвета. Параметры, обозначенные буквами “R”, “G” и “B” («red», «green» и «blue» соответственно) вы, переведя их в шестнадцатеричную систему (делается на калькуляторе, для особых фанатов – можно и вручную), можете использовать как параметр для тэга, записав их в таком же порядке и предварив символом “#”. Вот так например:
<bodybgcolor=”#123456”>
Последние версии Фотошопаделают всё сами и в окошке выбора цвета указывается готовый код выбранного цвета.
ВЫРАВНИВАНИЕ ТЕКСТА
Обычно текст на страничке расположен кусками, каждый кусок - абзац. В хтмл-е абзац (paragraph) выглядит так: <p>текст абзаца</p>
Можно задать свойства всему тексту абзаца, с помощью следующих параметров:
выравнивание align (значения: left - по левому краю, right - по правому, center - по центру, justify - по ширине)
Также параметры выравнивания можно задать для ячейки таблицы, содержащей выравниваемый текст (см. ниже).
ССЫЛКИ
Чтобы сделать ссылку, пользуемся тэгом <a>:
<ahref="http://yandex.ru">Яндекс</a>
Доступные параметры:
target - указывает, где будет открываться страничка, на которуюю ты ссылаешься (значения: "_blank" - в новом окне, при использовании фреймов (расскажу ниже) параметру можно присвоить значение имя соответствующего фрейма)