Общий обзор Интернета
Серверы
Понятия страницы и сайта
НТМL
Программные средства
Средства работы с графикой
О дизайне
Раскрутка сайта
Некоторые советы
Полезная графика
Музыка МИДИ
Полезные скрипты

HTML

    Итак, ты готов приступит к созданию своего сайта. Прежде всего нужно позаботится о том, чтобы был необходимый и достаточный набор средств для этого. Во-первых, позаботься о том, чтобы у тебя был Виндоуз и Оффис. При этом ты имеешь: Microsoft FrontPage, Internet Explorer и многие другие полезные приложения.
    Во-вторых, без графики твой сайт ничто. Кое что можно сделать и штатной программой Paint, но если подходить к делу более серьезно, то лучше иметь АдобеФотошоп и Corel Photo Paint последних версий и желательно русифицированных. Для чего они и как их использовать об этом в свое время.
    Установи у себя Netscape Navigator, Opera,
Mozilla Firefox, Google Chrome. Но чтобы они не запускались по умолчанию. Дело в том, что после не очень продолжительной войны браузеров мир поделился на поклонников Explorer и Netscape. В общем они почти одинаковы, но не совсем. Поэтому даже если картинка в Эксплорере будет прекрасной, в Нетскейп её вообще невозможно будет прочитать. Поэтому все что ты натворишь, нужно будет протестировать в других браузерах.
    Неплохо иметь средство для разработки шрифтов, кнопок, фоновых картинок. Я пользуюсь программой Xara Web Stile.
    Ну вот, друг мой дорогой, ты запустил Фронтпейдж, почитал описание, потыкал разные кнопки. Попробовал написать страничку. И конечно у тебя появилась масса разных вопросов. Возможно, на некоторые из них мне удастся ответить. Но прежде всего вернемся к HTML.
    Итак, я хочу, чтобы ты понял и осознал, что то что ты видишь в браузере когда шастаешь в Интернет, это сборная солянка. Готовит эту солянку программа называемая браузером (просмотровщик). Она сначала загружает в себя текст, затем его анализирует, затем запрашивает по заданным в тексте адресам (гиперссылкам) дополнения, затем все это компонует и выводит на экран. Итак, HTML-страница это текст, имеющий расширение html, или htm, который может быть написан в любом текстовом редакторе, . Кроме собственно текста он включает команды для браузера. Эти команды называются тегами (tag) и выделяются уголками - < и >.
    Если ты сейчас во Фронтпейдж, то нажав внизу одну из трех кнопок "Normal/Конструктор", "HTML/Код", "Preview/Просмотр", а именно "Код" (сейчас ты находишься в "Конструктор"), ты увидишь текст HTML. Посмотри внимательно и обрати внимание на те части текста, которые выделены голубым цветом. После этого возвращайся в режим "Normal". **********
      Ты конечно обескуражен, но не волнуйся. На первых порах знание тегов не так уж и важно. В основном Фронтпейдж (далее - редактор) сделает все за тебя. Тем не менее, некоторые моменты нужно знать, потому что редактор не всегда понимает, чего ты хочешь. А кроме того, он разработан англоязычными для англоязычных, и описание на него составлял англоязычный.
    Во-первых, у тебя должен быть заголовок. Редактор его формирует по умолчанию. Но если ты составляешь страницу на русском языке, (и, кстати, желательно, что бы редактор у тебя был русифицирован) то у тебя должен быть заголовок, который показан ниже:

<html>
<head>
<meta http-equiv=
"Content-Language" content="ru">
<meta http-equiv=
"Content-Type" content="text/html charset=windows-1251">
<meta name=
"GENERATOR" content="Microsoft FrontPage 4.0">
<meta name=
"ProgId" content="FrontPage.Editor.Document">
<title>
Имя</title>
<meta name="autor" content="Твое имя-фамилия">
<meta name="KEYWORDS" content=" Ключевые слова">
<meta name="DESCRIPTION" content="Содержание сайта ">
</head>

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

     Обрати внимание, что теги как правило парные, один что-то начинает, другой что-то заканчивает. Например <head> (шапка) </head> , или <title> (заголовок) </title> и т.д.
  
Также выделяются и таблицы, и рисунки, и скрипты и т.д. Зачем это тебе нужно? А затем, что когда станет например вопрос о раскрутке твоего сайта, тебе нужно будет разместить на свою страницу чью-то рекламу. Чаще всего ее предлагают в виде HTML кода, который ты должен будешь разместить на свою страницу. И тебе именно  в коде HTML своей страницы нужно  буде найти такое место, чтобы реклама нормально смотрелась.
    Еще раз посмотри на вышеприведенный фрагмент. Обрати внимание на третью и четвертую строку. В третьей задан язык на котором написана страница (ru). Если вместо ru, будет en-us, то будет считаться, что текст на английском языке. При этом, в редакторе не будет проверки орфографии.
    Важны и следующие строки, потому что они настраивают браузер  и сервер под расширения редактора.
   
  Кроме того, обязательно между</title> и </head> должны быть теги:
<meta name="KEYWORDS" content=" Ключевые слова">
<meta name="DESCRIPTION" content="Содержание сайта ">

    И содержание сайта, и ключевые слова нужны для того, чтобы индексные поисковые машины видели твой сайт. Объемы  содержания сайта и ключевых слов не должны превышать одного килобайта, то есть тысячи знаков.

    Особенно обращаю твое внимание на строчку:
<meta http-equiv="Content-Type" content="text/html charset=windows-1251">
Особенно на текст, выделенный зеленым цветом. Это указание браузеру на то, в каком коде составлен HTML-текст. Ты должен понять одну простую вещь. Информация по сети в конечном счете передается двоичным кодом, то есть - есть импульс - единица, нет импульса - нуль. Благодаря борьбе коммунистической партии с кибернетикой, как с продажной девкой международного империализма, стандартом передачи букв в компьютерной техники стал латинский алфавит. Для того, чтобы передать другие алфавиты, в том числе и кириллицу, нужны дополнительные кодовые таблицы. Они тоже стандартизованы, но могут не поддерживаться некоторыми серверами и браузерами. Кроме того, браузеру нужно указать, в каком стандарте представлен исходный текст. Некоторые очень знаменитые и опытные вебдизайнеры, например как Тема Лебедев, полагают, что charset вообще не нужно указывать. Это неправда. Обязательно нужно указывать. Иначе или сервер, или браузер (Особенно Нетскейп и Опера) может все перепутать. Мало того, может быть так, что тебе придется разместить сайт на сервере (особенно на иностранном) где стандарт windows-1251 не поддерживается. Вот другие основные стандарты: ISO-8859-5, KOI8-R. Если ты загрузишь страницу на сервер, а потом посмотришь на нее через браузер и увидишь что то вроде дЮММЮЪ ПЮЯЯШКЙЮ, то значит с кодировками что то не в порядке. Вот для этого и нужен браузер Opera. Он позволяет указывать разные кодировки. И когда ты увидишь свою страницу нормальной, то после слов charset= нужно поставит именно подобранную кодировку. Понял? Ну если не понял, то придет время поймешь.
    Опять же, то что ты читаешь, это не учебник по HTML. Поэтому, если ты хочешь изучить этот стандарт более обстоятельно, ты можешь найти учебник. А я тебе могу посоветовать просто сохранять через броузер интересные страницы из Интернета (в том числе и мою) и анализировать код в режиме HTML. При этом, ты можешь выделять отдельные участки и выбрасывать их  до тех пор, пока не останется тот участок, который тебя заинтересовал. А отдельные участки можешь и сохранить, накапливая как библиотечку и используя по мере надобности. При этом ты должен иметь в виду, что отдельные фрагменты работают только совместно с программами на сервере, и ты их вряд ли сможешь использовать (суть дела я растолкую позже).
    Так ты не только освоишься с HTML, но и многому научишься на опыте других. Тем не менее, о некоторых тегах упомяну:
    - тег 
<a href="sov5.htm">ааааа</a> - это гиперссылка. Раньше, а некоторые и сейчас называют это якорем от слова anchor - якорь по английски. Отсюда первая буква a . href - сокращенно гиперссылка (hiper reference). Закрывается тег </a>. Кстати, буквы могут быть и строчными и заглавными. ааааа - любой текст. Вместо текста может быть и картинка. Тогда нужно указать источник ее. Например так: <src="../ban.gif" width="120" height="60"> Здесь указано, откуда взять рисунок, его ширина и высота.  Указываемые адреса могут быть абсолютными и относительными. Здесь приведен относительный адрес, а здесь <a href="http://grigam.lisx.ru/sov5.htm">ааааа</a> - абсолютный.
    - очень важный и полезный тег
<br>. Это разрыв строки {Shift - Enter}. Проблема вот в чем, часто бывает так, что у тебя будет одна таблица, а за ней сразу вторая. А ты захочешь их раздвинуть, что бы что то вставить. В режиме Normal  не получится. А в режиме HTML ты можешь между тегами конца таблицы </table>   и начала другой <table> вставить <br>  и тогда в режиме Normal ты увидишь, что таблицы раздвинулись.   
   
    На этом мы закончим рассмотрение кода HTML. Далее мы еще будем к этому вопросу возвращаться, а сейчас еще несколько советов по работе с редактором.
    Первое. Когда ты запускаешь редактор, перед тобой голая страница. Браузера слева (Список файлов) не будет. Он появится тогда, когда ты хоть что ни будь сделаешь на своей странице и нажмешь значок на панели инструментов - "Просмотр в Броузер" (или "Сохранить").  Именно тогда тебе будет предложено сохранить документ и показан реальный вид твоей страницы. И именно тогда, папка, в которой ты находишься (а по умолчанию это папка документов Виндоуз) будет превращена в сайт. На ней появится изображение глобуса и слева появится Список файлов. Кроме того, есть команда, по которой любая папка может быть преобразована в сайт.
    Я думаю, что когда ты убьешь массу сил и времени на свой сайт, тебе очень обидно будет его потерять, если вдруг развалится Виндоуз. Поэтому советую, создать отдельную папку под свой сайт, в корневом каталоге.   Кстати запомни, все обозначения, расширения, и наименования делай только латинскими маленькими буквами и цифрами и никаких других символов, иначе могут возникнуть разнообразные проблемы. Кроме того, запомни, что твоя главная страница должна называться index. Это страница по умолчанию соответствующая твоему адресу в Сети.
    Второе. Текст. В принципе ты здесь можешь работать  как в обычном текстовом редакторе и довольно примитивном. При этом запомни: - нажатие "Enter"  переводит на две строки вниз, чтобы переводить на одну строку, нажимай "Shift-Enter" (тег "br"). - чтобы строки выравнивались с двух сторон, выдели весь текст и в меню Формат -> Абзац -> Aligment, выбери - Justify (по ширине).
    Если у тебя уже есть готовые документы, ты их можешь поместить на страницу. Не советую преобразовывать в тех редакторах (а это наверное Word) в которых создавался документ в  форму HTML. Если у тебя документ большой, лучше небольшими фрагментами разместить его на нескольких страницах через клипбоард. Но при этом будь готов, что редактор с рисунками, таблицами и прочими элементами поступит не лучшим образом, поэтому все что он натворил нужно выбросить, оставить чисто текст. Привести его в порядок, затем заново вставить все необходимые элементы. При этом ты должен запомнить, что главная проблема Интернета, это малоскоростные средства связи. Поэтому ты должен сделать все, чтобы страницы твои грузились побыстрее. Справа ниже ты видишь песочные часы и секунды. Это ориентировочное время загрузки. Так вот, именно тогда тебе потребуется Фотошоп, чтобы уменьшить до предельно возможных размеров рисунки и сохранить их с худшим качеством, но с минимальным объемом.
    Третье. Таблицы. Без таблиц ты не обойдешься. Действительно, стандарт HTML таков, что все стремится к левому краю. Ты не сможешь поместить просто так два рисунка, фотографии, куска текста или тех же таблиц рядом. А вот если ты поместишь таблицу из двух ячеек рядом (а это возможно), например так (значок на панели инструментов вверху):

то, как видишь все получается. Далее ты разберешься, почитав описание редактора и посмотрев настройки страниц с других сайтов, в том числе и моей. Там вся структура страницы сформирована при помощи таблиц, хотя и не все из них видно. Дам еще несколько советов:
    - Рисунки и фото объединяй с подписями к ним при помощи таблицы с двумя вертикально расположенными ячейками, например, как в моей книге "Мы во вселенной одни".
    - Если ты создал одну таблицу, а в ее ячейке хочешь поместить другую, то имей в виду, что настраивать эту ячейку ты уже не сможешь. А если такая необходимость все же возникнет, тебе нужно будет содержимое дополнительной таблицы переместить, например в низ страницы. Затем убрать таблицу, настроить ячейку, что под ней, потом снова установить таблицу, настроить и перенести в нее содержимое. Я долго мучился пока не понял в чем дело. Можно также, в режиме HTML, перед началом внутренней таблицы вписать тэг <br>, тогда в режиме Normal  над внутренней таблице появится пространство внешней, куда можно будет поставить курсор.
    - Следи за тем, чтобы тебе в папку сайта не попало ничего лишнего. 
    - Смело используй фоновые изображения, или так называемые обои. Их можно сгенерировать рекомендованной мною программой Xara. Можно найти в Интернете, можно стащить с понравившегося сайта, можно просто подобрать красивую картинку и обработать в Фотошопе. Не забывай, что чем меньше её объем тем лучше. Кстати, просмотренные тобой в интернете страницы хранятся в папке "Временные файлы интернет". Найди ее, заглядывай туда. Там можно будет найти много интересного и поучительного. Но с этими временными файлами есть еще одна проблема. Например, ты внес изменения в свою страницу  и загрузил ее на сервер. Затем смотришь её через броузер, а она не изменилась. Ты начинаешь нервничать. А причины здесь могут быть две. Во первых, на сервере иногда перегрузка из кэша может требовать какое-то время, а во-вторых, хоть ты и обращаешься как бы на сервер, а броузер берет страницу из твоего комьютера из папки временных файлов. А ты то радовался что она так быстро грузится! Нажми кнопочку ОБНОВИТЬ в броузере!
    - Редактор постоянно будет пытаться в папке твоего сайта создавать другие папки. Они нужны только для редактора. На сервер их загружать не нужно. По крайней мере, все что ты осознанно используешь, все должно быть в основной директории. Иначе тебе и на сервере нужно будет создавать папки (если ты будешь использовать пейджбилдер), а это не очень удобно. 
    - Не злоупотребляй формами и компонентами. Помни, что во-первых, не все они будут исполнятся на сервере без Extensions, во-вторых, некоторые из них, как например  Hover Batton, очен замедляют загрузку.
    Еще один важный момент. Фронт Пейдж программа своевольная. Она все время пытается за тобой что-то поправить и переделать. Но есть такие HTML коды, которые редактор понимает неправильно, исправляет и делает их неработоспособными. Но есть выход. В команде "Вставка" > "Дополнительно" нажми HTML. При этом откроется окошечко, куда вручную или через клипбоард вносится нужный код и дается команда "OK". Тогда нужный код закрывается специальными тэгами и для редактора он вообще как бы перестает существовать. Исполняется все это в режиме "Normal". Например.

<!--webbot bot="HTMLMarkup" startspan -->
<a href="" onClick="window.open('гиперссылка', '1','resizable=no,menubar=no,scrollbars=yes,width=650,height=550,top=1'); return false;">Психологические тесты</a>
<!--webbot
bot="HTMLMarkup" endspan -->

    Серым выделены теги закрывающие доступ редактору. Можно эти теги и самому расставлять.
    Советую использовать и сам по себе приведенный пример кода. Он открывает отдельное окно броузера, причем его можно настраивать (размеры, меню, скроллбар и т.д.). Лучше таким образом закрывать HTML-коды баннерообмена, счетчиков и рейтингов.
    Отвлечемся немного и поговорим о дизайне. Сразу скажу, если ты скажешь какому либо профессионалу, что ты занялся вебдизайном и работаешь на FrontPage, он тебя осмеёт. В определенной степени он прав. Если он профессионал, то он работает давно и конечно формировался как специалист еще тогда, кода ни FrontPage, ни других подобных средств не было. Все делалось в текстовых редакторах и страница составлялась в коде HTML. Конечно, с его опытом, да используя некоторые средства, которые облегчают работу именно в HTML, можно составить документ и хорошо и может даже лучше чем в редакторе FrontPage. Скажу более того, возможно FrontPage (а есть и другие подобные ей программы) просто дрянной редактор. Когда посмотришь в коде HTML что он натворил на твоей странице, просто волосы шевелятся. Когда слегка освоишься, так и хочется все там причесать. Ну и Бог в помощь, если есть на то время
    Будем надеяться, что со временем появятся новые версии редактора, и он будет работать все лучше и лучше. А пока так скажу, как бы над нами не посмеивался Тема Лебедев, другого пути у нас как у любителей просто нет. А потом, я лично думаю что постепенно все мастодонты вебдизайна вымрут, и никому в голову не придет составлять HTML-документ в текстовом редакторе, как сейчас никому в голову не приходит писать программы в машинных кодах.
    Еще один фетиш профессионалов: единообразие дизайна страниц сайта. Да, это правильно для специализированного корпоративного сайта. Например разумно, если угольная компания имеет сайт у которого разные станицы (структура, задачи, производственные показатели, финансы и т.д.)  имеют одинаковый дизайн. 
    Но посмотри на мой сайт, как я могу дать одинаковый дизайн и для теории измерительной информации, и для Храма, и для игр? Да к тому же, и одевать личину солидной промышленной компании мне просто не к лицу.
    Любительский сайт должен быть легким, свободным, и никакие умствования профессионалов нам не указ.
    Еще один вопрос. О браузерах. Война браузеров прошла. Что там ни говори а Explorer уверенно вытесняет Netscape. У меня оба браузера из последних версий есть. Netscape меня своими прелестями не удивил. Мне он показался хуже Explorera. Здесь некогда обсуждать их преимущества и недостатки, но думаю, что нормальные люди интересующиеся Интернетом находят возможности обновлять версии браузеров и постепенно переходят на Exsplorer. Совсем недавно говорили, что Нетскейпом пользуются половина интернетчиков. Сейчас уже говорят о десяти процентах. Может это важно для торгового сайта, где идет борьба за каждого покупателя. Может быть, но когда тебя начнут пугать этими проблемами злые профи, ты не очень пугайся. Вот моя статистика по http://top.mail.ru :

Браузеры общий %
Google Chrome 25,81
Mozilla Firefox 22,58
Opera 20,43
Браузеры мобильных устройств 16,13
Microsoft Internet Explorer 11,83
Safari 2,15
 
         Как видишь, браузером Интернет Експлорер пользуются меньшинство. Остальные по возможностям существенно отличаются от IE и, в основном в худшую сторону. В частности, неправильно отображаются ряд математических символов, например, греческие символы, Ö , и ряд других. Поэтому математические тексты пиши в Word, при помощи FormulaEcvation (редактор формул).При этом формируются gif изображения с формулами. И конечно установи Opera и Netscape и Gugle для тестирования страниц. В настройках страницы укажи Both Internet Explorer and Navigator.
        Иногда используют специальные Ява-скрипты, которые переделывают страницу под браузер посетителя. Иногда делают несколько страниц одного содержания под несколько браузеров. Но во первых, это настолько сложно, что не для нас - любителей, во вторых, страница в принципе построенная на современных технологиях уже никак не может быть переделана под устаревшие браузеры. Например мой раздел - "Полет во Вселенную" может исполняться только в IE5 и выше. И мое мнение состоит в том, что если посетитель желает использовать все возможности современной сети, будь добр, обновляй браузер.

    Ну вот, пока все. Переходим к следующему разделу.

 

  

 

Раскрути свою страничку Бесплатно:: 1ps.ru Web-KatoK - каталог интернет ресурсов