37696

Структура HTML-документа і Елементи форматування тексту

Лабораторная работа

Информатика, кибернетика и программирование

Ознайомитись зі структурою HTML-документів і елементами для керування розміткою Web-сторінки та відображенням символів. Вивчити синтаксис мови HTML. Навчитися першим навичкам роботи з інструментами створення найпростіших Web-сторінок.

Украинкский

2013-09-25

3.64 MB

20 чел.

Міністерство освіти і науки України

Хмельницький Національний Університет

Кафедра комп’ютерних систем та мереж

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

З основ інформаційних технологій

Структура HTML-документа і

Елементи форматування тексту

Виконав:

Гика В. А.

Перевірив:

Хмельницький 2011

Мета роботи:

1. Ознайомитись зі структурою HTML-документів і елементами для керування розміткою Web-сторінки та відображенням символів.

2. Вивчити синтаксис мови HTML.

3. Навчитися першим навичкам роботи з інструментами створення найпростіших Web-сторінок.

 

Лістинги сторінок:

Лістинг 1:

<HTML>

<HEAD>

<TITLE>Referat_title</TITLE>

<HEAD>

<BODY BGCOLOR=GREEN TEXT=WHITE>

<P ALIGN=center>ХМЕЛЬНИЦЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ

<P ALIGN=center>Кафедра комп’ютерних систем та мереж

<P ALIGN=center>Реферат

<P ALIGN=center>Основи інформаційних технологій

<P ALIGN=right>Виконав студент групи КІ-10-3

<P ALIGN=center>м. Хмельницький, 2011

<ADDRESS>Моя адреса: м. Хмельницький, пров. Високий 20</ADDRESS>

</BODY>

</HTML>

Лістинг 2

<HTML>

<HEAD>

<TITLE>Page2_L1</TITLE>

<HEAD>

<BODY BACKGROUND="C:\Documents and Settings\Администратор\Мои документы\Мои рисунки\PicsDesktop.net_15.jpg" TEXT=BROWN TOPMARGIN=20 LEFTMARGIN=100 >

<P ALIGN=center>ОСНОВИ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ

<P ALIGN=left>Лабораторна робота №1

<P ALIGN=left>Виконав студент групи КІ-10-3

</BODY>

</HTML>

Лістинг 3

<HTML>

<HEAD>

<TITLE>Лабораторна робота №1 Заголовки</TITLE>

<HEAD>

<BODY>

<H1> Заголовок першого рівня</H1>

<H2> Заголовок другого рівня</H2>

<H3> Заголовок третього рівня</H3>

<H4> Заголовок четвертого рівня</H4>

<H5> Заголовок п'ятого рівня</H5>

<H6> Заголовок шостого рівня </H6>

<H1 ALING=CENTER>Заголовок першого рівня, вирівняний по центру</H1>

<H2 ALING=JUSTIFY>Заголовок другого рівня, вирівняний по ширині</H2>

<H3 ALING=right>Заголовок третього рівня, вирівняний по правому краю</H3>

</BODY>

</HTML>

Лістинг 4

<HTML>

<HEAD>

<TITLE>Лабораторна робота №1 Горизонтальні лінії</TITLE>

<HEAD>

<BODY BGCOLOR=YELLOW TEXT=BLUE >

<H1> Горизонтальні лінії </H1>

<P ALING=LEFT>Горизонтальна лінія що задана без атрибутів

<HR>

<P ALING=LEFT>Задаю товщину горизонтальної лінії

<HR SIZE=10>

<Pre>Задаю горизонтальну лінію червоного кольору COLOR="red", товщиною

SIZE=3, вирівнюю її по центру ALING="CENTER", ширину горизонтальної лінії задаю

рівній 30 відсотків від ширини документа WIDTH="30%" </pre>

<HR COLOR="red" SIZE=3 ALING="CENTER" WIDTH="30%">

</BODY>

</HTML>

Лістинг 5

<HTML>

<HEAD>

<TITLE>Лабораторна робота №1 Основні контейнери заголовка</TITLE>

<HEAD>

<BODY BACKGROUND="C:\Documents and Settings\Администратор\Мои документы\Мои рисунки\windows-xp-fish.jpg" TEXT=BLUE>

<H1> Основні контейнери заголовка </H1>

<DIV ALIGN=CENTER> Основні контейнери заголовка - це елементи HTML-розмітки, які найбільше часто зустрічаються в заголовку

                                            HTML-документа, тобто у середині елемента розмітки HEAD.</DIV>                                             

<HR COLOR=red SIZE=4 WIDTH=49% ALIGN=left>

<PRE>

Ми розглянемо тільки вісім елементів розмітки, включаючи сам елемент розмітки HEAD:

.       HEAD (елемент розмітки HEAD);      

.       TITLE (заголовок документа);

.       BASE (база URL);

.       ISINDEX (пошуковий шаблон);

.       META (метаінформація);

.       LINK (загальні посилання);

.       STYLE (описувачі стилів);

.       SCRIPT (скрипти).

Найчастіше застосовуються елементи TITLE, SCRIPT, STYLE. Використання елемента МЕТА говорить про проінформованість

автора про правила індексування документів у пошукових системах і можливості керування НТТР-обміном даними. BASE і

ISINDEX  останнім часом практично не застосовуються. LINK вказують тільки при використанні зовнішніх щодо даного

документа опесів стилів.

</pre>

<HR COLOR=red SIZE=4 WIDTH=49% ALIGN=left>

<H2 ALIGN=left>Елемент розмітки HEAD</H2>

<P>Елемент розмітки HEAD містить заголовок HTML-документа. Даний елемент розмітки не є обов'язковим. При наявності тегу<BR>

<P>початку елемента розмітки бажано використати й тег кінця елемента розмітки. За замовчуванням елемент HEAD закривається,<BR>

<P>якщо зустрічається або тег початку контейнера BODY, або тег початку контейнера FRAMESET. Атрибутів у тегу початку<BR>

<P>контейнера ні, хоча в DTD HTML один необов'язковийй атрибут прописаний.<BR>

<HR COLOR=red SIZE=4 WIDTH=49% ALIGN=left>

<H2 ALIGN=left>Елемент розмітки TITLE</H2>

<P>Елемент розмітки TITLE служить для іменування документа в World Wide Web. Більше прозаїчне його призначення-<BR>

<P>іменування вікна браузера, у якому проглядаеться документ. Складається контейнер тегу початку, змісти й тег кінця. Наявність<BR>

<P>тегу кінця обов'язково. Тег початку елемента не має специфічних атрибутів.<BR>

<HR COLOR=red SIZE=4 WIDTH=49% ALIGN=left>

<H2 ALIGN=left>Елемент розмітки BASE</H2>

<P>Елемент розмітки BASE служить для визначення базового URL для гіпертекстових посилань документа, заданих у неповній<BR>

<P>(часковій) формі. Крім того, BASE дозволяє визначити мішень (вікно) завантаження документа за замовчуванням при виборі<BR>

<P>гіпертекстового посилання поточного документа. Розмітка гіпертекстових посилань звичайно виконується як розмітка.<BR>

<ADDRESS>Документ був створений 19.01.2011 студент гр. КІ-10-3 Гика В'ячеслав </ADDRESS>

<HR COLOR=green SIZE=5 WIDTH=100% ALIGN=CENTER>

</BODY>

</HTML>

Лістинг 6

<HTML>

<HEAD>

<TITLE>Лабораторна робота №1 Форматування шрифтів</TITLE>

<HEAD>

<BODY>

<basefont face=“Arial, Helvetica, sans-serif” size=“5” color=“brown”>

<P> За визначенням <ABBR>ЮНЕСКО</ABBR>

<P> <i><b>Інформаційна технологія – </i></b><FONT COLOR=red>це комплекс взаємозалежних, <u>наукових, технологічних,<BR> інженерних дисциплін</u>, що вивчають методи ефективної організації праці людей,<BR> зайнятих обробкою і зберіганням інформації; обчислювальну техніку та методи<BR> організації й взаємодії з людьми й виробничим устаткуванням, їхні практичні додатки, а<BR> також зв’язані з усім цим соціальні, економічні та культурні проблеми.</font>

<p> <BR>

<P>Основні ознаки для виділення етапів розвитку інформаційних технологій:<BR>

<p> <BR>

<I><font color=blue> за видом завдань і процесів обробки інформації;</i><BR>

<I><font color=green> за проблемами, що стоять на шляху інформатизації суспільства;</i><BR>

<I><font color=red> за перевагами, що приносить комп’ютерна технологія.</i><BR>

</BODY>

</HTML>

Лістинг 7

<HTML>

<HEAD>

<TITLE>Лабораторна робота №1 Новини</TITLE>

</HEAD>

<BODY BACKGROUND="C:\Documents and Settings\Администратор\Мои документы\Мои рисунки\PicsDesktop.net_15.jpg" TEXT=BLACK>

<P> <FONT SIZE=7 COLOR=red>UKR.net</font><BR>

<H2>Політика</h2>

<P><u>всі новини розділу</u><BR>

<P><BR>

<B><U><FONT color=red>13:50</b></u></font><B>А.Єрмолаев</b>: конфлікт на Кавказі ситуативно вигідний <B>Ющенко</b><FONT color=green>(Join)</font><BR>

<B><U><FONT color=red>13:42</b></u></font><B>В.Ющенко</b>в Батурині взяв участь у церемонії освячення церкви <FONT color=green>(РБК - Україна)</font><BR>

<B><U><FONT color=red>13:39</b></u></font>У Чорному морі - уже дев'ять кораблів НАТО. Росія б'є тривогу <FONT color=green>(Vlasti.net)</font><BR>

<B><U><FONT color=red>13:27</b></u></font><B>Янукович</b> вважає, що треба терміново зробити три кроки <FONT color=green>(Униан)</font><BR>

<B><U><FONT color=red>13:15</b></u></font><B>Арсеній яценюк</b>: це буде надзвичайно гаряча політична осінь <FONT color=green>(Контакти)</font><BR>

<B><U><FONT color=blue>Економіка</b></u></font><BR>

<B><U><FONT color=blue>Події</b></u></font><BR>

<B><U><FONT color=blue>Технології</b></u></font><BR>

<B><U><FONT color=blue>Спорт</b></u></font><BR>

<B><U><FONT color=blue>Здоров'я</b></u></font><BR>

<B><U><FONT color=blue>Всі новини регіону</b></u></font><BR>

<B><U><FONT color=blue>Культура</b></u></font><BR>

<B><U><FONT color=blue>За кордоном</b></u></font><BR>

<B><U><FONT color=blue>Курйози</b></u></font><BR>

<B><U><FONT color=blue>Фоторепортаж</b></u></font><BR>

</BODY>

</HTML>

Лістинг 8

<HTML>

<HEAD>

<TITLE>Вирівнювання тексту</TITLE>

<BODY BACKGROUND="C:\Documents and Settings\Администратор\Мои документы\Мои рисунки\PicsDesktop.net_15.jpg" BGPROPERTIES=fixed>

<H1>Вирівнювання тексту</h1>

<P ALIGN=LEFT>Цей абзац вирівняний вліво.<PRE><P ALIGN=LEFT></PRE>

<P АLIGN=RIGHT>Цей абзац вирівняний вправо.<PRE><P АLIGN=RIGHT></pre>

<P ALIGN=CENTER>Цей абзац вирівняний по центру.<PRE><P ALIGN=CENTER></pre>

<P ALIGN=JUSTIFY>Цей абзац вирівняний по ширині.<PRE><P ALIGN=JUSTIFY></pre>

</BODY>

</HTML>

Лістинг 9

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transi-tional//EN”>

<HTML>

<HEAD>

<TITLE> My first HTML document </TITLE>

<META NAME=“Author” CONTENT=“В. Гика”>

<META HTTP-EQUIV=“Refresh“ CONTENT=“5; URL=6.HTML“>

<META HTTP-EQUIV=“Content-Type” CONTENT=“text/html;

<CHARSET=windows-1251”>

</HEAD>

<BODY>

Hello world!

<P> Типовий HTML-документ

</BODY>

</HTML>

Лістинг 10

<HTML>

<head>

<title>Перелік сторінок до лабораторної роботи</title>

<meta name=“description” content=“Класифікація сторінок”>

<meta name=“keywords” content=“Перша Web-сторінка, Титульна сторінка для реферату, Web-сторінка 2, Використання заголовків, Використання горизонтальних ліній, Web-сторінка 6, Інформаційні технології, Політика”>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1251”>

<META NAME=“Author” CONTENT=“В.Гика КІ-10-3 ”>

<meta http-equiv=“Refresh” CONTENT="120; URL=10.HTML" 19.01.2011 21:16:32>

</head>

<BODY BGCOLOR=blue BACKGROUND="D:\4.jpg" BGPROPERTIES=fixed TOPMARGIN=20 LEFTMARGIN=20>

<H3>Перелік сторінок до лабораторної роботи</h3>

<B><U><FONT color=green>Перша Web-сторінка</b></u></font><BR>

<B><U><FONT color=green>Титульна сторінка для реферату</b></u></font><BR>

<B><U><FONT color=green>Web-сторінка 2</b></u></font><BR>

<B><U><FONT color=green>Використання заголовків</b></u></font><BR>

<B><U><FONT color=green>Використання горизонтальних ліній</b></u></font><BR>

<B><U><FONT color=green>Web-сторінка 6</b></u></font><BR>

<B><U><FONT color=green>Інформаційні технології</b></u></font><BR>

<B><U><FONT color=green>Політика</b></u></font><BR>

<P>Створив Гика В'ячеслав Антонович, група КІ-10-3, спеціальність "Комп'ютерна Інженерія" 04.08.1992 <BR>почав недавно вивчати Основи Інформаційних Технологій

</BODY>

</HTML>

Результати роботи програми:

Результати роботи програми 1

Результати роботи програми 2

Результати роботи програми 3

Результати роботи програми 4

Результати роботи програми 5

Результати роботи програми 6

Результати роботи програми 7

Результати роботи програми 8

Результати роботи програми 9

Результати роботи програми 10

Висновок:

В цій роботі я ознайомився зі структурою HTML-документів і елементами для керування розміткою Web-сторінки та відображенням символів. Вивчив синтаксис мови HTML.

Навчився першим навичкам роботи з інструментами створення найпростіших Web-сторінок.


 

А также другие работы, которые могут Вас заинтересовать

8800. Классификация и принципы построения компьютерных сетей 23.35 KB
  По территориальной распространенности сети могут быть локальными, глобальными, и региональными: Локальная сеть (LAN - Local Area Network) (ЛКС) - сеть в пределах предприятия, учреждения, одной организации. К классу ЛКС относятся сети...
8801. Принципы построения компьютерных сетей 207.84 KB
  Топология сети - это классификационный признак сети, который определяет принцип соединения компьютеров (рабочих станций, машин) в единую сеть. Существует несколько топологий: линия, каждый с каждым (многосвязная), звезда, шина, кольцо (двойное...
8802. Основные компоненты компьютерной сети 16.62 KB
  Компьютерная сеть - это сложный комплекс взаимосвязанных и согласованно функционирующих программных и аппаратных компонентов. Изучение сети в целом предполагает знание принципов работы ее отдельных элементов: компьютеров коммуникационно...
8803. Модем. Типы модемов для ПК 176.5 KB
  Немного истории Вы, очевидно, знаете, что модем - это устройство, предназначенное для работы компьютера во Всемирной компьютерной сети Интернет. Появление модемов стало следствием появления глобальных компьютерных сетей. Когда были созданы перв...
8804. Валюта, валютні системи, валютні курси 148 KB
  Валюта, валютні системи, валютні курси 1.1. Поняття валюти, види валют, валютні системи Валюта (італ. valuta - ціна, вартість) - грошова одиниця країни. Валютна система - сукупність валютно-економічних відносин, що історично склались на засадах інте...
8805. Еволюція світової та вітчизняної валютних систем 70.5 KB
  Еволюція світової та вітчизняної валютних систем. Становлення світової валютної системи Першою формою організації міжнародних грошово-валютних відносин був золотий стандарт, що базувався на використанні золота як грошового товару. У більш...
8806. Особливості правового регулювання валютних операцій 66.5 KB
  Особливості правового регулювання валютних операцій План 1. Сутність, особливості та механізм правового регулювання валютних відносин 2. Операції з іноземною валютою, які дозволені чинним законодавством України 1. Сутність, особливості та механізм п...
8807. Валютне регулювання і валютний контроль 96.5 KB
  Валютне регулювання і валютний контроль ПЛАН Зміст і форми валютної політики Інструментивалютної політики Тема для реферату. Зі світового досвіду валютного регулювання і контролю Політик має вміти передрікати, що відбудеться завтра...
8808. Міжнародний ринок обміну валют 192.5 KB
  Міжнародний ринок обміну валют. Сутність валютних операцій На світовому ринку торгівля валютою в основному зосереджена на міжбанківському валютному ринку (Forex) торгівля строковими угодами здійснюється на біржі (Chicago Mercantile Ex...