Учебник по HTML

Оглавление

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



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

Урок первый

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

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

Откройте Блокнот (или любой другой редактор, кроме Word`a, конечно) и напишите: Hello World!
Да, именно так - всего два слова и ничего более. Никаких там тегов и прочей премудрости.
Сохраните эти два слова в файл под названием 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>, будет выведено в заголовке окна браузера (вот, за который можно мышей взять и потаскать окно туда-сюда), т.е. в самом верху на синем (или какой там у вас) фоне шапки окна.

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

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



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

Таблицы

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

<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.html (в браузере, а не в Блокноте), можно насладиться дивной картиной, созданной вашими собственными руками.



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

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

Ссылки

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

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

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

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



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

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

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

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

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

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

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

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

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

Теперь сами создайте файл 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-страниц, содержащих перекрестные (туда и обратно) ссылки.
    С технической точки зрения это утверждение не содержит противоречия. Но оно содержит необходимое, однако недостаточное условие существования сайта.

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

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

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



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

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

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

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



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

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

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

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

    <html>
    <head>
        <title>English: 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>English</font></td>
            </tr>
            <tr>
                <td align="center" bgcolor=#dddddd>
                    <a href=rus.html>russich</a>
                    <a href=ua.html>ukrainich</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>английский</a>
            <a href=ua.html>украинский</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>англiйський</a>
            <a href=rus.html>росiйський</a>
        </td>
    </tr>
    <!-- Центральная часть страницы -->
    <tr height="50%">
        <td align="center" bgcolor=#aaaaaa>
            <font size=+7>Привiт, Свiте!</font>
        </td>
    </tr>

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

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



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

    Приплыли

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

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