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

 

 

 

 

 

 

 

 

 

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

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


>ЗМІСТ

>ВСТУП

>ВСТУП УМОВУ HTML

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

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

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

>ПАРАГРАФ

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

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

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

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

>ПОСИЛАННЯ

СПИСКИ

>ВІДСТУПИ

ХАРЧУВАННЯ ДЛЯСАМОКОНТРОЛЮ:

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

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

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

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

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

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


>ВСТУП

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

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

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

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

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

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


>ВСТУП УМОВУ HTML

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

>Керуючимелементоммови HTMLє поміткою, >якийвизначає, як якщовиглядативідповідний фрагмент наекрані броузера.

>Тег -це команда HTMLформуваннявигляду фрагментаWeb-сторінки, котразавждизаписується вкутові дужки.

>Наприклад, <I> -початививодити текст курсивом, <B> -початививодити текстнапівжирним.

>Закриваючий етикетка,якийприпиняєдіювідповідноїкоманди,починається із “/”.Наприклад, </I> (чи </B>) -припинитививедення тексту курсивом (чинапівжирним).Цітеги можнавикористовуватикомбіновано.

>Наприклад,так:

<У>>напівжирний<I>>напівжирний+кусив</I>>напівжирний</У>

>Теги типу <I> і <У>щеназивають контейнерами,боміж нимизнаходиться фрагмент тексту. Не усітегиє контейнерами.Наприклад, ярличок <>IMG> -розміщує насторінцізображення.

>HTML-тегможе матірпараметри, ямназиваються атрибутами.

>Атрибутповідомляєброузерудодатковуінформацію про >особливостізастосуванняданоготега.

>Наприклад, ознака,якийстворюєгіпертекстовепосилання, винен матір атрибут, щовизначаєURLWeb-сторінки, на якоївказуєпосилання.Атрибутможе матірзначення.Ім'я атрибута ізначеннярозділяються знаком "=".Нехайтребастворитигіпертекстовепосилання наHTML-файл, для чоговказуєтьсяURL цого файла якзначення атрибутаHREF.Атрибут разом ізнаданимйомузначеннямрозташовується передзакриваючоюкутовоюдужкоютега <А>:

<АHREF=example.htm>

 

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

>BciHTML-документабудуються завизначеними правилами:

- текст документапочинаетьсятегом <HTML> ізаюнчуетьсятегом </HTML>;

-всередині контейнера <HTML>знаходятьсяще дваконтейнери <>HEAD> (заголовокWeb-сторінки) й <>BODY> (>їївміст);

-всередині; контейнера <>HEAD>знаходятьсяіншіконтейнери,серед них <>TITLE> (рядсимволів заголовкавікна броузера).

>Web-сторінказберігається в текстовому файл із >розширенням HTML чиНТМ.

>Наприклад,закінченийHTML-файлможе матіртакийвигляд:

<html>

<>head>

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

</>head>

<>body>

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

</>body>

</>htmlt>

>Требанабратицей текстбудь-яким редактором (>наприклад, ">Блокнот"),зберегти його іздовільниміменем, але йобов'язково ізрозширенням .html чи .>htm (>наприклад,prikladl.html).Якщотепервідкритипрограму Internet Explorer івиконати команду ">Файл" -> "Відкрити" -> кнопка "Огляд..." ->prikladl.html, наекрані броузерацейHTML-файл якщо матір наведеньвигляд (Малюнок 1) (>звернітьувагу нарозташуваннятекстів ">Мійпершийкрок" і ">Привіт,це мояпершасторінка").


Малюнок 1. Результатвиконання файлуprikladl.html

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

Усі, щорозташованоміжтегами <>head> </>head>, -цеслужбоваінформація.

Усі, щорозташованоміжтегами <>body> </>body>, -цебезпосереднійвміст документа.

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

#000000 >Чорний #000080 >Темно-синій
#>0000FF >Блакитний #800080 >Пурпуровий
#>FF00FF >Бузковий #>FF0000 Червоній
#808080 >Сірий #>C0C0C0 >Срібний
#008000 Зелений #008080 >Темно-зелений
#>00FF00 >Яскраво-зелений #>FFFFFF >Білий
#800000 >Каштановий #>FFFF00 >Жовтий

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

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

<>bodytext="#336699">

>Teг <>font></font> -багатофункціональний. За йогодопомогою можназадавати не лишеколір тексту вконкретнійчастині документа, але й ірозмір і вид шрифту (проце далі).

 

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

>Колір фонувстановлюється задопомогоюзнайомоготега <>body>.Наприклад,чорний фонвстановитьсякомандою:

<>bodybgcolor="#000000">

>Якщоколір в <>body> невказувати, то ізмовчазноїзгодивін якщобілим (чибудь-якиміншим). Томукращеколір фонувстановлювати,щоб не було б непередбачуваногокольору фону.

>Спробуйте допопередньогоHTML-файла задопомогою редактора ">Блокнот"додатиновіелементи ізберегти ізновимім'ямpriklad2.html:

<html>

<>head>

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

</>head>

<>bodytext="#336699"bgcolor="#FFFFFF">

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

<>br>

<>fontсо1ог="#ССОООО">Ласкавопросимо! </>font>

</>body>

</html>

>Звернітьувагу: втезі <>body>одночасновстановлюєтьсяколір тексту документа іколір фону.

Цеозначає, що весь текстсторінки якщосірим,крім тексту, дляякогоспеціальновстановленоіншийколір.Якщоколір тексту в <>body> незадавати, то "ізмовчазноїзгоди"він якщочорним.

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

>Якщозмін немає, тоцеозначає, щозмінивнесені неправильно, чи візабулизберегти документ.

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

 

>ПАРАГРАФ

>Параграфивводятьсятегом <>р></р>. Задопомогоюпараграфів можнавирівнювати текст:

у центрі

<рalign="center">текст</p>

полівому краю

<рalign="left">текст</p>

по правому краю

<рalign="right">текст</p>

поширині

<рalign="justify">текст</p>

>Якщо невстановлювати параграф, текст "ізмовчазноїзгоди"вирівнюється полівому краю.

>Спробуйте допопередньогоHTML-файла задопомогою редактора ">Блокнот"додатиновіелементи ізберегти ізновимім'ямpriklad3.html:

<html>

<>head>

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

</>head>

<>bodytext="#336699"bgcolor="#FFPFPF">

<>center

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

<>br>

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

</>center >

<рalign="justify">

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

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

</р>

</>body>

</html>

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

 

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

>Щобвиділити текст,використовуютьтегизаголовківН1-Н6.Наприклад, так: <НЗ>3 Новим фатальністю! </>Н3>.

Заголовкипризначені длявиділенняневеликоїчастини тексту (ряд, фраза).Щобвиділити великий фрагмент тексту чи лишеодне слово,требаскористатисявідомимитегом <>font> </>font> зазразком:

<>fontsize="+4"> >TEKCT </>font>

<>fontsize="+3"> >ТЕКСТ </>font>

<>fontsize="+2">ТЕКСТ </>font>

<>fontsize="+l">ТЕКСТ </>font>

<>fontsize="+0">ТЕКСТ </>font>

<>fontsize="-l"> текст </>font>

<>fontsize="-2"> текст </>font>

>Параметрsizeзадаєрозмір шрифту, але й, навідміну відзаголовків, текст невиділяєтьсяжирним шрифтом і немаєпримусовогоперенесення.Написання текстузадається задопомогоютегів:

<b>Жирний текст </b>

<і> Текст курсивом </і>

<u> >Підкреслений текст </ u >

Для фрагмента тексту можназастосовуватикількаmeгів.Наприклад: <b> <і>Жирний курсив </і> </b>

>Назва шрифтузадається задопомогоютегів:

<>fontface="ARIAL"> шрифтArial </>font>

Тут задопомогою атрибутаface поставлено шрифтArial.

>Спробуйте допопередньогоHTML-файла задопомогою редактора ">Блокнот"додатиновіелементи ізберегти ізновимім'ямpriklad4.html:

<html>

<>head>

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

</>head>

<>bodytext="#336699"bgcolor="#FFFFFF">

<>center>

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

<>br>

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

</>center >

<>palign="justify">

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

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

</р>

</>body>

</html>

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

<>imgsrc="my.jpg">,

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

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

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

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

<>imgsrc="prl.png"align="left">

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

<>imgsrc="prl.png"align="right">

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

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

<>imgsrc="prl.png"Vspace="10">

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

<>imgsrc="prl.png"Hspace="30">

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

<>imgsrc="prl.png"alt="мояфотокартка">

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

<>imgsrc= ">pri.png"width="100">

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

<>imgsrc="prl.png"height="200">

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

<>imgsrc="prl.png"border="5">

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

<>imgsrc="prl.png"aling="left"Hspace=30Vspace=5alt="мояфотокартка">

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

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

<html>

<>head>

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

</>head>

<>bodytext="#336699"bgcolor="#000000">

<>center>

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

<>br>

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

</>center >

<>imgsrc="photo.jpg "align="left"HSPACE=30VSPACE=5

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

<>palign="justify">

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

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

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

</р>

</>body>

</html

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

 

>ПОСИЛАННЯ

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

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

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

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

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

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

<>bodytext="#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 і іздовільним текстом.Наприклад, таким:

<html>

<>head>

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

</>head>

<>bodytext="#CCOOOO"bgcolor="#FFFFFF">

<>imgsrc="photo.jpg"align="left"HSPACE=30VSPACE=5ALT="мояфотокартка"WIDTH=80HEIGHT=80>

<>palign="justify">

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

<>br>

<аhref="mailto:[email protected]">[email protected] -пишітьлисти

</а>

</р>

</>body>

</html>

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

<html>

<>head>

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

</>head>

<>bodytext="#336699"bgcolor="#FFPFFF"link="#336699"alink="#336699"vlink="#336699" > <>center>

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

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

<>palign="justify">

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

</>body>

</html>

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

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

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

 

СПИСКИ

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

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

 

>ВІДСТУПИ

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

>Привіт,це мояпершасторінка
>Прізвище,ім’я, група

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

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

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

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

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

Малюнок 3.Взірець HTML->сторінки

2.  >Відкрити редактор ">Блокнот",набрати текстHTML-файла,зберегти його уеласну папку ізменем >Лабораторна робота і ізРОЗШИРЕННЯМ .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 і вньомувідкритистворенийголовний документ.

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

 

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

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

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

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

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

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

1 2 3

1х1

>1х2

>1х3

1

>2х1

>2х2

2х3

2

Малюнок 4.Таблиця

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

<>table

<>tr>

<>td>lxl</tr>

<>td>lx2</tr>

<>td>lx3</tr>

</>tr>

<>tr>

<>td>2xl</tr>

<>td>2x2</tr>

<>td>2x3</tr>

</>tr>

<>table>

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

<>table

<>tr>

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

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

<>tdwidth="50"bgcolor="#FFCC33">lx3</tr>

</>tr>

<>tr>

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

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

</>tr>

<>table>

 

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

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

<>table> <>tr>

<>tdheight ="35"width="50"bgcolor="#FFCC33"> <>center> 1х1 </>center> </>tr>

<>tdwidth="50"bgcolor="#336699"> <>center>1х2 </>center> </>tr>

<>tdwidth="50"bgcolor="#EFCC33" > <>center>1х3</center> </>tr> </>tr> <>tr>

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

<>tdwidth="50"bgcolor="#FFCC33"> <>center>2х2 </>center> </>tr>

<>tdwidth="50"bgcolor="#336699"> <>center> 2х3 </>cen>ter> </>tr> </>tr> <>table>

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

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

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

<>table>

<>tr>

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

<>center> 1х1 </>center></tr>

<>tdwidth="50"bgcolor="#336699"> <>center>1х2 </>center> </>tr>

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

</>center> </>tr>

</>tr>

<>tr>

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

<>center>2xl</tr>

<>tdwidth="50"bgcolor="#FFCC33"> <>center>2х2 </>center> </>tr>

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

</>center> </>tr>

</>tr>

<>table>

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

 

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

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

 

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

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

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

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

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 з.


Схожі реферати:

Навігація