МІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ "ЛЬВІВСЬКА ПОЛІТЕХНІКА"
КАФЕДРА СОЦІАЛЬНИХ КОМУНІКАЦІЙ ТА ІНФОРМАЦІЙНОЇ ДІЯЛЬНОСТІ
/
Звіт
до лабораторної роботи №2
з курсу: "INTERNET-технології та ресурси"
на тему: "Створення веб-сторінок"
Львів - 2013
Мета роботи: навчитися створювати веб-сторінки.
Теоретичні відомості
HyperText Markup Language (HTML) є стандартною мовою, призначеною для створення гіпертекстових документів у середовищі WEB. HTML-документи можуть переглядатися різними типами WEB-браузерів. Коли документ створений з використанням HTML, WEB-броузер може інтерпретувати HTML для виділення різних елементів документа та первинної їх обробки. Використання HTML дозволяє форматувати документи для їх подання з використанням шрифтів, ліній та інших графічних елементів на будь-якій системі, їх перегляду.
Більшість документів мають стандартні елементи, такі, як заголовок, параграфи або списки. Використовуючи теги HTML ви можете позначати дані елементи, забезпечуючи WEB-броузери мінімальною інформацією для відображення даних елементів, зберігаючи в цілому загальну структуру та інформаційну повноту документів. Все що необхідно, щоб прочитати HTML-документ - це WEB-броузер, який інтерпретує теги HTML і відтворює на екрані документ у вигляді, який йому надає автор.
У більшості випадків автор документа суворо визначає зовнішній вигляд документа. У разі HTML читач (грунтуючись на можливостях WEB-браузера може, певною мірою, керувати зовнішнім виглядом документа (але не його вмістом). HTML дозволяє відзначити, де в документі повинен бути заголовок або абзац за допомогою тега HTML, а потім надає WEB- броузеру інтерпретувати ці теги. Наприклад, один web-броузер може розпізнавати тег початку абзацу і представляти документ у потрібному вигляді, а інший не має такої можливості і надає документ в один рядок. Користувачі деяких WEB-броузерів мають, також, можливість налаштовувати розмір і вид шрифту, колір та інші параметри, що впливають на відображення документа. HTML-теги можуть бути умовно розділені на дві категорії: - Теги, що визначають, як буде відображатися WEB-броузером тіло документа в цілому ;
- Теги, що описують загальні властивості документа, такі як заголовок чи автор документа.
Основна перевага HTML полягає в тому, що ваш документ може бути переглянутий на WEB-броузерах різних типів і на різних платформах.
HTML-документи можуть бути створені за допомогою будь-якого текстового редактора або спеціалізованих HTML-редакторів і конвертерів. Вибір редактора, який буде використовуватися для створення HTML-документів, залежить виключно від поняття зручності і особистих пристрастей кожного автора.
Наприклад, HTML редактори, такі, як "Netscape Navigator Gold" компанії Netscape дозволяють створювати документи графічно з використанням технології WYSIWYG (What You SeeIs What You Get). З іншого боку, більшість традиційних засобів для створення документів мають конвертери, що дозволяють перетворювати документи до формату HTML. Усі теги HTML починаються з "<" (лівої кутової дужки) і закінчуються символом ">" (правої кутової дужки). Як правило, існує стартовий тег і завершальний тег. Для прикладу наведемо теги заголовка, що визначають текст, що знаходиться всередині стартового і завершального тега і описує заголовок документа:
<TITLE> Заголовок документа </ TITLE>
Завершальний тег виглядає також, як стартовий, і відрізняється від нього прямим слешем перед текстом всередині кутових дужок. У даному прикладі тег <TITLE> говорить WEB-броузеру про використання формату заголовка, а тег </ TITLE> - про завершення тексту заголовка. Деякі теги, такі, як <P> (тег, що визначає абзац), не вимагають завершального тега, але його використання надає початкового тексту документа поліпшену читанність і структурованість .
HTML не реагує на регістр символів, що описують тег, і наведений раніше приклад може виглядати наступним чином:
<title> Заголовок документа </ title>.
Список базових тег HTML
Стартовий
Завершальний
Опис
<HTML>
</ HTML>
Позначення HTML-документа
<HEAD>
</ HEAD>
Заголовна частина документа
<TITLE>
</ TITLE>
Заголовок документа
<BODY>
</ BODY>
Тіло документа
<H1>
</ H1>
Тема абзацу першого рівня
<H2>
</ H2>
Тема абзацу другого рівня
<H3>
</ H3>
Тема абзацу третього рівня
<H4>
</ H4>
Тема абзацу четвертого рівня
<H5>
</ H5>
Тема абзацу п'ятого рівня
<H6>
</ H6>
Тема абзацу шостого рівня
<P>
</ P>
Абзац
<PRE>
</ PRE>
Форматований текст
<BR>
Переклад рядки без кінця абзацу
<BLOCKQUOTE>
</ BLOCKQUOTE>
Цитата
Хід роботи
Відкриваю програму AceHTML 6 pro. У поле Editor буду вводити код сторінки яку буду створювати.
Теги <html>, <meta>,<title>, <head> згенерувалися автоматично. В тег <title> вписую назву сторінки.
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Лабораторна робота №2</title></head>
Зада
Задаю колір фону сторінки.
<body bgcolor="#FFFF99">
Створюю заголовок по центру сторінки
<h1 align="center">Автобіографія</h1>
Створюю абзац з вирівнюванням по центру.
<p align="center"> Мене звати Даниляк Олена Олегівна, народилася 10.01.1991р. Я студентка 2 курсу Національного університету "Львівська політехніка" </p>
Додаю зображення з рамкою з вирівнюванням по центру.
<center> <img src="ve4yzKS70AE.jpg" border="1" width="291" height="512"> </center>
Додаю заголовок.
<center><h2>Мої хобі</h2></center>
<ul type="disc" style="text-align: left; margin-left: 45%">
Створюю маркований список.
<li>Створення веб-сторінок</li>
<li>Карате</li>
<li>Плавання</li>
<li>Колекціонування цукрових пакетиків</li>
<li>Музика</li>
<li>Книги</li>
Створюю заголовок.
<h2>Улюблені книжки</h2>
Створюю таблиц юз рамкою та відступом.
<table border="1" style="margin-left: -20%">
<tr>
<td width=50>Номер</td>
<td>Назва</td>
<td>Автор</td>
</tr>
<tr>
<td width=182>1</td>
<td>«Джейн Эйр»</td>
<td>Шарлотта Бронте</td>
</tr>
<tr>
<td width=182>2</td>
<td>«Уловка-22»</td>
<td>Джозеф Хеллер</td>
</tr>
<tr>
<td width=182>3</td>
<td>«Грозовой перевал»</td>
<td>Эмили Бронте</td>
</tr>
<tr>
<td width=182>4</td>
<td>«Ребекка»</td>
<td>Дафна Дюморье</td>
</tr>
<tr>
<td width=182>5</td>
<td>«Над пропастью во ржи»</td>
<td>Джером Сэлинджер</td>
</tr>
<tr>
<td width=182>6</td>
<td>«Ветер в ивах»</td>
<td>Кеннет Грэм</td>
</tr>
<tr>
<td width=182>7</td>
<td>«Маленькие женщины»</td>
<td>Луиза Мэй Олкотт</td>
</tr>
<tr>
<td width=182>8</td>
<td>«Гарри Поттер и философский камень»</td>
<td>Джоан Роулинг</td>
</tr>
</table>
</ul>
</body>
</html>
/
Рис. 1 Вікно Editor програми AceHTML 6 pro.
Зберігаю і відкриваю створену сторінку в браузері (Рис. 2, Рис. 3)
/
Рис. 2 Вигляд сторінки в браузері.
/
Рис. 3 Вигляд сторінки в браузері.
Перевіряю сторінку на сайті http://validator.w3.org/
/
Рис. 4 Перевірка сторінки на помилки
Знайдено 3 помилки:
/Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>"
<html>
The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are given above -- and it is necessary to have this declaration before the page can be declared to be valid.
/Line 9, Column 80: required attribute "ALT" not specified
…nter> <img src="ve4yzKS70AE.jpg" border="1" width="291" height="512"> </center>
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
/Line 19, Column 8: document type does not allow element "H2" here; assuming missing "LI" start-tag <h2>Улюблені книжки</h2>
Виправляю помилки.
ВИСНОВОК: в даній лабораторній роботі я навчилася створювати веб-сторінки за допомогою програми AceHTML 6 pro.