- •Ю.Н. Тановицкий, и.М. Егоров, д.А. Савин
- •Рабочая программа
- •1 Цели и задачи курса
- •4. Рейтинговые индивидуальные задания
- •5. Контрольные работы
- •6. Балльная раскладка по дисциплине (четвертый семестр)
- •7. Самостоятельная работа студентов
- •8. Содержание курсового проекта
- •8.1.Временная и балльная раскладка этапов работы над курсовым проектом
- •9 Литература
- •9.1. Основная литература
- •Егоров и.М.Программирование: Учебно-методическое пособие (Курсовое проектирование). Томск: Томский государственный университет систем управления и радиоэлектроники, 2007. 80 с
- •9.2. Дополнительная литература
- •Лабораторная работа № 1 Изучение html
- •1 Введение
- •2 Описание языка html
- •3 Структура html документа
- •4 Программа работы
- •5 Варианты работы
- •Лабораторная работа № 2 Изучение css
- •1 Введение
- •2 Описание css
- •2 Программа работы
- •3 Варианты работы
- •Лабораторная работа № 3 Изучение dom
- •1 Введение
- •2 Описание dom
- •2 Программа работы
- •4. Программа работы
- •5. Варианты работы
- •Лабораторная работа № 5 Автоматизация формирования математических моделей электронных схем
- •1. Введение
- •2. Описание работы
- •3. Программа работы
- •4. Варианты схем
- •3. Программа работы
- •Лабораторная работа № 7 Знакомство со средой программирования Microsoft
- •1 Введение
- •2 Описание работы
- •3. Программа работы
- •5. Варианты работы
- •Построение графика переходного процесса в среде Matcad методом узловых потенциалов.
- •1. Введение
- •2. Описание работы
- •3. Программа работы
- •Лабораторная работа № 8
- •1 Введение
- •2 Описание языка javascript
- •3 Синтаксис языка javascript
- •4. Программа работы
- •5. Варианты работы
2 Описание языка html
Любой HTML документ состоит из набора элементов, начало и конец каждого элемента обозначается специальными пометками – тегами. Между тегами находится содержимое элемента – данные или текст (например элемент заголовка: <title>Hello, world!</title>, где <title> - открывающий тег, </title> - закрывающий). Элемент может быть и пустым, т.е. не содержащим внутри себя данных (например элемент перевода строки: <br/>). Помимо данных, элемент может иметь атрибуты, определяющие свойства элемента (например способ выравнивания текста, цвет шрифта, размер картинки). Атрибуты указываются в открывающем теге в виде: <font color=”#FFFFFF”>Этот текст – белый</font>. Здесь color – название атрибута, а #FFFFFF – его значение, при этом значение должно указываться в кавычках (#FFFFFF – это белый цвет заданный в формате RGB в шестнадцатиричном виде). Элементы могут быть вложенными, например: <p align=”center”>Этот текст размещен по центру<br/><b>Этот текст выделен жирным и размещен по центру</b></p>. Теги и атрибуты можно указывать только в нижнем регистре.
3 Структура html документа
Для указания совестимости документа с версией HTML в начало документа помещается следующая строка:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
которая содержит ссылку на стандарт в соответсвии, с которым создан документ.
Затем указывается элемент html, содержащий в себе заголовок и тело документа:
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
Hello, world!
</body>
</html>
Элемент head (голова документа) содержит служебную информацию о документе, в него помещается, например, элемент title (в этом элементе можно указать текст, который будет выведен в заголовке окна браузера). А элемент body – это тело документа, содеражащие то, что будет видно пользователю.
Некоторые элементы тела документа:
a – Элемент для создания гипертекстовых ссылок. Имеет атрибуты:
href – определяет документ, на который ссылается элемент. Например: <a href=”main.html”>Главная страница</a> определяет гипертекстовую ссылку на документ с именем main.html. При этом в тексте документа появится надпись «Главная страница», нажатие на которую приведет к переходу на указанную страницу.
name – помечает элемент как метку, на которую можно сослаться. Например: <a name=”p1”>Параграф 1</a> позволяет перейти к этому элементу при использовании гиперссылки следующего вида: <a href=”document.html#p1”>Перейти к параграфу 1</a>.
h1, h2, …, h6 – Элементы заголовков. Существует 6 уровней заголовков, отличающихся размером шрифта. Например: <h1>Самый большой заголовок</h1> <h6>Самый маленький заголовок</h6>. Атрибуты:
align – определяет способ выравнивания заголовка по горизонтали, возможные значения: left, center, right.
p – Используется для создания параграфов. Атрибуты:
align – определяет выравнивание по горизонтали, возможные значения: left, center, right.
br – Осуществляет перевод строки.
img – Элемент позволяет поместить рисунок в документ. Атрибуты:
src – Обязательный атрибут, указывает файл рисунка;
height – ширина рисунка;
width – высота рисунка;
name – имя рисунка, уникальное для данного документа;
alt – текст, отображаемый браузером на месте рисунка, если рисунок по какой-то причине не может быть отображен;
border – ширина рамки вокруг рисунка.
Пример:
<img src=”http://www.tusur.ru/export/system/modules/ru.tusur.new/resources/img/tusur-logo.png” />
ul – Элемент неупорядоченного списка, между начальным и конечным тегами должны содержаться один или несколько элементов li.
ol – Элемент упорядоченного списка, между начальным и конечным тегами должны содержаться один или несколько элементов li. Атрибуты:
start – число, с которого начинается нумерация;
type – тип нумерации, может принимать значения: A – заглавные буквы , a – строчные буквы, I – большие римские числа, i – маленькие римские числа, 1 – арабские числа (по умолчанию).
li – Элемент пункта списка. Определяется внутри элементов ul или ol. Атрибуты:
value – позволяет указать текущий номер пункта в упорядоченном списке, нумерация последующих пунктов также изменится.
table – Элемент для создания таблицы. По умолчанию размеры таблицы определяются автоматически, в зависимости от информации в ячейках. Ячейки создаются с помощью элементов tr, td, th. Атрибуты:
width – ширина таблицы в пикселях или процентах от ширины элемента, в котором находится таблица;
height – высота таблицы в пикселях или процентах от высоты элемента, в котором находится таблица;
bgcolor – цвет фона таблицы;
border – ширина рамки таблицы.
tr – Элемент строки таблицы. Ячейки в строке создаются с помощью элементов td или th. Атрибуты:
align – способ выравнивания всех ячеек строки по горизонтали (значения: left, center, right);
valign – способ выравнивания всех ячеек строки по вертикали (значения: top, middle, bottom).
td, th – Элементы ячейки таблицы, создаются внутри элемента строки tr. Элемент th отличается от элемента td только стилем оформления (td – данные, th - заголовок). Атрибуты:
align – способ выравнивания ячейки по горизонтали (значения: left, center, right);
valign – способ выравнивания ячейки строки по вертикали (значения: top, middle, bottom);
width – ширина ячейки в пикселях или процентах от ширины таблицы;
height – высота ячейки в пикселях или процентах от высоты таблицы(при указании высоты в процентах, должна быть задана высота всей таблицы);
colspan – определяет количество столбцов, которые занимает ячейка (по умолчанию 1);
rowspan – определяет количество строк, которые занимает ячейка (по умолчанию 1).
bgcolor – цвет фона ячейки.