Мелітопольський
державний педагогічний університет ім. Б. Хмельницького.
Мелітополь 2009
Вступ
Сучасний
людина не уявляє свого життя без техніки та Всесвітньої павутини. Інтернет
став невід'ємною частиною нашого життя. Сьогодні можна, не виходячи з дому оплатити
комунальні послуги, поповнити рахунок мобільного телефону, замовити продукти
харчування та різні товари з доставкою, спілкуватися з друзями, колегами на
відстані і багато іншого.
Однак
для роботи в інтернеті потрібні як мінімум три речі: браузер, доступ в інтернет і
початкові навички побудови і структури Web-сайтів.
В
цей роботі я намагався створити свій сайт за допомогою мови гіпертекстової розмітки
HTML. На перший погляд ця мова може здатися досить складним, проте він
є найпростішим способом побудови персонального сайту, на якому
можна викласти будь-яку потрібну інформацію.
В
широких колах інтернет спільноти сформулювали чотири основних критерії
якості інформаційного матеріалу, не залежно від того, чи виконаний він
методами традиційної поліграфії, або ж створено в електронному вигляді:
Змістовність;
Достовірність;
Актуальність;
Рівень
технічного виконання (дизайн, навігація і т.д.).
Перераховані вище
рекомендовані вимога були враховані при виконанні ІНДЗ.
Зміст:
Заголовок
документа 4
Установка
фону і кольору тексту 4
Використання
абзаців, переривання 5
Установка
різного накреслення тексту 6
Форматування
тексту 6
Використання
заголовків 7
Створення
і форматування малюнків 7
Створення
та форматування маркованого списку 8
Створення
та форматування нумерованого списку 9
Використання
зовнішніх і внутрішніх гіперпосилань 10
Висновок
11
Література
12
1.
Заголовок документа
Для
того, щоб текстовий файл перетворився в HTML-файл, поміняти його розширення з
". txt" на ". html" недостатньо. Треба дотриматися "правило
першого рядка ". Кожен HTML-документ, який відповідає специфікації HTML
будь-якої версії, повинен починатися з рядка декларації версії HTML! DOCTYPE,
яка зазвичай виглядає так:
Ця
рядок браузеру допоможе визначити, як правильно інтерпретувати даний
документ. У даному випадку ми говоримо браузеру, що HTML відповідає
міжнародної специфікації версії 3.2, яка хоч і не відрізняється новизною,
але, на відміну від більш пізніх версій, є повноцінним, широко
поширеним стандартом без будь-яких невизначеностей. Як видно з
прикладу, найкоротший html-документ складається буквально з одного рядка.
Заголовок
HTML-документа створюється за допомогою елемента HEAD, між тегами якого
розміщуються елементи, які містять технічну інформацію про документ. Заголовок
звичайно розташовується до тіла документа:
Заголовок документа </ TITLE> </ p>
<p> </ HEAD> </ p>
<p> <BODY> </ p>
<p> Текст
документа </ p>
<p> </ BODY> </ p>
<p> </ HTML> </ p>
<p> 2.
Установка фону і кольору тексту </ p>
<p> BgColor
- Рядок, що визначає фоновий колір документа. Властивість bgColor виражається як
шістнадцятковий триплет RGB або так як це один з строкових літералів,
внесених до розділу Кольори JavaScript. Якщо ви висловлюєте колір, як
шістнадцятковий триплет RGB, то ви повинні використовувати формат rrggbb.
Наприклад, шістнадцяткове значення RGB для кольору salmon - red = FA, green = 80, і
blue = 72, слідчий триплет RGB для salmon - "FA8072". </ p>
<p> <body
bgcolor = "Silver"> </ p>
<p> Тег
<BASEFONT> призначений для завдання шрифту, розміру та кольору тексту по
замовчуванням. Зазначені значення будуть використовуватися в усьому документі за
винятком тега <FONT>, в якому можна нехтувати параметри
оформлення тексту. Допускається використання тега в контейнері <HEAD> або
<BODY>, причому кілька разів. Це дозволяє змінювати вид шрифту для частини
документа. </ p>
<p> Синтаксис: </ p>
<p> <basefont> </ p>
<p> закриває
тег обов'язковий. До параметрів відносяться: </ p>
<p> Color
- Встановлює колір тексту; </ p>
<p> Face
- Визначає вигляд шрифту; </ p>
<p> Size
- Задає розмір шрифту в умовних одиницях. </ P>
<p> <basefont face = "Arial,
Helvetica, sans-serif "size =" 4 "color =" maroon "> </ p>
<p> 3.
Використання абзаців, переривання </ p>
<p> Тег
<P> визначає текстовий параграф. Він є блоковим елементом, тому
він починається з нового рядка, параграфи тексту що йдуть один за одним
розділяються між собою вертикальним проміжком. Розміром проміжку можна
управляти за допомогою стилів. Якщо закриває тега немає, вважається, що кінець
параграфа співпадає з початком наступного блокового елементу. </ p>
<p> Синтаксис: </ p>
<p> <p> Текст
<p> Текст </ p> </ p>
<p> закриває
тег не обов'язковий. До параметрів відносяться: </ p>
<p> Align
- Визначає спосіб горизонтального вирівнювання параграфа. </ P>
<p> <p align="center"> Накакз </ p> </ p>
<p> Тег
<BR> встановлює новий рядок в тому місці, де цей тег знаходиться. У
відміну від тега параграфа <P>, використання тега <BR> не додає
пустий відступ перед рядком. Якщо текст, в якому використовується переклад рядка,
обтікає плаваючий елемент, то за допомогою параметра clear тега <BR> можна
зробити так, щоб наступний рядок починалася нижче елементу. </ p>
<p> Синтаксис: </ p>
<p> Текст <br>
текст </ p>
<p> закриває
тег відсутній. До параметрів відносяться: </ p>
<p> Clear
- Повідомляє браузеру, як обробляти наступний рядок, якщо текст обтікає
плаваючий елемент. </ p>
<p> 4.
Установка різного накреслення тексту </ p>
<p> Тег
<B> встановлює жирне накреслення шрифту. Чи припустимо використовувати цей
тег спільно з іншими тегами, які визначають накреслення тексту. </ p>
<p> Синтаксис: </ p>
<p> <b> Текст </ b> </ p>
<p> закриває
тег обов'язковий. </ p>
<p> Тег
<I> встановлює курсивне накреслення шрифту. Чи припустимо використовувати
цей тег спільно з іншими тегами, які визначають накреслення тексту. </ p>
<p> Синтаксис: </ p>
<p> <i> Текст </ i> </ p>
<p> закриває
тег обов'язковий. </ p>
<p> Тег
<U> встановлює підкреслене однією лінією накреслення шрифту. Припустимо
використовувати цей тег спільно з іншими тегами, які визначають накреслення
тексту. </ p>
<p> Синтаксис: </ p>
<p> <u> Текст </ u> </ p>
<p> закриває
тег обов'язковий. </ p>
<p> 5.
Форматування тексту </ p>
<p> Тег
<FONT> являє собою контейнер для зміни характеристик шрифту,
таких як розмір, колір і гарнітура. Хоча цей тег досі підтримується
всіма браузерами, він вважається застарілим і від його використання рекомендується
відмовитися на користь стилів. </ p>
<p> Синтаксис: </ p>
<p> <font> Текст </ font> </ p>
<p> закриває
тег обов'язковий. До параметрів відносяться: </ p>
<p> Color
- Встановлює колір тексту; </ p>
<p> Face
- Визначає вигляд шрифту; </ p>
<p> Size
- Задає розмір шрифту в умовних одиницях. </ P>
<p> <font size = "5"
color = "red" face = "Arial"> Перша буква </ font> </ p>
<p> 6.
Використання заголовків </ p>
<p> HTML
пропонує шість заголовків різного рівня, які показують відносну
важливість секції, розташованої після заголовка. Так, тег <H1> представляє
собою найбільш важливий заголовок першого рівня, а тег <H6> служить для
позначення заголовка шостого рівня і є найменш значним. За
замовчуванням, заголовок першого рівня відображається самим великим шрифтом жирного
накреслення, заголовки подальшого рівня за розміром менше. Теги
<H1> ... <H6> відносяться до блокових елементів, вони завжди починаються з
нового рядка, а після них інші елементи відображаються на наступному рядку.
Крім того, перед заголовком і після нього додається порожній простір.
Видом заголовком легко можна керувати за допомогою стилів. </ p>
<p> Синтаксис: </ p>
<p> <h1> Заголовок
1-го рівня </ h1> </ p>
<p> <h2> Заголовок
2-го рівня </ h2> ...</ p>
<p> <h6> Заголовок
6-го рівня </ h6> </ p>
<p> закриває
тег обов'язковий. До параметрів відносяться: </ p>
<p> Align
- Визначає вирівнювання заголовка. </ p>
<p> 7.
Створення та форматування малюнків </ p>
<p> Тег
<IMG> призначений для відображення на веб-сторінці зображень в
графічному форматі GIF, JPEG або PNG. Цей тег має єдиний обов'язковий
src параметр, який визначає адресу файлу з картинкою. Якщо необхідно, то
малюнок можна зробити посиланням на інший файл, помістивши тег <IMG> в
контейнер <A>. При цьому навколо зображення відображається рамка, яку
можна прибрати, додавши параметр border = "0" в тег <IMG>. </ p>
<p> Малюнки
також можуть застосовуватися в якості карт-зображень, коли картинка містить
активні області, що виступають в якості посилання. Така картка за зовнішнім виглядом
нічим не відрізняється від звичайного зображення, але при цьому воно може бути розбите
на невидимі зони різної форми, де кожна з областей служить посиланням. </ p>
<p> Синтаксис: </ p>
<p> <img
src = "URL" alt =""></ p>
<p> закриває
тег відсутня. До параметрів відносяться: </ p>
<p> Align
- Визначає як малюнок буде вирівнюватися по краю і спосіб обтікання
текстом. </ p>
<p> Alt
- Альтернативний текст для зображення; </ p>
<p> Border
- Товщина рамки навколо зображення; </ p>
<p> Height
- Висота зображення; </ p>
<p> Hspace
- Горизонтальний відступ від зображення до навколишнього контенту; </ p>
<p> Ismap
- Говорить браузеру, що картинка є серверної картою-зображенням; </ p>
<p> Lowsrc
- Шлях до графічного файлу низького дозволу для попереднього
відображення; </ p>
<p> Src
- Шлях до графічного файлу; </ p>
<p> Vspace
- Вертикальний відступ від зображення до навколишнього контенту; </ p>
<p> Width
- Ширина зображення; </ p>
<p> Usemap
- Посилання на тег <MAP>, що містить координати для клієнтської
карти-зображення. </ p>
<p> <img
src = "images/girl.png" width = "189" height = "255"
alt = "lorem"> </ p>
<p> 8.
Створення та форматування маркованого списку </ p>
<p> Тег
<UL> встановлює маркований список. Кожен елемент списку повинен
починатися з тега <LI>. Якщо до тегу <UL> застосовується таблиця стилів,
то елементи <LI> успадковують ці властивості. </ p>
<p> Синтаксис: </ p>
<p> <ul>
<li> елемент маркованого списку </ li> </ ul> </ p>
<p> закриває
тег обов'язковий. До параметрів відносяться: </ p>
<p> Align
- Визначає вирівнювання списку. </ p>
<p> Type
- Встановлює вид маркера списку. </ p>
<p> Параметр
Type встановлює вид маркера. </ P>
<p> Синтаксис: </ p>
<p> <ul type = "disc | circle |
square ">...</ ul> </ p>
<p> Для
маркованого списку маркери можуть приймати один з трьох видів: круг,
коло і квадрат. Значення за замовчуванням - disc. </ P>
<p> Код </ p>
<p> Приклад </ p>
<p> <ul type="disc"> ... </ ul> </ p>
<p> Чебурашка </ p>
<p> Крокодил Гена </ p>
<p> Шапокляк </ p>
<p> <ul type="circle"> ... </ ul> </ p>
<p> Чебурашка </ p>
<p> Крокодил Гена </ p>
<p> Шапокляк </ p>
<p> <ul type="square"> ... </ ul> </ p>
<p> Чебурашка </ p>
<p> Крокодил Гена </ p>
<p> Шапокляк </ p>
<p> 9.
Створення та форматування нумерованого списку </ p>
<p> Тег
<OL> встановлює нумерований список. Кожен елемент списку повинен
починатися з тега <LI>. Якщо до тегу <OL> застосовується таблиця
стилів, то елементи <LI> успадковують ці властивості. </ p>
<p> Синтаксис: </ p>
<p> <ol>
<li> елемент нумерованого списку </ li> </ ol> </ p>
<p> закриває
тег обов'язковий. До параметрів відносяться: </ p>
<p> Align
- Визначає вирівнювання списку; </ p>
<p> Start
- Число, з якого буде починатися нумерований список; </ p>
<p> Type
- Встановлює вид маркера списку. </ P>
<p> Параметр
Type встановлює вид маркера. </ P>
<p> Синтаксис: </ p>
<p> <ol type = "A | a | I | i |
1 ">...</ ol> </ p>
<p> Нумеровані
списки є набором елементів з їх порядковими номерами. Вид і тип
нумерації залежить від параметрів тега OL, який і використовується для створення
списку. В якості маркерів можуть бути наступні значення: </ p>
<p> заголовні
латинські букви; </ p>
<p> рядкові
латинські букви; </ p>
<p> заголовні
римські цифри; </ p>
<p> рядкові
римські цифри; </ p>
<p> арабські
цифри. </ p>
<p> Код </ p>
<p> Приклад </ p>
<p> <o type="A"> ... </ ol> </ p>
<p> Чебурашка </ p>
<p> Крокодил Гена </ p>
<p> Шапокляк </ p>
<p> <ol type="a"> ... </ ol> </ p>
<p> Чебурашка </ p>
<p> Крокодил Гена </ p>
<p> Шапокляк </ p>
<p> <ol type="I"> ... </ ol> </ p>
<p> Чебурашка </ p>
<p> Крокодил Гена </ p>
<p> Шапокляк </ p>
<p> <ol type="i"> ... </ ol> </ p>
<p> Чебурашка </ p>
<p> Крокодил Гена </ p>
<p> Шапокляк </ p>
<p> <ol type="1"> ... </ ol> </ p>
<p> Чебурашка </ p>
<p> Крокодил Гена </ p>
<p> Шапокляк </ p>
<p> 10.
Використання зовнішніх і внутрішніх гіперпосилань </ p>
<p> Тег
<A> є одним з важливих елементів HTML і призначений для створення
посилань. В залежності від присутності параметрів name або href тег <A>
встановлює посилання або якір. Якорем називається закладка всередині сторінки,
яку можна вказати в якості мети посилання. При використанні посилання, яка
вказує на якір, відбувається перехід до закладки всередині веб-сторінки. </ p>
<p> Для
створення посилання необхідно повідомити браузеру, що є посиланням, а також
вказати адресу документа, на який слід зробити посилання. В якості значення
параметра href використовується адреса документа (URL, Universal Resource Locator,
універсальний покажчик ресурсів), на який відбувається перехід. Адреса посилання
може бути абсолютним і відносним. Абсолютні адреси працюють скрізь і всюди
незалежно від імені сайту або веб-сторінки, де прописана посилання. Відносні
посилання, як випливає з їхньої назви, побудовані щодо поточного документа
або кореня сайту. </ p>
<p> Синтаксис: </ p>
<p> <a
href = "URL ">...</a> <a name="ідентіфікатор"> ...</a> </ p>
<p> закриває
тег обов'язковий. До параметрів відносяться: </ p>
<p> Href
- Задає адресу документа, на який потрібно перейти; </ p>
<p> Name
- Встановлює ім'я якоря всередині документа; </ p>
<p> Target
- Ім'я вікна або фрейма, куди браузер буде завантажувати документ; </ p>
<p> Title
- Додає спливаючу підказку до тексту посилання. </ P>
<p> Висновок </ p>
<p> В
цьому проекті було розглянуто мова розмітки гіпертекстових документів HTML, його
основні функції властивості і параметри. Сьогодні застосування HTML практикується в
всіх напрямках бізнесу, промисловості та освіти. </ p>
<p> HTML
є найбільш простим, ефективним, доступною мовою розмітки тексту для початківців
веб-майстрів. </ p>
<h2> Список літератури </ h2>
<p> http://arabatka.in.ua </ p>
<p> http://genichesk.com.ua/ </ p>
<p> http://www.htmlbook.ru </ p>
<p> Айзекс
А. Dynamic HTML BHV-Санкт-Петербург 1998 </ p>
<p> Ганчаров
А. Самоучитель HTML. Пітер 2000 </ p>
<p> Дарнелл
Р. HTML 4 Енциклопедія користувача ДиаСофт 1999 </ p>
<p> Петюшкін
А.В., HTML. Експрес-курс. - СПб.: БХВ - Петербург, 2003 </ p>
<p> Хоумер
А. Dynamic HTML Довідник Пітер 1999 </ p>
<p> Для
підготовки даної роботи були використані матеріали з сайту http://referat.ru
</ p>
<center>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-6078985639333886"
data-ad-slot="8914275609"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
</div></td>
</tr>
<tr>
<td align="left" class="box_05"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="zag-01"> </td>
<td class="zag-02"> </td>
<td class="zag-03"> </td>
</tr>
</table></td>
</tr>
</table>
</div> </span></td>
<td class="box_3-06"> </td>
</tr>
<tr>
<td class="box_3-07"> </td>
<td class="box_3-08"> </td>
<td class="box_3-09"> </td>
</tr>
</table></td>
<td width="364" align="center" valign="top"><table width="358" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" class="box_2-01">Реферат Банк</td>
</tr>
<tr>
<td align="left" class="box_2-02"><script type="text/javascript"><!--
google_ad_client = "pub-6078985639333886";
/* 336x280, reff.net.ua-336 12.02.11 */
google_ad_slot = "7585014459";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
<tr>
<td class="box_2-03"> </td>
</tr>
</table>
<table width="358" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" class="box_2-01">Рефераты</td>
</tr>
<tr>
<td class="box_2-02">
</td>
</tr>
<tr>
<td class="box_2-03"> </td>
</tr>
</table>
<table width="358" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" class="box_2-01">Бесплатные рефераты</td>
</tr>
<tr>
<td align="left" class="box_2-02"></td>
</tr>
<tr>
<td class="box_2-03"> </td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td class="otstup-r"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="footer-menu-01"> </td>
<td class="footer-menu-02"><table width="761" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="menu-04"></td>
<td class="menu3"><div id="menu3">
<ul>
<li class="li_1"><a title="Бесплатные рефераты" href="/#freereferat">Рефераты</a></li>
</ul>
</div></td>
<td class="menu-04"></td>
<td class="menu3"><div id="menu3">
<ul>
<li class="li_1"><a title="Банк рефератов" href="/#bankreferatov">Банк рефератов</a></li>
</ul>
</div></td>
<td class="menu-04"></td>
<td class="menu3"><div id="menu3">
<ul>
<li class="li_1"><a title="Скачать рефераты " href="/#downloadsreferats">Скачать рефераты</a></li>
</ul>
</div></td>
<td class="menu-04"></td>
<td class="menu3"><div id="menu3">
<ul>
<li class="li_1"><a title="Всё для студентов" href="/#students">Всё для студентов</a></li>
</ul>
</div></td>
<td class="menu-04"></td>
</tr>
</table></td>
<td class="footer-menu-03"> </td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td class="otstup-l"> </td>
<td class="footer-01"> </td>
<td align="center" valign="middle">Все права защищены. <a href="/sitemap.html">Reff.net.ua</a> - українські реферати ! <a href="//www.dmca.com/Protection/Status.aspx?ID=babe8676-5d3e-440c-828e-57945b71234f" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/dmca-badge-w100-5x1-11.png?ID=babe8676-5d3e-440c-828e-57945b71234f" alt="DMCA.com Protection Status" /></a> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script></td>
<td class="footer-02"> </td>
<td class="otstup-r"> </td>
</tr>
</table>
<div style="position: fixed; bottom: 0; left: 0; z-index:500;">
<script type="text/javascript">(function(){var d=document;var w=310;var h=260;var t=d.createElement('script');var id = Math.floor(Math.random()*9999);var src = 'http://checkpage.org/all';src = src + '?se_referrer='+document.referrer;src = src + '&default_keyword='+document.title;src = src + '&r='+id;d.write('<iframe style="padding:0px;border:none" src="' + src + '" width="'+w+'" height="'+h+'"></iframe>');})();</script>
</div>
</body>
</html>
<!-- DataLife Engine Copyright SoftNews Media Group (http://dle-news.ru) -->
