Основы языка html. Создание домашней страницы.
Цель работы: основы языка разметки гипертекста - HTML. Разработка Web-страниц используя специальный язык разметки гипер-текста HTML (Hyper Text Markup Language).
Методические указания:
Язык разметки гипертекста HTML (HyperText Markup Language) HTML (HyperText Markup Language) - язык разметки гипертекста, используемый для создания документов, независимых от аппаратно-программной платформы. HTML - это не язык программирования, а описательный язык разметки. HTML-документ состоит из текста, который представляет собой содержимое документа, и тегов, которые определяют структуру и внешний вид документа при его отображении браузером. Структура HTML-документа проста:
<html>
<head>
<title>HTML-документ</title>
</head>
<body>
<i>Internet</i>
</body>
</html>
Текст всего документа заключается в теги <html>. Текст документа состоит из заголовка и тела, которые выделяются соответственно тегами <head> и <body>. В заголовке указывают название HTML-документа и другие параметры, которые браузер будет использовать при отображении документа. Тело - это та часть, в которую помещается собственно содержимое HTML-документа. Тело включает предназначенный для отображения текст и управляющую разметку документа (теги), которые используются браузером. Теги содержат указания о способе отображения текста. С помощью тегов, кроме того, создаются ссылки на файлы, содержащие дополнительные данные (графику, звук), и обозначаются точки привязки (гиперссылки или якоря), посредством которых данный документ связывается с другими документами. HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки < >. Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами конца строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута - одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов. Регистр символов в именах тегов и атрибутов не учитывается.
Как правило, теги состоят из начального и конечного элементов, между которыми размещаются текст и другие элементы документа. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (<html>…</html>). Конечные теги никогда не содержат атрибутов. При использовании вложенных тегов их нужно закрывать, начиная с самого последнего и двигаясь к первому.
Некоторые теги не имеют конечного элемента.
В некоторых случаях конечные теги можно опускать. Тем не менее, рекомендуется включать конечные теги, чтобы избежать ошибок при воспроизведении документа. HTML предоставляет множество тегов, которые могут использоваться при создании документов. Ниже в таблице приведены некоторые из них.
Каскадные таблицы стилей (CSS – Cascading Style Sheets)
Каскадные таблицы стилей – важная часть разработки Web-приложений. Каскадные таблицы стилей определяют макет HTML-документа в формате, отделенном от собственно информационного наполнения HTML-документа.
Стили можно реализовать тремя способами:
− связанные таблицы стилей (Linked Style Sheets) – таблица стилей определяется в отдельном текстовом файле с расширением .css и ее стиль связывается с одной или несколькими страницами. Связанные стили воздействуют на отдельный Web-узел;
− внедренные таблицы стилей (Global Style Sheets) – стили можно внедрить непосредственно в текст на HTML. Внедренные стили воздействуют на отдельную страницу;
− встроенные таблицы стилей (Inline Style Sheets) – встроенные стили создаются с помощью атрибута style. Встроенные стили воздействуют на отдельный тег.
Пример связанной таблицы стилей:
Таблица стилей (в файле lss.css)
h1 {font-size:10; color:red}
p {color:#0000ff; font-style:italic}
HTML-документ
<html>
<head><link href=lss.css rel=stylesheet></head>
<body>
<h1>Заголовок нового стиля</h1>
<p>Абзац нового стиля</p>
</body>
</html>
Пример внедренной таблицы стилей:
<html>
<head><style><!h2 {font-weight:bold; color:green}></style></head>
<body><h2>Заголовок нового стиля</h2></body>
</html>
Пример встроенной таблицы стилей:
<html>
<h1 style="font-size:40pt; color:blue">Заголовок нового стиля</h1>
<p style="font-size:40; color:magenta">Абзац нового стиля</h1>
</html>
Слои
Слой – это некий прямоугольный элемент, содержащий в себе любую разметку HTML. Слоем может быть как простая строка текста, так и сложная форма, сверстанная в таблице.
С помощью JavaScript можно изменять размеры слоя, его видимость, перемещать слой и т.п.
В общем случае слой – это часть HTML-документа, выделенная тегом div, которому присвоен некоторый идентификатор id:
<div id=layer1>
…
</div>
Также необходимо, чтобы слой был описан с помощью стилевых таблиц:
<style type=text/css>
#layer1 {position:absolute; top=0; left=0; z-index=1; visibility:visible; width:100px;
height:120px;}
</style>
С помощью стилевых таблиц описываются следующие параметры слоя:
− position –точка отсчета координат положения слоя, возможные значения: absolute
и relative;
− top, left – координаты верхнего левого угла слоя;
− z-index – уровень слоя;
− visibility – видимость слоя, возможные значения: visible и hidden;
− width; height – ширина и высота слоя.
Пример скрытия и отображения слоя:
<html>
<head>
<script language=JavaScript>
function showlayer(layername)
{eval('document.all[" '+layername+' "].style.visibility="visible" ');}
function hidelayer(layername)
{eval('document.all[" '+layername+' "].style.visibility="hidden" ');}
</script>
</head>
<body>
<style type=text/css>
#mylayer {position:absolute; top:0; left:400; z-index:1; visibility:visible; width:100px;
height:100px;}
</style>
<div id=mylayer>
<img src=dove.gif border=1>
</div>
<p><button onclick="showlayer('mylayer');">Показать слой</button>
<p><button onclick="hidelayer('mylayer');">Спрятать слой</button>
</body>
</html>
Пример перемещения слоя:
<html>
<head>
<script language=JavaScript>
function movelayer(layername,newtop,newleft)
{eval('document.all[" '+layername+' "].style.pixelTop=newtop');
eval('document.all[" '+layername+' "].style.pixelLeft=newleft');}
</script>
</head>
<body>
<style type=text/css>
#mylayer {position:absolute; top:0; left:400; z-index:1; visibility:visible; width:100px;
height:100px;}
</style>
<div id=mylayer>
<img src=dove.gif border=1>
</div>
<p><button onclick="movelayer('mylayer',0,600);">Переместить слой</button>
</body>
</html>
Объектная модель браузера
Объектная модель - это набор связанных между собой объектов, обеспечивающих доступ к содержимому страницы и ряду функций браузера.
Объект window
Объект window находится в вершине иерархии и является контейнером для других объектов. Он представляет текущее окно браузера.
Свойства объекта window
Методы объекта window
Методы, предоставляемые объектом window, позволяют управлять самим окном, а также выполнять ряд действий внутри него.
Методы open и close
Для открытия нового окна можно воспользоваться методом open. Полный синтаксис метода open выглядит следующим образом:
newWnd=window.open(URL, name, features, replace),
где:
− URL адрес документа, отображаемого в новом окне. Если адрес не задан, отображается пустое окно;
− name строка, задающая имя окна;
− features строка, задающая параметры нового окна;
− replace - указывает, замещает ли новое окно текущее в списке history или нет.
Закрыть окно позволяет метод close. Синтаксис метода close выглядит следующим образом:
newWnd.close()
Для закрытия текущего окна можно воспользоваться одним из двух способов: window.close() или self.close().
Методы alert, prompt, confirm
Эти методы позволяют отображать различные диалоговые панели. window.alert(«Сообщение») выводит строку и ожидает, когда пользователь щелкнет кнопку OK.
string=window.prompt(«Вопрос», «Значение по умолчанию») служит для ввода информации. Введенная пользователем строка возвращается при щелчке на кнопке OK. При щелчке на кнопке Cancel возвращается значение null. truefalse=window.confirm(«Вопрос») используется для получения подтверждения. При щелчках на кнопках OK и Cancel возвращается true или false соответственно.
Методы focus, blur
С помощью этих методов можно программно перемещаться между несколькими открытыми окнами и изменять текущее активное окно. Метод blur перемещает фокус из одного окна в другое (аналогично клавише Tab), метод focus перемещает фокус на окно, где находится исполняемый код, написанный на JavaScript.
Методы setTimeout, setInterval, clearTimeout, clearInterval
Методы setTimeout, setInterval используются для управления таймером. Метод setTimeout создает таймер, который выполняет указанные действия по истечении заданного числа миллисекунд, например window.setTimeout(«действие», миллисекунды).
Для выполнения действий, повторяющихся с определенным интервалом времени, используется метод setInterval, например window.setInterval(«действие», интервал в миллисекундах).
Методы clearTimeout, clearInterval отменяют действие методов setTimeout, setInterval соответственно.
Использование cookie
Cookie – это механизм, позволяющий серверу хранить информацию на клиентском компьютере и при необходимости извлекать ее. С помощью механизма cookie сервер может хранить на клиентском компьютере некоторый именованный информационный элемент. Это может быть имя пользователя, информация о настройках, служебная информация, используемая в данной сессии и т.п. Обычно данный механизм применяется для сохранения информации, введенной пользователем. На каком-то узле пользователь вводит свои данные в поля формы, она отсылается на сервер, и информация при этом сохраняется на компьютере пользователя.
Механизм cookies поддерживается с помощью свойства cookie объекта document. Минимально должно быть установлено значение атрибута name.
Следующий пример демонстрирует создание cookies.
<html>
<head>
<title>Cookies</title>
<script language=JavaScript>
function doCookie()
{myname="myname=";
if (document.cookie != -1)
{value=document.cookie;
alert("Hello, "+value)
}
else
{name=prompt("What is your name?", "I don't no");
document.cookie=myname+name+";";
}
}
</script>
</head>
<body onLoad="doCookie();">
</body>
</html>
В следующем примере запрашивается имя пользователя при первом посещении, сохраняется в виде информационного элемента, при последующих посещениях отображается в виде приветствия.
<html>
<head>
<title>Cookies</title>
<script language=JavaScript>
function doCookie()
{myName="myName=";
if (document.cookie.indexOf(myName) != -1)
{start=document.cookie.indexOf(myName);
end=document.cookie.indexOf(";");
value=document.cookie.substring(start+myName.length, end);
alert("Hello, "+value)
}
else
{name=prompt("What is your name?", "I don't no");
document.cookie=myName+name+";";
}
}
</script>
</head>
<body onLoad="doCookie();">
</body>
</html>
Использование графики
Управление графикой с помощью JavaScript базируется на доступе к коллекции images и управлении свойствами отдельных элементов этой коллекции. Атрибут name позволяет обращаться к графическому изображению по имени.
Например, изображение, описанное как <img src=“First.gif” name=“First”>, доступно из JavaScript как document.first.
Коллекция images содержит все графические изображения, включенные в состав данного HTML документа. Для доступа к первому элементу можно обратиться к 0-му
элементу коллекции: document.images[0]. Таким образом, если описанное выше графическое изображение было первым, можно обратиться к нему одним из следующих способов:
document.images[0]
document.images[“first”]
document.first
document[“first”]
Объект image
Объект image может использоваться для задания свойств графических изображений, включенных в состав данной страницы, а также для загрузки изображений в кэш-память и их последующего отображения.
В следующей таблице перечислены свойства объекта image.
Создание анимационных изображений
С помощью динамической смены растровых изображений в сценарии JavaScript можно получить эффект анимации. Например, это выглядит так, как будто какое-либо слово, или рисунок, периодически тонет в цветном шуме, и затем проявляется вновь. Исходный текст сценария приведен ниже.
<html>
<head>
<title>Animation with JavaScritp</title>
<script language="JavaScript">
i=1;
bForward=true;
function showNextImage()
{if(bForward)
{i++;
if(i>5)
{bForward=false;}
}
else
{i--;
if(i<2)
{bForward=true;}
}
document.Img.src="noise0"+i+".gif";
setTimeout("showNextImage()",500);
}
</script>
</head>
<body bgcolor=white>
<img src="noise01.gif" name="Img">
<script language="JavaScript">
showNextImage();
</script>
</body>
</html>
Последовательность кадров выглядит следующим образом:
Кадры выводятся в прямой, а затем в обратной последовательности.
Изменение внешнего вида графических ссылок
Этот прием может быть использован, например, для изменения графического элемента в том случае, когда над ним находится указатель мыши.
Если расположить указатель мыши над одной из этих кнопок, кнопка изменит свой внешний вид и появится всплывающая подсказка.
<html>
<body bgcolor="#B0FFD8">
<font face=”Arial, Helvetica" size=1>
<p>
<a href="back.htm"
onMouseOver="document.btn1.src='back_down.gif'"
onMouseOut="document.btn1.src='back_up.gif'">
<img src="back_up.gif" name="btn1" border=0 alt="Back"></a>
<br>
<a href="forward.htm"
onMouseOver="document.btn2.src='forward_down.gif'"
onMouseOut="document.btn2.src='forward_up.gif'">
<img src="forward_up.gif" name="btn2" border=0 alt="Forward"></a>
</font>
</body>
</html>
Контрольные вопросы:
Что такое ТЕГ, как он записывается?
Виды ТЕГов.
Что представляет собой HTML документ?
Для чего предназначен элемент <BODY>?
Для чего используется элемент <FONT>?
Структура HTML-документа.
Для чего предназначен тэг <HTML>.
Задание для лабораторной работы:
1. Создание домашней страницы содержащей информацию о студенте.
Обязательное содержание:
Информация о том, чей сайт и фото студента.
Электронный почтовый адрес.
Ссылка на рабочую страницу или сайт вуза студента.
Мой ВУЗ - о ПВГУС.
Моя группа.
Моя будущая профессия.
Мои увлечения или хобби.
Любая другая информация.
В оформлении страницы следует использовать максимальное количество вышеперечисленных тегов HTML.
2. Создать HTML-документ, который должен содержать:
− форматированный текст;
− многоуровневые нумерованные и ненумерованные списки;
− таблицу;
− изображения;
− гиперссылки на другие HTML-документы, гиперссылки в пределах HTML-
документа, гиперссылку на e-mail;
− формы (input (text, checkbox, radio, submit, reset), textarea, select).
− слои;
− скрипты на языке JavaScript (в соответствии с вариантом).
Лабораторная работа №2