Методические указания по информатике
1 1 1 1 1 1 1 1 1 1 Рейтинг 4.00 (1 Голос)

Методическое пособие по созданию сайтов в HTML

WEB – сайт хранит информацию в виде страниц, которые просматривают его посетители. Каждая такая страница (Web-page) должна быть описана в виде текстового файла на языке HTML.

 Содержание

Урок № 1 (теория) Основы языка HTML.

Урок № 2 (теория): Управление внешним видом документа.

Урок № 3 (практика): Создание первых WEB-страниц.

Урок № 4 (практика): Цветовое оформление и списки в WEB-страницах.

Урок № 5 (теория): Ссылки и графика при создании WEB-страниц.

Урок № 6 (практика): Ссылки и графика в WEB-страницах.

Урок № 7 (теория): Создание таблиц и фреймов.

Урок № 8 (практика): Таблицы и фреймы WEB-страницах.

Урок № 9 (теория): Создание форм.

Урок № 10 (практика): Создание форм.

Литература

Урок № 1 (теория) Основы языка HTML

Цель: Знакомство учащихся с общими положениями создания WEB-страниц и базовыми тегами языка HTML

План:

1. WORLD WIDE WEB и HTML

2. Способы программирования WEB-страниц

3. Язык HTML (общие сведения, структура языка)

4. Структурные теги

1. WORLD WIDE WEB и HTML

Современный этап развития INTERNET начался в 90-х годах с появлением нового протокола обмена информацией HTTP (протокол передачи гипертекста)

ГИПЕРТЕКСТ – это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылки на другие документы.

Вместе с этим протоколом появилась и служба WORLD WIDE WEB и HTML (WWW или просто WEB или всемирная паутина), которая представляет собой обширную сеть серверов HTTP, передающих файлы через INTERNET.

Основную часть этих файлов представляют собой WEB-страницы - специальные файлы, написанные на языке HTML (HyperText Markup Language – язык разметки гипертекста). Он определяет правила, согласно которым обычный текст, представляется в виде WEB - страниц. Этот язык похож на язык программирования. И даже людей, занимающихся созданием WEB – страниц, называют WEB – программистами. WEB – программисты должны разбираться в дизайне, пользовательском интерфейсе, теории цвета и др.

2. Способы программирования WEB-страниц

Программировать WEB – страницы можно разными способами:

1. На языке HTML

2. Средствами различных редакторов, такими как HTMLWriter, HTMLAssistant, HTMLLed, HTMLHyperEdit, WEBEdit, COMPOZER, FrontPage и др.

3. С помощью DELPHI 5

4. С помощью языка JAVA

3. Язык HTML.

- Общие сведения

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

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

HTML - файл –это текстовый файл, имеющий расширение. htm или. html

Текст файла можно набирать в любом примитивном редакторе: Блокнот, WORDPAD, FAR.

- структура языка

Любой документ, написанный с помощью этого языка, состоит из содержимого

страницы, т. е. Текста и управляющих символов – ТЕГов.

ТЕГ – инструкция браузеру, указывающая способ отображения текста. Тег всегда начинается со знака < и заканчивается >. Прописные и строчные буквы при написании тегов не различаются. Существует 2 типа тегов: парные (< > </ >) и не парные ( < > ).

Кроме того, теги делятся на категории по выполняемым ими функциям: структурные, теги форматирования абзацев, символов, гиперссылок и т. д.

4. Структурные теги

Для описания структуры HTML – файла используются 3 парных тега:

<HTML> </HTML> - указывает браузеру, что далее следует HTML –файл. Он обрамляет весь документ.

< HEAD> </ HEAD> - голова документа (Информация, находящаяся в этом разделе документа является служебной и необходима программе браузеру пользователя). Этот тег допускает вложение следующих элементов:

<TITLE> </TITLE> - заголовок документа, который при просмотре браузером помещается в заголовок окна браузера.

<BASE> - задаёт адрес для относительных ссылок документа. (Синтаксис: <BASE HREF = « протокол:// имя сервера/ путь»> Например: <BASE HREF = « HTTP:// www. microsoft. com » > Путь является не обязательным компонентом.

< ISINDEX> Обеспечение поиска (Синтаксис: < ISINDEX prompt = « строка» action= «сценарий»> Строка задаёт текст приглашения не более 35 символов.

<LINK> Взаимосвязь между документами. Используется редко. С ним используется много атрибутов – Более подробно смотри учебник HTML в INTERNET.

<META> Предоставление дополнительной информации о документе. Он позволяет поисковым машинам идентифицировать и классифицировать документ без его загрузки.

Более подробно смотри учебник HTML в INTERNET.

< STYLE> </STYLE> Определение стиля страницы. Более подробно смотри учебник HTML в INTERNET.

< BODY> </ BODY> - тело документа. Этот тег имеет вложенные атрибуты:

BACKGROUND –задаёт графическое изображение, которое заполнит фон документа. Файл с изображением должен быть сохранён в формате. GIF или. JPEG Синтаксис: <BODY BACKGROUND = «(URL) (путь) имя файла »>. Если файл с изображением фона помещается в том же каталоге, что и сам файл, то URL и путь указывать не надо.

BGCOLOR – задаёт цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов, или при помощи названия цвета. Синтаксис: <BODY BGCOLOR = «#ff0000»> или <BODYBGCOLOR = «RED»>

TEXT – задаёт используемый по умолчанию цвет текста, обычно чёрный.

LINK – задаёт используемый по умолчанию цвет гиперссылки текста, обычно синий.

Есть ещё атрибуты: ALINK, VLINK, BGPROPERTIES, TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN– Более подробно смотри учебник HTML в INTERNET.

Урок №2 (теория): Управление внешним видом документа

Цель: Знакомство учащихся со структурным форматированием документа

План:

1. Теги управления внешним видом документа

2. Теги форматирования символов

3. Организация списков

4. Управляющие символы языка HTML

5. Цветовое оформление текста

1. Теги управления внешним видом документа

<COMMENT> </COMMENT> - комментарий. Синтаксис: <COMMENT> Текст комментария </COMMENT>

<Hn> </Hn> - определяет заголовок документа. N принимает значение от 1 до 6. H1- самый большой шрифт, H6 – самый маленький. Этот тег может иметь вложенный атрибут ALIGN, который указывает отступ left - слева, center - центр, right –справа. Синтаксис: <Hn align=center> Текст заголовка </Hn>

<HR> - горизонтальная полоска – линейка, отделяющая разные части документа друг от друга. Может иметь вложенные атрибуты:

COLOR –задаёт цвет линии

HEIGHT – высота в пикселях

WIDTH – ширина в пикселях или процентах от ширины экрана

ALIGN – режим выравнивания

Синтаксис: <HR align=»center» height=n width=n color= «цвет»>

<P> </P> - отделяет абзацы друг от друга. Может иметь вложенный атрибут : ALIGN – режим выравнивания. Синтаксис: <P align=left> Текст абзаца </P>. Закрывающийся тег не обязателен.

<BR> - перевод строки. Может иметь вложенный атрибут: ALIGN, который может принимать значения – left, all, right - указывая тем самым обтекание текста вокруг плавающих изображений, вставленных нестандартным способом. Синтаксис: <BR clear=all> Текст, или <BR > Текст.

<ADDRESS> </ADDRESS> - используется для оформления контактной информации текущего документа, будь то адрес электронной почты или почтовый адрес с номером телефона. Синтаксис: <ADDRESS> Контактная информация </ADDRESS>

<BLOCKQUOTE> </BLOCKQUOTE> - позволяет выделить объёмный текст-цитату из общего текста. Синтаксис: <BLOCKQUOTE> Цитата </BLOCKQUOTE>

2. Теги форматирования символов

<EM> </EM> - выделение особым шрифтом слова или текста

<KBD> </KBD> - выделение диалога пользователя с компьютером. Синтаксис: <KBD> Ввод с клавиатуры </KBD>

<DFN> </DFN> - обозначение терминов и определений по типу словарей и глоссариев. Синтаксис: <DFN> Текст </DFN>

<CITE> </CITE> - обозначение источника информации, из которого взята цитата. Синтаксис: <CITE> Текст </CITE>

<B> </B> - полужирный шрифт

<I> </I> - курсив

<U> </U> - подчёркнутый шрифт

<STRIKE> </STRIKE> - перечёркнутый шрифт

<TT> </TT> - монотайпный шрифт

<BASEFONT SIZE=N> - базовое значение размера шрифта. Здесь N принимает значения от 1 до 7. По умолчанию N= 7. Размер шрифта 1 соответствует размеру шрифта в 9 пунктов, для размера 7 – 36 пунктов. Желательно крайние размеры не брать.

<FONT> </FONT> - изменение шрифта в теле документа. Может иметь вложенные атрибуты: SIZE – размер шрифта, COLOR - цвет шрифта. Синтаксис: <FONT size=n color = «цвет»> </FONT>

<BIG> </BIG> - базовый размер шрифта увеличивается

<SMALL> </SMALL> - базовый размер шрифта уменьшается

<SUB> </SUB> - подстрочные индексы

<SUP> </SUP> - надстрочные индексы

3. Организация списков

Для обычного ненумерованного списка (перечисление без упорядочения) используется конструкция:

<UL> </UL> - открытие начала списка. Этот тег имеет параметр TYPE, который определяет вид маркеров списка: CIRCLE - окружность, DISK - точка, SQUARE - квадрат <LI> - начало каждого элемента списка

Синтаксис:<UL TYPE=CIRCLE>

<LI> Текст

<LI> Текст

<LI> Текст

</UL>

<OL> </OL> - нумерованный список, тоже имеет параметр TYPE, который задаёт тип списка и параметр START, задающий начальный номер списка. Типы списка:

A - нумераторы прописные латинские буквы

A – строчные латинские буквы

I – большие римские цифры

I – маленькие римские цифры

1 – обычные индийские цифры

Синтаксис:<OL TYPE=I START=10>

<LI> Текст

<LI> Текст

<LI> Текст

</OL>

<DL> </DL> - список с пояснениями

<DT> - обозначение самого элемента списка

<DD> - обозначение пояснения, связанного с этим элементом

Пример: <DL> <DT>Нумерованный список

<DD>Список, у которого все элементы пронумерованы

<DT>Ненумерованный список

<DD>Список, у которого все элементы помечены маркером

</DL>

4. Управляющие символы языка HTML

К управляющим символам языка HTML относятся двойные скобки, амперсанд и двойные кавычки. Если они понадобятся в тесте документа, то для их набора используются последовательности из строчных обязательно букв:

&lt - <

&qt - >

&amp - &

&quot - «

5. Цветовое оформление текста

<FONT COLOR = #XXXXXX> </FONT> - цвет текста.

Параметр #XXXXXX представляет собой шестизначное численное значение для цвета в формате RGB, где первые две цифры определяют насыщенность красного, вторые две – насыщенность зелёного, а последние две – синего. Цифры указываются в шестнадцатеричной системе счисления.

Если же используются стандартные 16 цветов, то можно использовать их словесное название: <FONT COLOR=ffaa00>Текст </FONT> <FONT COLOR = RED> Текст</FONT>

Список стандартных цветов:

AQUA – морская волна

BLACK - чёрный

BLUE - голубой

FUCHSIA - малиновый

GRAY – серый

GREEN - зелёный

LIME – ярко-зелёный

MAROON – тёмно-красный

NAVY – тёмно-синий

OLIVE - оливковый

PURPLE – пурпурный

RED - красный

SILVER - серебренный

TEAL – тёмная морская волна

WHITE - белый

YELLOW – жёлтый

Урок №3 (практика): Создание первых WEB-страниц

Задание:

1. Наберите текст в редакторе «Блокнот», сохраните его на диске с расширением IMYA. HTML. Затем запустите в браузере с адресом file:///e:\imya. html

<html>

<head>

<title> Моя первая страница </title>

</head>

<body> Мир! Здравствуй! Я желаю тебе всех благ и процветания! Ты меня слышишь?

</body>

</html>

2. Создайте сами вторую WEB-страницу

1. Заголовок страницы: Человек и Вселенная

2. В теле документа 3 заголовка с размером шрифта – последующий меньше предыдущего: Космос, Природа, Человек

3. С нового абзаца при базовом шрифте=4 напечатать фразу: Человек является частью Вселенной и существует в триединстве:

4. Далее жирным шрифтом: Космос, Природа, Человек

5. Новый абзац: Космос – Вера

6. С новой строки: Природа – Надежда

7. С новой строки: Человек – Любовь

8. Горизонтальная черта

9. Маленьким шрифтом: из Живой этики Н. Рериха

10. Новый абзац, выравнивание по правому краю, большой шрифт, подчёркнутый, цитата: Величие Космоса не оставляет место рассуждению, но поражает и возносит

 Урок №4 (практика): Цветовое оформление и списки в WEB-страницах

Задание:

1. Создайте WEB-страницу с именем « Аура человека»

2. На зелёном фоне тёмно-синим цветом набрать заголовок

Что такое - аура?

3. Цветом морской волны с базовым шрифтом =5, с нового абзаца набрать текст

Наличие энергетических полей вокруг живых организмов известно было ещё в древности, их использовали факиры, шаманы, йоги. Сейчас учёные обосновали существование этих полей и даже создали фотоаппарат, который может сфотографировать эти поля. Часть энергетического поля, выходящая за пределы физического тела и называется аурой. Аура – это отражение души человека. Она рассказывает о человеке практически всё. Наблюдая изменение цветов в ауре человека можно знать, когда он говорит неправду или уходит от прямого ответа на вопрос, какой у человека недуг и т. д.

4. Тёмно-синим цветом набрать заголовок

Что обозначает цвет в ауре?

5. Цветами, соответствующими цвету в тексте, и используя теги списков, параметры горизонтальной линии после каждого цвета, наберите текст:

I. Красный – свидетельствует о бодрости и энергии и вместе с тем о тенденции к нервным расстройствам. В музыке это нота – ДО

1. Темно-красный – признак неуравновешенности нервной системы, вспыльчивости

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

3. Ярко – алый – излишний эгоизм

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

II. Оранжевый – цвет Солнца и жизненной силы, указывающий на внимательное отношение к другим. В музыке это нота РЕ

1. Золотисто-оранжевый – свидетельствует о жизнеспособности и самообладании

2. Коричневый оттенок – беззаботность и отсутствие честолюбия

3. Много оранжевого в ауре – человек ленив, склонен к расстройству печени

III. Жёлтый – означает крепкое здоровье и благополучие. Цвет Святого Учителя. В музыке это МИ

1. Жёлтый с золотистым оттенком – люди радостны, дружелюбны, готовы оказать помощь

2. Красноватый оттенок жёлтого цвета свидетельствует о застенчивости

Урок № 5 (теория): Ссылки и графика при создании WEB-страниц

Цель: Знакомство учащихся с различными возможностями перехода на другие страницы и вставки графических изображений, что является причиной популярности WORLD WIDE WEB

План:

1. Внешние ссылки

2. Внутренние ссылки

3. Ссылки в виде графических изображений

4. Рисунки на WEB – страницах

1. Внешние ссылки

<A> </A> - этот тег используется для создания всех ссылок – и внутри текущего документа и на другие документы.

Внешние ссылки – это переход на другой документ. Имя ссылки для щелчка браузер автоматически выделяет другим цветом и подчёркивает.

<A HREF =” URL”>Имя ссылки для щелчка </A> - атрибут HREF задаёт адрес ссылки на другой документ.

URL – записывается в виде: SERVIS://SERVER[:PORT] [/part], где

SERVIS –наименование протокола, по которому мы обращаемся к ресурсу, например, http - доступ к html - документу, file - доступ к файлу на локальной машине, ftp - запрос файла с сервера и т. д.

SERVER – указание имени ресурса, на который ссылаемся

:PORT – не обязателен, указывает номер порта, на котором функционирует тот web - сервер, на который поставлена ссылка. По умолчанию значение этого параметра=80, и в подавляющем большинстве случаев его менять не приходится

/PART – не обязателен. Указывает каталог, в котором находится ресурс. При обращении по имени web - сервера мы попадаем на основную страницу в его корневом каталоге, а если надо загрузить страницу или исполняемый файл из других каталогов, то надо указать полный путь к ним. Например, на web - сервере создали страницу, содержание которой описано в файле cont. html в каталоге wcont, то для доступа к этой странице, минуя основную, необходимо написать ссылку: http://www. Myserver. ru/wcont/cont. html

Пример внешней ссылки:

< A HREF = http://www. microsoft. com/>Версии ОС </A> - здесь Версии ОС – это имя ссылки – оно обычно подчёркнуто и выделено синим цветом.

2. Внутренние ссылки

Внутренние ссылки - это переход на другой раздел текущей страницы. Для создания такой ссылки надо вначале поставить «якорь» или «закладку». Для этого в теге <A> используется атрибут NAME:

<A NAME = имя закладки> Текст первой строки того раздела, на который ссылаетесь</A>

Имя закладки обязательно латинскими буквами, можно цифры, нельзя пробелов. И далее вместо URL в атрибуте HREF вы указываете имя этой закладки

<A HREF =” #имя закладки”> Имя ссылки для щелчка </A> - атрибут HREF задаёт адрес ссылки внутри текущего документа.

Пример: Вы хотите перейти на раздел : ЦВЕТА В АУРЕ. Для этого, там, откуда необходим переход:

<A NAME =”CVET”> ЦВЕТА В АУРЕ </A>

<A HREF =”#CVET”>Цвет </A> Здесь Слово Цвет будет именем ссылки, будет подчёркнуто и выделено другим цветом.

 3. Ссылки в виде графических изображений

Для создания графических ссылок используется сегментированная графика, или IMAGE MAP (карта изображений, где на один рисунок приходится несколько ссылок). Это удобно, когда изображение меню создаётся в виде графического файла (по типу стандартной панели инструментов) и для каждого пункта меню реализуется своя ссылка.

При использовании сегментированной графики сначала необходимо подготовить сам графический файл. Затем он вставляется в текст документа командой <IMG> , к которой добавляется параметр USEMAP, например: <IMG SRC=”picture.jpgUSEMAP = “ #ZVON

Picture. jpg – файл рисунка, который мы будем использовать в виде карты

#MAP – имя карты чувствительных областей рисунка. Если описание карты находится не в том документе, где она помещена, то перед # вписывается имя html - файла, содержащего описание этой карты.

< MAP NAME =”map_name”> </MAP> - создание карты областей, чувствительной к нажатию кнопок. Между открывающими и закрывающими тегами помещаются определители чувствительных областей.

map_name – собственное имя карты. В выделенном примере это имя будет ZVON

<AREA CHAPE=”RECT” COORDS = “0,0,30,30” HREF=”a. html”> - для задания каждой чувствительной области, где

CHAPE принимает значения: RECT – прямоугольник, CIRC - круг, POLY - многоугольник

COORDS – задаёт список координат для выбранной формы: для RECT-x1,y1,x2,y2;

CIRC – x, y,r; POLY – x, y для каждой вершины

HREF - задаёт URL, к которому необходимо перейти при нажатии на данную область

<A HREF=URL <IMG> SRC = “имя графического файла”> </A> - ссылки в виде графических изображений, например:

<A HREF =” http: // www. myserver. ru/Wcont/content. html” <IMG> SRC= “!cont. jpg”> </A>

4. Рисунки на WEB – страницах

<IMG SRC = “имя файла»> вставка графического файла в текст. Тег имеет много параметров.

SRC – задаёт адрес файла

WIDTH – ширина картинки в пикселях

HEIGHT – высота картинки в пикселях

HSPACE – ширина свободного пространства по горизонтали

VSPACE - ширина свободного пространства по вертикали

ALIGN = LEFT - лево, RIGHT - право, TOP - верх, BOTTOM - низ, MIDDLE –середина – выравнивание текста относительно графики

TEXTTOP – выравнивание по верхней границе относительно самых высоких символов

ABSMIDDLE – заставит строку текста выровняться относительно середины изображения

ABSBOTTOM – выравнивание нижней границы рисунка относительно нижней границы строки

ALT = “текстовая строка” – указывает текстовую строку вместо картинки в том случае, если в браузере отключена возможность автоматической загрузки графики.

Пример:

<IMG SRC=”a. gif” alt=”это мой домик” height=38 width=102 align=left>

Урок №6 (практика): ”Ссылки и графика в WEB-страницах”.

Задание:

1. Запустите листинг создания WEB-страницы «Аура человека» – (практическое задание урока №4).

2. После текста о цвете сделайте внешнюю ссылку на любой известный вам URL

3. Установить внутреннюю ссылку “цвет” в заголовке “Что обозначает цвет в ауре?” с переходом на фразу Цвета в ауре , которую допишите в HTML-документе.

4. Выберите картинки с расширением .gif, .jpg и поместите их в папку на том же диске и в том же каталоге где вы сохранили документ HTML.

5. Вставьте рисунок из этой папки в HTML-документ.

6. Вставьте рисунок из FOMENKO. RU и создайте карту областей, чувствительной к нажатию кнопок

7. Запустите любую web-страницу и посмотрите листинг документа, как HTML-файла.(вид\ код страницы)

Урок №7 (теория): Создание таблиц и фреймов.

Цель: Знакомство учащихся с возможностью размещения нескольких документов на одной странице и с созданием таблиц при разработке WEB – страниц

План:

1. Таблицы в WEB –страницах

2. Пример создания таблицы

3. Фреймовая структура сайта

4. Пример создания фреймов

1. Таблицы в WEB –страницах

Таблицы – это один из наиболее удобных способов представления больших объёмов данных.

<CAPITON> </CAPITON> - заголовок самой таблицы

<TABLE> </TABLE> - начало таблицы

<TR> </TR> - строка таблицы

<TD> </TD> - столбец таблицы

<TH> </TH> - заголовок столбца или строки

Внутри ячеек могут быть любые данные, даже внутри могут быть вложенные таблицы.

Чтобы таблица была красивой с тегом TABLE используется ряд параметров.

ALIGN = LEFT- лево, RIGHT - право, BOTTOM - низ, TOP - верх, CENTER - центр, JUSTIFY – и по левому и по правому краю одинаково.

BORDER – задаёт ширину границы в пикселях, т. е. Рамку вокруг таблицы или вокруг отдельных ячеек

WIDTH – ширина таблицы в пикселях или в % от ширины окна браузера

VALIGN = TOP, MIDDLE, BOTTOM, BASELINE – базовая линия текста

BORDERCOLOR = “#XXXXXX” – цвет границы объекта

BORDERCOLORDARK – темный цвет для трёхмерного изображения вокруг объекта

BORDERCOLORLIGHT – светлый цвет для трёхмерного изображения вокруг объекта

BACKGROUND = “имя графического файла” – картинка, служащая фоном для всей таблицы

BGCOLOR = “#XXXXXX” – цвет фона таблицы

NOW RAP – запрещает перенос содержимого таблицы на другую строку

COLS – количество колонок в таблице

COLSPAN – объединение несколько ячеек по вертикали

ROWSPAN – по горизонтали

Пример: <TR> <TD> </TD> <TH colspan=2> Параметры </TH> </TR>

<TR> <TD> </TD> <TH> Рост </TH> <TH> Вес </TH> </TR>

Результатом будет следующая таблица:

Параметры

Рост

Вес

VOLD – внешняя рамка не отображается

ABOVE – отображается верхняя граница таблицы

BELLOW - нижняя

LNS - левая

RNS - правая

RUNES = NONE – границы между ячейками не отображаются, ROWS – отображение разделителей между строками, COLS – между столбцами, ALL – все разделители линии отображаются; - Установка внешнего вида границ между ячейками.

2. Пример создания таблицы

Пусть нужно создать следующую таблицу:

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

Открывающий тег

Закрывающий тег

Описания

TABLE

Обязателен

Начало и конец таблицы

CAPITON

Заголовок таблицы

TR

Не обязателен

Начало строки таблицы

TD

Начало столбца таблицы

<HTML>

<HEAD>

<TITLE> Таблица </TITLE>

</HEAD>

<BODY>

<CAPITON> Основные теги таблицы </CAPITON>

<TABLE ALIGN = CENTER BORDER = 10 WIDTH= 90% >

<TR> <TD> <B> Открывающий тег </B> </TD>

<TD> <B>Закрывающий тег </B> </TD>

<TD> <B> Описание </B> </TD>

</TR>

<TR> <TD> TABLE <TD ROWSPAN = 2> Обязателен <TD> Начало и конец таблицы

<TR> <TD> CAPITON <TD> Заголовок таблицы

<TR> <TD> TR <TD ROWSPAN = 2> Не обязателен <TD> Начало строки таблицы

<TR> <TD> TD <TD> - Начало столбца таблицы

</TABLE>

</BODY>

</HTML>

3. Фреймовая структура сайта

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

Фреймовая структура сайта подразумевает, что каждая страница состоит из отдельных областей, в каждой из которых отображается один HTML – файл. Тогда главный документ будет содержать только определение фреймов, а всё наполнение фреймов располагается в других фалах, следовательно для документа с фреймовой структурой в главном HTML – документе нет нужды использовать тег <BODY>. Вместо него используется тег:

<FRAMESET> </FRAMESET> - Между скобками вставляется тег <FRAME>

Тег <FRAMESET> имеет несколько параметров:

COLS – окно делится на области по вертикальным линиям

ROWS – по горизонтали

* - выделяется всё оставшееся пространство ( в % или в пикселях)

Пример: <FRAMESET COLS= “110, *”> - первый фрейм занимает 110 пикселей, а второй всё оставшееся место по ширине окна

FRAMEBORDER = 1 – каждый фрейм будет иметь трёхмерную рамку

FRAMEBORDER = 0 – рамки не будет

<FRAME SRC=”panel1.html – тег содержит обязательный атрибут SRC, определяющий документ, который будет загружен в данную область. Тег <FRAME> имеет несколько параметров:

FRAMEBORDER

MARGINHEIGHT – для задания отступа по вертикали от границы фрейма в пикселях

MARGINWIDTH – по горизонтали

NORESIZE – если он указан при определении фрейма, то пользователь не может изменять границы фрейма

SCROLLING = YES - да, NO - нет, AUTO – создаёт их в случае необходимости; – задаёт нужно или нет создавать полосы прокрутки

4. Пример создания фреймов:

<HTML>

<HEAD>

<TITLE> Работа с фреймами</TITLE>

</HEAD>

<FRAMESET COLS = 40%, 60% FRAMEBORDER = 1>

< FRAME SCROLLING=AUTO SRC = doc1.html>

< FRAME SCROLLING=AUTO SRC = doc2.html>

</FRAMESET>

</HTML>

Урок №8 (практика): Таблицы и фреймы WEB-страницах

Задание:

1. Создайте 2 фрейма, разделив страницу экрана горизонтально

2. В первом фрейме создайте следующую таблицу ниже:

Имя поля

тип

Размер

Описание

номер

целый

 

Номер участка

фамилия

текстовый

30

Фамилия, имя

страна

текстовый

15

Название страны

перекладина

вещественный

 

Баллы за перекладину

кольца

вещественный

 

Баллы за кольца

конь

вещественный

 

Баллы за коня

3. Во втором фрейме создайте эту же таблицу, но объединяя ячейки, если в них одно и то же данное. Заголовки столбцов жирным шрифтом. Фон таблицы голубой, граница таблицы с трёхмерным изображением.

Урок № 9 (теория): Создание форм

Цель: Знакомство учащихся с возможностью создания динамических сайтов

План:

1. Теги для вставки элементов: кнопок, графических изображений, флажков, переключателей, паролей, текстовых полей.

2. Пример формы

Формы представляют собой наиболее важные интерактивные элементы HTML, позволяющие вашему сайту взаимодействовать с пользователем. С их помощью пользователь может возвращать комментарии по поводу посещения определённого узла, пересылать запросы или регистрироваться. Разработчик задаёт вопросы, создавая форму, а пользователь отвечает на них, заполняя её. Содержимое формы либо передаётся сценарию CGI (Common Gateway Interfase – общедоступный шлюзовой интерфейс служит для запуска внешних программ на самом сервере), либо по электронной почте посылается получателю.

Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI.

<FORM> </FORM> -создание формы. Имеет несколько параметров:

ACTION – указывает URL того CGI – приложения, которое будет взаимодействовать с нашей формой

METHOD – указывает метод, который будет использован для передачи данных из формы в CGI – приложение. Имеет 2 значения : POST- для передачи больших объемов данных, полученных через стандартный поток ввода, GET – вся информация помещается в переменную среды. Чаще используют POST.

<INPUT> - тег вставки элементов: кнопок, графических изображений, флажков, переключателей, паролей, текстовых полей. В теге несколько параметров.

Параметр TYPE задаёт тип элемента. Для многих элементов можно использовать ряд атрибутов:

SIZE – ширина поля ввода для текстовых элементов управления

MAXLENGTH – максимальное количество символов, которое можно ввести в это поле

VALUE – задаёт начальное значение элемента управления, которое можно менять

CHECKED – для различных переключателей указывает, что данный переключатель отметить, как включённый

NAME – для каждого независимого переключателя устанавливается своё значение, а для каждого зависимого (радиокнопка) - из одной и той же группы значение должно быть одинаковым.

Типы элементов, используемые для параметра TYPE:

RADIO – радиокнопки, т. е. в группе переключателей может быть выбран лишь один, поэтому для каждого переключателя указывается отдельный элемент. Их называют зависимыми друг от друга. Использует атрибут: VALUE, NAME

CHECKBOX - Переключатели, не зависящие друг от друга. Использует атрибуты: CHECKED, VALUE. Пример:

<INPUT type=”checkbox” name =”play” value = “yes” checked>

TEXT – для ввода текстовой информации. Использует атрибуты: MAXLENGTH, SIZE, VALUE. Пример:

<INPUT type=”text” maxlenght=”35” size=”20” value = “shopping”>

PASSWORD - идентичен элементу управления TEXT, но предназначается для ввода пароля, и поэтому отображает вводимую информацию в скрытом виде, заменяя содержимое звёздочками. Использует атрибуты: MAXLENGTH, SIZE, VALUE. Пример:

<INPUT type=”password” maxlenght=”35” size=”20” >

BUTTON – обычный тип кнопки. Пример:

<INPUT type=”button” value = “кнопка”>

RESET – сбрасывает все введённые данные во всех элементах управления и возвращает их к начальному состоянию, заданному с помощью параметра VALUE. Пример:

<INPUT type=”reset” value = “очистка”>

SUBMIT – для посылки всех данных из заполненной формы в CGI - приложение. Эта кнопка обычно вставляется в конце формы. Пример:

<INPUT type=”submit” value = “послать”> </FORM>

IMAGE – Похож на кнопку SUBMIT, только в качестве кнопки используется графическое изображение, здесь используется SRC для указания URL графического файла, ALIGN для выравнивания изображения относительно текста при помощи значений TOP, MIDDLE, BOTTOM, NAME для задания имени карты. Пример:

<INPUT type=”image” src=”knopka. gif”>

HIDDEN – для пересылки файла с исходным кодом HTML. Пример:

<INPUT type=”hidden” name=”file” value=”anyfile. html”>

<TEXTTAREA> </TEXTTAREA> - этот тег создаёт область для ввода и просмотра текста. Может иметь атрибуты:

NAME – задаёт ключевое поле, по которому сценарий может обращаться к его содержимому

ROWS – высота области в строках

COLS – ширина области в символах

<SELECT> </SELECT> - выпадающий список или меню. Имеет 3 параметра:

NAME – имя списка

SIZE - высота списка в строках

MULTIPLE – возможность одновременного выбора нескольких значений.

<OPTIONS> </OPTIONS> - задаёт возможные варианты выбора меню <SELECT>. Имеет 2 параметра:

SELECTED – задаёт изначально выбранное слово

VALUE – задаёт значение выбранного слова для сценария.

2. Пример формы:

<HTML>

<HEAD>

<TITLE> Пример формы </TITLE>

<BODY>

<FORM METHOD=action=mailto: 123@ mail. ru type=plain/text> (123 – это пример логина электронной почты)

<P> Ввод строки

<INPUT TYPE=”text” NAME=”edit1” VALUE=” по умолчанию“>

<P>Текстовое поле

<TEXTAREA NAME=”edit2” ROWS=3 COLS=25> Текст по умолчанию </TEXTAREA>

<P>Пароль

<INPUT TYPE =”password” NAME=”Pass”>

<P>Выпадающий список

<H3> Выберите нужное</H3>

<SELECT multiple>

<OPTION value=a> первый</OPTION>

<OPTION value=a>второй </OPTION>

<OPTION value=a>третий </OPTION>

</SELECT>

<P> Радиокнопки

<P> <INPUT type=”radio” name =”payment” value = “check1” CHECKED>Альтернатива1

<P> <INPUT type=”radio” name =”payment” value = “check2” >Альтернатива2

<P> <INPUT type=”radio” name =”payment” value = “check3” >Альтернатива3

<P> <INPUT type=”submit” name =”send” value = “отослать”>

<P> Независимые переключатели

<P> <INPUT type=”checkbox” name =”knopka1” value = “check1” CHECKED>Горы

<P> <INPUT type=”checkbox” name =”knopka1” value = “check1” >Море

<P> <INPUT type=”checkbox” name =”knopka1” value = “check1” >Солнце

<P>Пара кнопочек

<P> <INPUT TYPE=”RESET” NAME=”resetbut” VALUE=”Обновить”>

<P> <INPUT TYPE=”BUTTOM” NAME=”buttom1” VALUE=”Простая кнопка”>

</FORM>

</BODY>

</HEAD>

</HTML>

Урок №10 (практика): Создание форм

 Задание:

Создайте сайт и просмотрите его в браузере

1. Введите фамилию

_______________________ 

2. Введите имя

______________________ 

3. Введите класс

_____________________ 

4. Выберите номер школы, в которой вы учитесь

» гимназия №2

» гимназия №1

» гимназия НОВОСКУЛ

5. Выберите 2 ваших любимых предмета

» информатика

» математика

» физика

» химия

» литература

6. Нажмите кнопку ТЕСТ или ОБУЧЕНИЕ в зависимости от того, что вы хотите пройти по данным предметам

7. Посмотрите возможные оценки (два написано, а на стрелке сделать выпадающие оценки: три, четыре, пять)

Литература

1. Шапошников И. «Интернет программирование»

2. Симонович С. и др. «Практическая информатика»

3. Материалы сайта www. Zona5.al. ru

4. Холмогоров В. «Основы WEB-мастерства»

Методическое пособие по созданию сайтов в HTML - 4.0 out of 5 based on 1 vote

Добавить комментарий


Защитный код
Обновить

По темам:

История Украины

Культурология

Высшая математика

Информатика

Охотоведение

Статистика

География

Военная наука

Английский язык

Генетика

Разное

Технологиеские темы

Украинский язык

Филология

Философия

Химия

Экология

Социология

Физическое воспитание

Растениевосдство

Педагогика

История

Психология

Религиоведение

Плодоводство

Экономические темы

Бухгалтерские темы

Маркетинг

Иностранные языки

Ветеринарная медицина

Технические темы

Землеустройство

Медицинские темы

Творчество

Лесное и парковое хозяйство

Агрономия

Преподавателям

Юридические темы

Google