Главная » Мастерская » Статьи » УЧЕБНИК (HTML Уроки)

Учебник по HTML (HTML Уроки) - Урок 5

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

800x600 1024x768

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

Теперь мы собираемся рассмотреть пару инструментальных средств форматирования, доступных для Вас. Вначале один - <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----(_)-----------+
     |      ByWeb design       |
     |           for           |
     |        everyone         |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

<BODY>

...отобразится так...

\|/ (@ @) +----oOO----(_)-----------+ | ByWeb design | | for | | everyone | +-----------------oOO-----+ |__|__| || || ooO Ooo


Меткой <PRE> (preformat), мы можем положить конец этому и иметь вещи отображенными так, как мы их набираем.

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

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |      ByWeb  design      |
     |           for           |
     |        everyone         |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

</PRE>
<BODY>

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |      ByWeb design       |
     |           for           |
     |        everyone         |
     +-----------------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 %? Большинство является метками, которые Вы возможно никогда не будете использовать. Или метками, которые дублируют другие метки, то есть выполняют ту же самую функцию. Или метки, которые имеют очень ограниченное и специализированное использование и Вы можете добавить их в ваш арсенал приемов позже.

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

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

[назад] [дальше]


Copyright ByWeb©
Hosted by uCoz