- •Практическая работа №1 – Разметка html
- •Основные сведения
- •Структура html-документа
- •Состав html-документа
- •Заголовок документа
- •Метатеги
- •Vbs, vbScript - язык программирования vbScript основанный на Visual Basic. Является продуктом Microsoft и поддерживается преимущественно браузером Internet Explorer.
- •Заголовки
- •Другие элементы
- •Текстовые блоки
-
JavaScript (значение по умолчанию) – язык программирования JavaScript. К этому параметру часто еще присоединяют номер версии, например – JavaScript1.3.
-
JScript – разновидность языка JavaScript разработанная компанией Microsoft. Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах.
-
Vbs, vbScript - язык программирования vbScript основанный на Visual Basic. Является продуктом Microsoft и поддерживается преимущественно браузером Internet Explorer.
-
src – адрес скрипта из внешнего файла для импорта в текущий документ. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ.
Преимуществ использования внешних файлов несколько. Внешний файл после первого обращения сохраняется в кэше браузера и при последующих вызовах загружается быстрее. Кроме того, вызываемые функции удобно править в одном месте и код проще контролировать. Это особенно актуально, когда множество веб-страниц используют одни и те же скрипты.
В качестве значения аргумента принимается полный или относительный путь к файлу.
-
type – указывает тип MIME для определенного языка. Поскольку некоторые старые браузеры не понимают параметр type, можно задавать два атрибута одновременно – language и type. Если браузер распознает значение параметра type, то значение language отменяется. Параметр type не чувствителен к регистру и принимает следующие значения:
-
text/javascript (значение по умолчанию) – для языка программирования JavaScript.
-
text/vbscript – для языка VBScript.
-
В нашем примере строка
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
указывает на использование Javascript-скрипта из внешнего файла.
В HTML5 отсутствует параметр language, добавлены параметры charset и параметр async, который определяет, что скрипт выполняется асинхронно. Допускается использование только параметра src.
Тело документа
Тело документа <BODY> предназначено для отображения данных на веб-странице, в частности, в теле размещается текст, изображения, ссылки, таблицы, списки и т.д.
В примере тело документа открывается на строке 16 и закрывается на строке 72.
DIV
На строке 17 (и еще в нескольких местах) находится тег <DIV>.
Элемент <DIV> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей CSS.
Cодержимое тега <DIV> всегда начинается с новой строки. После него также добавляется перенос строки.
Параметры:
-
align –задает выравнивание содержимого тега <DIV>. Аргументы:
-
center – выравнивание текста по центру;
-
left (значение по умолчанию) – выравнивание текста по левому краю;
-
right – выравнивание текста по правому краю;
-
justify – выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю.
-
-
title – добавляет поясняющий текст к контейнеру <DIV> в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом. В качестве аргумента принимает любую текстовую строку. Строка должна заключаться в двойные или одинарные кавычки.
Таблица
На строке 21 находится тег <TABLE>.
Для добавления таблицы на веб-страницу используется тег -контейнер <TABLE>. Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Однако, с появлением тега <DIV> более удобным и эффективным с точки зрения читаемости и объема кода является верстка макетов страниц именно блоками.
Для добавления строк используется тег <TR>. Чтобы разделить строки на колонки применяются теги <TD> и <TH>. Разница между этими тегами следующая. Тег <TH> предназначен для создания заголовков, содержимое такой ячейки обозначается жирным начертанием и выравнивается по центру. В остальном, действуют эти теги одинаково.
У каждого параметра таблицы есть свое значение, установленное по умолчанию. Это означает, что если какой-то атрибут пропущен, то неявно он все равно присутствует, причем с некоторым значением. Из-за чего вид таблицы может оказаться совсем другим, нежели предполагал разработчик.
Чтобы понимать, что можно ожидать от таблиц, следует знать их явные и неявные особенности, которые перечислены далее:
-
одну таблицу допускается помещать внутрь ячейки другой таблицы;
-
размеры таблицы изначально не установлены и вычисляются на основе содержимого ячеек;
-
если для таблицы задана ее ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры;
-
если ширину содержимого ячейки невозможно изменить, то ширина таблицы увеличивается, несмотря на указанные размеры;
-
пока таблица не загрузится полностью, ее содержимое не начнет отображаться;
-
таблица, если не указано особо, всегда выравнивается по левому краю;
-
по умолчанию таблица выводится без рамки;
Для изменения вида и свойств таблицы используется множество параметров, которые добавляются в теге <TABLE>. Описание параметров таблицы и их значений приведен о в таблице 2.
|
Таблица 2. Параметры тега <table> |
||
|
Свойство |
Значение |
Описание |
|
align |
left right center |
Выравнивание таблицы. |
|
background |
Гиперссылка |
Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. |
|
bgcolor |
Код или название цвета |
Цвет фона таблицы. |
|
border |
Число |
Толщина рамки в пикселах. |
|
cellpadding |
Число |
Расстояние между ячейкой и ее содержимым. |
|
cellspacing |
Число |
Дистанция между ячейками. |
|
cols |
Число |
Задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. |
|
nowrap |
|
Запрещает переносы строк в тексте. |
|
frame |
void above below lhs rhs hsides vsides box |
Задание типа рамки таблицы |
|
rules |
all groups cols none rows |
Определяет, где рисовать границы между ячейками. |
|
width |
Число или проценты |
Минимальная ширина таблицы, можно задавать в пикселах или процентах. |