Информация
Интересности
Литература
Искусство
Детям
Предложения
Каталог
Об авторе


Детский интернет-журнал «Санька - Бешеный кролик!»

Превосходное место для Вашей рекламы!

Мой мир. Персональный сайт Ольги Тышковец

Архив: история как она есть и загадочные явления

Украина.doc - Сетевое издание



Краткий учебник по HTML

      Главная - Информация - Интернет-справочник - Эта страница



Основы HTML
адаптированный перевод статьи Dave Raggett's Introduction to HTML
Источник: KM.RU

Смотрите также:
Продвинутый HTML | Определение цветов в HTML

Что такое HTML?

Всемирная паутина соткана из WEB-страниц (WEB-pages), а эти страницы создаются при помощи языка разметки гипертекста (Hypertext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о "Программировании на HTML", HTML — это язык разметки.
Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

Добавление заголовков и параграфов

Если вы пользовались Microsoft Word, вам должно быть хорошо знакомо использование стилей для выделения заголовков по степени важности.
В HTML заголовки по степени важности делятся на шесть уровней. Н1 — самый важный, Н2 — чуть менее важен, и, наконец, Н6 — наименее значимый.

Пример того, как добавить важный заголовок:
<h1>Важный заголовок</h1>
Результат:

Важный заголовок

Теперь напишем чуть менее важный заговолок:
<h2>Чуть менее важный</h2>
Результат:

Чуть менее важный

Каждый параграф, который вы напишете должен начинаться тэгом <p> и заканчиваться тэгом </p> . Например:

<p>Это первый параграф.</p>
<p>А это второй параграф.</p>

Выделение курсивом

Вы можете выделить одно или больше слов, используя тэг <em>. Например:
Это действительно <em>интересный</em> пункт!
Результат:
Это действительно интересный  пункт!

Изменение цвета и размера текста

Тэг FONT может быть использован для указания цвета и размера шрифта, которым будет выведен ваш текст.
В этом примере устанавливается цвет:
В этом предложении есть <font color="red">слово</font> , выделенное красным цветом.
Результат:
В этом предложении есть слово, выделенное красным цветом.

Атрибут size служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер "нормального" шрифта соответствует числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2):
Советы <font size="+2" color="maroon">ветеринарного</font> врача
Результат:
Советы ветеринарного врача

Вставка рисунков

Использование рисунков делает ваши страницы более интересными.
Вставить рисунок позволяет тэг <img>.
Предположим, что файл рисунка "peter.jpeg", шириной 200 пикселов и высотой 150, лежит в той же папке что и HTML файл.
Тогда:
<img src="peter.jpeg" width="200" height="150">

Указание ширины и высоты не является строго необходимым, но увеличивает скорость загрузки вашей WEB-страницы.
Следует задать описание картинки для людей, у которых отключена загрузка изображений.
Вы можете добавить краткое описание, используя атрибут alt:
<img src="peter.jpeg" width="200" height="150" alt="Мой друг Петя">

В WWW используется два формата графических файлов GIF и JPEG.

Формат GIF используется, когда требуется прозрачное изображение или анимация, а также для:
черно-белых рисунков и текста
изображений с ограниченным количеством цветов
графики с резкими контурами (меню, кнопки, диаграммы и т.п.)
изображений с текстом

Формат JPEG больше подходит в следующих случаях:
сканированные изображения
графика со сложным сочетанием цветов и оттенков
любое изображение с палитрой более чем 256 цветов

Создание ссылок на другие страницы

Ссылки обозначаются тэгом <a>. Напишем ссылку на другую страницу:
Это ссылка на <a href="1_2.htm">Продвинутый HTML</a>.
Результат:
Это ссылка на Продвинутый HTML.

Текст между <a> и </a> используется как описание ссылки, обозначается обычно синим цветом, и подчеркивается линией.

Для ссылки на Web-страницу нужно указать ее полный Web-адрес (называемый URL), например, для ссылки на www.km.ru необходимо набрать следующий текст:
Это ссылка на <a href="http://www.km.ru" TARGET=_blank>www.km.ru</a>.
Результат:
Это ссылка на www.km.ru.
Учтите, что в этом случае был добавлен атрибут TARGET=_blank, поэтому вызываемая Вами страница откроется в отдельном окне.

Вы можете использовать в ссылке картинку. Следующий пример позволяет кликаньем на логотипе компании перейти на ее домашнюю страницу:
<a href="/"><img src="logo.gif" alt="home page"></a>

Списки

HTML предлагает три вида списков.
Первый вид называется маркированным (неупорядоченным) списком.
Маркированный список открывается тэгом <ul>, а каждый его пункт начинается стандартным тэгом <li>. Например:


<ul>
  <li>первый пункт списка</li>

  <li>второй пункт списка</li>

  <li>третий пункт списка</li>
</ul>

Результат:
  • первый пункт списка
  • второй пункт списка
  • третий пункт списка

Второй вид - нумерованный (упорядоченный) список. Он использует тэги <ol> и <li>. Пример:


<ol>
  <li>первый пункт списка</li>

  <li>второй пункт списка</li>

  <li>третий пункт списка</li>
</ol>
Результат:
  1. первый пункт списка
  2. второй пункт списка
  3. третий пункт списка

И последний - это список определений (глоссарий).
Он представляет текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение, открывается тэгом <dl>. Каждый термин открывается тэгом <dt>, а определение тэгом <dd>.
Например:


<dl>
  <dt>первый термин</dt>
  <dd>его определение</dd>

  <dt>второй термин</dt>
  <dd>его определение</dd>

  <dt>третий термин</dt>
  <dd>его определение</dd>
</dl>
Результат:
первый термин
его определение
второй термин
его определение
третий термин
его определение

Списки могут быть вложенными, один в другой. Например:


<ol>
  <li>первый пункт списка</li>

  <li>второй пункт списка
    <ul>
      <li>первый пункт вложенного списка</li>
      <li>второй пункт вложенного списка</li>
    </ul>
  </li>

  <li>третий пункт списка</li>
</ol>
Результат:


  1. первый пункт списка
  2. второй пункт списка
    • первый пункт вложенного списка
    • второй пункт вложенного списка
  3. третий пункт списка

Смотрите также:
Продвинутый HTML | Определение цветов в HTML


 

      Главная - Информация - Интернет-справочник - Эта страница

яВОТ. Интернет-всячина