КАТЕГОРИИ: Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748) |
Лабораторная работа №8. Введение в язык HTML
Основные понятия языка HTML HTML - язык гипертекстовой разметки структуры документа. Основным элементом языка является тег. Теги, окружающие некоторый текстовый или графический раздел, определяют, какими свойствами обладает данный текст (или графика): большой или маленький размер, жирный шрифт, подчеркивание или курсив, выравнивание слева или справа, с миганием или без него, каким цветом он выделен при просмотре браузером. Теги и структура Web- страницы.Основные теги HTML задают размер шрифта. Размеров шрифтов 6 от < H1></H1> до <H6></H6> в порядке возрастания размера. В основном тексте употребляются теги < Р> - тег абзаца, обеспечивающий правильное разбиение текста на абзацы и <BR>, задающего конец строки. Для форматирования вида текста используются теги: - <B></B> - жирный шрифт Bold; - <I></I> - курсив Italic; - <CENTER></CENTER> - центрирование текста; - <BLINK></BLINK> - мигание. Для создания нумерованных и маркированных списков применяются теги списков. Простые операции по размещению текста на странице выполняют теги BLOCKQUOTE> </BLOCKQUOTE> < и им подобные. Но для того чтобы скомпоновать текст и графику в красиво оформленную Web- страницу с четкими границами или рамками, необходимо заключить эти компоненты в теги таблицы.<TABLE> </TABLE>. Таблицы без разделительных окаймляющих линий применяются для размещения элементов дизайна по всей странице. Вся страница заключается в теги <HTML> </HTML>, указывающие на то, что текст является текстом HTML, а его части в теги <BODY> </BODY>. Имеется возможность просмотра программы на HTML не как кода, а как обычного листинга, включая и специальные символы <>/. Браузер покажет все, что заключено между тегами <XML> </XML>.
Атрибуты. Атрибуты дополняют теги, позволяя описывать внешний вид части страницы, окруженной тегами. К примеру, текст, помещенный внутри тегов <H1 ALIGN=CENTER> </H1>,будет выглядеть как большой центрированный заголовок. Атрибут ALIGN=CENTER указывает расположение текста. Тег с атрибутом <TABLE BORDER=4> показывает, что у таблицы будут граничные и разделительные линии нормальной толщины. <TABLE BORDER=0> задает таблицу без граничных линий. С помощью разнообразных атрибутов можно украсить даже самую скучную страницу. Атрибут ALIGN= позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне, а концы на разных. Чаще всего получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут ALIGN= LEFT можно опустить. Текст, выравненный по правому краю и невыравненный по левому - концы строк находятся на одном уровне, а начало - на разных, часто применяется на практике, хотя бы с целью создать оригинальный дизайн. Этот эффект достигается заданием атрибута ALIGN= RIGHT в обычных тегах, например в теге <P>. Центрирование текста и графики. Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается воспользоваться < ALIGN=CENTER>. Однако этот тег применим не для всех объектов HTML, поэтому Netscape добавил тег <CENTER>, который концентрирует любые объекты и поддерживается броузерами Netscape Navigator, Internet Explorer и некоторыми другими. Боюсь, что к тегу <CENTER> нужно относиться с осторожностью. Какой-нибудь броузер может его вообще проигнорировать, и на странице окажется выровненный по левому краю текст. Но если вы хотите быть уверенным, что в будущем вам не придется возвращаться к своим кодам и менять везде <CENTER> на <P ALIGN=CENTER>, лучше использовать оба тега, хотя, наверное, это уже перебор.
Огибание графики с помощью атрибута ALIGN= вы можете ‘ обернуть’ текст вокруг графического объекта. Для этого поместите тег <IMG SRC=’’/ путь /файл.gif’’ ALIGN=LEFT, ALIGN=RIGHT, ALIGN=CENTER. Кроме того, с помощью атрибутов HSPACE= и VSPACE=(они описываются ниже) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом. Атрибут <CLEAR=> в теге <BR> используется для того, чтобы остановить в указанной вами точке обтекания текстом объекта и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст в соответствии со значениями LEFT, RIGHT или ALL атрибута CLEAR=. <BR CLEAR=LEFT > - текст будет продолжен, начиная с ближайшего пустого левого поля <BR CLEAR=RIGHT> - текст будет продолжен, начиная с ближайще го пустого правого поля <BR CLEAR=ALL> - текст будет продолжен, как только и левое, и правое поля окажутся пустыми. Задание 1. 1) Изучить основные теги и атрибуты HTML 2) Подготовить необходимые данные для заполнения Web - страницы, в том числе gif - файл. Предметную область определит преподаватель. Порядок выполнения задания в лаборатории: 1) Создать простейшую Web- страницу. 2) Занести в нее картинку из gif - файла. 3) Продолжить заполнение страницы с использованием огибания рисунка, использованием бегущей строки, мигания текста, звукового сопровождения. Пример: Пример HTML –кода. <HTML> <HEAD> <TITLE>Beany Hat</TITLE> </HEAD> <BODY> <CENTER> <H1>Fancy.yet simple</H1><P> </CENTER> <HR NOSHADE> <CENTER> HTML is key to attractive Web pages. Your Web pages will carry with then text, images, and multimedia content that the HTML code formats into the resulting Web pages. </CENTER> <CENTER> <IMG SRC=”Beany.gf “ ALT=” “ <H1><I><F HREF=www.microsoft.com>C1ick her to see Microsoft’s Web site </A></I><H1. </CENTER> <MARQUEE>This text scrolls across the screen</MARQUEE><P> </Body> </HTML> Пример: Общий HTML –формат. <html> <!--Так оформляется комментарий--> <head> <title>Здесь размещается заголовок окна</title> </head> <body> <!—Здесь размещается HTML-код и текст web-страницы- ->
</body> </html> Задание 2. 1. Напишите программу с использованием тега <h> для выделения заголовков; 2. Напишите программу с использованием тега <font size> для управления размером текста. 3. Напишите программу с использованием тега <img scr> для размещения изображения на Web – странице.
Основная литература: 2 осн., [1-638 ], 5 осн. [1- 432]. Контрольные вопросы: 1) Что такое Web - страница и HTML. 2) Какие основные теги и атрибуты используются для создания Web - страниц. 3) Какими тегами могут быть заполнены и отредактированы страницы. 4) Как модифицируется структура существующих Web - страниц. 5) Какие режимы работы имеет Microsoft Internet Explorer.
Дата добавления: 2014-01-06; Просмотров: 476; Нарушение авторских прав?; Мы поможем в написании вашей работы! Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет |