Итак, Вы хотите построить Web Страницу!
Урок 5


Мы рассмотрели манипуляции с текстом и шрифтом, изображения, связи. Это основы, но пока нет цельного отображения.
Самое время сообщить Вам о разрешающей способности экрана. Экран, на котором мы работаем - 640 на 480 пикселей. Многие используют 800x600 и даже 1024x768. Мы уверены, что есть пользователи и других экранов. Необходимо учитывать это, чтобы ваша страница смотрелась и на других экранах. Вот варианты экрана текущего домашней страницы для различных разрешающих способностей.

640x480 800x600 1024x768

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


Теперь мы собираемся рассмотреть пару инструментальных средств форматирования, доступных для Вас. Вначале один - <BLOCKQUOTE>. В основном этот инструмент перемещает ваши поля обеих сторон.

<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
</BLOCKQUOTE>
<BODY>

WE THE PEOPLE of the United States, in order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.


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


Другой очень полезный небольшой инструмент - LIST - Список. Есть упорядоченные - ORDERED списки и неупорядоченные UNORDERED списки.

Это упорядоченный список
  1. большой
  2. малый
  3. короткий
  4. длинный
Это неупорядоченный список
  • красный
  • синий
  • старый
  • новый

Сначала, мы сформируем НЕупорядоченный список.

Начните с этого...

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<BODY>

What I want for Christmas


Обратите внимание - технически мы не начинали формировать список. Это - только своего рода заголовок.


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

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
</UL>
<BODY>

What I want for Christmas



Добавьте элемент списка.

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
<LI>a big red truck
</UL>
<BODY>

What I want for Christmas
  • a big red truck



Добавьте еще несколько ...

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<UL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</UL>
<BODY>

What I want for Christmas
  • a big red truck
  • a real fast speedboat
  • a drum set
  • a BB gun
  • a Melanie Griffith


Ура! Вы сделали список!


Как делать упорядоченный список? Просто! Замените метку <UL> на <OL>.

<BODY BGCOLOR="#FFFFFF">
What I want for Christmas
<OL>
<LI>a big red truck
<LI>a real fast speedboat
<LI>a drum set
<LI>a BB gun
<LI>a Melanie Griffith
</OL>
<BODY>

What I want for Christmas
  1. a big red truck
  2. a real fast speedboat
  3. a drum set
  4. a BB gun
  5. a Melanie Griffith



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

aardvark
Норное, питающееся муравьями Африканское млекопитающее. И, как знает каждый, первое слово в каждом уважающем себя словаре.


Начните с этого...

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


Затем добавьте заголовок определения...

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment
</DL>
<BODY>

10th Amendment



И элемент определения.

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>10th Amendment
<DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
</DL>
<BODY>

10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.



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

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT><B>10th Amendment</B>
<DD>The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
</DL>
<BODY>

10th Amendment
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.



Другой небольшой прием - Горизонтальная Линия - Horizontal Rule.

<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> (preformat), мы можем положить конец этому и иметь вещи отображенными так, как мы их набираем.

<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">
<!--This is a comment-->
This is not<P>>
A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, <!--Hi Mom!--> notes to yourself, <!--Pick up milk--> or write a helpful message to someone looking at the source of your page.<!--Copy anything off me and you're dead meat!-->
<BODY>

This is not

A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, notes to yourself, or write a helpful message to someone looking at the source of your page.


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


Вы теперь знаете все основные метки, которые вам необходимы для создания web страниц! Есть ли еще метки? Да и много. Но вы имеете приблизительно 70 % вооружения, которое вам необходимо для создания web страниц. После того, как Вы поработаете с этими основными метками некоторое время, Вы захотите просмотреть более продвинутые учебники: Таблицы, Формы и Фреймы. Они дадут Вам другие 27 % того, что Вы должны знать. А где остальные 3 %? Большинство является метками, которые Вы возможно никогда не будете использовать. Или метками, которые дублируют другие метки, то есть выполняют ту же самую функцию. Или метки, которые имеют очень ограниченное и специализированное использование и Вы можете добавить их в ваш арсенал приемов позже.

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

Наиболее опытные авторы используют текстовые редакторы. Эти редакторы вставляют в набор метки простым щелчком. Они делают это так, что Вы не должны вручную набрать коды цвета, LEFT, RIGHT, CENTER или что-то подобное. Вы имеете абсолютный контроль над вашим проектом страницы. Тройка хороших, которые приходят в голову - CMed, HTMLpad и HTML Notepad. Они все имеют общее - то, что Вы должны знать некоторый HTML. Они упростят процесс вашего кодирования. Они не будут пытаются делать это за Вас.

Как только Вы сделали вашу страницу, Вам необходимо передать ее на сервер. Сервер - это компьютер, который выполняет программу сервера, которая раздает документы всем, кто запрашивает их. Если Вы подключены к internet через вашу компанию или университет спросите вашего администратор системы, как получить место на вашем сервере для ваших страниц. Если Вы имеете собственного Провайдера услуг Internet, спросите его, как получить место. Единственный определенный совет, который мы можем дать, - самая лучшая программа для пересылки ваших файлов - это Cute FTP. Эта программа делает пересылку файлов между компьютерами такой же простой, как и перемещение их на вашем собственном компьютере.

Прежде, чем закончить, мы должны поговорить о стиле и содержании web страницы. Но лучше вам посмотреть Top 10 ways to tell if you have a sucky homepage и Do's and Don'ts of web site design. Определенно стоит посмотреть.

<--ОБРАТНО        ДАЛЕЕ-->

Введение Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Указатель