Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Лабораторные работы html методическое пособие

Лабораторные работы html методическое пособие

HTML — язык разметки гипертекста. Создание w eb -страницы

Цель : выполнив лабораторную работу, Вы научитесь

использовать теги для разметки текста,

выполнять форматирование текста,

Оборудование : компьютер, ПО: текстовый редактор, браузер.

Документ, написанный на языке HTML , представляет собой текст, в который вписаны теги ( markup tags ) или теги разметки. Теги помогают программе просмотра разобраться, как должен быть расположен текст на экране, в каком месте будут находиться рисунки, хранящиеся в совсем других файлах, и т.д. С помощью тегов формируются связи с другими web -документами и ресурсами Интернета. Текст с тегами называется исходным кодом ( Source ). Просмотреть готовый файл, написанный на HTML , можно в программах просмотра ( Microsoft Internet Explorer ). На экране просмотра теги не отображаются.

Теги – определенные последовательности символов, заключенные между знаками

 (меньше) и  (больше). Символ  обозначает начало тега, символ  обозначает конец тега. Все, что заключено между тегами, является HTML -документом.

Любой HTML -документ состоит их двух частей. Первая часть – заголовок, который находится между тегами  HEAD  и  / HEAD  . В нем содержится информация о документе, которая не выводится на экран. Название странички располагается между тегами  TITLE  и  / TITLE  и появляется в верхней части окна программы просмотра. Например,  TITLE  моя страничка  / TITLE 

Прописные или строчные буквы, используются в написание тегов, значения не имеет. Компьютер одинаково отреагирует на записи  title  и  TITLE  .

Вторая часть – тело, которое выводится на экран программой просмотра – текст, картинки, видеофрагменты и т.д. Оно заключается между тегами  BODY  и  / BODY  . Форматирующие теги бывают парными и непарными, открывающими и закрывающими. Область действия парного тега начинается с того места, где стоит открывающий тег, а кончается там, где встречается закрывающий. Признак закрывающего тега – символ /. Почти все форматирующие теги всегда следуют парами, и для открывающего тега должен существовать закрывающий.

Непарных тегов мало, например, для перехода на новую строку используется тег  br  ( Line Break ).

Закройте Блокнот. Откройте свою папку. Найдите документ в формате html , он имеет такую же пиктограмму, как и документы из Интернета. Например,

Откройте документ и посмотрите результат.

Чтобы разбить текст на параграфы поставьте тег  p  перед началом параграфа. Когда программа обнаружит этот тег, она сама вставит перед началом параграфа пустую строку.

Вместе с тегом параграфа можно задать параметры выравнивания ( align ):

r ight – по правому краю.

l eft – по левому краю.

c enter – по центру.

Тег  p align = right  обеспечивает выравнивание теста параграфа по правому краю.

Тег  p align = left  обеспечивает выравнивание теста параграфа по левому краю.

Тег  p align = center  обеспечивает выравнивание теста параграфа по центру.

Еще один способ выравнивания текста

и закрывающий тег .

Отдельные слова можно подчеркнуть ( Underline ). Для этого применяют и .

Часто для выделения используют курсив ( Italic ). Для этого служат теги и .

Можно заставить текст мигать ( Blink ), но таким выделением нужно пользоваться очень осторожно, поскольку мигающий текст трудно читается.

Если нужно выделить текст одновременно полужирным шрифтом и курсивом, то необходимо использовать следующие теги

Запомните: тег, который открывался первым, закрывается последним. Теги вкладываются друг в друга.

Теги, управляющие шрифтами, имеют свои атрибуты. Можно увеличить или уменьшить размер шрифта, который измеряется в пунктах. Один пункт 0,353 мм или 1/72 дюйма. Он задается относительно размера, установленного в программе просмотра по умолчанию.

где n – число пунктов, на которое увеличивается или уменьшается размер шрифта.

Атрибут face означает название шрифта. Нужно иметь в виду, что в случае, если программа просмотра, с помощью которой посетитель будет просматривать вашу страничку в Интернет, не имеет такого шрифта, то текст будет недоступен.

«+7» color= «red» face= «Arial»> текст

для выделения логических частей текста можно использовать горизонтальную линию ( Horizontal Rule ). Она обозначается тегом , закрывающий тег при этом не требуется. Перед тегом и после него не нужно ставить тег или , поскольку он сам по себе является переносчиком.

Чем больше , тем дальше отстоит текст от линии.

У тега есть свои атрибуты, которые не являются обязательными.

align =”. ” — в кавычках обозначаем место расположения линии по правому краю ( right ), по левому краю ( left ) или по центру ( center ).

с olor= — цвет линии.

noshade — по умолчанию задается объемная линия.

size =” n ” – толщина линии, где n – толщина в пикселях.

width =” n ” или width =” n %” — где n – ширина в пикселях или процентах.

Самые часто употребляемые параметры – размер и толщина линии – задаются с помощью параметров size и width

Необходимо знать, что для экрана размером 800х600 максимальная ширина n =750. Если вы не укажите атрибут width , то линия получится во весь экран. Значение в % от свободного пространства обозначается n %.

Пример. если вы хотите, чтобы линия занимала ровно половину экрана, то ставьте 50%. В одном теге не может быть двух атрибутов width , значение атрибута указывается либо в %, либо в пикселях.

Горизонтальную линию можно нарисовать с помощью любого графического редактора, а затем вставить в html – код. Нарисуйте в отдельном файле любую линию, сохраните файл в ту же папку с расширением gif . Например, 1. gif . После этого вставьте ее в исходный код своей страницы.

Для сохранения элементов форматирования на Web -странице как и в оригинале (шрифт, размер шрифта, таблицы, размещение текста относительно границ листа и т.д.) используют парные теги и .

Задание. Создайте HTML -документ и сохраните его под именем ind 3. htl в своей папке.

Между тегами и можно вставить несколько абзацев любого текста, скопированного из текстового редактора.

При оформлении информации в HTML часто возникает необходимость оформления маркированных, нумерованных и вложенных списков.

Избегайте драматического эффекта:

По возможности избегайте пиктограммы «В процессе производства».

Используйте соответствующий язык.

Не перегружайте страницу большими изображениями.

Проверяйте ссылки на вашей странице.

В маркированном списке ( Unordered List ) каждому элементу списка соответствует маркер ( bullet ) – символ или графическое изображение. Для создания маркированного списка используют следующие теги

Избегайте драматического эффекта:

Используйте соответствующий язык.

Не перегружайте страницу большими изображениями.

Проверяйте ссылки на вашей странице.

Большая энциклопедия «Кирилл и Мефодий».

Мультимедиа энциклопедия науки и техники «От плуга до лазера 2.0».

Компьютерные фильмы-лекции ТПО «Северный очаг».

В нумерованном списке ( Ordered List ) каждому элементу предшествует его порядковый номер. Чтобы программа просмотра правильно расставила номера, нужно использовать теги разметки.

Большая энциклопедия «Кирилл и Мефодий».

Мультимедиа энциклопедия науки и техники «От плуга до лазера 2.0».

Компьютерные фильмы-лекции ТПО «Северный очаг».

По умолчанию программа вставляет арабские цифры (1, 2, 3, …).

Читать еще:  Пробел между абзацами в html

Вложенные списки ( Nested lists ) сочетают в себе элементы обоих списков. Для их создания используются теги маркированного и нумерованного списков.

Большая энциклопедия «Кирилл и Мефодий».

Мультимедиа энциклопедия науки и техники «От плуга до лазера 2.0».

Компьютерные фильмы-лекции ТПО «Северный очаг».

Необязательным атрибутом тега является type , обозначающий тип маркера.

Необязательным атрибутом тега

start =” n ” , где n – номер, с которого начинается нумерация.

type =” “ в кавычках пишутся буквы или цифры, например, А – большие буквы (А, В, С,…); а – маленькие буквы ( a , b , c , . ); I – римские цифры ( I , II , III , . ); 1 – арабские цифры (1, 2, 3, …).

Задание. Выполните страницу, текст которой будет организован с помощью списков сразу трех видов. Сохраните ее в своей папке под именем ind 4. htm .

Откройте файл ind 4. htm в программе просмотра на своем компьютере.

Попробуйте убрать и . В чем разница?

СОЗДАНИЕ СЛОВАРЯ ТЕРМИНОВ

Чтобы поместить на страничке словарь терминов, следует использовать тег . В этом случае текст располагается без отступа от левого поля странички.

Задание. Создайте в вашей папке файл с именем ind 5. htm следующего содержания.

Web -сервер. Сервер, хранящий и пересылающий HTML -документы и другие информационные ресурсы Интернет с использованием протокола HTTP . Его называют так же HTTP -сервером.

«Домашняя страница». Головная, начальная страница, локальный архив. Первая страница какого-либо Web -сервера или логически связанной группы HTML документов.

Откройте и посмотрите получившуюся страницу.

Задание. Создайте свой собственный HTML -документ, в котором должны присутствовать:

Заголовки нескольких уровней, выровненные по центру, левому или правому полю.

Параграфы с текстом.

Фрагменты выделенного текста (с помощью полужирного шрифта, курсива, размера шрифта, горизонтальной линии).

Сохраните этот файл в вашей папке под именем index . htm и просмотрите его с помощью программы просмотра.

Что такое исходный код?

Какой символ обозначает начало тега? Какой символ обозначает конец тега?

Что такое парные теги? Приведите пример.

Из каких частей состоит HTML документ?

Как выделяется заголовок документа?

Как выделяется тело документа?

Какие теги позволяет создать параграф (новый абзац)?

Какие теги позволяют создавать маркированные и нумерованные списки?

Лабораторные работы html методическое пособие

Цель: Знакомство учащихся с общими положениями создания WEB-страниц и базовыми тегами языка HTML

План:

1. WORLD WIDE WEB и HTML

2. Способы программирования WEB-страниц

3. Язык HTML (общие сведения, структура языка)

4. Структурные теги

Современный этап развития INTERNET начался в 90-х годах с появлением нового протокола обмена информацией HTTP (протокол передачи гипертекста)

ГИПЕРТЕКСТ – это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылки на другие документы.

Вместе с этим протоколом появилась и служба WORLD WIDE WEB и HTML (WWW или просто WEB или всемирная паутина), которая представляет собой обширную сеть серверов HTTP, передающих файлы через INTERNET.

Основную часть этих файлов представляют собой WEB-страницы — специальные файлы, написанные на языке HTML (HyperText Markup Language – язык разметки гипертекста). Он определяет правила, согласно которым обычный текст, представляется в виде WEB — страниц. Этот язык похож на язык программирования. И даже людей, занимающихся созданием WEB – страниц, называют WEB – программистами. WEB – программисты должны разбираться в дизайне, пользовательском интерфейсе, теории цвета и др.

Программировать WEB – страницы можно разными способами:

1. На языке HTML

2. Средствами различных редакторов, такими как HTMLWriter, HTMLAssistant, HTMLLed, HTMLHyperEdit, WEBEdit, COMPOZER, FrontPage и др.

3. С помощью DELPHI 5

4. С помощью языка JAVA

HTML был разработан для того, чтобы создавая документ, можно было, не думать о различии в программном и аппаратном обеспечении компьютеров, на которых этот документ будет просматриваться.

После того, как с помощью языка HTML будет создан HTML — файл, можно используя любой браузер отобразить этот файл в виде WEB – документа.

HTML — файл –это текстовый файл, имеющий расширение. htm или. html

Текст файла можно набирать в любом примитивном редакторе: Блокнот, WORDPAD, FAR.

Любой документ, написанный с помощью этого языка, состоит из содержимого

страницы, т. е. Текста и управляющих символов – ТЕГов.

ТЕГ – инструкция браузеру, указывающая способ отображения текста. Тег всегда начинается со знака . Прописные и строчные буквы при написании тегов не различаются. Существует 2 типа тегов: парные ( ) и не парные ( ).

Кроме того, теги делятся на категории по выполняемым ими функциям: структурные, теги форматирования абзацев, символов, гиперссылок и т. д.

Для описания структуры HTML – файла используются 3 парных тега:

— указывает браузеру, что далее следует HTML –файл. Он обрамляет весь документ.

— голова документа (Информация, находящаяся в этом разделе документа является служебной и необходима программе браузеру пользователя). Этот тег допускает вложение следующих элементов:

— заголовок документа, который при просмотре браузером помещается в заголовок окна браузера.

— задаёт адрес для относительных ссылок документа. (Синтаксис: Например: Путь является не обязательным компонентом.

Обеспечение поиска (Синтаксис: Строка задаёт текст приглашения не более 35 символов.

Взаимосвязь между документами. Используется редко. С ним используется много атрибутов – Более подробно смотри учебник HTML в INTERNET.

Предоставление дополнительной информации о документе. Он позволяет поисковым машинам идентифицировать и классифицировать документ без его загрузки.

Более подробно смотри учебник HTML в INTERNET.

Определение стиля страницы. Более подробно смотри учебник HTML в INTERNET.

— тело документа. Этот тег имеет вложенные атрибуты:

BACKGROUND –задаёт графическое изображение, которое заполнит фон документа. Файл с изображением должен быть сохранён в формате. GIF или. JPEG Синтаксис: . Если файл с изображением фона помещается в том же каталоге, что и сам файл, то URL и путь указывать не надо.

BGCOLOR – задаёт цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов, или при помощи названия цвета. Синтаксис: или

TEXT – задаёт используемый по умолчанию цвет текста, обычно чёрный.

LINK – задаёт используемый по умолчанию цвет гиперссылки текста, обычно синий.

Есть ещё атрибуты: ALINK, VLINK, BGPROPERTIES, TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN– Более подробно смотри учебник HTML в INTERNET.

Урок №2 (теория): Управление внешним видом документа

Цель: Знакомство учащихся со структурным форматированием документа

План:

1. Теги управления внешним видом документа

2. Теги форматирования символов

3. Организация списков

4. Управляющие символы языка HTML

5. Цветовое оформление текста

1. Теги управления внешним видом документа

— комментарий. Синтаксис: Текст комментария

— определяет заголовок документа. N принимает значение от 1 до 6. H1- самый большой шрифт, H6 – самый маленький. Этот тег может иметь вложенный атрибут ALIGN, который указывает отступ left — слева, center — центр, right –справа. Синтаксис: Текст заголовка

— горизонтальная полоска – линейка, отделяющая разные части документа друг от друга. Может иметь вложенные атрибуты:

COLOR –задаёт цвет линии

HEIGHT – высота в пикселях

WIDTH – ширина в пикселях или процентах от ширины экрана

Читать еще:  Vpn с белым ip

ALIGN – режим выравнивания

отделяет абзацы друг от друга. Может иметь вложенный атрибут : ALIGN – режим выравнивания. Синтаксис:

. Закрывающийся тег не обязателен.

— перевод строки. Может иметь вложенный атрибут: ALIGN, который может принимать значения – left, all, right — указывая тем самым обтекание текста вокруг плавающих изображений, вставленных нестандартным способом. Синтаксис:
Текст, или
Текст.

— используется для оформления контактной информации текущего документа, будь то адрес электронной почты или почтовый адрес с номером телефона. Синтаксис: Контактная информация

— позволяет выделить объёмный текст-цитату из общего текста. Синтаксис: Цитата

2. Теги форматирования символов

— выделение особым шрифтом слова или текста

— выделение диалога пользователя с компьютером. Синтаксис: Ввод с клавиатуры

— обозначение терминов и определений по типу словарей и глоссариев. Синтаксис: Текст

— обозначение источника информации, из которого взята цитата. Синтаксис: Текст

— базовое значение размера шрифта. Здесь N принимает значения от 1 до 7. По умолчанию N= 7. Размер шрифта 1 соответствует размеру шрифта в 9 пунктов, для размера 7 – 36 пунктов. Желательно крайние размеры не брать.

— изменение шрифта в теле документа. Может иметь вложенные атрибуты: SIZE – размер шрифта, COLOR — цвет шрифта. Синтаксис:

— базовый размер шрифта увеличивается

— базовый размер шрифта уменьшается

3. Организация списков

Для обычного ненумерованного списка (перечисление без упорядочения) используется конструкция:

— открытие начала списка. Этот тег имеет параметр TYPE, который определяет вид маркеров списка: CIRCLE — окружность, DISK — точка, SQUARE — квадрат — начало каждого элемента списка

— нумерованный список, тоже имеет параметр TYPE, который задаёт тип списка и параметр START, задающий начальный номер списка. Типы списка:

A — нумераторы прописные латинские буквы

A – строчные латинские буквы

I – большие римские цифры

I – маленькие римские цифры

1 – обычные индийские цифры

— список с пояснениями

— обозначение самого элемента списка

— обозначение пояснения, связанного с этим элементом

Пример: Нумерованный список

Список, у которого все элементы пронумерованы

Список, у которого все элементы помечены маркером

4. Управляющие символы языка HTML

К управляющим символам языка HTML относятся двойные скобки, амперсанд и двойные кавычки. Если они понадобятся в тесте документа, то для их набора используются последовательности из строчных обязательно букв:

5. Цветовое оформление текста

Параметр #XXXXXX представляет собой шестизначное численное значение для цвета в формате RGB, где первые две цифры определяют насыщенность красного, вторые две – насыщенность зелёного, а последние две – синего. Цифры указываются в шестнадцатеричной системе счисления.

Если же используются стандартные 16 цветов, то можно использовать их словесное название: Текст Текст

Лабораторные работы html методическое пособие

Автор: Курбатов В.А., Рысин Ю.С., Яблочников С.Л.

Год издания: 2020

Издательство: Лаборатория знаний

Автор: Коваленко Л.В.

Год издания: 2020

Автор: Клычкова М.В., Кичко Ю.С.

Год издания: 2020

Автор: Рождественская Н.А.

Год издания: 2020

Издательство: Ай Пи Ар Медиа

Автор: Меньшенин С.Е.

Год издания: 2020

Издательство: Московский педагогический государственный университет

Автор: Ричард Ф. Курли, Эдвард Дж. Контур, Дин И. Уильямс, Хуго Х. Грегори, Луи А. Нельсон, Барри Гитар, Лиза Скотт Траутман, Чарльз Ван Райпер.

Год издания: 2020

С этой книгой также читают

Автор: Лови О.В., Белопольский В.И.

Год издания: 2008

Автор: Исаенкова О.В., Алексий П.В., Эриашвили Н.Д., Илюшина М.Н., Щербачева Л.В., Эриашвили М.И., Ткачев В.Н., Хорев А.А., Борякова С.А., Улетова Г.Д., Карпенюк О.С., Камзолов А.И., Угрин Т.С.

Год издания: 2012

Издательство: Вышэйшая школа

Автор: Жарский М.И., Иванова Н.П., Куис Д.В., Свидунович Н.А.

Год издания: 2012

Издательство: Ай Пи Эр Медиа

Автор: Журбин Б.А.

Год издания: 2010

Автор: Хенч Л., Джоунс Д.

Год издания: 2007

Просмотр оглавления издания

Просмотр списка использованных источников

Бесплатная горячая линия

8 800 555 22 35

Доступ к фондам ЭБС IPRbooks предоставляется круглосуточно.

410012, г. Саратов, ул. Вавилова, 38/114, офисы 425, 428, 1019

Тел./факс: 8 800 555 22 35

Мы в социальных сетях:

Отдел комплектования ЭБС IPRbooks:

8 800 555 22 35

8 800 555 22 35

Отдел продаж и внедрения ЭБС IPRbooks:

8 800 555 22 35

доб. 206, 213, 144, 145

Сетевое издание «www.iprbookshop.ru» зарегистрировано в Федеральной службе по надзору в сфере связи, информационных технологий и массовых коммуникаций (Роскомнадзор) 7 декабря 2018 года. 16+

Установите баннер на ваш сайт:

Инструкция по установке кнопок электронно-библиотечной системы «IPRbooks»

Для установки одного из баннеров ЭБС «IPRbooks» на свой сайт, скопируйте код из соответствующего поля и поместите его в необходимом месте на вашем сайте.

Лабораторная работа № 1. Знакомство с HTML

СОДЕРЖАНИЕ

ГЛАВА1. HTML И CSS

Лабораторная работа № 1. Знакомство с HTML

Цель: изучить структуру HTML документа; принципы создания списков, таблиц, гиперссылок; особенности применения тегов и

Краткая теория

HTML (Hyper Text Markup Language) – язык разметки гипертекста. Для разметки HTML документа используют теги (флаги разметки).

Тег – это определенная последовательность символов, заключенные между знаками (меньше).

Для того, чтобы создать HTML документ необходимо:

— открыть любой текстовый редактор (например, блокнот встроенный в Windows);

— набрать произвольный текст и разметить его HTML тэгами;

— сохранить файл с расширением .htm или .html.

Теперь если открыть созданный файл с помощью веб-браузера, он будет отображен как веб-страница.

Параметры документа задаются через тег . Параметры – это специальные символьные команды, которые «понимает» браузер. Тег BODY имеет следующие атрибуты:

— bgcolor – цвет фона задан по схеме RGB;

— background – фон – графический файл;

— text – цвет текста;

— link – цвет ссылки;

— alink – цвет активной ссылки;

— vlink – цвет посещенной ссылки.

Шрифт задается тегом FONT, который имеет следующие атрибуты: face – имена шрифтов, разделенные запятыми, size – размер от 1 до 7 (по умолчанию 3), color – цвет шрифта.

В HTML существуют специальные теги для заголовков: от Н1 (самого крупного) до Н6 (самого мелкого).

Списки на Web-страницах бывают маркированные (


    – начало текста списка,
    – начало каждого элемента в списке) и нумерованные (

      – начало текста списка,
      – начало каждого элемента в списке). Маркером списка может быть рисунок.

Атрибут TYPE позволяет изменить вид маркера. Значения атрибута:

Ссылки на Web-страницах.

Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Реализуются с помощью тега A. Общий синтаксис создания ссылок следующий:

Атрибут href определяет URL адрес документа, на который следует перейти (например «cat.html»), а содержимое контейнера является ссылкой.

Вставка изображений.

Для добавления в HTML документ изображений используется тэг . Атрибут src тэга должен содержать адрес, по которому находится картинка, которая должна быть отображена. Например,

.

Тег предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как

) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег и определить для него стиль текста.

Задания к лабораторной работе № 1

Задание 1. Создать HTML-документ (заголовок Моя первая страница) cо следующим содержимым:

Заголовок в центре страницы (теги h1) «Я, ФИО, изучаю HTML и CSS». Аббревиатуру HTML выделить другим цветом.

Три абзаца текста (можно своя автобиография) по 3–4 строки каждый абзац. Для каждого абзаца свой шрифт, размер, цвет (тег font). Для каждого абзаца придумать заголовок (h3), а также заголовок для всего текста (h2). Внутри каждого абзаца выделить несколько слов элементами span.

Список примерно такого вида с любым содержимым

Перед списком вставить заголовок, отражающий его содержимое (h2).

Таблица, содержащая результаты сессии. Перед таблицей вставить заголовок (h2).

Задание 2. Создать еще один HTML-документ (заголовок Моя вторая страница) cо следующим содержимым:

Любой рисунок. Перед рисунком оформить заголовок (h2).

Элемент , содержащий авторский знак © и ФИО автора.

Задание 3. ФИО в заголовке на первой web-странице и в таблице сделать ссылкой на вторую страницу, а рисунок на второй странице – ссылкой на первую.

1.2. Лабораторная работа № 2. HTML+CSS

Цель: изучить основные способы подключения CSS; возможности оформления текста, шрифта, фона на web-странице; научиться использовать селекторы классов и идентификаторов.

Краткая теория

Внешнее. Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег
в заголовке страницы.

Внутреннее. Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом

Лабораторный практикум по дисциплине «Web-программирование» (Лабораторные работы № 1-5: Основы использования HTML и CSS. Знакомство со средствами создания web-приложений ASP.NET)

Страницы работы

Содержание работы

ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ

Федеральное государственное бюджетное образовательное

учреждение высшего профессионального образования

«Национальный исследовательский ядерный университет «МИФИ»

ОБНИНСКИЙ ИНСТИТУТ АТОМНОЙ ЭНЕРГЕТИКИ

КАФЕДРА «ИНФОРМАЦИОННЫЕ СИСТЕМЫ»

для студентов специальности:

230201 – «Информационные системы и технологии»

направление 230200 — «Информационные системы»

«____» ____________ 20__ г. Зав. кафедрой ИС __________________ Яцало Б.И.

Лабораторный практикум по дисциплине

Лабораторный практикум включает в себя разработку связанных гипертекстовых документов, элементов web-сайтов и web-приложений, с использованием web-технологий и языков web-программирования: HTML, CSS, JavaScript, PHP, JavaSE и JavaEE, ASP.NET. Практикум состоит из пяти лабораторных работ. Защита работ происходит в компьютерном классе с демонстрацией готового web-приложения или его элементов и отчётом по теоретической и практической части.

Общие требования к лабораторным работам

  • Каждая выполненная лабораторная работа защищается в компьютерном классе кафедры
  • К защите лабораторной работы допускаются студенты, имеющие отчет по лабораторной работе (допускается предоставление отчета в электронном виде). Отчет по лабораторной работе включает:
    • титульный лист с указанием ВУЗа, кафедры, названия лабораторной работы, ФИО студента и ФИО преподавателя;
    • введение (описание предметной области);
    • задание на лабораторную работу;
    • краткий обзор используемых технологий;
    • описание структуры страниц сайта, меню, компоновки (схемы);
    • описание данных (схема БД);
    • описание программных модулей (назначение, схема взаимодействия);
    • примеры страниц сайта (снимки экранов);
    • заключение (что сделано);
    • примеры программного кода (HTML, CSS, JavaScript, PHP, Java).

Лабораторная работа № 1 «Основы использования HTML и CSS»

Задание: Разработать сайт-визитку, используя технологии HTML и CSS.

Возможные варианты: Сайт компании, сайт общественной организации, сайт магазина, исторический сайт, сайт музея, развлекательный сайт, музыкальный сайт, сайт хранилище, научный сайт и т.д.

  1. Сайт должен состоять из 5-8 страниц (разделов);
  2. Блочная структура страницы (блок заголовок, блок меню, блок рабочей области, блок копирайт, другие блоки);
  3. Единый дизайн страниц (расположение блоков, цветовая гамма, шрифт и др.);
  4. Для структуры страницы использовать HTML (минимальное использование параметров форматирования (оформления) HTML);
  5. Для дизайна использовать единую таблицу стилей (внешний файл CSS);
  6. На сайте обязательное использование следующих тегов (контейнеров):

o заголовок документа,

o внешние стили,

o мета-информация о документе,

o абзацы текста,

o логическое и физическое форматирование текста;

  1. Обязательное использование трех видов селекторов CSS: html-контейнер, класс и идентификатор объекта.

Используемые инструментальные средства: под Windows — Notepad++, SciTE, TopStyle, под Linux — Quanta или vim или др (NetBeans IDE).

Лабораторная работа № 2 «Использование возможностей JavaScript»

Задание: К сайту-визитке добавить возможности интерактивности (динамики на стороне клиента), используя язык программирования JavaScript.

Варианты динамики: Интерактивное меню, интерактивная таблица, слайд шоу, генерация документа, гостевая книга, проверка полей формы на корректность вводимых данных, проигрывание музыки и видео, интерактивные подсказки и т.д.

  1. Интерактивное меню или таблица;
  2. Создание одной или нескольких форм;
  3. Проверка на корректность введенных в форме данных;
  4. Обработка данных формы и генерация новой страницы;
  5. Галерея объектов (картинок) и получение свойств объекта в новом окне;
  6. Обязательное использование трех видов внедрения JavaScript в страницу HTML: гипертекстовая ссылка (схема URL), обработчик события (handler), вставка (контейнер SCRIPT).

Используемые инструментальные средства: под Windows — Notepad++, SciTE, под Linux — Quanta или vim или др (NetBeans IDE) для отладки Firefox и плагин (модуль) Firebug.

Лабораторная работа № 3 «Основы программирования на языке РНР. Создание web-приложения для работы с базой данных в СУБД MySQL»

Задание: К сайту-визитке добавить динамически-формируемые разделы, используя язык программирования PHP и СУБД MySQL.

Варианты веб-приложений: Веб-почтовый клиент, новости и объявления, интерактивный список товаров, вопрос-ответ, web-каталог файлов, web-прайслист, web-тестирование, web-библиотека, web-поисковик, web-регистрация (конференция, семинар) и т.д.

  1. База данных должна содержать не менее 5 таблиц;
  2. Не менее 3х динамических разделов;
  3. Обязательные разделы: ввод и редактирование данных, извлечение и демонстрация данных из БД;
  4. Обязательный ввод данных в базу данных, используя формы;
  5. Для раздела ввода данных обязательная авторизация (логин, пароль);
  6. Использование регулярных выражений;
  7. Загрузка файлов на сервер.

Используемые инструментальные средства:

  • Пакет программ для web-разработчика – Denwer или XAMPP (Windows), MySQL+Apache+PHP_module (UNIX)
  • PHP код — Notepad++, SciTE, Quanta, vim или NetBeans IDE
  • Работа с СУБД MySQL – phpMyAdmin, MySQL Workbench(Windows)

Лабораторная работа № 4 «Основы программирования на языке Java. Создание простого приложения доступного через браузер»

Задание: Разработать небольшое web-приложение или java-апплет, используя язык программирования Java.

Варианты веб-приложений: Java-игра, аниминированное меню, анимированный текст, графики и диаграммы, карты, фотографии, расчетные программы, калькулятор и т.д.

  1. Приложение выполняется в виде апплета или web-приложения;
  2. Обязательные пункты: ввод и редактирование данных и демонстрация результата;
  3. Обязательный ввод данных, используя формы (для web-приложения);
  4. Для вывода результата обязательное использование графики.

Используемые инструментальные средства:

  • Пакет программ для web-разработчика – J2EE
  • Сервер приложений – Tomcat, JBoss, GlassFish
  • Java код – NetBeans IDE

Лабораторная работа № 5 «Знакомство со средствами создания web-приложений ASP.NET»

Задание: Разобраться в работе web-приложения ASP.NET.

Варианты примеров веб-приложений: Почтовый клиент, управление новостями и объявлениями, интерактивный список товаров, форум, чат, каталог файлов, библиотека, поиск, форма регистрации (конференция, семинар) и др.

  1. Выбрать один из примеров web-приложений ASP.NET;
  2. Разобраться в устройстве (структуре) выбранного web-приложения;
  3. Используя средства Microsoft Visual Studio развернуть web-приложение;
  4. Продемонстрировать работу web-приложения.

Используемые инструментальные средства:

Ссылка на основную публикацию
Adblock
detector