Итак, вы хотите создать Web-страничку!
Урок 5

Наверное, сейчас стоит поговорить о разрешении экрана. Наиболее часто используются разрешения 640х480, 800x600 и 1024x768 пикселей. Для того, чтобы ваша страничка выглядела одинаково хорошо на всех мониторах, необходимо многое сделать.

640х480 800х600 1024х768

Если к вам пришла идея проверить, как же будет выглядеть ваша страничка при использовании разных разрешений - это просто замечательно!

Давайте рассмотрим несколько способов форматирования. Первый - это <BLOCKQUOTE>.

<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
Каждому известно, что с точки зрения банальной эрудиции не всякий локально селектированный индивидуум способен игнорировать тенденции потенциальных эмоций и паритетно аллоцировать амбивалентные кванты логистики, экстрагируемой с учетом антропоморфности эвристического генезиса.
</BLOCKQUOTE>
</BODY>
Каждому известно, что с точки зрения банальной эрудиции не всякий локально селектированный индивидуум способен игнорировать тенденции потенциальных эмоций и паритетно аллоцировать амбивалентные кванты логистики, экстрагируемой с учетом антропоморфности эвристического генезиса.

То же самое - без использования тега </BLOCKQUOTE>.
Каждому известно, что с точки зрения банальной эрудиции не всякий локально селектированный индивидуум способен игнорировать тенденции потенциальных эмоций и паритетно аллоцировать амбивалентные кванты логистики, экстрагируемой с учетом антропоморфности эвристического генезиса.

Еще одним очень полезным приемом форматирования являются СПИСКИ. А именно - УПОРЯДОЧЕННЫЕ и НЕУПОРЯДОЧЕННЫЕ списки.

Это - упорядоченный список:
  1. something big
  2. something small
  3. something short
  4. something tall
Это - неупорядоченный список:
  • something red
  • something blue
  • something old
  • something new
Сначала мы научимся создавать НЕУПОРЯДОЧЕННЫЕ списки.

<BODY BGCOLOR="#FFFFFF">
Что я хочу на Новый год:
</BODY>
Что я хочу на Новый год:

Заметьте: формально мы еще не начали создавать список. Это всего лишь заголовок.

Добавим теги неупорядоченного списка.

<BODY BGCOLOR="#FFFFFF">
Что я хочу на Новый год:
<UL>
</UL>
</BODY>
Что я хочу на Новый год:

Добавим пункты списка.

<BODY BGCOLOR="#FFFFFF">
Что я хочу на Новый год:
<UL>
<LI>Эйфелеву башню
</UL>
</BODY>
Что я хочу на Новый год:
  • Эйфелеву башню

И еще несколько пунктов...

<BODY BGCOLOR="#FFFFFF">
Что я хочу на Новый год:
<UL>
<LI>Эйфелеву башню
<LI>яхту
<LI>ювелирный магазин
<LI>миллион долларов
<LI>Мелани Гриффит
</UL>
</BODY>
Что я хочу на Новый год:
  • Эйфелеву башню
  • яхту
  • ювелирный магазин
  • миллион долларов
  • Мелани Гриффит

Ура! Мы создали список!

Создадим теперь упорядоченный список. Изменим тег <UL> на <OL>.

<BODY BGCOLOR="#FFFFFF">
Что я хочу на Новый год:
<OL>
<LI>Эйфелеву башню
<LI>яхту
<LI>ювелирный магазин
<LI>миллион долларов
<LI>Мелани Гриффит
</OL>
</BODY>
Что я хочу на Новый год:
  1. Эйфелеву башню
  2. яхту
  3. ювелирный магазин
  4. миллион долларов
  5. Мелани Гриффит

Другой тип списков - список определений.

ЦИТАДЕЛЬ
(от итал. cittadella, букв. — маленький город), укрепленная центральная часть города или крепости, приспособленная к самостоятельной обороне, последнее убежище защитников при штурме. На Руси цитадель называли детинцем или кромом, а с 14 в. — кремлем. В переносном смысле — твердыня, оплот.

Начнем с этого:

<BODY BGCOLOR="#FFFFFF">
<DL>
</DL>
</BODY>

Теперь зададим название определения:

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>ЦИТАДЕЛЬ
</DL>
</BODY>
ЦИТАДЕЛЬ

Дадим само определение:

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>ЦИТАДЕЛЬ
<DD>(от итал. <I>cittadella</I>, букв. — маленький город), укрепленная центральная часть города или крепости, приспособленная к самостоятельной обороне, последнее убежище защитников при штурме. На Руси цитадель называли детинцем или кромом, а с 14 в. — кремлем. В переносном смысле — твердыня, оплот.
</DL>
</BODY>
ЦИТАДЕЛЬ
(от итал. cittadella, букв. — маленький город), укрепленная центральная часть города или крепости, приспособленная к самостоятельной обороне, последнее убежище защитников при штурме. На Руси цитадель называли детинцем или кромом, а с 14 в. — кремлем. В переносном смысле — твердыня, оплот.

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

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT><B>ЦИТАДЕЛЬ</B>
<DD>(от итал. <I>cittadella</I>, букв. — маленький город), укрепленная центральная часть города или крепости, приспособленная к самостоятельной обороне, последнее убежище защитников при штурме. На Руси цитадель называли детинцем или кромом, а с 14 в. — кремлем. В переносном смысле — твердыня, оплот.
</DL>
</BODY>
ЦИТАДЕЛЬ
(от итал. cittadella, букв. — маленький город), укрепленная центральная часть города или крепости, приспособленная к самостоятельной обороне, последнее убежище защитников при штурме. На Руси цитадель называли детинцем или кромом, а с 14 в. — кремлем. В переносном смысле — твердыня, оплот.

Очень удобно использовать разделительные линии.

<BODY BGCOLOR="#FFFFFF">
<HR>
</BODY>

У нас есть ОЧЕНЬ много возможностей...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>

Это абсолютно очевидно.

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>

Мы можем задавать толщину линий...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>

А можем изменить тип линий:

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>

Помните, что браузер выводит текст как непрерывный поток и не понимает форматирования? Примерно так:

<BODY BGCOLOR="#FFFFFF">
 

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |      BARRY GOLDWATER    |
     |           for           |
     |        President        |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</BODY>
\|/ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo

При помощи тега <PRE> (преформатирование), мы можем указать браузеру выводить текст так, как он введен - со всеми пробелами и т.д.

<BODY BGCOLOR="#FFFFFF">
<PRE>
 

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |      BARRY GOLDWATER    |
     |           for           |
     |        President        |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</PRE>
</BODY>
 
                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |      BARRY GOLDWATER    |
     |           for           |
     |        President        |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

* Обратите внимание, что используется машинный шрифт.

Последний тег, который мы обсудим - это комментарий.

<BODY BGCOLOR="#FFFFFF">
<!--Это - комментарий-->
А это - нет<P>>
Комментарий может быть помещен в любое место документа, и браузер проигнорирует все, что заключено в скобки. Вы можете вставлять в страницу скрытые сообщения, <!--Привет, мама!--> заметки для самого себя, <!--Купить молоко--> или писать полезные сообщения для того, кто будет смотреть исходный код вашей страницы.<!--Только попробуйте скопировать мой код! В суд подам!!!-->
</BODY>
А это - нет

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


Комментарий должен начинаться с <!--, и заканчиваться -->.
В комментарий можно помещать другие html-теги, и они будут проигнорированы. Будет проигнорировано все, что находится до -->

Пожалуй, это все, что вам необходимо знать для того, чтобы создавать свои web-странички. Вы спросите: "Как? Разве это все теги, которые есть?" Ну конечно же нет. Их несколько больше. Намного больше. Но уже сейчас вы знаете приблизительно 70% от того, что действительно необходимо для создания профессиональных web-страниц. Если вы хотите знать больше - посмотрите более "продвинутые" учебники: Работа с таблицами - Table Tutor, Использование форм - Form Tutor and Раота с фреймами - Frames Tutor. С их помощью вы получите еще 27% от всей необходимой информации. Вы спросите, куда делись еще 3%?? В большинстве своем, 3% - это теги, которые вы никогда не будете использовать. Или те теги, которые могут быть с успехом заменены другими тегами. Или теги, которые предназначены для очень узкоспециальных задач; возможно, вы и будете ими пользоваться впоследствии.

<--Назад        Дальше-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Содержание