Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АрхитектураБиологияГеографияДругоеИностранные языки
ИнформатикаИсторияКультураЛитератураМатематика
МедицинаМеханикаОбразованиеОхрана трудаПедагогика
ПолитикаПравоПрограммированиеПсихологияРелигия
СоциологияСпортСтроительствоФизикаФилософия
ФинансыХимияЭкологияЭкономикаЭлектроника

Тема:Розробка Web-сторінок з використанням текстових редакторів.

Лабораторна робота №4

Тема: Розробка Web-сторінок з використанням текстових редакторів.

Мета: Засвоїти практичні навики щодо створення Web-сторінок у текстових редакторах, використовуючи теги різних типів.

 

План

  1. Мова HTML.
  2. Оформлення тексту для Web-сторінок.
  3. Тег задания параметрів шрифту FONT.
  4. Створення списків.
  5. Оформити та здати звіт.

 

Хід роботи

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>

Я вчуся на відмінно. Мрію поступити на навчання в університет &quot;Львівська політехніка&quot;.<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 | Нарушение авторских прав


<== предыдущая лекция | следующая лекция ==>
 | Міністерство освіти і науки України
mybiblioteka.su - 2015-2024 год. (0.031 сек.)