Справка по HTML

Язык HTML позволяет разбить ваш текст на отдельные элементы: заголовки, параграфы, списки, ссылки. Браузер, руководствуясь стилями для каждого элемента (например: цвет, размер шрифта, положение), выделяет эти элементы из текста — как говорят, форматирует документ.

  1. Каркас HTML документа

    Определение "диалекта" языка HTML      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

## начало HTML документа                    <HTML>
#              ############################      <head>
#  Служебная   #           Заголовок страницы      <title> Заголовок (в левом верхнем углу окна браузера) </title>
#  информация  #         Информация об авторе      <META name="Author" content="Ivan Ivanov, 101, 01.10.2010">
#  о странице  #              Слова для гугла      <META name="Keywords" content="биоинформатика, ФББ">
#              #               Кодировка 1251      <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
#              # Применить таблицу стиля           <link rel="stylesheet" type="text/css" href="y10.css">
#              ###########################       </head>
#                
#                                                <body>
#                                                  Здесь будет то, что показывает браузер
#                                                  ....................................
#                                                </body>
##  конец  HTML документа                    </HTML>
    Файл должен иметь расширение htm или html.

  2. Синтаксис

    Элемент — это часть документа, выделеная по краям тегом. <TAG attr1="value1" attr2="value2" > Текст .. . .. . . </TAG>, где TAG (тег) — слово, определяющий тип элемента, attr1, attr2 — атрибуты тега (свойства данного элемента), value1, value2 — значения атрибутов, открывающее элемент выражение (ограниченное знаками < и >) называется (начальным) тегом </TAG> — так называемый "конечный тег" (указывает на конец элемента)

    Пример: <A href="http://www.yandex.ru">поисковая система Yandex</A>
    Результат: поисковая система Yandex здесь "A" — слово, определяющее элемент, "href" — атрибут, "http://www.yandex.ru" — значение атрибута). Число атрибутов может быть разным — от 0 (часто) до десятков (редко).

    Элементы могут (и часто должны) быть вложены друг в друга — в текст элемента могут входить другие элементы.

  3. Часто используемый набор тегов

    КодРезультатКомментарий
    <А>hello</A>helloгиперссылка. Обязательный аттрибут href="URL документа
    <IMG src="gif/2002.gif">вставляет картинку на месте тега. Аттрибуты src="URL картинки", alt="Альтенативный текст если картинка не доступна"; align="Положение относительно текста left rigt"
    <H1>Заголовок</H1>

    Заголовок

    		заголовок (самый большой). Есть еще подзаголовки от H2 до H6 (по уменьшению размера). Обычно заголовок выделяется на фоне основного текста (размером шрифта, отступами итд...)
    <P> — абзац

    абзац

    		абзац. Отделяется от остального текста отступами сверху. Конечный тег не обязателен.
    при<BR>мерпри
    мер    		переносит текст на новую строку
    <HR>
    		горизонтальная линия (но если задать высоту больше ширины станет вертикальной
    X<SUP>2</SUP>, H<SUB<2</SUB>OX2, H2Oсоответственно, верхний и нижний индексы
    <B>…</B>, <I>…</I>, <U>...</U>полужирный, курсивный, подчеркнутыйстиль текста можно задавать и тегами

    • Списки

      Не нумерованый: <ul> </ul>
      Нумерованный: <ol> </ol>
      Чтобы начать новый элемент списка используйте тег <li>
      Пример: 
      <ul>                    
	<li> Раз
	<li> Два
	<li> Три
</ul>
      • раз
      • два
      • три

    • Таблицы

      <TABLE> <TABLE> — элемент таблицы
      <TR>...</TR> — строка таблицы
      <TD>... </TD> — ячейка таблицы
      Пример: 
      <TABLE border=1>
  <TR>
    <TD>Левая ячейка первой строки</TD>
    <TD>Правая ячейка первой строки</TD>
  </TR>
  <TR>
    <TD>Левая ячейка второй строки</TD>
    <TD>Правая ячейка второй строки</TD>
  </TR>
</TABLE>
      Левая ячейка первой строки Правая ячейка первой строки
      Левая ячейка второй строки Правая ячейка второй строки

      Полезные атрибуты таблицы: width="100%" делает ширину таблицы на весь экран. width="400px" делает ширину 400 пикселей.
      border=0 делает таблицу без видимых границ ячеек.

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

  4. Полезные ссылки: