37696

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

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

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

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

Украинкский

2013-09-25

3.64 MB

13 чел.

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

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

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

Лабораторна робота №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-сторінок.


 

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

13013. Принципы и особенности построения средств отображения информации, построенные на различных физических принципах 989 KB
  План 1.5.1. Принципы и особенности построения средств отображения информации построенные на различных физических принципах. 1.5.2. Системы отображения информации на базе ЭЛТ. 1.5.1. Принципы и особенности построения средств отображения информации построенные на ра...
13014. Формат сохранения картографической информации и алгоритм работы программы-конвертора 134.5 KB
  В задачах цифровой картографии очень важное значение имеет выбор формата представления информации – основы БКД АГК. К географическим базам данных манипулирующим большими массивами информации и принадлежащим системам работающим в режиме реального времени предъявляют...
13015. Алгоритм визуализации картографической информации. Методы формирования картографических срезов 83 KB
  Для получения картографического изображения некоторой прямоугольной области земной поверхности задаваемой географическими координатами на экране устройства отображения предлагается метод суть которого состоит в следующем: Сначала задаются элементы содержания в ...
13016. ОРГАНІЗАЦІЯ ОБЛІКУ ВИТРАТ ТА МЕТОДИКА АНАЛІЗУ СОБІВАРТОСТІ ПОСЛУГ 757 KB
  Метою дипломної роботи є вироблення теоретико-методичних положень щодо формування системи обліку та управління виробничими витратами. А також удосконалення методики калькулювання собівартості, що дасть змогу спростити процедуру обліку операційних витрат виробництва.
13017. Принципы построения баз картографических данных в агротехнических геоинформационных комплексах 425 KB
  План 6.1. Модель графических данных. 6.2. Логическая и физическая организация баз картографических данных 6.1. Модель графических данных Процесс проектирования БГД представляет собой сложный процесс определения отображения: Предметная область Схема вну...
13018. Понятие агротехнических геоинформационных комплексов 195.5 KB
  Введение. Понятие агротехнических геоинформационных комплексов. Данный курс лекций является обобщением результатов исследований и разработок проведённых под руководством автора и относится к области построения интерактивных геоинформационных комплексов опер...
13019. Исследованию по факту пожара в МБОУ «Майминская СОШ №2» 780.09 KB
  Анализ особенностей осмотра места происшествия связанного с пожаром, изучение и анализ документов, составляемых в связи с пожарами – заключения технического специалиста, постановления об отказе в возбуждении уголовного дела, исследование практики в этой области.
13020. Проектирование АГК как сложной человеко-машинной системы 185.5 KB
  Проектирование АГК как сложной человекомашинной системы. Системный подход В.М.Глушкова является достаточно хорошей основой для создания компонентов АГК работающих в статике. Однако основной чертой таких комплексов является их работа в динамике. Они должны успевать...
13021. Основные свойства картографических моделей местности. Общая характеристика географической карты 2.74 MB
  1. Основные свойства картографических моделей местности. Термин картографическая модель подразумевает искусственно созданный объект который отображает и воспроизводит важнейшие свойства исследуемого объекта. Картографические модели каким соответствуют географ...