Отправляет email-рассылки с помощью сервиса Sendsay

Сайтостроение (уроки по HTML, PHP, MySQL, веб-дизайну)

Рассылка закрыта

При закрытии подписчики были переданы в рассылку ""Свой сайт - это просто! Создание, продвижение, SEO"" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
tmorozova.ru

Статистика

17.902 подписчиков
-41 за неделю
←   Все выпуски   →

Сайтостроение (уроки по HTML, PHP, mySQL , WEB-дизайн)


Служба Рассылок Subscribe.Ru

Сайтостроение. Основы HTML. Уроки с сайта http://progs.biz

Рассылка №2

Основы HTML. Урок 5. Гиперссылки.
Основы HTML. Урок 6. Вставка картинок.
Основы HTML. Урок 7. Списки.
Основы HTML. Урок 8. Заголовки и абзацы.
Полные версии уроков (с картинками) можно найти по адресам
Урок 5. Гиперссылки.
Урок 6. Вставка картинок.
Урок 7. Списки.
Урок 8. Заголовки и абзацы.

HTML. Урок 5. Гиперссылки

Видимо, самое главное, чем WEB-страница отличается от обычного книжного текста - так это наличием гиперссылок. Что это такое мы объяснять не будем (уж раз вы дошли до этой странички в Интернете ;)), то просто рассмотрим, как такие ссылки делать.

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

<a href="001.shtml">Ссылка на другую страницу</a>

Вот так эта ссылка будет выглядеть для пользователя:

Ссылка на другую страницу

В синтаксисе тут ничего сложного нет - между тегами пишется то, что посетитель странички должен увидеть (в нашем случае это слова "Ссылка на другую страницу"), а внутри кавычек (<a href="...">) пишется адрес странички, на которую посетитель должен перейти.

Ссылки бывают нескольких типов - относительные, абсолютные и т. п. Вот несколько примеров.

Ссылка на другую страницу, расположенную в подпапке folder текущей папки:

<a href="folder/001.shtml">Ссылка на другую страницу</a>

Ссылка на другую страницу, расположенную в папке, содержащей текущую папку (т. е. мы поднимаемся на один уровень наверх в иерархии папок):

<a href="./001.shtml">Ссылка на другую страницу</a>

Ссылка на другую страницу, расположенную в корневой папке сайта:

<a href="/index.shtml">Ссылка на главную страницу сайта</a>

Ссылка на другую страницу, расположенную в подпапке vc корневой папки сайта:

<a href="/vc/vc01.shtml">Ссылка на другую страницу</a>

Ссылка на страницу, расположенную на другом сайте (обратите внимание, что в этом случае мы пишем протокол http://):

<a href="http://microsoft.com">Microsoft</a>
Наверх

HTML. Урок 6. Вставка картинок

Картинка вставляется в HTML-страничку так:

<img src="images/006_01.gif">

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

Отметим несколько параметров тега img.

Во-первых, параметр border. Он показывает, какова величина границы для нашей картинки. Вот примеры:

<img src="images/006_01.gif" border="0">

Картинка будет без границ.

<img src="images/006_01.gif" border="1">

Картинка будет с границей в 1 пиксел.

<img src="images/006_01.gif" border="5">

Картинка будет с границей в 5 пикселов.

Во-вторых, параметры width и height. Они задают размеры картинки в пикселах. В принципе, все будет работать и без этих параметров. Но с ними лучше, и вот почему. Дело в том, что текст на вашей WEB-страничке не будет показываться, пока не определит точное свое местоположение. И если эти два параметра для картинки не заданы, то тексту придется ждать, пока картинка (точнее все картинки ;() полностью не загрузятся. Если же эти параметры указать, то браузер резервирует место под картинку и начинает выводить текст, так что посетитель сможет сразу приступать к чтению, не дожидаясь полной загрузки картинки. Вот пример использования этих параметров:

<img src="images/006_01.gif" width="25" height="23">

В-третьих, параметр alt. Он задает текстовое описание для вашей картинки. Без него тоже можно обойтись, но лучше поставить. И если в браузере пользователя отключена загрузка картинок (для скорости), то по крайней мере он увидит текстовое описание. Кроме того, вставка этого параметра может слегка поднять релевантность вашей WEB-странички для поисковых машин - по крайней мере некоторые поисковики учитывают этот параметр. А вот пример его использования:

<img src="images/006_01.gif" alt="Описание картинки">

И последнее. Вы можете использовать картинки разных форматов. Самые распространенные из них - это gif и jpg. Gif в основном используется для разных маленьких картинок с количеством цветов не более 256, jpg - для фотографий. Кроме того, gif-файлы могут быть анимированными.

Со вставкой картинок, пожалуй, все.

Наверх

HTML. Урок 7. Списки

Списки бывают нумерованные и ненумерованные.

Вот так делаются нумерованные списки:

<ol>
 <li>Первый элемент списка</li>
 <li>Второй элемент списка</li>
 <li>Третий элемент списка</li>
</ol>

А вот так будет этот список выглядеть на странице:

  1. Первый элемент списка
  2. Второй элемент списка
  3. Третий элемент списка

Ненумерованные списки создаются аналогично:

<ul>
 <li>Первый элемент списка</li>
 <li>Второй элемент списка</li>
 <li>Третий элемент списка</li>
</ul>

Этот список на странице будет выглядеть так:

  • Первый элемент списка
  • Второй элемент списка
  • Третий элемент списка

У ненумерованных списков есть параметр type. Он определяет, чем элементы списка будут маркироваться - квадратиками, кружочками и т. п.. Вот пример использования списка с квадратиками:

<ul type="square">
 <li>Первый элемент списка</li>
 <li>Второй элемент списка</li>
</ul>

Этот список на странице будет выглядеть так:

  • Первый элемент списка
  • Второй элемент списка
Наверх

HTML. Урок 8. Заголовки и абзацы

Кроме своего прямого применения (выделение названий разделов, глав, подглав и т. п.) заголовки применяются и для повышения шансов, что ваша WEB-страница будет найдена по какому-нибудь запросу поисковика. Т. е. почти для всех поисковых машин в Интернете слово, написанное в заголовке любого уровня, имеет больший вес, чем слово, написанное просто в тексте. Так что это надо обязательно использовать для себя.

Для заголовков применяются теги <h1>...</h1> - для первого уровня, <h2>...</h2> - для второго уровня и т. д.

Вот пример заголовков уровня 2 и 3:

<h3>Пример заголовка третьего уровня</h3>
<h4>Пример заголовка четвертого уровня</h4>

А вот он в действии:

Пример заголовка третьего уровня

Пример заголовка четвертого уровня

Всего же заголовки могут быть шести уровней.

Теперь поговорим об абзацах. Их можно определять на вашей WEB-страничке, например, с помощью парного тега <p>:

<p>Первый абзац. Некоторый текст первого абзаца...</p>
<p>Второй абзац. Некоторый текст второго абзаца...</p>

Приведенный фрагмент будет, разумеется, выглядеть так:

Первый абзац. Некоторый текст первого абзаца...

Второй абзац. Некоторый текст второго абзаца...

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

Первый абзац. Некоторый текст первого абзаца...<br>
Второй абзац. Некоторый текст второго абзаца...

А вот как этот пример выглядит на WEB-страничке:

Первый абзац. Некоторый текст первого абзаца...
Второй абзац. Некоторый текст второго абзаца...
Наверх

Copyright Алексеев Игорь, 2002

Copyright сайт progs.biz, 2002

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное