To main English To write a letter info@relcom.kz
О Компании
Контактная информация
Вакансии
Прейскурант
Договор
Поддержка
Советы
Поиск в Интернет
Новости в Интернет
Новости в Семипалатинске
Архив полезных программ
Музыкальная шкатулка
Форум
Городской чат
Домашние странички
Советы - главная
Безопасность в Интернет:
  • О безопасности в Интернет
  • Атаки из Интернет

    Настройка программного обеспечения:

  • Netscape Navigator 3.x
  • Netscape Communicator 4.x
  • Microsoft Internet Explorer 3.0
  • Microsoft Internet Explorer 4.0

    WEB дизайн:

  • Правила хорошего тона в WEB дизайне
  • Дюжина советов по написанию web страниц для начинающих
  • Сервера, раздающие бесплатные странички
  • Бесплатные гостевые книги

  • Ответы на все интересующие вопросы можно получить, написав по адресу:
    info@nic.kz

    или позвонив по телефону:
    8(7222)52-49-90

    Также Мы будем рады выслушать любые предложения и пожелания

    WEB дизайн:

    Дюжина советов по написанию web страниц для начинающих

    Содержание
    Что такое HTML?
    Управление цветами на Ваших страницах.
    Создание горизонтальных линий.
    Создание списков.
    Создание списков с номерами.
    Заголовки.
    Форматирование текста.
    Абзацы и переходы на новую строку.
    Ссылки внутри документа.
    Ccылки на документ в той же системе.
    Ccылки на документ, находящийся в другой системе.
    Добавление изображений на Вашу страницу.


    Что такое HTML?

    Слово HTML расшифровывается как Hypertext Markup Language - язык разметки гипертекста. Он содержит набор кодов (их еще называют тэгами), которые определяют вид текста на экране броузера, такого как Netscape Navigator(Communicator) или Microsoft Explorer. Так как Вы просматриваете этот документ, значит скорее всего используете один из броузеров. Используя команду "просмотреть источник", Вы можете увидеть HTML код этой странички. В Netscape Communicator, выберите меню View, из которого выберите пункт Page Source. В русском MS IE 3.0 - меню Вид, пункт Источник... Таким образом, документ, содержащий HTML код называется документом HTML или web страничкой.

    Для того, чтобы HTML документ правильно распознавался броузерами, он должен иметь определенную структуру. Простейший документ HTML выглядит так:

    <HTML>
    <HEAD>
    <TITLE>
    </TITLE>
    </HEAD>
    <BODY>
    Основной документ располагается здесь
    </BODY>
    </HTML>

    Вы наверное заметили, что существует открывающий код, который заключен в треугольные скобки (< >). И закрывающий код, включающий обратную черту (</ >).

    Например, любой документ HTML должен открывается кодом <HTML> и закрывается </HTML>.

    Это верно для большинства кодов (но не для всех).

    Наилучший способ выучить HTML - это использовать его. Вы можете просмотреть советы. Каждый из них поможет Вам выучить немного больше. Если Вы хотите узнать больше, попробуйте посетить Ссылки на другие информационные источники по HTML.


    Управление цветами на Ваших страницах

    Цвета, картинка фона, и некоторые другие свойства всей страницы управляются тэгом <BODY>.

    Для определения цвета фона HTML документа, тэг <BODY> должен выглядеть примерно так :
    <BODY BGCOLOR="#xxxxxx">

    Вы можете описать любой параметр тэга <BODY> (BGCOLOR - цвет фона, TEXT - цвет текста, LINK - цвет ссылки, ALINK - цвет активной ссылки, VLINK - цвет ссылки, по которой уже было обращение), или не включать описание любого из них. В этом случае для пропущенного параметра будет использовано значение по умолчанию. Чтобы задать цвет фона, текста ссылок (простых, активных и посещенных), подставьте значение, определяющее цвет вместо xxxxxx. Вот значения лишь для нескольких цветов, которые Вы можете использовать:

    БелыйFFFFFF  
    Черный000000   
    КрасныйFF0000   
    Синий0000FF   
    Зеленый00FF00   
    ЖелтыйFFFF66   
    Серый999999   

    Эти числа представляют шестнадцатеричное значение комбинации RGB (Красный, Зеленый, Синий). Смешиванием этих трех цветов получается нужный цвет. Мы не ставим перед собой цели перечислить все значения цветов в этом руководстве. Можно описать любой цвет. Если Вы увидели на чьей нибудь странице цвет, который Вам понравился, Вы можете воспользоваться средством Просмотреть Источник Вашего броузера, чтобы увидеть код этого цвета.

    Рекомендация: Начните с добавления тэга

    <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#000080" VLINK="#FF0000">

    Это комбинация, которая использована в этой страничке. В последствии Вы можете экспериментировать с цветами, изменяя этот тэг.


    Создание горизонтальных линий

    Вы можете вставить горизонтальную линию в Ваш документ, используя тэг <hr>. По умолчанию получится тонкая линия полной длины, с тенью, похожая на эту:


    Если Вы добавите параметр SIZE=число, Вы сможете изменить толщину линии. Длина линии может быть изменена добавлением параметра WIDTH=Процент. Тень линии можно убрать добавлением параметра NOSHADE.

    К примеру, комбинация,

    <HR SIZE=10 NOSHADE WIDTH=50%>

    создаст толстую линию половинной длины, без тени.



    Создание списков

    Вы можете создать ненумерованный список при помощи тэга <ul> (Unordered List). Формат следующий:

    <ul>
    <li>Значение 1
    <li>Значение 2
    <li>Значение 3
    </ul>

    В результате должно получиться нечто, похожее на это:

    • Значение 1
    • Значение 2
    • Значение 3


    Создание списков с номерами

    Вы можете создать пронумерованные списки при помощи тэга<ol> (Ordered List). Формат следующий:

    <ol>
    <li>Значение 1
    <li>Значение 2
    <li>Значение 3
    </ol>

    Результат:

    1. Значение 1
    2. Значение 2
    3. Значение 3


    Заголовки

    Броузеры распознают шесть уровней заголовков.

    <h1>Заголовок 1-го уровня </h1>
    <h2>Заголовок 2-го уровня </h2>
    <h3>Заголовок 3-го уровня </h3>
    <h4>Заголовок 4-го уровня </h4>
    <h5>Заголовок 5-го уровня </h5>
    <h6>Заголовок 6-го уровня </h6>

    Они выглядят следующим образом:

    Заголовок 1-го уровня

    Заголовок 2-го уровня

    Заголовок 3-го уровня

    Заголовок 4-го уровня

    Заголовок 5-го уровня
    Заголовок 6-го уровня


    Форматирование текста

    Вы может отобразить жирный текст или наклонный, если заключите текст в следующие тэги.

    <b> Жирный текст </b>
    Результат: Жирный текст

    <i> Наклонный текст </i>
    Результат: Наклонный текст

    <b><i> Жирный наклонный текст </i></b>
    В результате получим: Жирный наклонный текст


    Абзацы и переходы на новую строку

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

    При помощи тэга <br> Вы можете оборвать текущую строку текста и начать новую с новой строки. В результате использования тэга <p> текущая строка будет прервана, будет вставлена пустая строка и только после нее начнется новая строка.


    Ссылки внутри документа

    Создать ссылку внутри документа просто (что-бы читатель мог переходить от одной части документа к другой, выбрав ссылку). Необходимо проделать два шага.

    1. Определить ЦЕЛЬ куда нужно перескочить. Тег должен выглядеть следующим образом:
      <a name="сюда записать имя_цели">целевой_текст</a>

    2. Вставить ссылку, по которой необходимо переходить к ЦЕЛИ. Ссылка выглядит следующим образом:
      <a href="#имя_цели">текст_ссылки</a>

    Текст_ссылки будет подчеркнут и иметь цвет ссылки, заданный тегом в начале документа. Когда пользователь выберет ссылку, броузер перескочит на целевой_текст. Содержание это хороший пример ссылки внутри одного документа.


    Ccылки на документ в той же системе

    Задавать подобные ссылки тоже достаточно просто. По ним броузер будет перескакивать на документы, расположенные на том же web сервере, где располагаются Ваши странички. Формат тэга следующий:

    <a href="относительный_путь_и_имя файла">текст_ссылки</a>

    Если файл, на который нужно организовать переход, находится в той же директории, что и документ из которого он вызывается, достаточно определить только имя файла. Если в другой, тогда необходимо задавать и путь к файлу и имя файла. Например, если документ, в который надо вставить ссылку находиться в директории с именем versa. А вызываемый файл имеет имя beetle.gif и расположен он в директории versa/images. В этом случае тэг будет иметь вид <a href="images/beetle.gif">. А вот если вызывающий файл находился в "versa/images" и вызываемый файл был в versa, тогда тэг должен быть записан как <a href="../beetle.gif"> Я поместил файл beetle.gif в ту же директорию, что и документ, который Вы сейчас читаете. Этот файл может быть открыт с помощью следующей ссылки:

    <a href="jaguar.jpg"> Открыть jaguar.jpg </a>

    Попробуйте выбрать ссылку (внизу), после чего воспользуйтесь кнопкой "Назад" Вашего броузера, что-бы вернуться к этому документу.

    Открыть jaguar.jpg


    Ccылки на документ, находящийся в другой системе

    Создание ссылки на файл, находящийся в любом месте Интернет очень похоже на создание ссылки на документ находящийся в той же системе. Различие лишь в том, что вместо использования относительного пути и имени файла, используется URL(uniform resource locator, или адрес интернет - другими словами). Ссылка:

    <a href="http://www.zaknet.kz/">Узнать побольше про ZakNet" </a>

    позволит Вам перейти к начальной странице Галереи Комарова, расположенной по адресу http://www.belweb.net/komarov/. Вы можете возратиться к читаемому документу, воспользовавшись кнопкой Назад Вашего броузера. Попробуйте!

    Узнать побольше про ZakNet


    Добавление изображений на Вашу страницу

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

    <img src="up.gif">

    Этот тэг означает, что файл с изображением up.gif, расположенный в той же директории, что и сам документ, должен быть изображен примерно вот так:

    Вы можете управлять позицией картинки на экране, так же как и расположением текста. Например, если Вы заключите изображение в тэг центрирования (<center> </center>), то получите следующий эффект:

    Вы можете комбинировать тэг изображения с другими элементами Вашего документа. Например, следующая комбинация:

    <a href="#top_up"><img src="up.gif" align=bottom> К содержанию.</a>

    Результат:

    К содержанию.

    Можно очень много рассказать про графические изображения, так как они являются ключевым элементом действительно хороших страниц, тем не менее они могут и отпугнуть пользователя долгой загрузкой. Необходим компромисс между размером изображений и наглядностью.






    О Компании
    Контактная информация
    Вакансии
    Прейскурант
    Договор
    Поддержка
    Советы
    Поиск в Интернет
    Новости в Интернет
    Новости в Семипалатинске
    Архив полезных программ
    Музыкальная шкатулка
    Форум
    Городской чат
    Домашние странички
    RelcomSL