|
Лабораторна робота №4 Тема: Розробка Web-сторінок з використанням текстових редакторів. Мета: Засвоїти практичні навики щодо створення Web-сторінок у текстових редакторах, використовуючи теги різних типів.
План
Хід роботи 1. Мова HTML. Для створення Web-сторінок Web-дизайнери послуговуються гіпертекстовими редакторами, наприклад, HotMetal PRO, Hot Dog Professional, Netscape Editor, Webedit, HTMLWriter, HTML Assistant, HTMLed, де використовується мова HTML – Hyper Text Markup Language (мова для розмічування гіпертекстових документів). Сучасні редактори (FrontPage, додатки до MS Word тощо) дають:Імогу створювати Web-сторінки методом конструювання без застосуван-зія кодів мови HTML (оскільки код вони створюють автоматично). Вивчаючи дану тему, ми створюватимемо Web-сторінки двома способами: 1) за допомогою мови HTML і 2) методом конструювання. Для підготовки html-файлу можна використати текстовий редактор NotePad. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви htm чи html. Програмування тут суто символічне. Команди мови HTML називаються тегами. Теги бувають одинарними і парними. Більшість тегів є парними, як наприклад, тег означення HTML-файлу: <HTML>... </HTML>. Парні теги позначають початок і кінець ділянки дії відповідної команди. Теги записують у кутових дужках. Тег, що закриває ділянку дії, має косу риску (інакше тег працюватиме неправильно). Тег може містити параметри, які користувач записує через пропуск у першому тезі, наприклад, <BODY TEXT="red">. Назви тегів прийнято писати великими буквами, але можна й малими. У середині пари тегів <HEAD>...</HEAD> описують заголовок документа. Основною частиною заголовка документа є заголовок Windows-вікна, який пишуть в середині пари тегів <TITLE>...</TITLE>. У середині пари тегів <BODY пapaмeтри>...</BODY> записують (тобто програмують) те, що має відображатися у вікні броузера. Щоб на екрані відобразити звичайним способом стандартний текст, жодного програмування не потрібно — достатньо набрати цей текст. Якщо ж дизайнер хоче подати текст спеціальним чином, щоб він якнайкраще виглядав, потрібно застосувати до тексту теги форматування. У цьому, зокрема, і полягає суть програмування мовою HTML. Розглянемо основні параметри тега BODY: BACKGROUND = "шлях до графічгого файлу"— задає картинку для тла; BGCOLOR = "white" — задає білий колір тла, якщо не використовується тло-картинка; TEXT = "black" — задає колір тексту (тут — чорний) на сторінці. Тег <!-- текст --> позначає коментар. Текст у середині тега виводитися на екран не буде. Коментар можна писати також у середині парного тега <COMMENT> текст-коментар </COMMENT>. 2. Оформлення тексту для Web-сторінок. Розглянемо теги, які використовують для форматування тексту. Спочатку розглянемо основні одинарні теги для розміщення тексту. <Р> — цей тег означає початок нового абзацу, але його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю, абзацу без відступу. <BR> — наступний за цим тегом текст буде наведено у новому рядку без пропуску рядка. <HR> — буде проведена горизонтальна лінія. | |||||
Викон. |
|
|
|
| Арк |
Керівн. |
|
|
| ||
| П.І.Б. | Дата | Підп. |
Розглянемо парні теги форматування символів тексту: <В> текст </В> — товстий шрифт тексту; <І> текст </І> — шрифт- курсив; <U> текст </U> — підкреслений шрифт; <SUB> текст </SUB> — нижній індекс, наприклад, Н2О; <SUP> текст </SUP> — верхній індекс, наприклад, 1а вулиця, а2; <BIG> текст </BIG> — великий шрифт; <SMALL> текст </SMALL> — малий шрифт; <ЕМ> текст </ЕМ> — виокремлений курсивом текст (те саме, що тег І); <В><І> текст </І></В> — товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів. Зауважимо, що тег <Р> може використовуватися як парний: <Р> текст абзацу </Р>. Окремим типом абзацу є заголовок. Є шість видів заголовків, які відрізняються розмірами символів: <Н1>Заголовок 1</Н1> <Н2>Заголовок 2</Н2> <Н3>Заголовок 3</Н3> <Н4>Заголовок 4</Н4> <Н5>Заголовок 5</Н5> <Н6>Заголовок 6</Н6> Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання: <CENTER> елемент </CENTER> — вирівнювання до центру; <LEFT> елемент </LEFT> — вирівнювання до лівого краю; <RIGHT> елемент </RIGHT> — вирівнювання до правого краю. Зауваження. Теги заголовків не варто використовувати для створення звичайних абзаців з різними розмірами шрифту. 3. Тег задания параметрів шрифту FONT. Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT з параметрами FACE, SIZE та COLOR, наприклад, <FONT FACE = "Decor, Arbat, Kudriashov" SIZE = +2 COLOR = "red"> текст </FONT> Якщо на комп'ютері клієнта встановлено шрифт Decor, то він буде застосований до даного тексту, інакше броузер застосує шрифт Arbat чи Kudriashov, інакше — деякий свій стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифту можуть бути від 1 до 7. Розмір 3 уважає-ться стандартним, він орієнтовно відповідає 10 пунктам. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифту, число +2 означає, що розмір шрифту має бути на дві одиниці більший, ніж стандартний, тобто п'ятий, число -2 означатиме перший розмір шрифту — на дві одиниці менший, ніж стандартний. Колір тексту буде червоний. Основні кольори мають такі назви: black — чорний green — зелений navy — темно-синій teal — бірюзовий silver — сірий lime — яскраво-зелений blue — синій aqua — блакитний maroon — малиновий olive — темно-зелений purple — бузковий gray — темно-сірий red — червоний yellow — жовтий fushsia — рожевий white — білий Різних можливих відтінків цих кольорів є 16 мільйонів. Відтінки задають спеціальними шістнадцятковими кодами, як це прийнято в графічних редакторах, наприклад, один з відтінків сірого кольору має код #ff7800.
| |||||
Викон. |
|
|
|
| Арк |
Керівн. |
|
|
| ||
| П.І.Б. | Дата | Підп. |
Різних можливих відтінків цих кольорів є 16 мільйонів. Відтінки задають спеціальними шістнадцятковими кодами, як це прийнято в графічних редакторах, наприклад, один з відтінків сірого кольору має код #ff7800. 4. Створення списків. Є три типи списків: ненумерований, нумерований, означення. Список може мати заголовок, який охоплюють тегами <LH>...</LH>, наприклад, <LH>Це заголовок списку</LH>. Ненумерований список утворюють за допомогою парного тега <UL>...</UL> і одинарних тегів <LІ>, наприклад, так: <LH> Мої улюблені предмети:</LH> <UL> <LІ>інформатика <LІ>англійська мова <LІ>історія </UL> На екрані отримаємо: Мої улюблені предмети: · інформатика · англійська мова · історія
Завдання 1. Удосконалити Web-сторінку яка містить інформацію про вас користуючись наведеного зразку: <HTML> <HEAD> <TITLE> My new Web-page </TITLE> </HEAD> <BODY BGCOLOR = "aqua" TEXT = "red"> <H2> Це Web-сторінка Світлани Марущак</Н2> <HR> <CENTER> <В>Привіт!</В> Мене звуть <В>Світлана</В> </CENTER> <P> <FONT FACE = "Decor, Arbat, Kudriashov" SIZE = +2 COLOR = "pink"> Я вчуся на 4<SUP><I>му</I></SUP> курсі ВДК МДУ на спеціальності <B>Організація обслуговування в готелях і туристичних комплексах </B>. Мені 18 років. <LH> Мої улюблені предмети:</LH> <UL> <LІ>інформатика <LІ>англійська мова <LІ>історія </UL> Я люблю слухати хорошу музику, читати пригодницькі романи, подорожувати влітку, кататися на гірських лижах узимку, ходити на дискотеку будь-якої пори року. <BR> Я вчуся на відмінно. Мрію поступити на навчання в університет "Львівська політехніка".<P> </FONT> <CENTER>Колись тут буде моя фотографія.</CENTER><P> Моя електронна адреса:<B><U>www.svetlana@meta.ua</U></B><HR> </BODY> </HTML> Завдання 2. Створити Web-сторінку для деякої фірми, яка надає послуги пов’язані з туризмом користуючись заданого зразка: | |||||
Викон. |
|
|
|
| Арк |
Керівн. |
|
|
| ||
| П.І.Б. | Дата | Підп. |
<HTML> <HEAD> <TITLE>___________________________________________</TITLE> </HEAD> <BODY BGCOLOR=”___________” TEXT=”___________”> <H1 align=”center”>__________________________________</H1> <H2 align=”left”>__________________________________</H2> < A href=”#Част1”> Частина 1. Про нас </A><BR> < A href=”#Част2”> Частина 2. Наші послуги </A><BR> < A href=”#Част3”> Частина 3. Наші ціни </A><BR> < A href=”#Част4”> Частина 4. Галерея </A><BR> < A href=”#Част5”> Частина 5. Зв’язок з нашими працівниками </A><BR> <HR> <H2><A name=”Част1”> Частина 1. Про нас </H2> <!-Далі іде текст про фірму-> <HR> <H2><A name=”Част2”> Частина 2. Наші послуги </H2> <!-Далі іде текст про послуги-> <HR> <H2><A name=”Част3”> Частина 3. Наші ціни </H2> <!-Далі іде текст про ціни-> <HR> <H2><A name=”Част4”> Частина 4. Галерея </H2> <!-Далі ідуть фотографії-> <HR> <H2><A name=”Част5”> Частина 5. Зв’язок з нашими працівниками </H2> <!-Далі іде текст про список працівників і відповідних контактних телефонів-> </BODY> </HTML>
Виснвок: | |||||
Викон. |
|
|
|
| Арк |
Керівн. |
|
|
| ||
| П.І.Б. | Дата | Підп. |
Дата добавления: 2015-09-29; просмотров: 20 | Нарушение авторских прав
<== предыдущая лекция | | | следующая лекция ==> |
| | Міністерство освіти і науки України |