ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:

Лабораторна робота №2 Тема: Структура HTML-документа й елементи розмітки заголовка документа. Теги тіла документу

⇐ Предыдущая 17 18 19 20 212223 24 25 26 Следующая ⇒

Мета роботи: Ознайомитись з технологією створення Web-сайтів. Вивчити основні теги мови розмітки гипертексту HTML для створення Web-документу, навчитися форматувати текст, створювати нумеровані та маркеровані списки, таблиці.

Звіт: вказати номер, тему, мету роботи; створити таблицю тегів, що використовувались у роботі; включити тексти створених документів samplel.htm-sample7.htm. Зробити висновки по роботі.

ЗАВДАННЯ

1. Вивчіть теоретичний матеріал для виконання роботи (ТЕМА 2. Структура HTML-документа й елементи розмітки заголовка документа. ТЕМА 3. Мова розмітки гіпертексту HTML. Теги тіла документу).

2. Перевірте наявність програмного забезпечення, що необхідне для виконання лабораторних робіт: оглядачі Internet Explorer 5.0 або вище, або FireFox, Блокнот або інший текстовий редактор.

3. Створіть файли samplel.htm-sample7.htm.

4. Створіть порівняльну таблицю всіх відомих Вам тегів. Для зручності розташуйте теги у алфавітному порядку. Створена таблиця буде постійно поповнюватись в' процесі вивчення HTML і може бути використана в якості довідкового матеріалу. Фрагмент таблиці тегів представлений у табл. 1.

Таблиця 1 Таблиця тегів

Синтаксис тегів Призначення Атрибути і їх аргументи ~-2-

<TABLE>... </TABLE> <TR>... </TD> <ТТ»...<ЯТ»

<тй>... <ян>

<CAPTION> Створює таблицю з однією або декількома рядками (блоки <TR>)i стовпцями (блоки TD>). За бажанням можна додати заголовки стовпців (блоки <ТН>) або заголовок для всієї таблиці (<CAPTION>) ALIGN Установлює вирівнювання тексту в комірках рядка. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо)....

5. Оформіть звіт до лабораторної роботи. Захистіть роботу.

або

Хід роботи Приклад 1. У текстовому редакторі, наприклад WordPad Notepade (Блокнот) створіть простий HTML-документ samplel.htm:

<html>

<head>

<title>

Приклад 1

</title> </head> <body>

<.ні>;'

Початок! •■'' '", '.,

</Н1>. <Р>

Це найпростіший приклад HTML-документа.

</Р> <Р> Цей файл samplel.htm може бути одночасно відкритий і у Notepad (або WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл-Сохранить). Відкрийте sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML-документі. </Р> </body> </html>

Для зручності читання були введені абзаци, але у HTML це не обов'язково. Оглядачі ігнорують символи кінця рідку і пропуски у HTML-файлах. Змініть samplel.htm таким чином ї збережіть зміни:

<html>

<head>

<title>npHKnafl 1 </title>

</head>

<body>

<H1> Початок! </Hl>

<Р>Це найпростіший приклад HTML-документа. </P>

<P> Цей sample.htm-файл може бути одночасно відкритий і у

Notepad (або WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл-Сохранить). Необхідно відкрити sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML-документі.</Р>

</body>

</html> і

Зробіть активним вікно Internet Explorer з відкритим файлом samplel.htm і застосуйте команду Обновить.

75 Чі,

Пріклад 2. У редакторі Notepade створіть файл sample2.htm з таким вмістом:

<^±1е>Приклад 2</title> </tead> <bdy>

<н; АЫОЫ=СЕЫТЕРО>Продовження!</Н1> <Н>Це складніший приклад НТМЪ-документа</Н2> <РАбзац можна.вирівнювати не тільки вліво, </Р> <Р ALIGN=CENTER> але й по центру </Р> <Р ALIGN=IIGHT> або по правому краю.</Р> </lody> </ltml>

Пергляньте файл sample2.htm у оглядачі.

Пріклад 3. У редакторі Notepade створись файл sample3.htm з таким вмістом:

<htnl> •

<h«ad>

<t:tle>Пpиклaд 3</title>

</tead>

<b<dy>

<Н>Деякі положення</Н1>

<Н>Основи роботи</Н2> «ч'лЯІ

<р;НТМЬ-файли розробляються на локальному диску <BR>

Ініими словами, комп'ютер, на якому виконуються роботи*може і не мати підключення до Internet<BR>

*. ltm-файл може бути одночасно відкритий і у Notepac (або WordPad), і у Internet Explorer. <BR>

Дл> того, щоб побачити зміни, що зроблені у

текстоюму редакторі, у Internet Explorer,

застоссвується команда Обновить <BR> </body>

</ltml>.'і,'..;

Пергляньте файл sample3.htm у оглядачі.

Пріклад 4. У редакторі Notepade створіть файл sample4.htm колекції оризонтальних ліній з таким вмістом:

<html>

<head> ■■■■ ■:•*'; Ціі"

<title>Пpиклaд 4</title>

</head>

<body>

<Н1Жолекція горизонтальних ліній</Н1>

<HR SIZE=2 WIDTH=100%XBR>'

</body>

</html>

Перегляньте файл sample4.htm у оглядачі.

Приклад 5. У редакторі Notepade створіть файл sample5.htm з таким вмістом:

<html>

<head>:,

<title>Пpиклaд■5</title>

</head> Щ

<body>,

<Н1>Шрифтове виділення фрагментів текста</Н1> <Р> Ми знаємо, що фрагменти тексту можна виділяти <В> жирним </В> або <І> нахиленим </І> або <и>підкресленим</и> шрифтами. Крім того, можна

включати в текст фрагменти з фіксованою шириною символу

<ТТ> (імітація друкарської машинки) </ТТХ/Р> <Р>Існує ряд логічних стилів:</Р> <РХЕМ>ЕМ - акцент </EMXBR>

<STRONG>STRONG - сильний акцент </STRONGXBR> <CODE>CODE - для фрагментів вихідних ТЄКСтів</СООЕХВК>

<SAMP>SAMP - взірець </SAMPXBR> <KBD>KBD - клавіатура</КВОХВК> <VAR>VAR - змінна </VARX/P> </body> І </html>

Перегляньте файл sample5.htm у оглядачі

Приклад 6. У редакторі Notepade створіть файл sample6.htm з таким вмістом:

<html>

<head>

<т;і1:1е>Приклад 6</title>

</head>

<body>

<НІ>Створення маркірованих списків</Н1>

<UL>

<LI>1 елемент рписку; </LI>

<LI>1 елемент списку; </LI>

</UL>

<Н1>Створення нумерованих списків</Н1>

<OL>

<LI>1 елемент списку; </LI>

<LI>2 елемент списку; </LI>

<LI>3 елемент списку; </LI>

</0L>

<ОТ>Списки визначень

<DD>Ueu вид списків складніший, ніж два попередніх, але він

виглядає більш ефектно.

<Р>Списки можна вбудовувати один в другий, але не

слід вбудовувати багато рівнів. </Р>

<Р>Всередині елемента списку може знаходитись

декілька абзаців. Всі абзаци при цьому будуть^ мати однакове

ліве поле. </Р>

</DL>

</body>

</html>

Перегляньте файл sample6.htm у оглядачі.

Приклад 7. У редакторі Notepade створіть файл sample7.htm. Коментарі можна не друкувати.

<HTML>

<HEAD>

<ТІТЬЕ>Приклад 10</TITLE>

</HEAD>

<Н1>Найпростіша таблиця </Н1>

<CAPTION> <!-Це заголовок

таблиці->

У таблиці може бути заголовок Ш^'

</CAPTION>

<TR>

<TD>

Перший рядок,

</TD>

<TD>

Перший рядок,

</TD>

</TR>

<TR>

<TD>

Другий рядок,

</TD>

<TD>

Другий рядок,

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Перегляньте sample7.htm у оглядачі.

<!-Це початок першого рядка,->

<!-Це початок першої комірки->

перший стовпчик

<! -Це кінець першої комірки,->

<!-Це початок другої комірки->

другий стовпчик

<!-Це кінець другої комірки-> <!-Це кінець першого рядка -> <!-Це початок другого рядка-> <!-Це початок першої комірки->

перший стовпчик

<!-Це кінець першої комірки-> <!-Це початок другої комірки->

другий стовпчик

<!-Це кінець другої комірки-> <!-Це кінець другої комірки-> -Це кінець таблиці->

Лабораторна робота №3 Тема: Планування сайту. Розбиття інформації на частини за змістом (на сторінки).

Вивчення мови розмітки гіпертекстів HTML: створення загальних, контекстних посилань та гіпериосилань. Створення HTML форм.

Мета роботи: Ознайомитись з технологією створення веб-сайтів. Вивчення мови розмітки гіпертексту HTML. Навчитися створювати гіпер-, загальні та контекстні посилання. Навчитися додавати форми у HTML-документ

Звіт: накреслена на папері структура сайту. Web-сайт, який буде містити інформації} про студента, звіти до лабораторних робіт та висновки, або сайт за довільною тематикою, узгодженою з викладачем, що відповідає усім вимогам, що встановлені до основного завдання.

Хід роботи Метою Вашої роботи буде створення Web-сайту, який повинен містити:

інформацію про практичний курс дисципліни Основи Web-дизайну на головній сторінці;

інформацію про студента-виконавця (у вигляді резюме); звіти до лабораторних робіт з дисципліни Основи Web-дизайну; висновки про виконання лабораторних робіт.

Сайт повинен складатись щонайменше з 5 сторінок, об'єм HTML коду кожної з них не повинен перевищувати 10 Кб (без врахування графічних зображень) і написаний вручну, мовою HTML. Структура сайту представлена на рис. 1.

Головна S$*4t*§"l

сторінка сайту ^di

(iiidex.htm) <■' '' _^-

Звіт до Висновки

лабораторної (totalhtm)

роботи №2 (Iab2.htm)

Резюме студента Звіт до

(rez.htJBh|f"*" лабораторної

роботи,№! (labl.htm)

Рисі.

ЗАВДАННЯ 1. Вивчіть теоретичний матеріал для виконання роботи (ТЕМА 4. Навігація на Web-сайті. Створення гіпертекстових переходів Засобами HTML. HTML форми.).

2. На папері накресліть простий варіант структури сайта, з указаними основними елеменами - навігаційним меню, місцем дня логотипа, слоганом, навігаційним меню по опорним розділам. Стрілками можна вказувати звязки-посилання на "внутрішні" сторінки сайта, пунктирними лініями - логічні звязки між елементами... Продумайте і вкажіть назви кнопок, заголовків, наявність сервісів... На-цій же структурі схематично вказуються рівні вкладеності (домашня підготовка).

3. Узгодьте структуру проекта з викладачем. Варіант структури проекта повинен мати дату останньої модифікації і підпис викладача.

4. Вміст HTML-документів sample 1.htm-sample7.htm скопіюйте у один файл і збережіть його під іменем lab2.htm.

5. На початку файлу lab2.htm створіть зміст, що складається з посилань на приклади 1-7 у середині документу. Реалізуйте зручні переходи до прикладів (лаб. 1) за допомогою контекстних посилань в середині документу. Можна також просто створити посилання на документи sample 1.htm-sample7.htm.

6. Створіть файл labl.htm з результатами виконання першої лабораторної роботи. Продумайте зручні переходи до HTML-документів з оглядом і аналізом знайдених сайтів (лаб.1) за допомогою контекстних посилань в середині документу або загальних посилань між документами.

7. Створіть гіиерпосиланяя на сайти, що аналізувались.

8. Створіть у текстовому редакторі головну сторінку index.htm з інформацією про практичний курс дисципліни Основи Web-дизайну з довільним вмістом.

9. Створити у текстовому редакторі сторінку rez.htm з інформацією про студента у вигляді резюме.

10. Створіть у текстовому редакторі сторінку totaLhtm, яка повинна містити висновки про засвоєння лабораторного курсу. Висновки потрібно завершити після створення сайту.

11. На web-сторінках з резюме, висновками, зі звітами до лабораторних робіт,_ствоглть форми з меню, що випадає (рис.2).

І^Йабораторні роботи- щі

-Лабораторні роботи-Резшме

ШЯШШШШШШ

Лаб. робота N*2

Висновки

$ Рис.2.

Для цього у код сторінок додайте:

'<FORM name=go_razd> <SELECT

onchange=self.location=document.go_razd.go_2.value; name=go_2>

<OPTION value=rez.htm>Pe3iOMe</OPTION> <OPTION value=labl.htm^a6. робота №1</0PTI0N> <OPTION value=lab2.htm>fla6. робота №2</0PTI0N> <OPTI0N value=total.htm>BMCHOBKM</OPTION> </SELECT> </FORM>

12. Доповніть таблицю з тегами.

13. Захистіть лабораторну роботу.

Контрольні питання

1. Що таке гіперпосилання?

2. Як створити посилання у середині документа?

3. Як створити загальне посилання на інший документ?

4. Як створити гіперпосилання? '

5. Яке призначення навігаційної панелі? *

6. Які існують основні вимоги до навігації веб-вузла?

7. Як створити форму з меню, що випадає?

⇐ Предыдущая 17 18 19 20 212223 24 25 26 Следующая ⇒

Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2024 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных