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


 

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

37805. Програмування лінійних та розгалужених алгоритмів 62.52 KB
  Ознайомитися з операторами вводу, виводу і присвоєння, навчитися записувати лінійні алгоритми на мові програмування Pascal; закріпити теоретичні відомості про розгалужені алгоритми, оператори передачі управління, навчитися програмувати розгалуження.
37806. Види модуляцій в сучасних інформаційних системах 8.77 MB
  Мета роботи: Дослідження і вивчення особливості видів модуляції які застосовуються в цифровій техніці ознайомитися з елементами модуляторів і демодуляторів а також із принципами їх роботи. Порядок виконання роботи Ознайомитися з принципами математичного моделювання модуляції які використовуються лабораторною програмою.
37807. Вказівники 2.14 MB
  Мета: навчитися програмувати з використанням вказівників та динамічних змінних, створювати та опрацьовувати черги та стеки.
37808. ОСНОВЫ РАБОТЫ В POWER POINT. Настройка электронной интерактивной презентации 72.5 KB
  Клавиши удаления и копирования текста и объектов Чтобы Нажмите Удалить один символ слева BCKSPCE Удалить одно слово слева CTRLBCKSPCE Удалить один символ справа DELETE Удалить одно слово справа CTRLDELETE Вырезать выделенный объект CTRLX Скопировать выделенный объект CTRLC Вставить вырезанный или скопированный объект CTRLV...
37809. ВЫЧИСЛЕНИЕ ОПРЕДЕЛЕННЫХ ИНТЕГРАЛОВ 248 KB
  4 Формула Симпсона Формула Симпсона записывается так: . Погрешность формулы Симпсона прямо пропорциональна в четвертой степени. На практике как и в случае метода трапеций расчеты ведут на сгущающихся сетках и оценку погрешности формулы Симпсона осуществляют по формуле 5. Критерием завершения процесса вычисления определенного интеграла с заданной точностью методом Симпсона на сгущающихся сетках служит условие .
37810. ОСНОВЫ РАБОТЫ С POWER POINT. Вставка таблицы Word 44.5 KB
  5 Щелкните вне таблицы для возвращения в PowerPoint. Для использования этой разметки нажмите кнопку Разметка слайда на панели инструментов Команды щелкните разметку Таблица затем нажмите кнопку Применить. Изменение таблицы Word 1 Дважды щелкните таблицу. 3 Щелкните вне таблицы для возвращения в PowerPoint и обновления таблицы показываемой в презентации.
37811. Создать калькулятор делающий: суммирование, вычитание, деление, умножение, вычисление степени 14.51 KB
  Вывод: выполняя лабораторную работу, я научилась работать с функциями.
37812. Составление плана материала, определение недостатка построения. Предложение варианта плана правки-обработки 52.5 KB
  Рыбаки рассказывали о будто бы пойманных ими когда-то калугах (амурских осетровых рыбах) под тонну весом. Документальное свидетельство об одной такой «крошке» на восемь с половиной центнеров мы нашли на прибрежном рыбзаводе.
37813. Робота з колекціями в мові програмування Java 29 KB
  творити клас, що описує типізовану колекцію (типом колекції є клас з лабораторної роботи №4) із заданою внутрішньою структурою (п.2), що складається не менше ніж з 3 конструкторів (1 – порожній, 2 – в який передається об’єкт, 3 – в який передається стандартна колекція об’єктів, наприклад, ArrayList)