Четверг, 26.12.2024, 11:43 Приветствую Вас Гость

Одна КОМАНДА

Меню сайта
Категории каталога
Сооздание сайта [6]
материалы и статьи по созданию сайтов своими ручками
Категория Сайтостроение [0]
описание категории сайтостроение
Главная » Статьи » Что нам стоит сайт построить » Сооздание сайта

САЙТОСТРОЕНИЕ (часть 6)
ТЕГИ, ПРИМЕНЯЕМЫЕ ДЛЯ ФОРМАТИРОВАНИЯ ШРИФИА

   Для правильного и симпатичного отображения информации на Вашей страничке Вам потребуется не только правильно расставить абзацы, в нужном месте перевести строку, и пр., но и расставить акценты внутри текста, т.е., что-то выделить жирным шрифтом, что-то написать другим цветом, что-то подчеркнуть и т.д. На все эти случаи в языке HTML существуют соответствующие теги. Рассмотрим некоторые из них, наиболее часто употребляемые. Нет необходимости описывать здесь все теги подряд, т.к. освоив употребление нескольких, Вы без труда сможете пользоваться остальными.
  • <B>...</B> - выделяет текст, помещенный внутрь, жирным шрифтом.
  • <I>...</I> - выделяет текст, помещенный внутрь, наклонным шрифтом.
  • <U>...</U> - выделяет текст, помещенный внутрь, подчеркиванием.
  • <BIG>...</BIG> - более крупный шрифт.
  • <SMALL>...</SMALL> - более мелкий шрифт.
    Небольшой комментарий - Для форматирования шрифтов можно применять теги физического форматирования и теги логического форматирования. Их отличие в том, что теги физического форматирования дают браузеру конкретное указание, каким шрифтом печатать текст, а теги логического форматирования указывают ему лишь на то, что текст должен отличаться от обычного в ту или иную сторону. Например, вместо тегов <BIG>...</BIG> и <SMALL>...</SMALL> можно употребить тег
  • <FONT></FONT>, который имеет параметры
    FACE - задает тип шрифта,
    SIZE - задает размер шрифта,
    COLOR - задает цвет шрифта.
    Например, эта фраза написана внутри тега: <FONT FACE="Comic Sans MS " SIZE=6 COLOR=red></FONT>.
    Спецификация HTML-4.0 рекомендует употреблять теги логического форматирования, как более лояльные к пользователю. В некоторых случаях употребление тегов физического форматирования может не привести к желаемому результату. Например, в случае с вышеприведенной фразой, браузер покажет ее шрифтом, установленным по умолчанию, если на машине пользователя нет шрифта Comic Sans MS. В редакторе SNK Visual HTML Workshop теги логического форматирования Вы найдете нажав кнопку "Стили", а теги физического форматирования - нажав кнопку "Шрифт".
  • <STRONG>...</STRONG> - сильно выделенный текст.
  • <РRE>...</PRE> - уже знакомый нам тег. 
    Все, помещенное в него, сохраняет форматирование на уровне
    текста, но выводится моноширинным текстом (Что это такое,
    Вы видите на этом примере).
   Этого, наверно, достаточно. Как видите, особого разнообразия не наблюдается (мой браузер, например, показывает текст, помещенный в теги <SMALL>...</SMALL>, <РRE>...</PRE>, <TT>...</TT> совершенно одинаково), но вполне достаточно, чтобы выполнить страничку в соответствии с Вашим вкусом.

ТЕГИ СПИСКОВ

   Для предоставления информации на страницах сайтов в виде списков в языке HTML предусмотрен специальный набор тегов. Они дают возможность составлять:
  1. Нумерованые или упорядоченные списки.
  2. Компактные или маркированные списки.
  3. Списки определений.
  4. Списки меню.
   a.Нумерованные списки создаются при помощи тега-контейнера <OL> . . .</OL>. Пример применения этого тега у Вас перед глазами.
Тег имеет параметры:
  • TYPE - задает тип маркера, которым отмечается список. Этот параметр может принимать значения:
    • A - задает маркеры в виде заглавных латинских букв.
    • a - задает маркеры в виде строчных латинских букв.
    • I - задает маркеры в виде больших римских цифр.
    • i - задает маркеры в виде маленьких римских цифр.
    • 1 - задает маркеры в виде арабских цифр.
    По умолчанию принимается значение 1, т. е. нумерация ведется арабскими цифрами.
  • COMPACT - в настоящее время не рекомендуется к употреблению.
  • START - позволяет начать нумерацию списка не с единицы. Принимает значение порядкового номера элемента, с которого Вы хотите начать нумерацию.
Синтаксис записи: <OL type=1 start=10> . . .</OL>
Каждый элемент списка внутри этого тега помещается в тег-контейнер <LI> . . .</LI>. Закрывающий элемент тега LI может быть опущен.
   В качестве примера составим еще один нумерованный список. HTML-код его выглядит так: <OL type=I start=6>Летние месяцы года: <LI>Июнь <LI>Июль <LI>Август </OL>
На странице сайта это будет выглядеть так:
    Летние месяцы года:
  1. Июнь
  2. Июль
  3. Август
   b.Маркированные списки создаются при помощи тега-контейнера <UL> . . .</UL>. Тег имеет параметры:
  • TYPE - задает тип маркера, которым отмечается список. Этот параметр может принимать значения:
    1. = disc - маркеры отображаются закрашенными кружками.
    2. = circle - маркеры отображаются не закрашенными кружками.
    3. = square - маркеры отображаются закрашенными квадратами.
    Параметр type можно употреблять как для всего списка, так и для каждого элемента в отдельности.
  • Парметр COMPACT - в настоящее время не рекомендуется к употреблению.
Каждый элемент списка внутри этого тега помещается в тег-контейнер <LI> . . .</LI>. Закрывающий элемент тега LI может быть опущен.
   Кроме того есть недокументированная возможность выводить в качестве маркеров выводить всяческие симпатичные штучки.
    Для этого необходимо:
    favicon.gif[145 байт] Найти симпатичную штучку.
    favicon.gif[145 байт] Сделать ее миниатюрную копию желательно (но не обязательно) в формате gif.
    favicon.gif[145 байт] Вставить вместо тега LI.
    favicon.gif[145 байт] Поставить после каждого элемента списка тег BR.
Я надеюсь, понятно рассказал. Для большей ясности приведу кусок кода, с помощью которого сделан этот список:
<UL>Для этого необходимо:<BR>
<IMG SRC="img/favicon.gif" ALT="favicon.gif[145 байт]" WIDTH="20" HEIGHT="20" BORDER="0"> Найти симпатичную штучку.<BR>
<IMG SRC="img/favicon.gif" ALT="favicon.gif[145 байт]" WIDTH="20" HEIGHT="20" BORDER="0"> Сделать ее миниатюрную копию желательно (но не обязательно) в формате gif.<BR>
<IMG SRC="img/favicon.gif" ALT="favicon.gif[145 байт]" WIDTH="20" HEIGHT="20" BORDER="0"> Вставить вместо тега LI.<BR>
<IMG SRC="img/favicon.gif" ALT="favicon.gif[145 байт]" WIDTH="20" HEIGHT="20" BORDER="0"> Поставить после каждого элемента списка тег BR.<BR>
</UL>

Замечу попутно, что язак HTML имеет еще множество неизученных возможностей и комбинаций кодов. Так что экспериментируйте, фантазируйте, дерзайте, одним словом - и у Вас могут получиться уникальные вещи!
   c.Списки определений создаются при помощи тега-контейнера <DL> . . .</DL>. Внутри контейнера определяемый термин помечается тегом <DT>, а абзац с его определением - тегом <DD>. Для тегов DT и DD закрывающие элементы не обязательны. Пример такого списка:

Разделение млекопитающих животных по типу питания.

Травоядные.
Животные, питающиеся растительной пищей.
Хищники.
Животные, питающиеся другими животными.
Всеядные.
Человек.
   d.Списки меню создаются при помощи тегов <DIR> и <MENU>. В спецификации HTML-4.0 отмечены как отмененные, хотя все еще поддерживаются ведущими браузерами. Задумывались, как более компактные по сравнению с обычными списками. Современными браузерами отображаются точно так же, как компактные списки.

ВСТАВКА ГИПЕРССЫЛОК В WEB-СТРАНИЦУ

   Вот мы, наконец, и подошли к предмету, который собственно и делает обыкновенный текст гипертекстом. Ссылки, гиперссылки или links, как Вам больше нравится. Без ссылок трудно, наверное, даже представить себе работу в интернете. И уж конечно, она не была бы без них такой увлекательной. Впрочем, что я Вам буду объяснять, если Вы сами, наверняка, кликаете по этим самым ссылкам и баннерам (которые тоже являются ссылками) каждый день (ну, может не каждый, но часто). Лучше сразу перейдем к рассмотрению вопроса об организации ссылок на странице.
   В гипертексте ссылки можно делать
  • на конкретное место в просматриваемом документе. Удобно использовать, например, в больших документах в оглавлении для быстрого перехода к нужной главе.
  • на другую страницу Вашего сайта. Примеры Вы можете найти на каждом сайте в виде меню. Сюда же можно включить ссылки на изображения, звуковые и прочие файлы мультимедиа, находящиеся на Вашем сайте.
  • на конкретное место в других страницах Вашего сайта.
  • на другие WEB-страницы и сайты.
  • на адрес электронной почты.
  • на прочие ресурсы интернета: TelNet, WAIS, Gofer, FTP, Newsgroup.
   В этой статье мы рассмотрим употребление единственного тега-контейнера <A>...</A>. Рассмотрение остальных тегов, относящихся к этой теме не актуально, поскольку они или малоупотребляемы, или поддерживаются не всеми браузерами. Тег <A>...</A> имеет два параметра: HREF="" и NAME=. Первый из них должен иметь в качестве значения адрес, по которому находится ресурс, на который Вы ссылаетесь. Второй употребляется для обозначения места в документе, на которое Вы хотите поставить ссылку. Естественно, что в одном теге оба параметра употребляться не могут, т.к. служат для обозначения разных действий. Еще один параметр, который может употребляться совместно с параметром HREF="", параметр TARGET="" указывает, как открывать документ, на который ссылаемся.
   Рассмотрим примеры.
  1. Ссылка на конкретное место в текущем документе. Для ее организации необходимы два шага. Первый: ставим в месте, на которое хотим сослаться тег <A>...</A> с параметром NAME=. В качестве значения этого параметра можно использовать любую надпись, например link1. В данном случае, для наглядности, мы сошлемся на заголовок этой статьи. Заголовок уже поставлен внутри тега, имеющего вид <A NAME=link1>ВСТАВКА...</A>. В переводе на русский, это называется "поставить якорь". Шаг второй: ставим ссылку на заголовок, т.е. вставляем тег вида <A href="#link1"> ...</A>. Вместо точек ставим слова, которые будут являться указателем ссылки. Браузер будет выделять эти слова из остального текста. Способ выделения зависит от личных настроек пользователя и от установок, данных Вами в теге BODY. Пробуем: "Чтобы перейти к заголовку этой статьи, щелкните мышкой здесь". Щелкаем на слове "здесь". Для того, чтобы переход был нагляднее, можете уменьшить окно браузера. Обращаю Ваше внимание, что во втором теге к слову link1 прибавился значок #. Работает? Хорошо, пошли дальше.
  2. Ссылка на другую страницу Вашего сайта. Это проще. Здесь используется только один тег <A>...</A> с параметром HREF="" т.к. нет необходимости обозначать место, на которое ссылаемся. Файл, содержащий страницу или рисунок которые мы хотим показать, уже имеет имя и нам достаточно указать в качестве значения HREF="" путь к этому файлу и его имя. Например, для перехода к статье о форматировании текстов, файл которой находится в том же каталоге (папке, директории, кому как привычнее), что и файл этой статьи, и называется text.html, необходимо вставить тег <A HREF="text.shtml">статья о форматировании текста</A>.Браузер покажет ссылку так: статья о форматировании текста. Щелкнув по ней, Вы можете убедиться, что она работает. (не забудьте потом нажать кнопку браузера "назад" :-) Если файл, на который Вы ссылаетесь, находится в другой директории, необходимо указать путь к этому файлу. Например: <A HREF="img/oz2.jpg"> здесь Вы можете полюбоваться прекрасным лесным озером </A>. В данном случае файл oz2.jpg лежит в папке img. Не забывайте, что при указании путей в ссылках необходимо использовать прямой слеш.
       Для тех, кто работает с редактором SNK: для того, чтобы вставить ссылку на файл, принадлежащий к рабочему проекту, достаточно кликнуть правой кнопкой по его названию в левом окошке и выбрать "создать ссылку".
  3. Ссылка на конкретное место в других страницах Вашего сайта. Состоит из первых двух, т.е. в параметре HREF="" указывается файл, в котором уже должен быть поставлен якорь, и название этого якоря. Например, в статье "знакомство с HTML" я Вам советовал скачать спецификацию HTML. Там (т.е. в статье "знакомство...) поставлен якорь с именем В и теперь для того, чтобы сослаться на этот совет, мне достаточно поставить тег <A HREF="lang.shtml#B">советовал</A>. В чем Вы можете убедиться, кликнув по ссылке.
  4. Ссылка на другие WEB-страницы и сайты. Ну, это совсем просто. Задаете в качестве значения параметра HREF URL-адрес ресурса (т.е. адрес, который Вы набираете в окне адресов браузера, когда хотите открыть какую-нибудь интернет-страницу), помещаете внутрь тега указатель ссылки, и - готово! Например, Вы можете посмотреть мой сайт (к сожалению, немного запущенного из-зи нехватки времени), который является по содержанию копией этого, но выполнен без фреймов и с помощью SSI (об SSI позднее) здесь. Для того, чтобы организовать данную ссылку, я поставил такой код: <A HREF="http://www.ronets.hut.ru">здесь.</A>.

       Кстати, указателем ссылки могут быть не только текст, но и изображения. Впрочем, всем Вам это знакомо (я имею в виду использование изображений в качестве указателя ссылки). Да, это те самые, всем так надоевшие баннеры! Но баннеры - не единственный, к счастью, пример употребления изображений в качестве указателя ссылки. Например, для того, чтобы показать Вам то самое озеро, я могу использовать такого вида указатель: Здесь Вы можете полюбоваться 
прекрасным утренним озером.. Для этого в тег А нужно вставить рисунок. Как это сделать, говорилось в предыдущей статье ВСТАВКА РИСУНКОВ НА СТРАНИЦУ. В данном случае я это сделал при помощи такого куска кода: <A HREF="img/oz2.jpg"><IMG SRC="img/oz2.jpg" ALT="Здесь Вы можете полюбоваться прекрасным утренним озером." WIDTH="40" HEIGHT="30" BORDER="2"></A>. Здесь, вроде бы, все должно быть понятно. Если что-то слишком мудрено изложено, напишите мне, я объясню и, кроме того, помещу ответ на страницу ЧаВо.

  5. Ссылка на адрес электронной почты. Как Вы можете видеть, в предыдущей фразе "Вы можете написать мне" слово "мне" выделено как ссылка и при наведении на него указателя мышки в подвале браузера появляется адрес моей электронной почты (у тех, у кого эта функция включена). В ссылке на эл.почту параметр HREF имеет значение "mailto:адрес эл.почты". Т.е. в данном случае код выглядит так: <A HREF="mailto:svoisait@narod.ru">мне</A>.
  6. Ссылка на прочие ресурсы интернета: TelNet, WAIS, Gofer, FTP, Newsgroup.
    Здесь я приведу только значения параметра HREF для каждого случая:
    • telnet://имя сайта
    • wais://имя сайта
    • gopher://имя сайта
    • ftp://имя сайта
    • news:имя группы новостей
   Вот собственно и все о ссылках. Да, вот собственно и почти все о создании своей странички на своем компьютере. В первом приближении, конечно. Есть еще списки, скрипты, фреймы, и еще много чего. Но, если Вы научились пользоваться тем, о чем я рассказал, Вам вполне по силам сделать приличную вещь. По приходящим письмам я вижу, что многие уже сделали первый шаг, т.е. создали страничку на своей машине и теперь им не терпится выложить ее в инет... А кое-кто уже и это сделал. Не хочу Вас пугать, но скоро Вы поймете, что это только начало. Ну что же, жизнь продолжается! В следующих статьях будем разбираться, что же делать с тем, что мы натворили...


Категория: Сооздание сайта | Добавил: odnakomanda (06.08.2008)
Просмотров: 1047 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Поиск
Друзья сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Copyright MyCorp © 2024 Сайт управляется системой uCoz