рефераты конспекты курсовые дипломные лекции шпоры
- Раздел Программирование
- /
- Исследование методов создания абзацного отступа в документах HTML
Реферат Курсовая Конспект
Исследование методов создания абзацного отступа в документах HTML
Исследование методов создания абзацного отступа в документах HTML - раздел Программирование, Разработка Web-приложений. HTML 5.1.запустите Текстовый Редактор Блокнот И Начните Создание Документа Html. ...
5.1.Запустите текстовый редактор Блокнот и начните создание документа HTML. Введите теги структурных элементов и дайте документу заголовок, например, «Имитация абзацных отступов».
5.2.Введите небольшой абзац текста, который будет использоваться как эталон.
Сохраните документ.
5.3.Откройте созданный документ в браузере. Отрегулируйте ширину окна так, чтобы исследуемый абзац занимал несколько строк. Убедитесь, что он выводится без отступа.
5.4.Вернитесь к редактированию документа. Разместите после эталонного абзаца горизонтальную линейку (тег <HR>). Поместите копию эталонного абзаца ниже линейки. Добавьте в начало скопированного абзаца несколько пробелов. Сохраните документ.
5.5.Вернитесь в программу-браузер и обновите страницу. Посмотрите на добавленный абзац. Объясните, почему создать абзацный отступ таким образом не удается.
5.6.Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку. Добавьте еще одну копию эталонного абзаца. Добавьте в начало абзаца тег <DD>. Сохраните документ.
5.7.Вернитесь в браузер и обновите страницу. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Правильно ли используется код HTML в полученном документе? Можно ли рекомендовать такой метод создания абзацного отступа? Почему?
5.8.Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку и еще одну копию эталонного абзаца. Добавьте в начало абзаца повторенную несколько раз комбинацию символов . Сохраните документ.
5.9.Вернитесь в браузер и обновите страницу. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Можно ли рекомендовать такой метод создания абзацного отступа? Почему?
5.10. Вернитесь к редактированию документа. Разместите после последнего абзаца горизонтальную линейку и копию эталонного абзаца. Добавьте в начало скопированного абзаца тег <PRE> и несколько пробелов. В конце абзаца добавьте тег </PRE>. Сохраните документ.
5.11. Вернитесь в браузер и обновите страницу. Посмотрите на добавленный абзац. Убедитесь, что появился абзацный отступ. Обратите внимание на способ обработки пробелов и символов конца строки в предварительно отформатированном тексте. В чем особенность используемого шрифта? Выскажите свое мнение об использовании этого метода создания абзацного отступа.
5.12. Проанализируйте все использованные методы и выскажите свое мнение о принципиальной целесообразности их использования и о том, какой из них наиболее удобен.
6. Индивидуальное задание
Создайте Web-страницы, соответствующие тематике варианта индивидуального задания. Каждая страница должна включать в себя обязательные элементы: заголовок окна, заголовки различных уровней, текстовое наполнение. В тексте должны присутствовать абзацы, различные по начертанию и типу шрифты, маркированные и нумерованные списки.
Варианты заданий
1. Факультет
2. Вакансии
3. Репертуар кинотеатра
4. Книжный магазин
5. Расписание поездов дальнего следования
6. Авиаперевозки
7. Электронная библиотека
8. Музыкальный альбом
9. Конспект лекций
10. Музеи Санкт-Петербурга
11. Экскурсионное бюро
12. Репертуар театра
13. Театральная афиша
14. Программа телепередач
15. Автосалон
16. Продажа мобильных телефонов
17. Компьютеры стандартной комплектации
18. Обзор поисковых серверов
19. Вузы Санкт-Петербурга
20. Памятники
21. Древние города России
22. Гороскопы
23. Освоение космического пространства
24. Исторические личности
25. Вооруженные силы России
26. Кулинария
27. Страны и континенты
28. Астрономический атлас
29. Зоологический справочник
30. Транспорт
Контрольные вопросы
1. Что такое тег? Чем различаются парные и непарные теги?
2. Зачем нужны атрибуты тегов? Приведите примеры их использования.
3. Каково назначение тегов <HEAD> и <BODY>?
4. Какие элементы языка HTML могут использоваться для форматирования текста документа? Как эти элементы воздействуют на отображение документа?
5. Какие элементы языка HTML можно вкладывать друг в друга?
6. Зачем нужны теги <Hn>?
7. Чем отличается использование тега <P> от тега <BR>?
8. Какие средства языка HTML используются при создании списков?
9. Как создать многоуровневый нумерованный список?
10. Какие существуют способы создания абзацного отступа?
Лабораторная работа № 2
Гиперссылки, вставка изображений
Цель работы – ознакомление с приемами графического оформления документов, созданием гиперссылок, получение практических навыков создания гипертекстовых связей.
Теоретические сведения
Универсальный указатель ресурса
Гиперссылки являются ключевым компонентом, делающим Web-страницы привлекательными для пользователей. С помощью ссылок Web-страница связывается с другими документами или с другими разделами данного документа, что обеспечивает быстрое и удобное получение информации. Именно использование гиперссылок стало основной причиной ошеломляющей популярности Всемирной паутины, в которой пользователь может легко переходить от одной страницы к другой простым щелчком мыши.
Для организации ссылок в HTML используется универсальный указатель ресурса (Uniform Resource Locator, URL), в общем случае имеющий следующий формат:
метод : // имя_сервера : порт / путь # якорь
Первая часть URL (до двоеточия) описывает метод доступа или сетевую службу, вторая часть интерпретируется в зависимости от метода доступа. Обычно два прямых слеша после двоеточия обозначают имя сервера.
Наиболее часто используемыми методами являются file, http, ftp, mailto, telnet и news.
Метод file обеспечивает чтение файла с локального диска. Например,
file://C:kafedraivanovfirst.htm
Метод http предоставляет доступ к Web-странице по протоколу HTTP. Это наиболее часто используемый метод доступа к HTML-документам в сети Интернет. Например,
http://www.bstu.spb.su/
Методом ftp выполняется запрос к FTP-серверу на получение файла, например
ftp://kafedra/ivanov/file1.dat
Метод mailto служит для отправки почты указанному адресату, если браузер поддерживает запуск электронной почты. Например,
mailto:ivanov@bstu.spb.su
Метод telnet используется для обращения к службе telnet.
Метод news обеспечивает вызов службы новостей, если браузер поддерживает такой вызов. Например,
news:comp.infosystem.www.announce
При использовании методов mailto и news слеши после двоеточия указывать не нужно.
Имя сервера – необязательный параметр URL, описывающий полное сетевое имя машины. Если имя не указано, то ссылка считается локальной и полный путь, указанный далее в URL, относится к той же машине, на которой находится HTML-документ, содержащий ссылку, или, если в документе присутствует тег <BASE>, то к машине, указанной этим тегом. Следом за именем сервера в URL указывается номер порта TCP, на котором функционирует Web-сервер. Если порт не указан, по умолчанию используется порт 80, характерный для большинства URL-адресов. Далее в URL указывается частичная или полная спецификация файла, который должен вызываться в результате перехода по ссылке. Якорь – это ссылка на место внутри текущего HTML-документа.
Вставка ссылок в HTML-документ
Добавление гиперссылок в документ выполняется с помощью парного тега <A>. Этот тег должен содержать обязательный атрибут href или name.
Значением атрибута href является URL документа, на который указывает ссылка, например
<A href=”ivanov_1.htm”>Иванов А.В.</A>
Текст, находящийся между тегами <A> и </A>, при этом выделяется цветом, определенным атрибутом link тега <BODY> (по умолчанию синим), и подчеркиванием.
Ссылки можно делать не только на другие документы, но и на фрагменты одного и того же документа. Это позволяет быстро переходить от фрагмента к фрагменту внутри документа, не прибегая к прокрутке. Для организации таких переходов используются специальные якоря, которые обычно вставляются в первую строку или в заголовок фрагмента, к которому должен выполняться переход. Для создания якоря используется тег <A> с атрибутом name, значением которого является идентификатор якоря, например
<A name=”fragment_1”>Данный фрагмент</A>
Для ссылки на установленный якорь необходимо указать имя якоря в конце URL-адреса после имени документа, отделив его символом #. Например
<A href=”#fragment_1”>Фрагмент 1</A>,
если это ссылка на фрагмент текущего документа, или
<A href=”ivanov_1.htm#fragment_1”>Фрагмент 1</A>,
если это ссылка на фрагмент документа ivanov_1.htm.
Документ, на который указывает гиперссылка, может быть открыт в том же окне, в части окна или в другом окне. Режим открытия устанавливается атрибутом target тега <A>. Если его значение равно _blank, то будет создано новое окно, а если target=_self, то объект будет открыт в текущем окне (это значение используется по умолчанию). Подробнее атрибут target будет рассмотрен в лабораторной работе, посвященной фреймам.
Если при наведении указателя мыши на гиперссылку должна появляться всплывающая подсказка, ее текст должен быть указан в качестве значения атрибута title тега <A>, например
<A href=”ivanov_1.htm” title=”Персональная страничка”>Иванов А.А.</A>
Вставка графических элементов в HTML-документ
В большинстве случаев неотъемлемой частью Web-документов являются графические иллюстрации. Сегодня графические элементы Web-страниц используют следующие форматы: GIF, JPEG, PNG и BMP. Все графические браузеры, предназначенные для отображения Web-страниц на экране компьютера, способны распознавать и отображать файлы этих форматов. Для подготовки изображений можно использовать любой графический редактор, позволяющий сохранять файлы в этих форматах, например Paint, PhotoShop или CorelDraw.
Файлы формата GIF (Graphic Interchange Format) имеют расширение .gif. Изображения в этом формате содержат 256 цветов, заданных индексной палитрой. Файл упакован и может занимать значительно меньше места, чем неупакованный растровый рисунок (например, в формате .bmp).
GIF-анимация превращает обычный рисунок в небольшой видеоролик. В стандартном файле с расширением .gif хранится набор кадров, а также сценарий их отображения.
Формат JPEG (Joint Photographic Expert Group – по названию группы исследователей, предложившей этот формат, читается «джей-пег») предназначен для хранения фотографических изображений, использующих 24-разрядную палитру. Файлы этого формата могут иметь расширение .jpeg или .jpg.
Формат PNG (Portable Network Graphics – переносимая сетевая графика) создан специально для передачи изображений в сетях. Формат поддерживает полноцветные RGB-изображения.
Формат BMP (Bit Map – битовая карта) является стандартным форматом растровой графики. Размер файлов в формате BMP существенно превышает размеры аналогичных изображений в других форматах, поэтому их не рекомендуется использовать в HTML-документах.
Для вставки графики в Web-страницу используется тег <IMG>, имеющий следующие атрибуты:
– src – обязательный атрибут, который определяет местоположение файла, содержащего изображение. Если файл находится в том же каталоге, что и содержащий его HTML-документ, достаточно указать только его имя, например
<IMG src=”pict1.gif”>
Если файл находится на том же сервере, но в другом каталоге, указывается имя каталога и имя файла, например
<IMG src=”picture/pict1.gif”>
Если файл находится на другом сервере, то необходимо указать полный адрес этого файла, например
<IMG src=”http://www.uprint.ru/picture/pict1.gif”>
– alt позволяет задать альтернативный текст, который будет выводиться браузером, пока идет загрузка изображения (или браузером, не поддерживающим отображение графики);
– heigth и width определяют высоту и ширину рисунка в пикселях. Если данные параметры не указаны, используется оригинальный размер рисунка;
– align используется для точного позиционирования объектов на экране. Он может принимать следующие значения: top (верхний край рисунка выравнивается по верхнему краю строки), middle (центр рисунка выравнивается по базовой линии строки), bottom (нижний край объекта выравнивается по нижнему краю строки), left или right (объект выравнивается по левому или правому краю соответственно, при этом возможно обтекание объекта текстом). Если данный параметр не указан, большинство браузеров располагает изображение в левой части экрана, а текст – справа от него;
– border задает толщину обрамления для изображения;
– vspace и hspace позволяют задать в пикселях размер пустого пространства над и под, слева и справа от изображения, чтобы текст не наезжал на рисунок.
Графические ссылки
Если рисунок должен являться гиперссылкой, тег <IMG> помещается между тегами <A> и </A>.
С гиперссылками могут быть связаны и отдельные части изображения. Для этого с помощью атрибута usemap в теге <IMG> задается местоположение так называемой карты изображения, которая создается с помощью тегов <MAP> и <AREA>.
<IMG src=”pict1.gif” usemap=”#map1”>
Карта изображения представляет собой список активных областей, заключенный между тегами <MAP> и </MAP>. Обязательный атрибут тега <MAP> name задает имя карты, а сами активные области определяет тег <AREA> с помощью своих атрибутов:
– share задает форму активной области: rect (прямоугольник), circle (круг), poly (многоугольник) или default (все изображение);
– coords определяет позицию области на экране. Набор координат соответствует форме области: для круга задаются координаты центра и радиус, для прямоугольника – координаты левого верхнего и правого нижнего углов, для многоугольника – координаты всех углов. Координаты задаются в пикселях и отсчитываются от левого и верхнего краев рисунка. Друг от друга координаты отделяются запятыми;
– href задает URL-адрес ссылки;
– alt содержит альтернативный текст для браузеров, которые не поддерживают тег <AREA>;
– title задает текст всплывающей подсказки;
– target указывает, где должен быть открыт документ, соответствующий ссылке.
Свой тег <AREA> задается для каждой активной области карты, например
<MAP name=map1>
<AREA shape=rect coords=”55, 125, 170, 220” href=”ar1.htm”>
<AREA shape=circle coords=”250, 100, 60” href=”ar2.htm”>
</MAP>
Порядок выполнения работы
– Конец работы –
Эта тема принадлежит разделу:
Разработка Web-приложений. HTML
На сайте allrefs.net читайте: "Разработка Web-приложений. HTML"
Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Исследование методов создания абзацного отступа в документах HTML
Что будем делать с полученным материалом:
Если этот материал оказался полезным ля Вас, Вы можете сохранить его на свою страничку в социальных сетях:
| Твитнуть |
Хотите получать на электронную почту самые свежие новости?
Подпишитесь на Нашу рассылку
Реклама
Информация в виде рефератов, конспектов, лекций, курсовых и дипломных работ имеют своего автора, которому принадлежат права. Поэтому, прежде чем использовать какую либо информацию с этого сайта, убедитесь, что этим Вы не нарушаете чье либо право.
© copyright 1999 - 2024 allRefs.net. Все права защищены. Страница сгенерирована за: 0.045 сек.
Новости и инфо для студентов