Учебник по HTML

Оглавление

Самое-самое начало
    Урок первый
    Вообще
    Таблицы
Самое-самое главное
    Ссылки
        Внутренние
        Внешние
        Смысл бреда
Самый-самый первый сайт
        Сначала придумаем идею
        Релизация
Приплыли



Самое-самое начало

Урок первый

Нипишем свой первый html-код.

По традиции это будет вывод на экран приветствие миру: "Hello World!"

Откроем Блокнот (или любой другой редактор, кроме Word`a, конечно) и напишем: Hello World!
Да именно так, всего два слова и ничего более. Никаких там тэгов и прочей премудрости.
Сохраним эти два слова в файл под названием "1.html".
Кавычек только в имени файла не ставьте.

Вот получился файл 1.html. Нажмите на нем мышкой два раза быстро.

Открылся браузер (программа, с помощью которой по интернету гуляют), а в нем вверху слова: Hello World!
Не открылся? Не получается двойной клик? Нажмите на клавиатуре большую такую кнопку Enter.
Открылся? Можете гордится - это вы написали!

Нажмите на файл 1.html теперь не левой, а правой кнопкой мыши. В меню, которое неизвестно откуда выпадет, выбирайте Открыть с помощью, ну и далее конечно Блокнот.
Можно редактировать ваше произведение.
Например накалякать что нибудь вроде:



     <ssd11> <dfg
df>



                 Hello <s3453
                 45>                  World!



     <oxoxo>



Здесь полно пробелов абзацев и сумашедших тегов. Только это все зря.
Если сохранить это безобразие под именем 2.html и открыть его в браузере (Опять не получается? О, господи, ну выбирайте его мышей, а потом нажмите на клавиатуре Enter), то вы увидите все ту же строгую надпись "Hello World!" в левом верхнем углу окна. И ничего больше.

Ясно, что браузер игнорирует глупости: отступы, пробелы, абзацы, переносы строк и особенно непонятные, неправильные тэги.

Уф, упарился! Все урок окончен. Это был первый и последний. Больше никаких уроков.
Так... сократовские беседы.



Вернуться к оглавлению

Вообще

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

Итак открываем Блокнот и пишем:

<html>
<head>
     <title>Hello World!</title>
</head>
<body>
     Hello World!
</body>
</html>

Сохраним, это в файл 3.html
Посмотрим в браузере. Видим все тоже самое: Hello World!
Застрелиться! Пишем-пишем, а все одно и тоже на экране. Когда же что-нибудь новенькое произойдет?

Скоро уж...
А пока вы научились писать правильный HTML-код:
Вначале файла <html> в конце - </html>

Head - голова, значит между <head> и </head> - заголовки файла

Title - один из них. То что находится между <title> и </title> будет выведено в заголовке окна браузера. Т.е. в самом верху на синем (или какой там у вас) фоне шапки окна. Вот, за который можно мышей взять и потаскать окно туда-сюда.

Кстати сравните как выглядять файлы e1.htm, e1_1.htm и e2.htm в браузере. Видно, что у первых двух никакого заголовка в окне нет (кроме стандартного Internet Explorer или Mozilla FireFox, т.е. название самого браузера), а в последнем гордо реет: Hello World!, а уж потом только Internet Explorer.

Body - это тело (боди-арт, например), значит основная часть html-страницы живет здесь. Собственно все, что предназначено для показа зрителям, сюда и нужно помещать.



Вернуться к оглавлению

Таблицы

Открываем Блокнот и пишем (можно отсюда прямо скопировать, но ручками-то надо научится работать, опечатки выловить, раз десять поправить, чтобы вышло то, что требуется, а в общем, конечно, как хочешь):

<html>
<head>
    <title>Hello World!</title>
</head>
<body>
    <table border=0 align="center" bgcolor=#d9d9d9>
        <tr>
            <td>Hello</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>World!</td>
        </tr>
    </table>
</body>
</html>

Сохраним, это в файл 4.html

В браузере это должно выглядеть так (серый прямоугольник в верху и в центре окна):

Hello
World!


Если выглядит иначе, категорически требую добиваться результата, до полной победы. Либо умри смертью храбрых и забудь про HTML.

Наконец-то что-то новенькое, да? Будем разбираться?

    <table> и </table> - начало и конец таблиы;
    border - толщина линий разлиновки таблицы, если border=0 - линий совсем не видно;
    align - центровка таблицы по горизонтали, возможные значения: center, left, right;
    bgcolor - цвет заливки задника, фона (background), #d9d9d9 - серый, можно и словами: red - красный;

    <tr> и </tr> - начало и конец горизонтального ряда ячеек;
    <td> и </td> - начало и конец одной ячейки.

Таблица состоит из ячеек, как дом из квартир. Каждая ячейка обозначается в HTML так: <td>СОДЕРЖИМОЕ ЯЧЕЙКИ</td>
Содержимое может быть: пустота, текст, картинка, другая таблица.

Ячейки не живут по отдельности они, как квартиры в многоэтажке сгрупированы в ряды (этажи). Даже если это частный дом - у него все же есть, как минимум один этаж.
Ряды обозначаются так:
Первый ряд: <tr><td>ячейка 1</td><td>ячейка 2</td></tr>
Второй ряд: <tr><td>ячейка 3</td><td>ячейка 4</td></tr>

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

И вот еще что: ВСЮ страницу можно заверстать в таблице. То есть, когда ты проектируешь страницу (дом), ты можешь представить ее в виде таблицы. Тогда у тебя сразу может выплыть, три ряда: шапка (крыша), основное место посредине (жилые квартиры-ячейки) и подвал (он и в африке подвал). Почти все сайты построены по этому принципу.

Пока все ясно? Едем дальше.

Усложним код:

<html>
<head>
    <title>Hello World!</title>
</head>
<body>
    <table border=1 align="center" cellpadding=0 cellspacing=0>
        <tr>
            <td align="right" valign=bottom bgcolor=blue><font color=#ffffff>Hello</font></td>
            <td><img src="images/picture.jpg" border="0"></td>
        </tr>
        <tr>
            <td align=center height="261" width="337" background="images/picture.jpg"><font size=+5 color=#fff000>Hello World!</font></td>
            <td valign=top bgcolor=green><font color=#ffffff>World!</font></td>
        </tr>
    </table>
</body>
</html>

Hello
Hello World! World!


Но добиться этого будет нелегко.

Во первых: в той папке, где на вашем компьютере живет 5.html (надеюсь, это не Рабочий стол?) нужно создать вложенную папку images
Во вторых: нужно нажать правой кнопкой мыши верхнюю фотографию нашей планеты (поверх которой нет никакой надписи) и Сохранить изображение как... в только что созданную папку images

После этого, если у вас на компьютере открыть 5.htm (в браузере, а не в Блокноте), можно насладится дивной картиной, созданной вашими собственными руками.



Самое-самое главное

Вернуться к оглавлению

Ссылки

В HTML и вообще в Web`е нет ничего важнее ссылок. Это базис на котором покоится всё в паутине.

На html-страницах встречаются ссылки двух типов:
Сейчас разберем все по косточкам.

Внутренние ссылки устроены, как ни странно, сложнее внешних, хотя и являются их частью.
Вдумайтесь в эту фразу? Бред не так-ли? А ведь это чистая правда.

Начнем все-таки с внутренних:



Вернуться к оглавлению

Ссылки внутренние

Внутренняя ссылка состоит из двух частей: (Я бы назвал якорь меткой, на которую указывает хреф, но кто-то уже перевел это, как якорь. Так и осталось.)

Синтаксис нужно соблюдать, т.е. в самой ссылке после слова href вплотную знак равенства, дальше сразу знак решетка, и опять без пробела латинское и/или цифровое имя якоря.
Аналогично и в якоре - никаких пробелов и русских букв, иначе работать не будет.
А вот то, что написано между начальным <a ...> и закрывающим тэгом </a> совершенно неважно: пиши что хочешь, хоть ничего не пиши. Часто так и делают в якоре (я все же ставлю пробел).
В самой ссылке, что-то поставить нужно обязательно, иначе на что будет нажимать пользователь страницы?
Кстати, это не обязательно должен быть короткий (1-2 слова) текст. Допускаются картинки и даже довольно большие тексты с картинками вперемежку. Хотя это, конечно, дурной тон.

Ну что, попрыгаем? Нажимай на синее подчеркнутое. Не бойся - далеко не улетишь.

здесь якорь ВЕРХ    здесь ссылка ВНИЗ
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
заполнитель
здесь якорь НИЗ    здесь ссылка ВВЕРХ <= нажми сюда чтобы вернуться.

А вот исходный текст или, как говорят, код этого фрагмента (где прыгают вверх-вниз). Заполнитель укорочен (он вообще нужен только чтобы создать расстояние между ссылками, без этого и прыжка никакого не получится):

    <a name=up>здесь якорь <b>ВЕРХ</b></a>    <a href=#down>здесь ссылка ВНИЗ</a><br>
    заполнитель<br>
    <a name=down>здесь якорь <b>НИЗ</b></a>    <a href=#up>здесь ссылка ВВЕРХ</a><br>

<br> - бээрки, в конце каждой строки - это, если кто не знает, перевод каретки или, попросту, переход на новую строку. Без них в браузере весь текст вытянется в одну строку и будет переноситься только при столкновении с правой границей окна.

Создайте файл 6.html и наберите в нем этот текст с сылками, только заполнитель продублируйте несколько раз (не меньше тридцати, чтобы низ текста ушел за границу окна).
Откройте 6.html в браузере и попрыгайте. При этом обратите внимание на: Буковки эти называются URL или адрес HTML-страницы. По ним собственно браузер и ходит.

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



Вернуться к оглавлению

Ссылки внешние

Внешние локальные, т.е. в пределах сайта.

Пример: в исходнике пишется так: <a href=7.html>нажимать здесь</a>
    href - это команда - перейти;
    7.html - это URL, т.е. адрес куда перейти;

Чтобы посмотреть, как это работает нажмите здесь

Если нажмете - увидите страничку, которая проживает по местному адресу 7.html в той же папке, что и вот этот учебник (eго имя index.html).
7.html - старшая сестра 5.html - добавился подвал, шапка и ссылки для возврата сюда.
Причем, верхняя ссылка вернет вас прямо в то место откуда вы уходили, т.е. в середину учебника, а нижняя - к самому началу текста.
Если допрешь, почему это так - поймешь смысл той бредовой фразы, с которой начинается глава.

Пример глобальной ссылки: пишется так: <a target=_blank href=http://www.yandex.ru/>Яndex</a>
Чтобы посмотреть, как это работает нажми Яndex

Предупреждаю: на яндексе нет (пока) ссылки на наш учебник, так что возвращаться придется своим умом.
Выручит нас параметр target=_blank - из-за него страница, указанная в href`е, откроется в новом окне.
Поэтому окно с яндексом можно просто закрыть - учебник останется на месте.



Вернуться к оглавлению

Смысл бреда

А теперь, внимание (барабанная дробь!), открываю смысл бреда: "Внутренние ссылки устроены, как ни странно, сложнее внешних, хотя и являются их частью."

Никаих внутренних и внешних ссылок нет. Ссылка одна. Тэг <a ... > </a> один.

Просто он устроен так гибко, что пригоден для разных нужд.
Вот его формат: <a [ name=ИМЯ ] [ АТРИБУТЫ ] [ href=[ URL ][ #ИМЯ ] ] > [ КУДА НАЖИМАТЬ ] </a>
По традиции, в квадратных скобках необязательные элементы. Как видим почти всё здесь необязательно, но...

Но какие-то из необязательных должны присутствовать обязательно.
Или name, или href обязаны быть. Если уж есть href - должен быть либо URL, либо номер якоря, либо и то и другое (если нет ни того, ни другого - бедный браузер взвоет). Ну и КУДА НАЖИМАТЬ, разумеется.
Имя якоря вопросов не вызовет, ясно, что это метка внутри страницы, а вот адрес (URL) устроен сложно.

Uniform Resource Locator (URL) имеет формат: [ ПРОТОКОЛ ][ ДОМЕН | IP ][ ПУТЬ ][ ФАЙЛ ]

Опять ничего обязательного. Хотя что-то поставить необходимо.
Да, и никаких лишних пробелов - это я их для читабельности расставил.
Здесь надо добавить, что современные браузеры шибко умные и потому пытаются сами подстроить пропущенные, ленивым юзером части URL`а.
Так почти никто не пишет протокол вначале, да и имя файла в конце. Только если копируют откуда-нибудь ссылку, а вручную - поди заставь.
Протокол и умолчальные имена файлов умный браузер подбирает сам: протокол почти всегда http://, а имя файла index.html

Якорь или метка - это тот же тэг <a > только без хрефа, зато с именем якоря.
Он сам по себе смысла не имеет и нужен только для того чтобы к нему прыгать по ссылке.
В этом случае ссылка должна иметь в значении href`а знак номера (#) и имя якоря.
Если это внутрення ссылка, то URL необязатен (хотя может присутствовать).



Вернуться к оглавлению

Самый-самый первый сайт

Не страничка, страничек мы с вами уже с полдюжины настрогали, а именно сайт.

Иногда говорят, что сайт - это совокупность HTML-страниц, содержащих перекрестные (туда и обратно) ссылки.
С технической точки зрения это утверждение не содержит противоречия, оно содержит необходимое, но недостаточное условие существования сайта.

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

Последнее обстоятельство, кстати мене важно, чем первое. Расположение разных частей одного и того же сайта на разных серверах, для больших порталов, скорее правило, чем исключение. (Портал - очень большой сайт, объединяющий различные сервисы, под одним брендом. Стало понятнее? Нет? Ну, что я могу поделать - потом поймешь.)
А вот общая мысль, тема, идея у отдельных страниц сайта обязана быть, иначе это не сайт будет, а нечто другое (название для этого нечто, вас придумать не затруднит?)

Итак, ваяем Сайт.



Вернуться к оглавлению

Сначала придумаем идею

Поскольку цель не практическая, а учебная - заморачиваться не будем: напишем сайт "Приветствие Мира на разных языках".
Сайт должен содержать несколько страниц, каждая из которых, будет приветствовать Мир на своем языке.
Разумеется, с любой странички посетитель должен иметь возможность перейти на любую другую.

Вот весь последний абзац - это не что иное, как техническое задание (ТЗ) на производство сайта.
Последнее предложение в нем - требования к системе навигации. (Круто звучит, не правда-ли?)



Вернуться к оглавлению

Приступим к реализации

За основу возьмем 7.html, только сначала создадим папку для нашего проекта. Я свою назову hello_world, а вы свою, как хотите.
Скопируем в нее 7.html и переименуем его в eng.html

Откроем eng.html в Блокноте и приведем его вот в такое состояние:

<html>
<head>
    <title>Englesh: Hello World!</title>
</head>
<body>
    <a href=http://nemchenko.ru/html_book/index.html#10>Go to book</a> (to http://nemchenko.ru/html_book)
    <table height="90%" width="100%" border=0 cellpadding=0 cellspacing=0>
        <!-- Шапка -->
        <tr>
            <td align="center" bgcolor=#eeeeee><font size=+3>Englesh</font></td>
        </tr>
        <tr>
            <td align="center" bgcolor=#dddddd>
                <a href=rus.html>Русский</a>
                <a href=ua.html>Украiнський</a>
            </td>
        </tr>
        <!-- Центральная часть страницы -->
        <tr height="50%">
            <td align="center" bgcolor=#aaaaaa>
                <font size=+7>Hello World!</font>
            </td>
        </tr>
        <!-- Подвал -->
        <tr>
            <td align="center" bgcolor=#dddddd><font size=+1>(c) Vasja Pupkin, 2006</font></td>
        </tr>
    </table>
    <a href=../index.html#10>Go to book</a> (to ../html_book)
</body>
</html>

Тут появилась новая конструкция: <!-- Комментарий -->
Комментарии имеют две полезные функции: Дальше привожу фрагменты текстов двух других файлов проекта: rus.html и ua.html (только шапку и центр):

rus.html
<!-- Шапка -->
<tr>
    <td align="center" bgcolor=#eeeeee><font size=+3>Русский</font></td>
</tr>
<tr>
    <td align="center" bgcolor=#dddddd>
        <a href=eng.html>Englesh</a>
        <a href=ua.html>Украiнський</a>
    </td>
</tr>
<!-- Центральная часть страницы -->
<tr height="50%">
    <td align="center" bgcolor=#aaaaaa>
        <font size=+7>Привет Мир!</font>
    </td>
</tr>

ua.html
<!-- Шапка -->
<tr>
    <td align="center" bgcolor=#eeeeee><font size=+3>Украiнський</font></td>
</tr>
<tr>
    <td align="center" bgcolor=#dddddd>
        <a href=eng.html>Englesh</a>
        <a href=rus.html>Русский</a>
    </td>
</tr>
<!-- Центральная часть страницы -->
<tr height="50%">
    <td align="center" bgcolor=#aaaaaa>
        <font size=+7>Здоровеньки були Миру!</font>
    </td>
</tr>

Если вы аккуратно, отредактируете эти три файла, то начав простмотр с любого из них вы сможете легко перейти на любой другой, воспользовавшись панелью навигации, состоящей из двух ссылок Englesh, Русский или Украiнський (открытый в данный момент исключается)

Чтобы посмотреть, как это работает у меня нажми здесь.



Вернуться к оглавлению

Приплыли

Все упомянутые в этой статье примеры, необходимые картинки и саму эту статью вы можете утянуть к себе на компьютер одним архивным файлом. Скачать

Распаковать сумеете? Нет? Тогда начинайте читать этот текст сначала.
Нет, это не поможет распаковать, но если не только читать, но и делать, то что написано - у вас само все это образуется.