- •История развития Web-технологий
- •К лассификация Web технологий
- •Статические Web технологии. Основы технологии html
- •Статические Web технологии. Таблицы html
- •Статические Web технологии. Фреймы html
- •Статические Web технологии. Формы html
- •Статические Web технологии. Основы технологии css
- •Внутренние стили. Определяются атрибутом непосредственно в элементе. Мало отличается от традиционного html. Внешний вид документа трудно изменить.
- •Статические Web технологии. Css свойства текста
- •Статические Web технологии. Css свойства шрифта
- •Статические Web технологии. Css свойства границ элементов
- •Статические Web технологии. Css свойства таблиц
- •Динамические Web технологии. Основы технологии Java Script
- •Динамические Web технологии. Java Script, глобальные и локальные переменные, типы данных.
- •Динамические Web технологии. Java Script, операции над числовыми и строковыми типами данных.
- •Динамические Web технологии. Java Script, массивы
- •Динамические Web технологии. Java Script, операторы условного перехода
- •Динамические Web технологии. Java Script, циклы
- •Динамические Web технологии. Java Script, объектная модель
- •Динамические Web технологии. Java Script, обработка событий
Статические Web технологии. Таблицы html
Таблица в языке HTML представляется как набор строк, причем в каждой из них должна быть задана хотя бы одна ячейка. В разных строках может находиться разное количество ячеек.
Теги таблицы и ее компонентов. <TABLE>, </TABLE> - основные теги (тэги), описывающие таблицу. Все, что будет находиться в ней, должно размещаться между двумя этими тегами.
<TR>, </TR> - теги, описывающие строку таблицы.
<TD>, </TD> определяют ячейку таблицы, эти теги могут находиться только внутри тегов, описывающих строку.
<TH>, </TH> используются для описания заголовка строки или столбца таблицы.
<CAPTION>, </CAPTION> применяются для определения названия (подписи) таблицы. По умолчанию, название ставиться вверху таблицы и выравнивается по центру. Данные теги должны размещаться между <TABLE> и </TABLE>, но вне тегов, описывающих строки или ячейки таблицы.
В теге <TABLE> могут использоваться следующие параметры: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN.
Параметр BORDER задает рамку вокруг всей таблицы и вокруг каждой ячейки, образуя линию сетки таблицы (<TABLE BORDER=1>). WIDTH="n%"|"n" задает ширину таблицы или ячейки таблицы. Фиксированная ширина пишется в пикселях, относительная в процентах (относительно ширины окна, таблицы или ячейки другой таблицы, в которой она размещена). HEIGHT="n%"|"n" определяет высоту таблицы или ячейки таблицы как фиксированную величину в пикселях, или относительную в процентах. COLSPAN=n используется для объединения ячеек таблицы по горизонтали (данная ячейка захватывает n столбцов по ширине). ROWSPAN=n только для объединения ячеек таблицы по вертикали (данная ячейка захватывает n строк по высоте). Применяется, как и COLSPAN, в тегах <TH>, <TD>.
Выравнивание таблицы по горизонтали задается атрибутом ALLIGN, значения: left, center, right. А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td. Для вертикального выравнивания содержимого ячеек - атрибут VALIGN: middle, top, bottom.
Фоновое изображение или цвет можно так же задать как для всей таблицы, так и для отдельно взятой ячейки. Задается это - для изображения - атрибутом BACKGROUND, в значении которого прописывается путь к необходимому графическому файлу. Для цветового фона - атрибутом BGCOLOR, здесь значением является наименование цвета.
Статические Web технологии. Фреймы html
Фреймы позволяют разбить окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фреймами, также как и между отдельными окнами браузера, при необходимости можно организовать взаимодействие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера.
Тег <FRAMESET> заменяет тег <BODY> и используется для разделения экрана. Имеет закрывающий тег.
Атрибуты:
• COLS. Делит экран по вертикали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретный столбец будет занимать всю остальную часть экрана
• ROWS. Делит экран по горизонтали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретная строка будет занимать всю остальную часть экрана
• BORDER. Определяет ширину рамки в пикселях.
• BORDERCOLOR. Определяет цвет рамок. По умолчанию (если используется стандартная цветовая схема системы Windows) границы фреймов имеют тусклый, серый оттенок. Но при желании можно выбрать любой другой цвет. При определении цвета можно выбрать как его название, так и числовой эквивалент в системе RGB. Например, BLUE или #0000FF.
Пример
<FRAMESET COLS="25٪,75٪" FRAMEBORDER="YES" BORDER="2"> <FRAMESET ROWS="50٪,50٪" FRAMEBORDER="YES" BORDER="2"> </FRAMESET> <FRAMESET ROWS="10٪,90٪" FRAMEBORDER="YES" BORDER="2"> </FRAMESET> </FRAMESET>
Результат:
-
1
3
4
2
Тег <FRAME> помещенный в контейнер <FRAMESET>…</FRAMESET>, определяет, что именно должно отображаться в конкретном фрейме. Не имеет закрывающего тега.
Атрибуты
• SRC. Определяет URL, связанный с конкретным фреймом.
• MARGINWIDTH. Определяет расстояние между содержимым фрейма и его границами справа и слева.
• MARGINHEIGHT. Определяет расстояние между содержимым фрейма и его границами сверху и снизу.
• SCROLLING. Определяет присутствие в окне фрейма полосы прокрутки. Может принимать значения "yes", "no" и "auto"(по умолчанию).
• NORESIZE. Определяет границы фрейма как "жестко закрепленные" и не позволяет пользователю изменить размеры окна фрейма. Причем фиксируются размеры всех фреймов, имеющих с закрепленным общую границу.
• NAME. Определяет имя окна фрейма. Единственный атрибут, не влияющий на внешний вид фрейма. Позволяет контролировать процесс загрузки фреймов. Если окно фрейма имеет уникальное имя, то к нему можно непосредственно обратиться из других фреймов. Присваивая имена окнам фреймов, надо помнить об одном ограничении: имя не должно начинаться с символа подчеркивания "_", иначе оно будет игнорироваться. Так как с этого символа начинаются некоторые служебные имена.
Пример
<FRAMESET COLS="25٪,75٪" FRAMEBORDER="yes" BORDER="5" BORDERCOLOR="#008800"> <FRAME src="left.htm" MARGINWIDTH="20" MARGINHEIGHT="20"> <FRAME src="right.htm" NAME="main_window" MARGINWIDTH="0" SCROLLING="no" NORESIZE> </FRAMESET>
Использование тега A для загрузки во фрейм
С помощью тега гиперссылки <A> можно загрузить документ в определенный фрейм.
Атрибуты:
• HREF. Определяет URL или имя нового документа, который вы хотите загрузить в определенное окно фрейма.
• TARGET. Определяет имя фрейма, в который будет загружен новый документ. Это имя должно быть присвоено фрейму атрибутом NAME в теге <FRAME>.