Уважаемые читатели! Мои мини-лекции не дадут Вам обширных знаний, а лишь ключ к знаниям!
Мой хороший знакомый, Серёга влетел в квартиру со скоростью звука! И прямо с порога: «Ты знаешь, ведь у вас в подъезде есть выделенка!?» Конечно, если бы он сообщил мне, что у нас в овощном магазине продают бюстгальтеры, мне было бы понятнее и даже может быть интересно чем какая-то выделенка? И вообще выделенка, это кто, или что? Или это, что-то от слов выделять или же выделываться? Но Серёга не дал мне опомниться:
— Да это же не модем который жужжит, жужжит и часами не может скачать? Это выделенка, — скорость сто мегабит в секунду!
Вы смотрели хороший фильм «Осенний марафон»? Нет? Посмотрите. Там любовный треугольник с актёрами: Басилашвили, Гундарева и Неёлова... И вот гость Андрея, Билл Хансен профессор-славист из Дании, (актёр Норберт Кухинке) напившись с соседом Андрея Бузыкина, Игнатьевичем (актёр Евгений Леонов) попадает в вытрезвитель! После выхода оттуда делится с Андреем своим впечатлением о «трезвователе»:
— Андрей, там было много-о-о новых слов! Вот и я в течении нескольких секунд узнал сразу три новых слова: выделенка, модем и мегабит!
Серёга видя, что я тупо не реагирую на такое счастье как выделенка с мегабитами, как-то непонимающе посмотрел на меня?! Заглянул в комнату и осторожно спросил:
— А, это... У тебя, что нет компьютера?
— Нет, — пожав плечами, — отвечаю. На работе видел мельком и всё! Серёга вдруг кинулся к телефону и начал крутить вертушку. Что-то долго с кем-то говорил и? И этот мерзавец раскрутил меня не некоторую сумму. Как он сам утверждал в четыре раз дешевле чем в магазине! Оно конечно деньги для меня немалые, но ведь в четыре раза... Ну, какой же русский не любит в четыре раза?.. Но как уже потом я понял что это всё было развод по-русски! Ну дык?!
Не прошло и получаса, как у меня на кухонном столе какой-то хмырь показывая на мерцающий экран, пытался втюхать мне про какой-то там проводник? Ну, да... Проводник это провод обычный и эта ещё тётка в поезде. Ну та, что проверяет билеты, а потом чай разносит... Но какой ещё там проводник в ящике?
И вот, освободившись от металлолома гости дружно свалили, и я остался один на один с чудом техники, компьютером... И этот ещё чёртов интернет? Что мне с ним делать? Однажды, попадаю я на сайт МК (газеты «Московский комсомолец»). Ну, да, что-то похожее на газету? Картинки всякие. Новости прочитать можно... А так как я к тому времени уже кое-что понял, начитавшись умных книг... Одним словом со зрением у меня не очень и мол нужно разрешение монитора поменять на меньшее... Стало быть всё на экране будет больших размеров. Сказано-сделано! И вправду читать стало легче и вообще... Захожу опять на МК. Да те же новости... Только вот что-то не так?.. Вернулся на старое разрешение, — всё нормально. Обратно, — всё не так?.. Да всё можно читать, всё также. Только вот колонки в газете сузились, а строки переплыли вниз... Очень меня это заинтересовало. Но окончательно допекло, когда я увидел страницу с фото пьяных рож. И как бы страницу сделал какой-то там Вася Пупкин?.. Это как же? Какой-то хмырь может, а я дярёвня, руки не оттуда?
Но как? Как всё это делается? И спросить-то не у кого? Все мои знакомые в таком вопросе оказалось ещё тупее меня?! И вот читая очередную «Для Чайников» вдруг узнаю, что вместе с WINDOWS, вместе с другими программами, поставляется программа для создания сайтов! Я так и подпрыгнул от удивления. Я тут дурью маюсь, мать-перемать, а программа вот она в моём компьютере, задарма! Только рано радовался, всё это было давно и с последними версиями WINDOWS она не поставляется! Но есть название FrontPage. Это уже теплее! Ноги в руки и бегом в «Погребок». Так у нас магазинчик назывался, где диски пиратские продавались со всякой ерундой.
Как бы продавец, сморщился от моего вопроса и типа иди и ищи вон там на полках. А, там?.. Чёрт ногу сломит! И я в полной безнадёжности начал рыться в этих закромах. Долго рылся. Но искал одно, а нашёл другое. Диск «Офис 2003». И уже хотел было обратно на полку... Как увидел мельком на этикетке внизу, — «Front Page 2003»! Вот это, да?!!
Как Вы могли догадаться с это всё и началось! Да, даже что-то получилось, вроде бы?.. Но всё это было похоже на вождение машины тупой блондинкой... Нажал-отжал, крутнул-повернул... А, что там происходит внутри, хрен его знает?!!
ДОГОВОРИМСЯ НА БЕРЕГУ!
Правильно, старо как мир. Прежде чем ехать за реку нужно договориться на берегу! О чём это я? Всё о том же. А точнее, чего Вы хотите? Стать WEB-дизайнером? Самому сделать свой сайт? Разобраться во всех интернет-хитросплетениях? Или пусть займутся (за деньги) крутые пацаны, WEB-студии?.. Или хотя бы повестись на рекламу о бесплатном создании сайта?.. Допустим мы с Вами договорились?!! Вы остаётесь, остальные могут быть свободны как «псисы»!!! Осталось дело за малым, каким способом всё это создавать? Пока о бесплатном сыре в мышеловке мы говорить не будем, это отдельная тема... Остаётся одно: самим, своими ручками... Что бы Вы там не решили, а вникнуть во всё Вам придётся! Хотя бы поверхностно, чтобы не выглядеть круглым дураком, каким я был в своём компьютерном детстве, в 2003-ем?!!
Итак, у нас три варианта:
1) Всё делается вручную.
2) С помощью HTML-редактора.
3) С помощью визуального редактора (что вижу, то и получаю).
Вручную, это с помощью обычного текстового редактора. Да, того самого «Блокнота» (Notepad). Или с помощью других, какие Вам больше нравятся?! Я Вам предлагаю SciTE!
HTML-редактор?.. Ну это типа текстового, но? Но, это как в театре с суфлёром. Всё время подсказки будет предлагать рис3а... Потом надоест!
Визуальные редакторы это: «FrontPage 2003». «Macromedia Dreamweaver» и совершенно бесплатная «SharePoint Designer 2007», та же «FrontPage». «Dreamweaver» похож на предыдущие но своими тараканами и более строгими!!! Про программы мы поговорим ещё, но позже, а пока...
Что же такое сайт? Это набор HTML-страниц (интернет страниц, WEB-страниц, HTML-документов), связанных между собой (и не только) так называемыми ГИПЕРССЫЛКАМИ. А сами страницы это всего лишь текстовый документ, но написаный на тарабанном языке HTML. HTML — HyperText Markup Language — язык разметки ГИПЕРТЕКСТА. Вы поняли, что-нибудь? Я тоже нет!? ГИПЕРТЕКСТ, по-русски (без мата) это когда можно переходить с одной страницы на другую или даже в пределах одной страницы с помощью ГИПЕРССЫЛКИ. Или переходить вообще на другой сайт и его страницы. На картинке рис1 Вы и видите отличие обычного (линейного, книжного) текста от гипертекста! Как всё это в книге Вы и без меня хорошо осведомлены... В гипертексте же (на рисунке) каждая линия между страницами это гиперссылка. А почему их две в одной связи? Потому как (не всегда обязательно) одна ссылка с одной страницы на другую, а вторая наоборот! Так было устроено на моём сайте (бывшем). Как видите каждая страница независимо связана с другой!
На рис5 Вы видите результат просмотра в визуальных редакторах (FrontPage) ссылки страницы (1919.htm) на другие страницы. Но связь с частью страниц другого направления, только через посредника, (rasskazy.htm.) Либо через два, это главную (VAVANN.htm) и только потом уже через (rasskazy.htm). В принципе как Вам нужно и удобно?! И никто Вам за Ваше решение руки выкручивать не будет?! На рис6 показаны (в виде гипертекста) некоторые виды ссылок:
1) Ссылка на верхнюю часть страницы. Наверняка Вы сталкивались с такой? Типа, в конце страницы (внизу) «Вверх», «Назад», «На начало» и прочее...
2) Ссылка на букву Б.
3) «Якорь» у этой самой буквы Б! Для браузера это «чёрная метка» и на этот якорь и будет направлена реакция. То есть щёлкнув по первой ссылке, Вы попадаете на ту самую букву Б, в смысле на тот самый «якорь»!. Так устроен список группы людей с фамилиями в алфавитном порядке. Или что-то подобное...
4) Ссылка на WEB-страницу. Скрывается под текстом (названием страницы).
5) Ссылка на изображение. Скрывается под текстом, как-то обозначающем само изображение.
6) Ссылка на другой сайт. Скрывается под текстом, которым может быть полный адрес ссылки. Но сам по себе никак не влияющий на процесс?! В принципе текст может быть любым.
7) Тег-контейнер для изображения, последнее и есть прикрытие ссылки на что-то?.. Аналогично предыдущей ссылке! Изображение, лишь прикрытие.
Как это понимать? Ссылка имеет вид гипертекста, но? Но, скрываться может как: под любым текстом, изображением или частью изображения или текста... Варианты разные, — Вам выбирать, и Вам решать.
Если ничего не делая, просто написать текст и сохранить как HTML-документ, то гипертекст не будет ничем отличаться от обычного?! Вот только выглядеть он будет как монотонное следование слов... Естественно Вы захотите привести его в «божеский» вид! То есть произвести ФОРМАТИРОВАНИЕ текста, а как? На бумаге всё просто, — что написано пером, не вырубишь топором. Но у нас ведь гипертекст в виде инструкции для программы-браузера! Что показывать и главное как?! Вот тут и начинается... Как браузеру дать понять, и чтобы читатель ничего не увидел и не догадался?! Кстати БРАУЗЕР с английского browser, «ПРОСМОТРЩИК», «ПЕРЕЛИСТЫВАТЕЛЬ», «НАВИГАТОР». Короче, обзывают его мерзавцы как хотят?!!
Первым делом на текст одевают наручники и садят в «кутузку»! Всё это называется ТЕГ-КОНТЕЙНЕР. А, чтобы браузер это понял заключают тег в угловые скобочки, вот так <P>, где первое выражение открывающий тег, а последнее закрывающий </P>, получился тот самый контейнер! Ну и что? Во-первых, каждая буква (сочетание) обозначает поведение браузера, как ему себя вести? Во-вторых, что делать с тем, что внутри контейнера? И соответствует ли сам тег своему содержанию?! В смысле чтобы бюстгальтер был женским!!!
Наш тег <P> есть блочный элемент и как правило касается именно текста. А раз блочный, то следующий за ним, такой же будет находиться ниже. Всё что внутри (текст) начнётся с новой строки. Но ведь это и есть разбивка утомительного текста на АБЗАЦЫ! Откройте любую книгу и Вы увидите все эти абзацы! Кстати, <P> не только образуя абзац начинает его с новой строки, но и по русской традиции делает горизонтальный отступ, — «красную строку». Всё это понимает браузер, а что потом? Потом начнутся украшательства всего, что есть внутри контейнера?! А это потребует других тегов: <b> и <i>, каждый отвечает за своё. Первый делает текст жирным (полужирным), а второй курсивом. Вот на рис2 Вы и видите как обычный текст меняется от применения или нет <b> и <i>. Весь текст заключается в тег <P> и слово КУКЛА под воздействием <b> и <i> выглядит полужирным курсивом. И главное, теги как бы вложены один в другой! Слово КУКЛА в тег <i>. Затем всё это в тег <b> и только потом всё вместе в тег <P>! Ну?! Теперь догадались на кой здесь матрёшки? Матрёшечная система основа HTML-документов. Матрёшка КУКЛА вкладывается в матрёшку <i>, потом в <b> и окончательно в <P>!
На рис3, как пример простенькой WEB-странички. Визуально это всего на белом фоне (по умолчанию) чёрным шрифтом (размер и вид шрифта по умолчанию), написано СЛОВО. Причём по умолчанию, в левом, верхнем углу. А вот на изнанке страницы вся эта лабуда на рис3! Тот самый HTML-документ. Или ещё его называют КОД страницы. Всё так расположено для удобства восприятия: столбцом, а не в строку. Компьютеру кстати всё это по барабану! Сверху открывающие теги, внизу закрывающие. В итоге <html>, — весь документ; <body> — тело, то есть содержание страницы и последнее <P>, — АБЗАЦ. То есть то самое «СЛОВО».
Чтобы управлять этими чёртовыми тегами нужно дать им понять, что от них хотят?! Для этого (когда надо?) пришпандоривают АТРИБУТЫ. Они в свою очередь либо сразу означают поведение браузера, либо им кроме всего дают какое-то значение? Как-то: конкретный тип шрифта, название, размер, цвет. Для разных тегов, разные атрибуты и соответственно со своими значениями.
И напоследок. На рис4 ЛИСТИНГ, так называется гипертекст нашей «Новой страницы». Это как бы расширенная страница та, что на рис3. Здесь появились новые теги: <DOCTYPE>,<HEAD> и <META>. Head, ЗАГОЛОВОК, информация для компьютера Вы её не увидите, кроме ещё одного тега <TITLE> заголовка, но уже виденного Вами в строке заголовка. Эта строка на самом, самом верху браузера. А всё остальное в теге <head> будет невидимым! А, что такое тег <meta>? Это, так сказать, служебная информация. Так самая верхняя строка с «метой» указывает на то, что это во-первых, документ состряпан на чистом HTML, а во-вторых, применяется кодировка Windows-1251. «Мета» с именем Author указывает на авторство документа. В простых сайтах чисто на любителя... И последняя «мета» с именем Kywords, набор ключевых слов на которые опираются поисковые системы. В смысле когда ищут одно, а находят другое! Мне кажется, что современные поисковики более интелектуальные чем новорожденные в 90-е! А все наши ключевые, для них, — филькина грамота... Вот и получается, что из всей это писанины пользователь увидит лишь то, что обведенено красными эллипсами. А, подчёркнутое лишь то, что имеет хоть какое-то полезное предназначение?..
Теперь о странном теге <DOCTYPE>?! Если кратко, то указывается тип документа и адресок где говорится как он должен выглядеть и чему соответствовать?! По данным разведки пока браузеры всё это воспринимают типа «ПО БАРАБАНУ»! И ежели что-то не понимает, отображает как им вздумается?! Но в будущем, как нам грозятся серьёзные дядьки и тётьки, браузер может стать в позу и перекрыть нам (Вам) «кислород»!!!