Каталог Рефератов - Створення простої web-сторінки - скачать рефераты, бесплатно рефераты

	Информационно-образоательный портал
	Рефераты, курсовые, дипломы, научные работы,



МЕНЮ\|

поиск

Створення простої web-сторінки

lt;/р>

</body>

</html>

Якщо за допомогою броузера переглянути цей HTML-файл, двічі клацнувши на його піктограмі, на екрані він буде мати наведений вигляд (Рисунок 2) (зверніть увагу на розміри i написання шрифтів текстів "Привіт, це моя перша сторінка", "Ласкаво просимо!" i "Шановний колего!...", а також інші фрагменти тексту).

Рисунок 2. Результат виконання файлу priklad4.html

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

1. Якою мовою створюється Web-сторінка i яким чином відображується?

2. Що таке "гіперпосилання"? Який воно має вигляд i як ним користуватися?

3. Що таке "тег"? Для чого теги використовуються?

4. Яку структуру має HTML-документ?

5. Як відобразити на екрані HTML-документ?

6. Як мовою HTML встановити колір тексту?

7. Яким тегом одночасно встановити колір тексту i фону?

8. Як вирівняти текст по центру, по ширині, по лівому або правому краю?

9. Якими засобами мови HTML виділити фрагменти тексту?

10. Якими засобами мови HTML задати написання тексту або (i) вид шрифту?

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

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

Щоб вставити малюнок, треба скористатися тегом:

<img src="my.jpg">,

де my.jpg -ім'я файла, що містить малюнок. Замість my.jpg можна вставити ім'я будь-якого іншого малюнка (з розширенням jpg, gif, png, bmp). Головне, щоб між лапками стояв шлях та ім'я файла малюнка (у наведеному прикладі малюнок знаходиться в одній папці з файлом HTML-документа).

Якщо малюнок знаходиться в іншій папці, то його краще переписати в папку, де знаходиться HTML-документ.

Для "співіснування" малюнка (наприклад, pr1.png) i тексту документа використовують теги:

малюнок з лівого краю, текст його обтікає справа:

малюнок з правого краю, текст його обтікає зліва:

Kpiм параметрів align, існують ще кілька параметрів:

відстань між текстом i мапюнком по вертикалі (тут 10 пікселів):

відстань між текстом i малюнком по горизонталі (30 пікселів):

опис малюнка (якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст - тут "моя фотокартка"):

ширина малюнка (тут 100 пікселів):

висота малюнка (тут 200 пікселів):

рамка навколо малюнка (тут товщина лінії 5 пікселів):

Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:

Малюнок буде притиснутий до лівого краю екрана, текст буде його обтікати справа, ввдстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів, при встановленні курсору миші на малюнку з'явиться напис "моя фотокартка".

Спробуйте в папку з HTML-файлом переписати довільний малюнок (наприклад, з ім'ям photo.jpg). В HTML-файл за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad5.html:

<html>

<head>

<title> Мій перший крок </title>

</head>

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

<br>

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

</center >

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

alt="моя фотокартка" WIDTH=80 HEIGHT=80>

<font size="+2"> Шановний колего !</font> Я вивчаю <font size="+l">

мову HTML, </font> щоб створити власну <i> домашню Web-сторінку</i> для спілкування з друзями i знайомими. Щоб вони могли <b> <i>подивитися мою фотокартку, </i> </b> прочитати про мене, написати

кілька рядків в мою <u> книгу для гостей. </u>

</р>

</body>

</html

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

ПОСИЛАННЯ

Web-сторінка може складатися із кількох документів. Один з них головний з ім'ям index.html або main.html - він відкривається першим i повинен обов'язково лежати на вашему сайті в Internet.

Інші документи можна називати як завгодно (наприклад, photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.htmi). Kpaщe, шоб вони знаходились в одній nanui з HTML-документом.

Посиланням на інші документи як частини нашої Web-сторінки може бути текст або малюнок.

Нехай в тай же папці з головним документом index.html створено новий текстовий документ (наприклад, з ім'ям prf.html). Вміст документа може бути довільним i мати вашу фотокартку. Для цього випадку в основному документі фразу "подивитися мою фотокартку" можна зробити посиланням. Тег посилання на цей документ буде виглядати так:

<а href="prf.html"> подивитися мою фотокартку </а>

Щоб встановити колір посилання, треба доповнити вже ввдомий тег <body> новими параметрами:

<body text="#336699" bgcolor="#FFFFFF"

link="#339999" alink="#339999" vlink="#339999">

(link - колір посилання, alink - колір активного посилання, vlink -колір посилання, яке відвідували).

Тут кольори всі однакові, але вони можуть бути і різними.

Посилачия на поштову скриньку записусгься за зразком:

<а href=mailto:lab3@hirup.km.ua> Lab3@hirup.km.ua - пишітъ листи </а>

Спробуйте в папці з головним документом створити додатковий HTML-файл з ім'ям prf.html i з довільним текстом. Наприклад, таким:

<html>

<head>

<title> друга сторінка </title>

</head>

На фотокартці я. Можемо стати друзями, якщо вам сподобалась мояособа.

<br>

<а href="mailto:Lab3@hirup.km.ua"> Lab3@hirup.km.ua - пишіть листи

</а>

</р>

</body>

</html>

У файл priklad5.html за допомогою редактора "Блокнот" додайте нові елементи i збережіть з новим ім'ям index.html:

<html>

<head>

<title> Мій перший крок </title>

</head>

<H3>Привіт, це моя перша сторшка</НЗ> <br>

<font color="cc0000"> <H1>Ласкаво просимо !</H1></font> </center>

<font size="+2"> Шановний колего! </font> Я вивчаю <font size="+l"> мову HTML,</font> щоб створити власну <i>домашню Web-сторінку </i> для спілкування з друзями i знайомими. Щоб вони могли <а href="prf.html"> подивитися мою фотокартку </а>, прочитати про мене, написати кілька рядків в мою книгу для гостей. </р>

</body>

</html>

Можна за допомогою броузера переглянути файл основного документа index.html, двічі клацнувши на його піктограмі.

Щоб перейти на додаткову Web-сторінку, досить встановити курсор на посилання "подивитися мою фотокартку" i клацнути.

Щоб повернутся на сторінку основного документа, треба на панелі інструментів броузера натиснути кнопку "Назад".

СПИСКИ

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

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

ВІДСТУПИ

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

<ul> один ввдступ </ul>

<ul> <ul> два ввдступи </ul></ul>

<ul> <ul><ul> три ввдступи </ul></ul></ul>

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

1. Як у Web-сторінку вставити малюнок?

2. Як встановити обтікання мапюнка текстом?

3. Як встановити відстань між текстом i малюнком?

4. Як встановити горизонтальні i вертикальні розмфи малюнка?

5. Як створити посилання на інший документ?

6. Як записати посилання на поштову скриньку?

7. Яке ім'я повинен мати головний документ?

8. Як створити список і вибрати маркер для нього?

9. Як зробити один, два або три відступи?

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

Виконати такі дії:

1. На листку паперу або в зошиті написати текст HTML-файла для створення Web-сторінки за наведеним взірцем (без списку).

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

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

Ось перші прізвища гостей в цій книзі:

o Іваненко Іван

o Петренко Петро

o Сидоренко Микола

Рисунок 3. Взірець HTML-сторінки

2. Відкрити редактор "Блокнот", набрати текст HTML-файла, зберегти його у еласну папку з менем Лабораторна робота i з РОЗШИРЕННЯМ .HTML.

3. Відкрити програму Internet Explorer, переглянути у власній nanці створений HTML-файл, виправити можливі помилки. Закрити Internet Explorer.

4. В текст файла Лабораторна робота.HTML додати список згідно взірця, зберегти його у еласну папку з тим самим іменем.

5. Програмою Internet Explorer переглянути відредагований HTML-файл, виправити молсливі помилки. Закрити програму Internet Explorer.

6. Зняти на сканері фотокартку або створити своє зображення графічним редактором, зберегти файл у власну папку.

7. Створити HTML-файл додаткового документа з довільним іменем, де розмістити файл свого зображення.

8. Ввести на додаткову сторінку електронну адресу свою або свого навчального закладу.

9. Відкрити програму Internet Explorer, переглянути створений HTML-файл додаткового документа, виправити можливі помилки. Закрити програму Internet Explorer.

10. В тексті HTML-файла головного документа створити посилання "подивитися мою фотокартку" на додатковий документ.

11. Завантажити броузер Internet Explorer i в ньому відкрити створений головний документ.

12. Здійснити перехід у додатковий документ за допомогою посилання. Повернутися на головну сторінку. Закрити програму Internet Explorer. Закрити eci програми i папки.

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

Для раціонального розподілу площі сторінки між її текстовими i графічними фрагментами використовують таблиці.

Таблиця задається тегом <table> </table>.

Рядки таблиці задаються тегом <tr> </tr>.

Стовпчики таблиці задаються тегом <td> </td>.

Нехай потрібно створити таблицю з двома рядками i трьома стовпчиками наведеного виду i наповнення (Рисунок 4).

1	2	3
1х1	1х2	1х3	1
2х1	2х2	2х3	2

Рисунок 4. Таблиця

Для створення цієї таблиці необхідно набрати такий текст (спечатку задаються рядки):

<table

<tr>

</tr>

<tr>

</tr>

<table>

Щоб у вздповвдних комірках таблиці задати колір фону (параметр bgcolor), висоту (height) i ширину (width) комірок таблиці в пікселях, треба вище наведений текст доповнити таким чином:

<table

<tr>

<td height ="35" width="50" bgcolor="#FFCC33">lxl</tr>

<td width="50" bgcolor="#336699">1x2</tr>

<td width="50" bgcolor="#FFCC33">lx3</tr>

</tr>

<tr>

<td height ="35" width="50" bgcolor="#336699">2xl</tr:>

<td width="50" bgcolor="#FFCC33">2x2</tr> <td width="50" bgcolor="#336699">2x3</tr>

</tr>

<table>

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

Щоб вирівняти вміст комірок таблиці по горизонталі, треба вище наведений текст редагувати таким чином:

<td height ="35" width="50" bgcolor="#336699"> <center>,2xl</tr>

В кожній комірці таблиці може знаходитись текст, малюнки i навігь вкладені таблиці. Їх вміст форматусться за допомогою вже відомих тегів. Кожна комірка таблиці є ніби окрема кімната, тому теги для центрування в попередньому прикладі довелось писати для кожної комірки.

Вирівнювання по вертикалі виконуеться за допомогою атрибута valign="middle" (top, bottom) - посередині комірки (зверху, знизу).

Щоб вирівняти вміст комірок таблиці по вертикалі треба вище наведений текст редагувати таким чином:

<table>

<tr>

<td height ="35" width="50" bgcolor="#FFCC33" valign="top" >

<td width="50" bgcolor="#FFCC33" valign="bottom" > <center> 1х3

</center> </tr>

</tr>

<tr>

<td height ="35" width="50" bgcolor="#336699" valign="bottom" >

<td width="50" bgcolor="#336699" valign="top" > <center> 2х3

</center> </tr>

</tr>

<table>

Тут параметр valign встановлено не для всіх комірок, щоб можна було побачити різницю у вирівнюванні вмісту комірок.

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

Параметр colspan визначае кількість стовпчиків, параметр rowspan визначае кількість рядків, на які простягається дана комірка.

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

1. Створити власну Web-сторінку. Як взірець можна взяти любий особистий сайт,знайдений Вами у Internet

2. Розробити дизайн сайту, розмістити інформацію на Web-сторінці. Застосувати на cmopінці шрифты різного типу, розміру i кольору.

3. Розмістити на стортщ довшьні фотокартки i малюнки.

4. Створити на головній сторінці посилання на додаткові сторінки.

5. На додаткових сторінках розмістити відомості про cебе, друзів тощо.

6. Зберегти Web-сторінку у власній nanці.

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

1. Шестопалов Є.А. Internet для початківця. Посібник з інформатики, Книга 8. 2003 - 96 с.

2. Петюшкин А. Книга Профессиональное программирование HTML в Web-дизайне, "БХВ-Петербург", 2004 г., 400 с

3. Сергеев А. Книга HTML и XML. Профессиональная работа, "Вильямс", 2004 г., 880 с

4. Петюшкин А. Книга HTML в Web-дизайне, "БХВ-Петербург", 2004 г., 400 с

5. Дригалкин В. Книга HTML в примерах. Как создать свой Web-сайт. Самоучитель, "Вильямс", 2003 г., 192 с.

Страницы: 1, 2

© 2003-2013
Рефераты бесплатно, курсовые, рефераты биология, большая бибилиотека рефератов, дипломы, научные работы, рефераты право, рефераты, рефераты скачать, рефераты литература, курсовые работы, реферат, доклады, рефераты медицина, рефераты на тему, сочинения, реферат бесплатно, рефераты авиация, рефераты психология, рефераты математика, рефераты кулинария, рефераты логистика, рефераты анатомия, рефераты маркетинг, рефераты релиния, рефераты социология, рефераты менеджемент.