Создание web-страниц при помощи языка HTML

Можно так же комбинировать различные виды стилей, например жирный и наклонный.

Дополнительные  стили:

   

1.4. Создание таблиц  в HTML. 

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

    Основные  тэги таблицы 

    Таблица: <TABLE>...</TABLE>

    Это основноые тэги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию  таблица не имеет обрамления и  разделителей. Обрамление добавляется  атрибутом BORDER.

    Строка  таблицы: <TR>...</TR>

    Количество  строк таблицы определяется количеством  встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк  в таблице.

    Ячейка  таблицы: <TD>...</TD>

    Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отстутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.

    Заголовок таблицы: <TH>...</TH>

    Ячейка  заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

    Подпись: <CAPTION>...</CAPTION>

    Данный тэг описывает название таблицы. Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

    Основные  атрибуты таблицы 

    BORDER - Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

    ALIGN - Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top.  
Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

    VALIGN - Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).

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

    COLSPAN - Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании - 1.

    ROWSPAN - Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании - 1.

    COLSPEC - Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".  
 
 
 
 
 

1.5. Гипертекстовые ссылки.

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

    Так же можно использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. Однако, HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого.

Для создания гиперссылок используются следующие  теги  

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

2. Описание создание  сайта «Стрельба из лука»

    

На рисунке 1 показан блокнот в котором  выполнялось изготовление моего сайта «Стрельба из лука»,а именно исходной страницы или главной страницы сайта.

    

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

    

</td>

    <td width="13%">

    

      <div align="center"><span class="style5"><a href="sait2.htm">Истоки происхождения</a></span></div> 

(рис. 2)

    

и также гиперссылки  в конце абзацев с текстом:

    

<p class="style19" align="left">В личном и

    

командном зачете, женские и мужские команды, с 1972 года....

    

<a href="sait6.htm" class="style19">читать далее</a></p>   (

рис. 3)

Рис.1

Рис.2

 
 
 
 

Рис.3

На рис.4 показан блокнот в котором выполнялось изготовление 2 страницы, а именно «Исток происхождения»  , также были заданы цвет фона, цвет шрифта, размер шрифт (рис4)                                                                     , были сделаны неизменные гиперссылки в виде таблицы на другие страницы:

 

</td>

  <td width="21%">

      <div align="center"><span class="style5"><a href="sait3.htm">Крупнейшие соревнования </a></span></div> 

(рис 5)

а также на нужные участки текста:

<li class="style8">

    <div align="center"><a href="#par2">До

наших дней</a></div> 

  </li>

(рис. 6)

Рис. 4

Рис. 5

Рис. 6

 Блокнот в котором выполнялось изготовление 3 страницы, а именно «Крупнейшие соревнования»   

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

На рис.7 показан блокнот в котором выполнялось изготовление 4 страницы, а именно «Инвентарь»

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

 

   <li>

    <div class="style12" align="center"><a href="#par1">Традиционный лук </a></div> 

  </li>                                                                                      

Рис. 7

На рис.8 показан блокнот в котором выполнялось изготовление 5 страницы, а именно «Правила»; настройки неизменны, добавились гиперссылки того же типа что и на предыдущей странице

                                                                                              

ж

      

Рис. 8

На рис.9 показан блокнот в котором выполнялось изготовление 6 страницы, а именно «Победители Олимпийских игр» , где сохранились все прежни настройки, но добавились таблицы с данными.

                        

                                ж                                                                                                 

    

  

Рис. 9