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


 

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

23738. Язык и логика 84.5 KB
  2 а Подставим вместо переменных x и y их значения и найдём значение получившегося числового выражения по действиям. Если x = 15 y = 6 то 49  15 17  6 = 633 49  15 = 735; 17  6 = 102; 735 102 = 633 Сравним получившийся результат с число стоящим в правой части данного равенства. 633 = 533 Л б Подставим вместо переменных x и y их значения и найдём значение получившегося числового выражения по действиям. Подставим результат в исходное предложение вместо левой части 15 ≤ 3 Л 3 Надо найти такое число в разряде единиц...
23739. ОСТРЫЕ УГЛЫ МОЛОДЫХ СЕМЕЙ ИЛИ ШПАРГАЛКА ДЛЯ МОЛОДОЖЕНОВ 3.83 MB
  Книга Андрея Зберовского написана в традиционной для автора форме, где большая часть практических советов подана в увлекательной и живой форме, нередко с элементами юмора. Она адресована очень широкой читательской аудитории любых возрастных категорий, прежде всего – молодоженам!
23740. Степень числа 42 KB
  Сначала определяем значение степени а затем проходим произведение. Найдите значение выражения: 5 23 362 81 : 32 . 3 1 2 4 9 7 5 6 8 12 11 10 5 23 362 81 : 32 = 5  2  2  2 36  5  2  2  2 36 81 : 3  3 Проанализируйте каков порядок действий в нашем выражении Сначала находим значение степени в скобке затем значение произведения значение разности значение степени результата получившегося в скобках значение степени числа 3 значение...
23741. Степень числа 44 KB
  При выполнении каких заданий мы можем получить произведение одинаковых множителей При разложении чисел на простые множители. Что интересного вы можете сказать о полученном ряде чисел Все числа кратны 10. Найдите НОК и НОД чисел а и b если: а = 23 3 52 b = 22 32 7. Что необходимо сделать что бы выполнить задание Надо расписать степени чисел и применить известные алгоритмы А можно ли выполнить задание не расписывая степени Этот вопрос может вызвать затруднение.
23742. Высказывания 228 KB
  Назовите число из полученного ряда сумма цифр в котором равна 6. Какое число данного ряда может быть лишним Например число 50 двузначное а остальные трехзначные. На сколько 150 больше 50 во сколько раз 150 больше 50 на сколько 50 меньше 150 Придумайте числовые выражения частное в которых равно 3. Найдите число которого равны 21.
23743. Взаимно простые числа 72.5 KB
  2 Тренировать способности к использованию: а понятий простого и составного числа; б признаков делимости на 2 5 10 3 9; в различных способов нахождения НОД; г алгоритмов объединения и пересечения множеств. На доске остаются числа: 375 164 2310 171. Разложите получившиеся числа на простые множители.
23744. Делимость произведения 48.5 KB
  Делится ли на 37 число 555 555 555 555 − Сформулируйте в общем виде свойство делимости которое вы наблюдаете. Если первое число делится на второе число второе число делится на третье число то первое число делится на третье число. Докажите используя введение обозначений что если первое число делится на второе а второе делится на третье то и первое число делится на третье. Первое число a второе число b третье число c.
23745. Делимость произведения 48.5 KB
  Что означает что число а делится на число b Это означает что существует такое число с которое при умножении на b дает а. И что Можно заменить число 16 произведением 4 и 4 и получится произведение 4 4 а. Если ктолибо из учащихся по аналогии с предыдущим заданием верно найдет ответ последнего примера число 555 то учитель просит его обосновать как выполнены действия. А как можно разделить произведение на число Разделить один множитель а потом полученный результат умножить на второй множитель.
23746. Делимость произведения 85.5 KB
  Делится ли: на 13 на 5 на 2 на10 На 13 делится так как 39 делится на 13; на 5 не делится так как ни один из множителей не делится на 5; на 2 делится так как 356 кратно 2; на 10 не делится так как ни один из множителей не делится на 10. Делится ли 225 на 3 если известно что 225 делится на 15 Да делится т. 15 делится на3. Известно что: а 686 делится на 49.