| Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
Конспект по описанию лабораторной работы «HTML и JavaScript»
НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ
ЯДЕРНЫЙ УНИВЕРСИТЕТ
Московский инженерно-физический институт
Факультет «ВФ»
Кафедра «Микро- и нано-электроники»
Конспект по описанию лабораторной работы
«HTML и JavaScript»
1. ОПРЕДЕЛЕНИЯ
HTML-документ (страничка) - документ, написанный на языке разметки гипертекста (HTML). Заключается между флагами <HTML> и </HTML>.
Web-сайт, Web-сервер - цепочка логически связанных документов, написанных на языке HTML.
Тег - элемент языка разметки гипертекста.
Гиперссылка - часть гипертекстового документа, ссылающаяся на другой элемент.
ОГЛАВЛЕНИЕ
1. Определения
2. Введение
3. Работа с HTML
3.1. Создание структуры страницы с помощью таблиц
3.2. Работа с изображениями
3.3. Работа с формами
4. Работа с JavaScript
4.1. Сценарии в HTML-документе
4.2. Функции в JavaScript
5. CSS Каскадные таблицы стилей
6. Заключение
7. Список литературы
8. Затраченное время и версии ПО/ОС
2. ВВЕДЕНИЕ
Всемирная паутина состоит из web-страниц, а эти страницы создаются при помощи языка разметки гипертекста (HyperText Markup Language).
HTML - это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.
JavaScript - предназначен для написания сценариев для активных HTML-страниц. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется браузером по мере загрузки этого документа. С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состояния документа или окна.
3. РАБОТА С HTML
В Качестве html-редактора будет использоваться Microsoft Visual Web Developer
Найдите в меню Пуск > Программы и запустите приложение.
Первым Вашим шагом станет создание собственного проекта.
Для этого нужно в разделе «Recent Projects» выбрать «Create Web Site».
В появившемся окне нам предложат на выбор несколько шаблонов: ASP.NET Web Site, Empty Web Site, Personal Web Site Starter Kit.
Выберем Empty Web Site (Пустой), дополнительно проверим путь для сохранения файлов проекта.
Наш сайт создан, но пока в нем нет еще ни одной страницы - для создания первой из них нажмем в дереве файлов проекта (Solution Explorer) правой кнопкой мыши и добавим новый элемент (Add New Item).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
</body>
</html>
В первых трех строках расположен код, определяющий тип документа и его кодировку.
В следующей строке расположен тег <html> </html>, внутрь которого должно быть заключено все остальное содержимое страницы.
Внутри тега <head> </head> может содержаться дополнительная метаинформация о странице. В данном случае определен тип и кодировка содержимого в одинарном теге <meta />
<title></title> - позволяет задать титул html-страницы.
В теге <body></body> содержатся элементы оформления и текст, видимые пользователю, просматривающему страницу.
3.1. СОЗДАНИЕ СТРУКТУРЫ СТРАНИЦЫ С ПОМОЩЬЮ ТАБЛИЦ
Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие, как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.
Основные теги таблицы
Таблица: <table> </table>
Все элементы таблицы должны находиться внутри этих двух тэгов. По умолчанию таблица не имеет обрамления и разделителей. Обрамление добавляется атрибутом border.
Строка таблицы: <tr> </tr>
Количество строк таблицы определяется количеством встречающихся пар тэгов <tr> </tr>.
Ячейка таблицы: <td> </td>
Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку.
Основные атрибуты таблицы
Colspan - Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию - 1.
Rowspan - Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию - 1.
3.2. РАБОТА С ИЗОБРАЖЕНИЯМИ
Элемент-рисунок в структуре языка HTML описан, как встроенный объект. Минимальный синтаксис, необходимый ля описания картинки, включает два атрибута: src для определения источника файла-изображения и alt для альтернативного текстового варианта, описывающего само изображение:
<img src="my. jpg" alt="мой рисунок">
Нужно использовать еще как минимум два атрибута: height и width для резервирования места на странице.
Внутри документа размещение рисунка может быть задано относительно базовой линии документа и относительно всего документа с помощью атрибута align.
• top, middle down - относительно линии текста;
• left, right - относительно документа;
3.3. РАБОТА С ФОРМАМИ
HTML поддерживает десять управляющих элементов (controls), используемых в формах для ввода информации, выбора необходимых данных и запрограммированного действия. Это элементы ввода текстовых данных (boxes), кнопки (buttons) и меню (menus).
Любая форма начинается с элемента блочного уровня form. Он включает все необходимые элементы управления, данные, относящиеся к элементам (например, метки), а также положение программ и скриптов для обработки данных форм.
Минимальный набор параметров для элемента form содержит два атрибута method = {get|post} и action = «адрес обрабатывающей страницы»
Самым распространенным элементом формы является - text box (текстовый блок), применяемый для ввода текста.
Обычно используют три атрибута: type="text", name="название блока" size = "размер"
<input type="text" name="MyName" size="20" />
Элемент управления password аналогичен элементу text box. Отличием является то, что данные в процессе ввода заменяются маскирующими символами - звездочками.
<input type="password" name="Password" size="20" />
Для выбора опций в группе можно использовать check box и radio button. У группы этих элементов должно быть одинаковое имя. В случае radio button возможно выбрать только один вариант.
<input type="checkbox" name="Options" value= "pocket" /> Упаковать
<input type="checkbox" name="Options'' value= "card" /> Приложить открытку
<input type= "radio" name="Service" value= "byCar" /> Доставка машиной
<input type= "radio" name="Service" value= "byMan" /> Доставка курьером
<input type= "radio" name="Service" value= "no" /> Доставка не требуется
<select name=" size” size="3">
<option value= "s" > малый
<option value= "a" > средний
<option value= "b" > большой
</select>
Элемент file input используется для передачи содержимого файла
Элемент text area служит для размещения больших текстовых блоков
Атрибуты: rows - количество видимых строк, cols- количество символов в отображаемой строке
<textarea name="details" rows="6" cols="50"> Текст </textarea>
<input type="file" name="file" />
Элемент button - кнопка. Кнопки бывают трех видов: обычная(button), сброса полей формы (reset), отправки результатов (submit).
<input type= "submit" value="Отправить" />
<input type= "reset" value="Очистить" />
<input type= "button" value="Кнопка" />
4. Работа с JavaScript
Переменные
Переменные используются для хранения данных. Переменные в JavaScript представляются с помощью идентификаторов. Идентификатор должен начинаться с буквы латинского алфавита, либо с символа подчеркивания. Тип переменной зависит от хранимых в ней данных, при изменении типа данных меняется тип переменной. Определить переменную можно с помощью оператора var, например:
var test1
В данном случае тип переменной test1 не определен и станет известен только после присвоения переменной некоторого значения.
Оператор var можно использовать и для инициализации переменной, например, конструкцией
var test2=276
Значение переменной изменяется в результате выполнения оператора присваивания. Оператор присваивания может быть использован в любом месте программы и способен изменить не только значение, но и тип переменной.
4.1. СЦЕНАРИИ В HTML-ДОКУМЕНТЕ
Сценарии, написанные на языке JavaScript, могут располагаться непосредственно в HTML-документе между тегами <script> и </script>.
<script>
<! --
var a=8; h=10
document.write ("Площадь прямоугольного треугольника равна a*h/2,".") //—>
</script>
4.2. ФУНКЦИИ В JavaScript
<script> <! —
function care (a, h) { return a*h/2 } //-->
</script>
5. CSS – Каскадные таблицы стилей
Теги html предоставляют ограниченные возможности оформления страниц. Для их расширения, в тег может быть добавлен атрибут "style", указывающий на некоторое свойство объекта и устанавливающий значение этого свойства.
<p style=' color: green' style='border: solid red'>
Действие указанных параметров оканчивается с окончанием действия заключающего их тега.
Блок определения стилей помещается либо в заголовок страницы, внутри элемента head, либо в отдельный файл. При размещении в разделе заголовка, блок определения стилей объявляется и заканчивается тегом style, а для исключения отображения его содержимого, оно заключается в знаки комментария (<!-- и —>)
<style type="text/css">
<!--
-->
</style>
ИЛИ
<link rel="stylesheet" href="style.ess" type="text/ess">
Определение стилей в заголовке страницы или отдельном файле происходит почти так же, только тег style, указанный вначале определения не повторяется, а роль кавычек выполняют фигурные скобки:
Р {color: green; border: solid red}
Вышеприведенные примеры на гиперссылках показали что, CSS допускает наличие нескольких видов оформления одних и тех же тегов, таким образом, понятие тега становится слишком узким для применения в CSS и заменяется понятием селектора. Селектор это общее название стиля. Если стиль определяется для тега Р, то тег Р является селектором CSS, а если для A:Link, то селектором является не тег А, а именно A:Link, не являющийся тегом и требующий для своего обозначения отдельного термина. Таким образом, селектор - это имя, данное элементу страницы для которого определяется стиль отображения.
Оперирование селекторами имеет принципиальное значение для таблиц стилей, поскольку позволяет создавать различное оформления для одних и тех же тегов. Для того чтобы выделить тег в отдельный класс оформления, после его имени, через точку, записывается произвольное название класса:
<Style type="text/css"><!--
P.MyClass {margin-left:5pt; margin-top 0.6em; margin-bottom: 0.6em}
--></STYLE>
На странице: <P class='MyClass’>Пример абзаца с особыми параметрами
Идентификаторы пишутся не через точку, а через знак лестницы:
P#MyClass {margin-left:5pt; margin-top: 0.6em; margin-bottom: 0.6em}
На странице: <P ID='MyClass’>Пример абзаца с особыми параметрами
Внимание: на странице может существовать сколько угодно различных элементов одного класса и только один элемент с уникальным идентификатором.
6. ЗАКЛЮЧЕНИЕ
В ходе написания этого конспекта я ознакомился с лабораторным практикумом по HTML + JavaScript. Практикум написан доступным и понятным языком, содержит множество команд для программирования и примеров написания к ним.
Также практикум для удобства содержит краткий справочник по тегам и свойствам CSS. По этому практикуму было интересно работать и я узнал много нового о HTML, CSS и JavaScript что поможет мне в дальнейшем их изучении и освоении.
7. СПИСОК ЛИТЕРАТУРЫ
1. Лабораторный практикум по теме HTML+JavaScript.
2. http://htmlweb.ru/ - Web-технологии и языки программирования.
3. http://ru.html.net/ - Учебники по HTML, CSS, PHP.
8. ЗАТРАЧЕННОЕ ВРЕМЯ, ВЕРСИОННОСТЬ ИСПОЛЬЗУЕМОГО ПО/ОС/ПК
Затраченное время - примерно 6 часов.
Версия ОС - Windows 7 Ultimate x64
Версия ПО - Microsoft Office 2010
Характеристики ПК:
Процессор - Intel Core i5-4690 CPU @ 3.90 GHz
ОП - DDR3 16,00 Гб
Видеокарта - NVIDIA GeForce GTX 760 (4096Мб)
Оптический привод - DVD-RW
HDD - SATA 1300 Гб |
Категория: Конспекты (курсы КП и ПК) | Добавил: INVISER (07.01.2015)
| Автор: Zheleznov 
|
| Просмотров: 829
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
