Глава 3. Первые шаги в HTML.

Глава 3.

Первые шаги в HTML.

Итак HTML (HyperText Markup Language) - язык разметки гипертекста. Для того, чтоб создать свою страницу нужно его знать. Для создания простой домашней страницы достаточно иметь лишь отдаленное представление о нем. Ни в коем случае не советую вам использовать различные редакторы типа FrontPage, Word и т.д. так как они создают слишком бесполезно загруженый и неудобочитаемый HTML-код и размер файла вырастает астраномически, что напрямую влияет на скорость загрузки страниц.

Для сравнения: страница, содержащая всего несколько слов, созданная вручную занимает меньше 1 Кб, аналогичная страница созданная в Word занимает 8 Кб. FrontPage тоже добавляет абсолютно ненужные теги, да еще и постоянно изменяет исходный текстовик на свой лад, так что работать с ним, становится совсем неудобно.

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

Сейчас я всем настоятельно рекомендую редактор CuteHTML (см.Главу 2), он будет особенно полезен начинающим еще и тем, что содержит довольно обширный Help по HTML.

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

Теги - операторы в HTML. Есть одинарные теги, например:

 <br>  - Переход на новую строку
 <p>   - Переход через строку
 <dd>  - Абзац
 <img> - Изображение

и двойные, т.е. есть открывающий тег, за ним следует текст, на который этот тег действует (ведь мы делаем разметку текста) и после него - закрывающий тег, например:

 <title>Пособие для начинающего вебмастера.</title>

На самом деле многие двойные теги используются без закрывающей половины и они все-равно работают, поэтому по-сути они стают одинарными.

Любой HTML-файл имеет такую структуру:

 <html>
  <head>
    Это заголовок.
    Тут размещают описание сайта,
    ключевые слова для поиска,
    описание скриптовых процедур,
    мета-теги...
  </head>
  <body>
    В теле документа находится сам гипертекст.
  </body>           
 </html>

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

 <body background="fon.jpg" bgcolor="#ACD5D5"
       text="#000000" link="#000080"
       vlink="#376F6F" alink="#0000dd">

background - фоновый узор, который броузер сам размножит; #rrbbgg - цвет в 24-битной палитре, где rr - 16-ричный код содержания красного, gg - зеленого, bb - синего в цвете, соответственно, текста, фона, ссылки, посещенной ссылки, активной ссылки.

 <a href="http://www.inprise.com" target="name">
   Ссылка
 </a>

гиперссылка c указанием адреса и имени окна (фрейма) в которое выведется документ. Если написать target="_top", то документ откроется в новом окне броузера. Адрес может быть как внешним (http://www.inprise.com) так и локальным (webmaster.html).

 <font color="#ff0000" size="2" 
       face="Arial,Helvetica,sans-serif">
   Цветной текст
 </font>

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

 <img src="figures.gif" 
      width="83" height="75" 
      alt="Подпись к рисунку" 
      border="0">

источник изображения, ширина, высота, подпись, появляющаяся пока рисунок не загружен, толщина границы.

 <table cellspacing="2" cellpadding="5" 
        width="100%" height="300" border="1">
  <caption align="center">Заголовок<caption>
  <tr>
   <td align="left" valign="top" colspan="2">
     Широкая ячейка.
   </td>
  </tr>
  <tr>
   <td align="right" valign="middle" rowspan="2">
     Высокая ячейка.
   </td>
   <td bgcolor="#0000ff" valign="bottom">
     Верхняя ячейка.
     <tr align="center">
      <td>
        Нижняя ячейка.
      </td>
     </tr>
   </td>
  </tr>
 </table>

Таблица: cellspacing - расстояние между ячейками, cellpadding - отступ от края внутри ячейки, border - толщина рамки вокруг таблицы, width, height - ширина и высота таблицы в % от размера экрана или в пикселах, caption - заголовок над таблицей, tr - строка, td - данные в столбце, colspan - сколько столбцов соединить в длину, rowspan - сколько строк соединить по высоте, align - горизонтальное выравнивание, valign - вертикальное выравнивание. Чтобы лучше понять этот код, вставьте его в новый документ и посмотрите, что получилось в броузере (не забудьте стереть все квадратные скобки). Заметьте, что каждая ячейка может быть окрашена в свой цвет. Плюс теги могут быть вложенными друг в друга, например:

 <fontcolor="#ff0000">
   Хотим выделить <i>курсивом</i>
 </font>
 <a href="http://www.microsoft.com">
  <img src="microsoft.gif" border="0">
 </a>

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

Если Вы позаботитесь о конечном пользователе, то он обязательно это оценит и еще не раз зайдет к Вам, не мешало бы позаботится и о дизайне своего сайта. Для всего этого Вам пригодятся маленькие хитрости.

Глава2. | Глава 3. | Глава 4.

В оглавление

Сайт управляется системой uCoz