ВСТУП В МОВУ HTML

Можливо Вам цього мало, Ви не зупинитесь на досягнутому і будете розширяти Ваш сайт, удосконалювати, збагачувати. Тоді вам стане у пригоді додаткова література по створенню сайтів (html.manual.ru, www.postroika.ru)

СТВОРЕННЯ ПРОСТОЇ WEB-СТОРІНКИ

 

Методичні вказівки, вправи, лабораторні роботи, питання для самоконтролю

 


ЗМІСТ

 

ВСТУП

ВСТУП В МОВУ HTML

СТРУКТУРА HTML-ДОКУМЕНТА

ВСТАНОВЛЕННЯ КОЛЬОРУ ТЕКСТУ

ВСТАНОВЛЕННЯ КОЛЬОРУ ФОНУ

ПАРАГРАФ

СТВОРЕННЯ ЗАГОЛОВКА

ПИТАННЯ ДЛЯ САМОКОНТРОЛЮ

ГРАФІКА I ПОСИЛАННЯ НА WEB-СТОРІНЦІ

ВСТАВКА МАЛЮНКІВ

ПОСИЛАННЯ

СПИСКИ

ВІДСТУПИ

ПИТАНИЯ ДЛЯ САМОКОНТРОЛЮ:

КОМПЛЕКСНА ЛАБОРАТОРНА РОБОТА "СТВОРЕННЯ HTML-ФАЙЛА"

ОФОРМЛЕНИЯ ТАБЛИЦЬ

ВИРІВНЮВАННЯ ВМICТУ КОМІРОК

ФОРМАТУВАННЯ КОМІРОК

ПІДСУМКОВА ЛАБОРАТОРНА РОБОТА "ВЛАСНА WEB-СТОРІНКА"

СПИСОК ЛІТЕРАТУРИ


ВСТУП

 

Web-сторінка - це створений за допомогою мови HTML текстовий файл, який можна відобразити у вікні Web-броузера.

Для створення i редагування HTML-файла можна скористатися будь-яким текстовим редактором. Якщо HTML-файл відкрити за допомогою засобів перегляду, наприклад, Internet Explorer, він відображає текст, графіку i гіперпосилання на інші Web-сторінки.

Гіперпосилання - це фрагменти тексту або зображення на Web-сторінці, які дозволяють клацанням на них відкривати інші Web-сторінки.

Гіперпосилання виглядає, як підкреслений текст. Курсор миші на гіперпосиланні набуває форми руки. При клацанні на гіперпосиланні відкривається зв'язаний з ним документ. Якщо е доступ до Internet, гіперпосилання на Web-вузли відкриють Internet Explorer i доступ до відповідного Web-вузла. Гіперпосилання дають можливість користувачу переходи на Web-сторінках вад одного матеріалу до іншого.

Користувачі WWW можуть не тільки переглядати чужі Web-сторінки, але и створювати свої. Щоб створювати Web-сторінки, нема необхідності вивчати мову HTML. Можна конвертувати у Web-сторінки документи, створенні за допомогою текстового процесора Word, або за допомогою засобу Prints Page Express, що є в складі Windows'98.

Проте конвертуванні документи містять, як правило, багато зайвих чи нераціонально використаних елементів, що значно сповільнює роботу з ними, особливо в умовах несучасних каналів зв'язку.


ВСТУП В МОВУ HTML

Мова HTML (мова гіпертекстової розмітки) призначена для опису Web-сторінок i не є мовою програмування. Вона призначена для розмітки текстових… Керуючим елементом мови HTML єтег, який визначає, як буде виглядати… Тег - це команда HTML формування вигляду фрагменту Web-сторінки, яка завжди записується в кутові дужки.

СТРУКТУРА HTML-ДОКУМЕНТА

Bci HTML-документа будуються за визначеними правилами: §текст документа починаеться тегом <HTML> i заюнчуеться тегом… §всередині контейнера <HTML> знаходяться ще два контейнери <HEAD> (заголовок Web-сторінки) і <BODY>…

ВСТАНОВЛЕННЯ КОЛЬОРУ ТЕКСТУ

  Наведемо кілька базових кольорів HTML.  

ВСТАНОВЛЕННЯ КОЛЬОРУ ФОНУ

Колір фону встановлюється за допомогою знайомого тега <body>. Наприклад, чорний фон встановиться командою: <body bgcolor="#000000"> Якщо колір в <body> не вказувати, то з мовчазної згоди він буде білим (або будь-яким іншим). Тому краще колір…

ПАРАГРАФ

Параграфи вводяться тегом <р></р>. За допомогою параграфів можна вирівнювати текст: по центру <р align="center">текст</p>

Lt;center

Привіт, це моя перша сторінка.

<br>

<font color="#CCOOOO"> Ласкаво просимо! </font>

</center >

<р align="justify">

Шановний колего! Я вивчаю мову HTML, щоб створити власну домашню Web-сторінку для спілкування з друзями i знайомими.

Щоб вони могли подивитися мою фотокартку, прочитати про мене, написати кілька рядків в мою книгу для гостей.

</р>

</body>

</html>

Рекомендується за допомогою броузера переглянути цей HTML-файл, для чого досить двічі клацнути на його піктограмі. Можна встановлювати інші вирівнювання тексту i подивитися результат.

СТВОРЕННЯ ЗАГОЛОВКА

Щоб виділити текст, використовують теги заголовків Н1-Н6. Наприклад, так: <НЗ>3 Новим роком! </Н3>. Заголовки призначені для виділення невеликої частини тексту (рядок, фраза).… <font size="+4">TEKCT </font>

Питання для самоконтролю

2. Що таке "гіперпосилання"? Який воно має вигляд i як ним користуватися? 3. Що таке "тег"? Для чого теги використовуються? 4. Яку структуру має HTML-документ?

ГРАФІКА I ПОСИЛАННЯ НА WEB-СТОРІНЦІ

Вставка малюнків

<img src="my.jpg">, де my.jpg -ім'я файла, що містить малюнок. Замість my.jpg можна вставити ім'я… Якщо малюнок знаходиться в іншій папці, то його краще переписати в папку, де знаходиться HTML-документ.

Lt;img src="photo.jpg " align="left" HSPACE=30 VSPACE=5

<p align="justify"> <font size="+2"> Шановний колего !</font> Я вивчаю… мову HTML, </font> щоб створити власну<i> домашню Web-сторінку</i> для спілкування з друзями i…

ПОСИЛАННЯ

Web-сторінка може складатися із кількох документів. Один з них головний з ім'ям index.html або main.html - він відкривається першим i повинен… Інші документи можна називати як завгодно (наприклад, photos.html,… Посиланням на інші документи як частини нашої Web-сторінки може бути текст або малюнок.

СПИСКИ

 

Списки маркуються за допомогою тега <li> </li> за взірцем:

 

Маркер Опис
· <li type="disk"> Задуйвітер </li>
o <li type="circle"> Макогоненко </li>
§ <li type="square"> Петренко </li>

ВІДСТУПИ

Для встановлення одного, двох i трьох відступів використовується тег <ul> </ul> за зразком: <ul> один ввдступ </ul> <ul> <ul> два ввдступи </ul></ul>

ОФОРМЛЕНИЯ ТАБЛИЦЬ

Для раціонального розподілу площі сторінки між її текстовими i графічними фрагментами використовують таблиці. Таблиця задається тегом <table> </table>. Рядки таблиці задаються тегом <tr> </tr>.

ВИРІВНЮВАННЯ ВМICТУ КОМІРОК

Щоб вирівняти вміст комірок таблиціпо горизонталі, треба вище наведений текст редагувати таким чином: <table> <tr> <td height ="35" width="50" bgcolor="#FFCC33"><center> 1х1 </center>…

ФОРМАТУВАННЯ КОМІРОК

Параметр colspan визначае кількість стовпчиків, параметр rowspan визначае кількість рядків, на які простягається дана комірка. ПІДСУМКОВА ЛАБОРАТОРНА РОБОТА "ВЛАСНА WEB-СТОРІНКА"  

СПИСОК ЛІТЕРАТУРИ

1. Шестопалов Є.А. Internet для початківця. Посібник з інформатики, Книга 8. 2003 – 96 с. 2. Петюшкин А. Книга Профессиональное программирование HTML в Web-дизайне,… 3. Сергеев А. Книга HTML и XML. Профессиональная работа, "Вильямс", 2004 г., 880 с