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

Посмотреть архив целиком










СТВОРЕННЯ ПРОСТОЇ 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 не є мовою програмування. Вона призначена для розмітки текстових документів, тобто для їх форматування. Всі Web-сторінки, які є в Internet, створені за допомогою мови HTML.

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

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

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

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

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

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

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

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

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

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

<А HREF=example.htm>


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


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

  • текст документа починаеться тегом i заюнчуеться тегом ;

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

  • всередині; контейнера знаходяться інші контейнери, серед них (рядок символів заголовка вікна броузера).</span></font></font></font></font></p> </ul> <p lang="ru-RU" align="justify" class="western CL_3"> <font face="Times New Roman, serif"><font size="2" class="CL_4"><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="uk-UA"><i>Web-сторінка зберігається в текстовому файл з</i></span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="uk-UA"><i><u> </u></i></span></font></font><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="uk-UA"><i>розширенням HTML або НТМ.</i></span></font></font></font></font></p> <p lang="ru-RU" align="justify" class="western CL_3"> <font face="Times New Roman, serif"><font size="2" class="CL_4"><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="uk-UA">Наприклад, закінчений HTML-файл може мати такий вигляд:</span></font></font></font></font></p> <p lang="ru-RU" align="justify" class="western CL_3"> <font face="Times New Roman, serif"><font size="2" class="CL_4"><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US"><html></span></font></font></font></font></p> <p lang="ru-RU" align="justify" class="western CL_3"> <font face="Times New Roman, serif"><font size="2" class="CL_4"><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US"><head></span></font></font></font></font></p> <p lang="ru-RU" align="justify" class="western CL_3"> <font face="Times New Roman, serif"><font size="2" class="CL_4"><font face="Times New Roman, serif"><font size="4" class="CL_2"><span lang="en-US"><title>Mій перший крок

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

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


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


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

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

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

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


    #000000

    Чорний

    #000080

    Темно-синій

    #0000FF

    Блакитний

    #800080

    Пурпуровий

    #FF00FF

    Бузковий

    #FF0000

    Червоний

    #808080

    Сірий

    #C0C0C0

    Срібний

    #008000

    Зелений

    #008080

    Темно-зелений

    #00FF00

    Яскраво-зелений

    #FFFFFF

    Білий

    #800000

    Каштановий

    #FFFF00

    Жовтий


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


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

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


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


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

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

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

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

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

    <br>

    Ласкаво просимо!

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

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

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

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

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


    ПАРАГРАФ


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

    по центру

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

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

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

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

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

    по ширині

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

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

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

    Mій перший крок

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


    Ласкаво просимо!

    <р align="justify">

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

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

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


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


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

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

    TEKCT

    size="+3"> ТЕКСТ

    ТЕКСТ

    size="+l"> ТЕКСТ

    ТЕКСТ

    текст

    текст ont>

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

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

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

    Підкреслений текст

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

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

    шрифт Arial

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

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

    Mій перший крок

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


    Ласкаво просимо!

    > Шановний колего! Я вивчаю мову

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

    Якщо за допомогою броузера переглянути цей 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-СТОРІНЦІ


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

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

    ,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Мій перший крок

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


    <H1> Ласкаво просимо! H1>

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

    Шановний колего ! Я вивчаю

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

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

    Рекомендуеться за допомогою-броузера переглянути цей 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"> подивитися мою фотокартку

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

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

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

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

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

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

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

    друга сторінка

    моя фотокартка

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


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

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

    Мій перший крок

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

    <H1>Ласкаво просимо !H1>

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

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

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

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


    СПИСКИ


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


    Маркер

    Опис

  • Задуйвітер

  • Макогоненко

  • Петренко

  • ВІДСТУПИ


    Для встановлення одного, двох i трьох відступів використовується тег

    за зразком:

      один ввдступ

        два ввдступи l>

            три ввдступи


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

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

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

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

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

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

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

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

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

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


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


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

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


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

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

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

        • Іваненко Іван

        • Петренко Петро

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

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


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

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

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

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

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

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

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

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

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

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

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


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


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

      Таблиця задається тегом

      .

      Рядки таблиці задаються тегом