37696

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

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

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

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

Украинкский

2013-09-25

3.64 MB

16 чел.

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

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

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

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


 

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

57990. Людина: дух, душа, тіло 212 KB
  Термін яким переважно релігія ідеалістична філософія та донаукова психологія позначали психіку внутрішній світ людини. Душа у релігії Душа це людина або тварина чи життя людини або тварини.
57991. Environmental Problems on the Planet Earth 81 KB
  One half of it is habitable. The rest of the land is the mountains, deserts, ice and other places where people cannot live in. And now I’m cutting this half into 4 parts. It’s impossible to believe but only 1/4 gives us food and shelter.
57992. Епоха Катерини ІІ 87.5 KB
  Мета: зясувати велич і трагедію народів Російської імперії за часів Катерини ІІ підтвердити або спростувати імя російської імператриці як Катерини Великої. Задачі: дати оцінку історичному періоду який передував епосі Катерини ІІ...
57993. Дії з десятковими дробами 69 KB
  Мета: Узагальнити та систематизувати уміння та навички учнів виконувати дії з десятковими дробами. Ознайомити учнів із сучасною екологічною ситуацією в світі та в Україні. Формувати вміння переносити набуті знання у нові ситуації...
57994. Електронні таблиці. Побудова діаграм. Стратегія успіху або Як обрати професію 130.5 KB
  Мета уроку: сформувати: навики створювати діаграми; вміння аналізувати їх; вміння застосовувати діаграми на практиці; розвивати та вдосконалювати: навики роботи з ЕТ Excel; навики роботи на ПК; вміння працювати в групі...
57995. Емоції та почуття в житті людини 41 KB
  Мета уроку: надати загальне уявлення про емоції почуття та моральні почуття їх роль у житті людини; вчити наводити приклади емоцій та почуттів познайомити учнів про силу моральних почуттів; розвивати навички опанування термінів та роботи в групах...
57996. Учимся речевому этикету. Уроки вежливости 56.5 KB
  Цель урока: ознакомить учащихся с правилами вежливого поведения и речи; сформировать умение активно пользоваться различными этикетными формами в устной и письменной речи с учетом речевой ситуации; развивать образное и логическое мышление, чувства языка, языковой памяти, речевого слуха...
57997. Построение диаграмм и графиков на основе табличных данных 102 KB
  Напишу много чисел и попрошу их представить в порядке возрастания Легко представить А если я построю диаграмму или график Какие способы представления данных вам известны Ответ: таблицы схемы запись графики диаграммы т. Какие из этих способов вы считаете наиболее наглядными...
57998. Підсумки Microsoft Excel (MICROSOFT OFFICE 2010) 427.5 KB
  Мета: Отримання учнями практичних навичок впорядкування списків шляхом групування записів з виведенням проміжних результатів.