<table border="1">

  <tr>

      <td colspan="3"><h4>Таблица калорийности продуктов</h4></td>

  </tr>

  <tr>

      <td rowspan="3">Низкокалорийные</td>

      <td> Название продукта</td>

      <td>Калорийность (Ккал на 100 г)</td>

  </tr>

  <tr>

      <td>Морская капуста, сельдерей</td>

      <td>Менее 10</td>

  </tr>

  <tr>

      <td>капуста, редька, огурцы, салат</td>

      <td>10-20</td>

  </tr>

</table>

Атрибут align задает выравнивание по горизонтали. Может принимать значения: left, center, right, justify.

Атрибут valign задает выравнивание по вертикали. Может принимать следующие значения: top, middle, bottom.

Задания для самостоятельной  верстки

 

1. Сверстать таблицу:

 

2. Задайте  разные значения атрибутам border, cellspacing, cellpadding.

Объекты

К объектам относятся  изображения, Flas-ролики и д.п.

Картинки размечают с помощью элемента <img> (Image). У него есть обязательный атрибут src, в котором указывается путь к файлу с изображением. При верстке практически всегда используют относительные пути.

Обычно все  картинки помещают в одну директорию.

Пример вставки  изображения:

<img src=”i/logo.gif”>

Атрибуты элемента <img>:

Атрибут alt (alternative) задает краткое описание изображения. Необходимо в тех случаях, когда в браузере отключено отображение графики. Для графических элементов, относящихся к художественному оформлению  страницы, атрибут alt следует оставлять пустым: alt=””.

При табличной  верстке следует задавать высоту и ширину картинок для ускорения  обработки таблицы браузером. Для  этого предназначены атрибуты height и width.

Часто картинку делают ссылкой и при этом вокруг нее появляется синяя рамка. Чтобы избавиться от нее, надо атрибуту border задать значение “0”.

    Для размещения на странице аудио и видео используется элемент <embed>.

    Атрибуты  элемента <embed>:

    height=”x” – высота экрана ролика в пикселях или процентах

    width=”x” - ширина экрана ролика в пикселях или процентах

    autoplay=”true / false” – если для автозапуска установлено значение true, то ролик запустится, как только страница станет доступной, если значение установлено false, то для запуска ролика пользователю необходимо будет щелкнуть на кнопке запуска на консоли.

    controller=”true / false” – дает пользователю возможность добавления управляющих элементов

    loop=”true / false / palindrome” – если требуется чтобы ролик работал циклически, то необходимо установить значение true, если требуется, чтобы ролик был прокручен один раз, а затем остановился – значение false. При значении palindrome ролик работает от начала до конца, затем в обратном порядке и т.д.

    Пример.

<EMBED src="animals.avi"  controller=false  autoplay=true loop=true>

Задания для самостоятельной  верстки

 

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

 

Формы

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

      Элементы  форм и атрибуты 

      Существует  несколько ключевых элементов форм и ряд связанных с ними атрибутов, которые необходимо знать для создания форм.

• <FORM>…</FORM> - дескрипторы, открывающие и закрывающие форму. Форма может иметь несколько атрибутов. Основные из них - action, который в качестве значения принимает URL для передачи на узел информации из формы, и method, принимающий значения get и post. Эти значения определяют способ передачи данных на узел.
• <INPUT> - дескриптор создания управляющих элементов. С этим дескриптором могут использоваться следующие атрибуты:
• type = “x” – определяет элемент управления (см. «Управляющие элементы»);
• name = “x” – имя элемента управления;
• value = “x” – значение элемента управления;
• size = ”x” – ширина поля элемента управления в пикселях; для элементов text и password ширину поля определяют в символах;
• maxlength = “x” – предельное количество символов, которое принимает элемент управления;
• checked = “x” – отмеченный флажок (переключатель);
• src = “x” – указатель на рисунок, используемый в качестве графической кнопки.
• <TEXTAREA>…</TEXTAREA> - создает текстовую область. Принимает атрибуты name = “x”, rows = “x” – определяет количество строк области, cols = “x” – определяет ширину области.
• <SELECT>…</SELECT> - этот элемент создает меню. Меню может быть выпадающим или представленным в виде списка.
• <OPTION>…</OPTION> - определяет каждый элемент списка меню в отдельности.

 

Управляющие элементы 

    Экранные  управляющие элементы определяют способ ввода информации. Синтаксически  элементы представляют собой значение атрибута type дескриптора <INPUT>.

Далее перечислены  управляющие элементы.

• text – поле ввода текста, состоящее из одной строки. Ширину поля определяет значение size.
• password – поле, подобное полю ввода текста text. Отличие в том, что вводимые символы отображаются в виде символов *.
• checkbox – флажок, принимающий два логических значения.
• radio – переключатель. В отличие от флажка, из нескольких переключателей может быть выбран лишь один.
• submit – кнопка, нажатие которой означает подтверждение выбора.
• reset – кнопка, нажатие которой означает сброс текущих значений элементов управления и установку значений по умолчанию.
• file – позволяет создать кнопку вызова диалогового окна выбора файла.
• hidden – скрытый элемент управления, обычно используется для автоматического ввода дополнительных донных для передачи Web-узлу.
• image – элемент, позволяющий вставить изображение и использовать его для подтверждения выбора или сброса вместо кнопок submit и reset.
• button – кнопка. Для работы кнопке требуются связанные с ней сценарии.

 
 

Пример построения формы: 

<form method=GET action="glow.html"> 

<b> Введите Ваше имя: </b>

<input type="text" name="name" value="" size=20><BR><BR>

<b>Введите ваш контактный телефон:</b>

<input type="text" name="phone" value="" size=20 ><BR><BR> 

<b>Возраст:</b><BR>

18-25 <input type="checkbox" name="18-25" ><BR>

25-40 <input type="checkbox" name="25-40" ><BR><br> 

<b> Пол:</b><BR>

<input type="radio" name="button" value="мужской" >Мужской<BR>

<input type="radio" name="button" value="женский" checked>Женский<BR><br> 

<b>Город:</b>

<select name="sity"  >

<option value="Лондон" selected>Лондон

<option value="Москва">Москва

<option value="Париж">Париж

</select><BR><BR> 

<p style="position:absolute; top:250; left:250; "><b >Город:</b></p>

<select name="sity" size=3  style="position:absolute; top:250; left:300; ">

<option value="Лондон" selected>Лондон

<option value="Москва">Москва

<option value="Париж">Париж

</select><BR><BR> 

<b>Дополнительные сведения о себе:</b>

<textarea rows=4 cols=40>

</textarea><BR><BR> 

<input type="submit" name="Vvod" value="Ввод">

&nbsp &nbsp &nbsp 

<input type="reset" value="Отмена"> 

&nbsp;&nbsp;&nbsp 

<input type="button" name="Pusk" value="Пуск">

&nbsp &nbsp &nbsp 

<input type="image" src="cherpah.jpg" width=50 value=submit alt="OK">

&nbsp &nbsp &nbsp 

<button nane="submite" value="submite" type="submite">OK<img src="cherpah.jpg" width=50 alt="GO"></button> 

</form>

    Задание для самостоятельной  верстки

    Сверстать страницу с формой как показано в примере. Внести изменения на свое усмотрение.

 

Таблицы каскадных стилей (CSS) 

Спецификация CSS (Cascading Style Sheets) позволяет полностью контролировать форму представления элементов HTML-разметки. 

Синтаксис CSS 

Правило – объявление стиля для одного элемента. Структура правила (стиля): 

H1 {color: blue; font-family: Verdana;}

     

 
 

Способы применения стилей 

1. Задание стилей для отдельного элемента с помощью  атрибута style.

 

   <h1 style=”font-style: italic; font-size: 10pt;”>Заголовок первого уровня</h1> 

2. Включение таблицы стилей в документ внутри элемента <style>.

 

<html>

   <head>

         <title>Изучение CSS</title>

         <style type=”text/css”>

            BODY {background: #FFF;}

            H1 {font: 22px Arial;}

         </style>

   </head>

   <body>

         <h1>Заголовок</h1>

   </body>

</html> 

3. Вынесение таблицы стилей в отдельный файл и подключение его с помощью  тега <link>.

 

Тег <link> должен размещаться в секции <head>, например: 

<html>

   <head>

         <title>Изучение CSS</title>

         <link rel=”stylesheet” type=”text/css” href=”style.css”>