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

Параметр ALIGN

Данный параметр тега <TABLE> определяет горизонтальное расположение таблицы в области просмотра. Допустимые значения -- LEFT (выравнивание влево) и RIGHT (выравнивание вправо). По умолчанию таблицы выровнены по левому краю. Заметим, что среди допустимых значений нет типичного значения для параметра выравнивания -- CENTER. В некоторых источниках по языку HTML значение CENTER (по центру) приводится в качестве допустимого в данном случае. Это соответствует спецификации HTML, но на практике и Netscape Navigator, и Microsoft Internet Explorer реализуют только два значения. Дело в том, что присутствие параметра ALIGN в тэге <TABLE> не только определяет месторасположение таблицы, но и разрешает выполнить обтекание таблицы текстом с противоположной стороны аналогично обтеканию картинок. Обтекание таблицы текстом с двух сторон не предусматривается ни в каких случаях. Для более точного управления обтеканием следует использовать тег <BR> с параметром CLEAR так же, как это выполняется для <IMG>. Если параметр ALIGN опущен, то место справа и/или слева от таблицы всегда будет пустым независимо от ее ширины. Если таблица не требует обтекания текстом, то можно добиться ее расположения по центру окна просмотра. Для этого, например, можно все описание таблицы поместить внутри пары тегов <CENTER> и </CENTER>

2.1.3 Фреймы и формы

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

1) Создание простой формы

Теги<form>и</form>задают начало и конец формы. Начинающий форму тег<form>содержит два атрибута:action и method. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET.

Замечание

Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

2) Флажок (checkbox)

Флажки checkbox предлагаю пользователю ряд вариантов, и разрешает выбор нескольких из них.

<input name="Имя переключателя" type="Тип" value="Значение">

Группа флажков состоит из элементов <input>, имеющих одинаковые атрибуты name и type(checkbox). Если вы хотите, чтобы элемент был отмечен по умолчанию необходимо пометить его как checked. Если элемент выбран, то сценарию поступит строка имя=значение, в противном случае в обработчик формы не придет ничего, т.е. не выбранные флажки вообще никак не проявляют себя в переданном наборе данных.

3) Переключатель(radio)

Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.

<input name="Имя переключателя" type="Тип" value="Значение">

Переключатель (radio) имеет атрибуты name, type и value. Атрибут name задает имя переключателя, type задает тип radio, а атрибут value задает значение. Если пользователь выберет переключатель, то сценарию будет передана строка имя=значение. При необходимости можно указать параметр checked, который указывает на то, что переключатель будет иметь фокус (т.е. будет отмечен по умолчанию) при загрузке страницы. Переключатели также можно объединять в группы, для этого они должны иметь одно и тоже имя.

4) Кнопка сброса формы(Reset)

<input type="Тип" name="Имя кнопки" value="Надпись на кнопке">

При нажатии на кнопку сброса(reset), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.

Пример:

<input type="reset"name="Reset"value="Очистить форму">

5) Выпадающий список (select)

Тэг<select>представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк.

Список начинается с парных тегов<select></select>. Теги<option></option>позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге<option>указан параметрselected, то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1, то список будет выпадающим. Если указан атрибут multiple, то разрешено выбирать несколько элементов из списка (при size = 1 не имеет смысла).

При передаче данных выпадающего списка сценарию передается строка имя=значение, а при раскрытом списке передается строкаимя=значение1&имя=значение2&имя=значениеN.

6) Текстовое поле (text)

Позволяет пользователям вводить различную информацию.

<input type="Тип" name="Имя поля" size="Размер" maxlength="Макс. количество символов">

При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text. Если указан параметр value, то поле будет содержать отображать value-текст. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

7) Поле для ввода пароля (password)

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

8) Многострочное поле ввода текста (textarea)

Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк.

<textarea name="Имя поля" cols="Ширина поля" rows="Число строк">Текст</textarea>

Многострочное поле ввода текста начинается с парных тегов <textarea></textarea>. Тэг name задает имя многострочного поля. Также можно указать ширину поля(cols) и число строк(rows). При необходимости можно указать атрибут readonly, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами<textarea></textarea>.

9) Скрытое текстовое поле

Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.

<input name="Имя" type="Тип" value="Значение">

Скрытое поле начинается с тега <input>, атрибуты которого являются name,type и value. Атрибут name задает имя поля, type определяет тип поля, а атрибут value задает значение поля.

10) Кнопка отправки формы (submit)

Служит для отправки формы сценарию.

<input type="Тип" name="Имя кнопки" value="Текст кнопки">

При создании кнопки для отправки формы необходимо указать 2 атрибута:type=“submit”и value=”Текст кнопки”. Атрибут name необходим если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки.

Обработка форм

Все данные, которые вы хотите получить из HTML-формы в PHP сценарий обрабатываются с помощью суперглобальных массивов $_POST или $_GET, в зависимости от указанного в атрибуте method метода передачи данных.

Фреймы в HMTL

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

Каждый фрэйм имеет свой URL, что позволяет загружать его независимо от других фрэймов. Каждый фрэйм имеет собственное имя (параметр NAME), позволяющее переходить к нему из другого фрэйма. Размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра). Данные свойства фрэймов позволяют создавать продвинутые интерфейсные решения, такие как:

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

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

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

Создавать формы типа "мастер-деталь" для WEB-приложений, обслуживающих базы данных.

Синтаксис фрэймов

Формат документа, использующего фрэймы, внешне очень напоминает формат обычного документа, только вместо тэга BODY используется контейнер FRAMESET, содержащий описание внутренних HTML-документов, содержащий собственно информацию, размещаемую во фрэймах. Однако, фрэйм-документ является специфичным видом HTML-документа, поскольку не содержит элемента BODY и какой-либо информационной нагрузки соответственно. Он описывает только фрэймы, которые будут содержать информацию

Общий синтаксис фрэймов:

Общий контейнер FRAMESET описывает все фрэймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фрэймов. Тэг FRAME пописывает каждый фрэйм в отдельности. Рассмотрим более детально каждый компонент.

FRAMESET

Тэг <FRAMESET> имеет завершающий тэг </FRAMESET>. Все, что может находиться между этими двумя тэгами, это тэг <FRAME>, вложенные тэги <FRAMESET> и </FRAMESET>, а также контейнер из тэгов <NOFRAME&g t который позволяет строить двойные документы для браузеров, поддерживающих фрэймы и не поддерживающих фрэймы.

Данный тэг имеет два взаимоисключающих параметра: ROWS и COLS. ROWS="список-определений-горизонтальных-подокон" Данный тэг содержит описания некоторого количества подокон, разделенные запятыми. Каждое описание представляет собой числовое значение размера подокна в пикселах, процентах от всего размера окна или связанное масштабное значение. Количество подокон определяется количеством значений в списке. Общая сумма высот подокон должна составлять высоту всего окна (в любых измеряемых величинах). Отсутствие атрибута ROWS определяет один фрэйм, величиной во все окно броузера.

Простое числовое значение определяет фиксированную высоту подокна в пикселах. Это далеко не самый лучший способ описания высоты подокна, поскольку различные броузеры имеют различный размер рабочего поля, не говоря уже о различных экранных разрешениях у пользователя. Если вы, все же, используете данный способ описания размера, то настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате вы точно получили 100%-ное заполнение окна броузера вашего пользователя.

Значение величины подокна в процентах от 1 до 100. Если общая сумма процентов описываемых подокон превышает 100, то размеры всех фрэймов пропорционально уменьшаются до суммы 100%. Если, соответственно, сумма меньше 100, то размеры пропорционально увеличиваются. Вообще говоря, значение value в данном описании является необязательным. Символ "*" указывает на то, что все оставшееся место будет принадлежать данному фрэйму. Если указывается два или более фрэйма с описанием "*" (например "*,*"), то оставшееся пространство делится поровну между этими фрэймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрэйма (во сколько раз од будет больше аналогично описанного чистой звездочкой). Например, описание "3*,*,*", говорит, что будет создано три фрэйма с размерами 3/5 свободного пространства для первого фрэйма и по 1/5 для двух других. COLS="список-определений-горизонтальных-подокон" То же самое, что и ROWS, но делит окно по вертикали, а не по горизонтали. Внимание! Совместное использование данных параметров может привести к результатам. Например, строка: <FRAMESET ROWS="50%,50%" COLS "50%,50%"> может привести к ошибочной ситуации.FRAMEРазмещено на http://www.allbest.ru/

. Данный тэг определяет фрэйм внутри контейнера FRAMESET.

SRC

Описывает URL документа, который будет отображен внутри данного фрэйма. Если он отсутствует, то будет отображен пустой фрэйм.

NAME

Данный параметр описывает имя фрэйма. Имя фрэйма может быть использовано для определения действия с данным фрэймом из другого HTML-документа или фрэйма (как правило, из соседнего фрэйма этого же документа). Имя обязат. должно начинаться с символа. Содержимое поименованных фрэймов может быть задействовано из других документов при помощи специального атрибута TARGET, описываемого ниже.

MARGINWIDTH

Это атрибут может быть использован, если автор документа хочет указать величину разделительных полос между фрэймами сбоку. Значение value указывается в пикселах и не может быть меньше единицы. По умолчанию данное значение зависит от реализации поддержки фрэймов используемым клиентом броузером.



MARGINHEIGHT

То же самое, что и MARGINWIDTH, но для верхних и нижних величин разделительных полос.

SCROLLING

Этот атрибут позволяет задавать наличие полос прокрутки у фрэйма. Параметр yes указывает, что полосы прокрутки будут в любом случае присутствовать у фрэйма, параметр no наоборот, что полос прокрутки не будет. Auto опре дполос прокрутки только при их необходимости (значение по умолчанию).

NORESIZE

Данный атрибут позволяет создавать фрэймы без возможности изменения размеров. По умолчанию, размер фрэйма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность.

NOFRAMES

Данный тэг используется в случае, если вы создаете документ, который может просматриваться как броузерами, поддерживающими фрэймы, так и броузерами, их не поддерживающими. Данный тэг помещается внутри контейнера FRAMESET, а все, что находится внутри тэгов <NOFRAMES> и </NOFRAMES> игнорируется броузерами, поддерживающими фрэймы.

2.2 Практическая часть

Лабораторная работа 1

Тема:Cоздание простейшего HTML-документа

<html><head>

<title>task 5</title></head><body>



<font>1)</font>

1/2+3/4+5/6+7/8

<br /><br /><br />

<font>2)</font>

&#8730;25x(2x²+9)=4x+3/x

<br /><br /><br />

<font>3)</font>

(x/1-x)⁽⁵⁾

<br /><br /><br />

<font>4)</font>

lim&nbsp;2n²/n²+x+1

<br />

&nbsp;&nbsp;&nbsp;n&#8594;&#8734;

<br /><br /><br />

<font>5)</font>

(1+x)ⁿ=1+nx/1+n(n-1)x²/a+...

<br /><br /><br />

<font>6)</font>

&#8730;xb/2+cos²|a-b|/x²(x+1)/b-sin(x+a)

<br /><br /><br />

<font>7)</font>

(8b+1)/ab*2/3-2*&#8730;b+1

<br /><br /><br />

<font>8)</font>

x+y+z=0<br />

&nbsp;&nbsp;&nbsp;&nbsp;2x+3y+z=1<br />

&nbsp;&nbsp;&nbsp;&nbsp;x+2y+z<br />

<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#8734;<br />

<font>9)</font>



&#8721;&nbsp;n²+n-1

<br />&nbsp;&nbsp;&nbsp;n=1

</body></html>

Лабораторная работа 2

Тема: Списки

Задание 1

<!DOCTYPE HTML PUBLIC "-//W3C//TR//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head><title>Пример маркированного списка</title></head><body>

<b>Знак зодиака</b><ul>

<li>Овец</li>

<li>Телец</li>

<li>Близнецы</li>

<li>Рак</li>

<li>Лев</li>

<li>Дева</li>

<li>Весы</li>

<li>Скорпион</li>

<li>Стрелец</li>

<li>Козщерог</li>

<li>Водолец</li>

<li>Рыбы</li>

</ul></body></html>



Рис.24

Задание 2

<html><title>Маркированный список</title><ul>

<b>Знак зодиака</b><br>

<img src="greenball.jpg">Овец<br />

<img src="greenball.jpg">Телец<br />

<img src="greenball.jpg">Близнецы<br />

<img src="greenball.jpg">Рак<br />

<img src="greenball.jpg">Лев<br />

<img src="greenball.jpg">Дева<br />

<img src="greenball.jpg">Весы<br />

<img src="greenball.jpg">Скорпион<br />

<img src="greenball.jpg">Стрелец<br />

<img src="greenball.jpg">Козерог<br />

<img src="greenball.jpg">Водолец<br />

<img src="greenball.jpg">Рыбы<br />

</ul></html>



Рис.25

Задание 3

<title>Пример нумерованного списка</title>

<ol>

<li>Сириус

<li>Канопус

<li>Арктур

<li>Альфа Центавра

<li>Вега

<li>Капелла

<li>Ригель

<li>Процион

<li>Ахернар

<li>Бета Центавра

<li>Ветельгейзе

<li>Альдебаран

<br />

<li value="58">Мицар

<br />

<li value="75">Полярная



Рис.26

Задание 5

<html><title>Пример списка определений</title><body><dl><center>

<h3>Классификация типичных темпераментов человека,<br />основанная

на воззрениях Гиппократа</h3></center>

<dt>флегматик

<dd>Пассивный, очень трудоспособный, медленно приспосабливающийся<br />настроение устойчивое, мало поддается

внешнему влиянию<br />вялость эмоциональных реакций и медлительность в волевой деятельности, br /><br />

<dt>сангвиник

<dd>Активный, энергичный, легко приспосабливающийся<br />живость и подвижность эмоциональных реакций, быстрота и

сила волевых проявлений<br /><br />

<dt>Холерик

<dd>Активный, очень энергичный, настойчивый<br />порывистость и сила эмоциональных реакций, бурные волевые проявления<br /><br/>

<dt>Меланхолик

<dd>Пассивный, легко утомляющийся, тяжело приспосабливающийся<br />слабость волевых проявлений и преобладание подавленного настроения, неуверенность в себе</dl></html>

Рис.27

Задание 6

<!DOCTYPE HTML PUBLIC "-//W3C//TR//HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head><title>пример маркированного списка</title></head><body>

<h1>Спутники некоторых планет</h1><ul>

<li>Земля</li><ol>

<li>Луна</li></ol>

<li>Марс</li><ol>

<li>Фобос</li>

<li>Деймос</li></ol>

<li>Уран</li><ol>

<li>Ариэль</li>

<li>Умбриэль</li>

<li>Титания</li>

<li>Оберон</li>

<li>Миранда</li></ol>

<li>Нептун</li><ol>

<li>Тритон</li>

<li>Нереида</li></ol></ul></body></html>



Рис.28

Лабораторная работа 3

Тема: Вставка изображений, медиафайлов

Задание 1

<html><head><title>фоновое изображение</title></head><body background="skype.jpg">

<h2>‚згляните, мы вставили изображение, как фон!</h2>

<p>можно вставлять изображение форматов gif,jpg,и png</p>

<p>…сли размеры изображения меньше страницы, оно будет повторяться пока не заполнит весь фон</p></body></html>

Рис.29

Задание 2

<html><head>

<title>ВЫРАВНИВАНИЯ ИЗОБРАЖЕНИЯ ОТНОСИТЕЛЬНО ТЕКСТА</title>

</head><body><p>

Изображение

<img src="skype.jpg"

align="bottom"width="48"height="48" />

в тексте</p><p>

Изображение

<img src="skype.jpg"

align="middle"width="48"height="48" />

в тексте</p><p>

Изображение

<img src="skype.jpg"

align="top"width="48"height="48" />

в тексте</p>

<p>Помните, что выравнивание текста по нижнему краю картинки является выравниванием по умолчанию</p><p>

Изображение

<img src="skype.jpg"

width="48"height="48" />

в тексте</p><p>

<img src="skype.jpg"

width="48"height="48" />

Изображения перед текстом</p><p>

Изображения после текста

<img src="skype.jpg"

width="48"height="48" /></p></body></html>

Рис.30

Задание3

<html><body><p>

<img src="skype.jpg"width="20"height="20" /></p><p>

<img src="skype.jpg"width="45"height="45" /></p><p>

<img src="skype.jpg"width="70"height="70" /></p><p>

вы можете изменять размер изображения, меняя значения атрибутов height и width тег img</p></body></html>

Рис.31

Задание 4

<html><body>

<img src="skype.jpg"alt="значок скайп"width="32"height="32" /><p>

текстовые браузеры не могут отображать изображения и будут отображать текст,который указан в атрибуте alt

тега img.в данном случае значением атрибута alt указан значок скайп</p><p>

при наведении курсора мыши на изображение, некоторые браузеры отображают значение атрибута</p></body></html>

Рис.32

Задание 5

<html><body><p>

ВЫ МОЖЕТЕ СДЕЛАТЬ ИЗОБРАЖЕНИЯ ССЫЛКОЙ

<a href="http://www.skype.com/intl/ru/"><img src="skype.jpg"border="0"width="65"height="38" />

</a></p></body></html>

Рис.33

Задание 6

<html><body><p>

кликните, на различных частях изображения, чтобы посмотреть дополнительную информацию</p>

<img src="tree.jpg"width="650"height="642"usemap="#tree" />

<map name="tree">

<area shape="poly" coords="317,456,68,475,2,325,99,140,311,23,525,141,641,287,611,441"

alt="krona"href="krona.html" />

<area shape="rect"coords="320,465,357,613"alt="stvol"

href="stvol.html" /></map></body></html>

Рис.34

Лабораторная работа 4

Тема: Ссылки

Документ start

<!DOCTYPE HTML PUBLIC "-//W3C//TR//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head><title>task 4</title></head><body>

<h1>Словарь терминов</h1><p>

<a href="ago.html">А</a>&nbsp;

<a href="bgo.html">Б</a>&nbsp;

<a href="cgo.html">В</a>&nbsp;

<a href="dgo.html">Г</a>&nbsp;

<a href="ego.html">Д</a>&nbsp;

<a href="fgo.html">Е</a>&nbsp;</p></body></html>

Документ 1

<html><head><title>A</title></head><body><h1>A</h1><br /><dl>

<dt><b>АВТЕНТИЧЕСКИЙ КАДАНС</b></dt>

<dd>кадансовый оборот,

в котором заключительная тоническая гармония предваряется доминантовой</dd>

<dt><b>АТАКТА</b></dt>

<dd>гармонический элемент на басу нижнего или верхнего вводного тона</dd>

</dl><br /><a href="start.html">в начало</a></body></html>

Документ 2

<html><head><title>Б</title></head><body><h1>Б</h1><br /><dl>

<dt><b>БАГАТЕЛЬ</b></dt>

<dd>небольшая нетрудная для исполнения пьеса</dd>

<dt><b>БАРТОКОВСКОЕ ПИЦЦИКАТО</b></dt>

<dd>сильный щипок струны с последующим ударом струны о гриф</dd>

<dt><b>БОНАНГ</b></dt>

<dd>набо из 10-12 гонгов разного размера</dd>

</dl><br /><a href="start.html">в начало</a></body></html>

Документ 3

<html><head><title>В</title></head><body><h1>В</h1><br /><dl>

<dt><b>Верификация</b></dt>

<dd>Опытное подтверждение.

В неопозитивизме процедура проверки научных высказываний.

Только те высказывания могут претендовать на статус научных, которые подтверждаются опытом</dd>

<dt><b>Вероятность</b></dt>

<dd>Возможность исполнения или осуществления чего-нибудь.</dd>

<dt><b>Воображение</b></dt>

<dd>Мысленное представление, способность фантазировать, создавать совершенно новые образы</dd></dl><br /><a href="start.html">в начало</a></body></html>

Рис.35

Рис.36



Лабораторная работа 5

Тема: Таблицы

Задание 1

<HTML> <HEAD>

<TITLE> Пример простейшей таблицы </TITLE>

</HEAD> <BODY>

<TABLE BORDER>

<TR> <TD>Ячейка 1 строки 1</TD>

<TD>Ячейка 2 строки 1</TD> </TR>

<TR> <TD>Ячейка 1 строки 2</TD>

<TD>Ячейка 2 строки 2</TD> </TR>

</TABLE> </BODY> </HTML>

Рис.37

Задание 2

<HTML> <HEAD>

<TITLE> Таблица с обтекающим ее текстом</TITLE> </HEAD>

<BODY>

<TABLE ALIGN=LEFT WIDTH=70%>

<CAPTION><H3>Наиболее употребительные мужские имена<BR>взрослого населения Санкт-Петербурга </H3> </CAPTION>

<UL> <TR><TD VALIGN=TOP>

<LI>Абрам<LI>Александр<LI>Алексей<LI>Альберт<LI>Анатолий<LI>Андрей<LI>Аркадий<LI>Борис<LI>Вадим<LI>Валентин<LI>Василий<LI>Виктор<LI>Виталий<LI>Владимир<LI>Владислав<LI>Вячеслав<LI>Геннадий

<LI>Георгий<LI>Герман<LI>Григорий<LI>Дмитрий </TD> </TD>

<TD VALIGN=TOP>

<LI>Евгений<LI>Ефим<LI>Иван<LI>Игорь<LI>Илья<LI>Иосиф<LI>Константин<LI>Лев<LI>Леонид<LI>Михаил<LI>Николай<LI>Олег<LI>Павел<LI>Петр<LI>Роман<LI>Семен<LI>Сергей<LI>Станислав<LI>Эдуард<LI>Юрий

<LI>Яков </TD> </UL> </TR> </TABLE>

<BR><BR><BR><BR><BR><BR>

Приведенные данные получены на основе анализа репрезентативной выборки, содержащей сведения о 5000 мужчин в возрасте старше 18 лет, проживающих в Санкт-Петербурге.<BR> Указанные 43 наиболее часто встречаемых имени охватывают 92% выборки.<BR>Частота встречаемости каждого из остальных имен не превосходит 0.3%

</BODY> </HTML>



Рис.38

Задание 3

<HTML> <HEAD>

<TITLE> Выравнивание элементов таблицы</TITLE>

</HEAD> <BODY>

<TABLE BORDER WIDTH=100%>

<TR>

<TD ALIGN=RIGHT>Ячейка 1</TD>

<TD ALIGN=CENTER>Ячейка 2</TD>

<TD>Ячейка 3</TD>

</TR> <TR>

<TD ALIGN=RIGHT>Ячейка 4</TD>

<TD ALIGN=CENTER>Ячейка 5</TD>

<TD>Ячейка 6</TD>

</TR> </TABLE> </BODY> </HTML>



Рис.39

Задание 4

<HTML> <HEAD>

<TITLE> Использование параметров COLSPAN и ROWSPAN </TITLE>

</HEAD> <BODY>

<TABLE BORDER>

<TR>

<TD ROWSPAN=2>Ячейка, захватывающая две строки</TD>

<TD COLSPAN=2>Ячейка, захватывающая два столбца</TD>

</TR> <TR>

<TD>Ячейка 3</TD>

<TD>Ячейка 4</TD>

</TR> <TR>

<TD>Ячейка 5</TD>

<TD>Ячейка 6</TD>

<TD>Ячейка 7</TD>

</TR> <TABLE> </BODY> </HTML>

Рис.40



Задание 5

<HTML> <HEAD>

<TITLE> Неверное использование протяженных ячеек</TITLE>

</HEAD> <BODY>

<TABLE BORDER WIDTH-100%>

<TR ALIGN=CENTER>

<TD >Ячейка 1</TD>

<TD >Ячейка 2</TD>

<TD ROWSPAN=3>

Ячейка 3<BR>(распространенная<BR> на три <BR>строчки)

</TD> </TR>

<TR ALIGN=CENTER><TD> Ячейка 4</TD><TD> Ячейка 5 </TD></TR>

<TR ALIGN=CENTER>

<TD> Ячейка 6 </TD>

<TD COLSPAN= 2> Ячейка 7 (распространенная на два столбца) </TD>

</TR> </TABLE> </BODY> </HTML>

Рис.41

Задание 6

<html><head><title>lab 5</title></head><body>

<h1 align="center">Города Ленинградской области</h1>

<font><center>H-население города(тыс.жит.1992 г.)&nbsp;&nbsp;&nbsp;&nbsp;Р-расстояние от Санкт-Петербурга(км)</center></font>

<br /><table align="center">

<tr>

<td align="center"><b>Города,подчиненые</b></td>

<td align="center"><b>Города областного</b></td>

<td align="center"><b>(продолжение таблицы)</b></td>

<tr>

<td align="center"><b>Санкт-Петербургу</b></td>

<td align="center"><b>подчинения</b></td>

</tr>

<tr>

<td align="top">

<table width="300"border="1">

<tr><td align="center"><b>Город</b></td><td align="center"><b>Н</b></td><td align="center"><b>Р</b></td></tr>

<tr><td>Зеленогорск</td><td>13.6</td><td>50</td></tr>

<tr><td>Колпино</td><td>144.6</td><td>26</td></tr>

<tr><td>Кронштадт</td><td>45.2</td><td>48</td></tr>

<tr><td>Ломоносов</td><td>42.0</td><td>40</td></tr>

<tr><td>Павловск</td><td>25.4</td><td>30</td></tr>

<tr><td>Петродворец</td><td>83.8</td><td>29</td></tr>

<tr><td>Пушкин</td><td>95.1</td><td>24</td></tr>

<tr><td>Сестрорецк</td><td>34.9</td><td>35</td></tr>

</table>

</td>

<td>

<table width="300"border="1">

<tr><td align="center"><b>Город</b></td><td align="center"><b>Н</b></td><td align="center"><b>Р</b></td></tr>

<tr><td>Бокситогорск</td><td>21.6</td><td>245</td></tr>

<tr><td>Волхов</td><td>50.3</td><td>122</td></tr>

<tr><td>Всеволожск</td><td>32.9</td><td>24</td></tr>

<tr><td>Выборг</td><td>80.9</td><td>130</td></tr>

<tr><td>Высоцк</td><td>1.0</td><td>159</td></tr>

<tr><td>Гатчина</td><td>80.9</td><td>46</td></tr>

<tr><td>Ивангород</td><td>11.9</td><td>147</td></tr>

<tr><td>Каменногорск</td><td>5.9</td><td>157</td></tr>

<tr><td>Кингисепп</td><td>51.5</td><td>138</td></tr>

<tr><td>Кириши</td><td>53.8</td><td>115</td></tr>

<tr><td>Кировск</td><td>23.8</td><td>55</td></tr>

<tr><td>Лодейное Поле</td><td>27.3</td><td>244</td></tr>

<tr><td>Луга</td><td>41.8</td><td>139</td></tr>

</table>

</td>

<td>

<table width="300"border="1">

<tr><td align="center"><b>Город</b></td><td align="center"><b>Н</b></td><td align="center"><b>Р</b></td></tr>

<tr><td>Любань</td><td>4.7</td><td>85</td></tr>

<tr><td>Новая Ладога</td><td>11.2</td><td>141</td></tr>

<tr><td>Отрадное</td><td>22.9</td><td>40</td></tr>

<tr><td>Пикалево</td><td>25.1</td><td>246</td></tr>

<tr><td>Подпорожье</td><td>23.1</td><td>285</td></tr>

<tr><td>Приморск</td><td>6.7</td><td>137</td></tr>

<tr><td>Приозерск</td><td>20.5</td><td>145</td></tr>

<tr><td>Светогорск</td><td>15.8</td><td>201</td></tr>

<tr><td>Сланцы</td><td>42.6</td><td>192</td></tr>

<tr><td>Сосновый Бор</td><td>57.6</td><td>81</td></tr>

<tr><td>Тихвин</td><td>72.0</td><td>200</td></tr>

<tr><td>Тосно</td><td>33.8</td><td>53</td></tr>

<tr><td>Шлиссер бург</td><td>12.5</td><td>64</td></tr>

</table>

</td>

</tr>

</table>

<font>

Все города, подчиненные <br>

администрации <br>

Санкт-Петербурга, имеют <br>

прямые городские <br>

телефонные номера</font>

</body>

</html>

Рис.42



Заключение

Во время учебной практики по МДК 01.01 “Системное программирование” и МДК 01.03 “WEB-программирование” были закреплены теоретические знания, практические навыки и умения в разработке программ на языке Ассемблер и на языке HTML 5.0 соответственно.



Список используемой литературы

1. А.А. Андреева. Программирование на языке «Ассемблер» для микропроцессора «Intel 80x86». Лабораторный практикум.

2. А.А. Андреева. Использование системных средств DOS/BIOS. Методические указания к лабораторной работе.

3. В. Вайнгартен. Трансляция языков программирования.

4. Визерспун Крэг. Освой самостоятельно Linux за 24 часа. М.:Вильямс.2001.-347с.

5. Вильямс Ал. Системное программирование в Windows 2000 для профессионалов. - СПб.: Питер, 2001.-621с.

Размещено на Allbest.ru