По традиции это будет вывод на экран приветствие миру: "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!" в левом верхнем углу окна - и ничего больше. Ясно, что браузер игнорирует глупости: отступы, пробелы, абзацы, переносы строк и особенно непонятные, неправильные теги.
Ну, ясно же, что все подробно и занудно написано в стандартах и
справочниках. Здесь же полноты не будет, но понятно должно быть. Итак, долбим
основы.
Откройте Блокнот и напишите:
Сохраните это в файл 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>.
Откройте Блокнот и напишите (можно, конечно, скопировать нижеприведенный код, но, думаю,
лучше научиться ручками-то работать, опечатки выловить, раз десять поправить, чтобы вышло то, что требуется; а в общем, конечно, как хотите):
Сохраните это в файл 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> При верстке страницы теги можно располагать в исходнике как угодно (например, я привык - лесенкой); браузер в любом случае выведет их как положено: ряд за рядом, ячейку за ячейкой (если
только все написано правильно, ничего не пропущено и нет лишнего; да и в этом случае он попытается исправить ваши огрехи; не всегда получается одинаково в разных браузерах, но это уже другая проблема).
И вот еще что. ЛЮБУЮ страницу можно сверстать в виде таблицы, у которой три ряда: шапка (крыша), основное место посредине (жилые квартиры-ячейки) и подвал (он и в Африке подвал). Почти все сайты построены по этому принципу.
Но добиться этого будет нелегко.
Во-первых: в той папке, где на вашем компьютере живет 5.html (надеюсь,
это не Рабочий стол?), нужно создать вложенную папку images
Во-вторых: нужно нажать правой кнопкой мыши верхнюю фотографию нашей
планеты (поверх которой нет никакой надписи) и Сохранить изображение
как... в только что созданную папку images
После этого, если у вас на компьютере открыть 5.html (в браузере, а не в
Блокноте), можно насладиться дивной картиной, созданной вашими собственными руками.
В HTML и, вообще, в Web"е нет ничего важнее ссылок. Это базис, на котором покоится всё в паутине.
На html-страницах встречаются ссылки двух типов:
Внутренние - нажав на нее вы внутри текущей страницы перемещаетесь вверх или вниз.
Например, на этой странице, которую вы сейчас читаете, можно по
внутреним ссылкам вернуться к оглавлению или из оглавления перейти к
любой главе.
Вы как бы перепрыгиваете с одного куска текста на другой, но в пределах одной страницы.
Внешние - по ней вы уходите на другую страницу.
внешняя ссылка может вести на другую страницу того же сайта (внешняя она только по отношению к странице)
или она может увести вас вообще на другой сайт, иногда очень далекий (как по географии, так и по тематике)
Сейчас разберем все по косточкам.
Внутренние ссылки устроены, как ни странно, сложнее внешних, хотя и являются их частью.
Вдумайтесь в эту фразу. Бред, не так-ли? А ведь это чистая правда.
собственно, ссылка, которая в исходнике пишется так: <a href=#NAME1>СЮДА НАЖИМАТЬ</a>
якорь, который пишется так: <a name=NAME1>СЮДА ПЕРЕПРЫГНУТЬ</a>
(Я бы назвал якорь меткой, на которую указывает хреф; но кто-то уже перевел это, как якорь, так и осталось)
Синтаксис нужно соблюдать, т.е. в самой ссылке после слова 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 ][ ПУТЬ ][ ФАЙЛ ]
Опять ничего обязательного. Хотя что-то поставить необходимо.
Да, и никаких лишних пробелов - это я их для читабельности расставил.
ПРОТОКОЛ - не всегда http:// есть еще ftp:// и mms:// и много других, включая всякие их секретные разновидности.
ДОМЕН " IP - здесь знак " (вертикальная палка) заменяет слово ИЛИ, т.е. на этом месте может стоять или ДОМЕН, или IP
(понятия эти тесно связаны, но не всегда взаимозаменяемые; иногда на одном IP висят сотни сайтов)
ДОМЕН - это имя сайта, например, yandex.ru
IP - это его же, сайта (точнее сервера, где он живет) физический адрес, например: 213.180.204.11
ПУТЬ - это просто папка (каталог, директория), в которой проживает данная
конкретная страница сайта. Если папка вложена в другие папки, нужно
указать их все через слэш (/), начиная с самой старшей и заканчивая той
конкретно, в которой находится страничка, то бишь, файл.
ФАЙЛ - файл с расширением html (так положено по канону; на самом деле, расширение может быть любым).
Здесь надо добавить, что современные браузеры шибко умные и потому
пытаются сами подстроить пропущенные ленивым юзером части URL"а.
Так, почти никто не пишет протокол вначале, да и имя файла в конце; только, если копируют откуда-нибудь ссылку, а вручную - поди заставь.
Протокол и умолчальные имена файлов умный браузер подбирает сам (протокол почти всегда http://, а имя файла - index.html)
Якорь (или метка) - это тот же тег <a > только без хрефа, зато с именем якоря.
Он сам по себе смысла не имеет и нужен только для того, чтобы к нему прыгать по ссылке.
В этом случае ссылка в значении href"а должна иметь знак номера (#) и имя якоря.
Если это внутрення ссылка, то URL необязателен (хотя может присутствовать).
Не страничка (страничек мы с вами уже с полдюжины настрогали), а именно сайт.
Иногда говорят, что сайт - это совокупность HTML-страниц, содержащих перекрестные (туда и обратно) ссылки.
С технической точки зрения это утверждение не содержит противоречия. Но оно содержит необходимое, однако недостаточное условие существования сайта.
Например, мы с другом обменялись ссылками. Он поставил на своей
страничке ссылку на мою, а я на своей - на его. Значит-ли это, что наши
две странички автоматически превратились в сайт? Отнюдь.
Они ведь не связаны общей темой, да и лежат на разных серверах, возможно в разных городах или даже полушариях.
Последнее обстоятельство, кстати, мене важно, чем первое. Расположение
разных частей одного и того же сайта на разных серверах для больших
порталов, скорее правило, чем исключение (портал - очень большой сайт,
объединяющий различные сервисы под одним брендом). Стало понятнее? Нет?
Ну, что я могу поделать - потом поймете).
А вот общая мысль, тема, идея у отдельных страниц сайта обязана быть,
иначе это не сайт будет, а нечто другое (название для этого нечто, вас придумать не затруднит?)
Поскольку цель не практическая, а учебная, заморачиваться не будем - напишем сайт "Приветствие Мира на разных языках".
Сайт должен содержать несколько страниц, каждая из которых будет приветствовать Мир на своем языке.
Разумеется, с любой странички посетитель должен иметь возможность перейти на любую другую.
Вот весь последний абзац - это не что иное, как техническое задание (ТЗ) на производство сайта.
Последнее предложение в нем - требования к системе навигации (Круто звучит, не правда-ли?).
Сначала создадим папку для нашего проекта. Я свою назову hello_world, а вы свою - как хотите.
За основу сайта возьмем файл 7.html. Скопируем в папку данный файл, одновременно переименовав его в eng.html
Откроем eng.html в Блокноте и приведем его вот в такое состояние:
Если вы аккуратно отредактируете эти три файла, то начав просмотр с
любого из них, вы сможете легко перейти на любой другой,
воспользовавшись панелью навигации, состоящей из двух ссылок Englesh,
Русский или Украiнський (открытый в данный момент исключается)
Чтобы посмотреть, как это работает у меня, нажмите здесь.
Все упомянутые в этой статье примеры, необходимые картинки и саму эту
статью вы можете утянуть к себе на компьютер одним архивным файлом. Скачать с сайта автора Распаковать сумеете? Нет? Тогда начинайте читать этот текст сначала.
Нет, это не поможет распаковать, но если не только читать, но и делать, то что написано - у вас само все это образуется.
PS: Особенности движка данного сайта не позволяют точно сверстать некоторые участки кода, авторскую верстку данной статьи можно посмотреть здесь
Док. 275415 Опублик.: 03.02.07 Число обращений: 17389
