- •1 Мета і завдання дисципліни
- •2 Програма курсу
- •3 Методичні рекомендації до лабораторних занять. Вимоги до написання і оформлення лабораторних робіт
- •Лабораторне заняття №1-2. Робота в мережі Інтернет. Розробка структури персонального веб-сайту
- •Лабораторне заняття № 3-4. Створення персонального веб-сайту з використанням шаблонів та конструктора системи Narod.Ru
- •Лабораторні роботи №1-2
- •Лабораторні роботи №3-4
- •Лабораторна робота №5
- •4 Перелік питань та вимоги до оформлення аудиторних контрольних робіт для студентів заочної форми навчання
- •Варіанти контрольних робіт
- •5 Перелік питань, які виносяться на залік
- •Перелік рекомендованих джерел
Лабораторні роботи №3-4
ТЕМА: Створення персонального веб-сайту за допомогою мови HTML в системі безкоштовного хостингу narod. ru .
МЕТА: уміти створити персональний веб-сайт, використовуючи теги мови HTML в системі безкоштовного хостингу narod. ru.
ПЛАН РОБОТИ:
1 Ознайомитися з принципами використання мови HTML.
2 Створити персональну веб-сторінку у текстовому редакторі Блокнот, використовуючи теги мови HTML.
3 Завантажити створені HTML-документи в систему безкоштовного хостингу narod.ru.
4 Створити гіперзв’язки між веб-сторінками, використовуючи можливості системи narod.ru та перевірити їх роботу.
5 Проаналізувати візуальну та змістову складові створеного сайту та відредагувати його.
6 Звернутися до інших студентів з проханням критично оцінити проведену роботу. Ще раз перевірити ефективність роботи сайту та відредагувати його.
7 Створити звіт за результатами виконання лабораторної роботи і оформити його у відповідності до встановлених вимог.
ТЕОРЕТИЧНІ ВІДОМОСТІ
Типовий простий веб-документ складається з текстових блоків, двох-трьох малюнків невеликих розмірів, горизонтальних ліній та гіперпосилань. Складніші веб-документи містять фрейми (вкладені веб-сторінки), таблиці, елементи керування (кнопки, перемикачі, поля діалогу), динамічні ефекти та графічні об’єкти.
Є три типи текстових блоків: короткі (по 2-3 речення) текстові абзаци, списки, таблиці.
Згідно з прийнятим стандартом абзаци на веб-сторінці розмежовуються порожнім рядком і не мають відступів у першому рядку. Абзац може бути вирівняний до одного з країв або до центру екрана. Особлива зручність перегляду інформації зумовлена тим, що в нормальному режимі на веб-сторінці немає горизонтальної смуги прокручування, а лише вертикальна. Браузер автоматично масштабує горизонтальне зображення різних елементів сторінки, враховуючи характеристики монітора комп’ютера клієнта і розміри вікна, в якому масштабується документ. Інформація на сторінці автоматично подається на сірому чи білому фоні, але її можна розмістити і на кольоровому фоні чи на фоні картинки з деякого графічного файлу.
Для створення веб-сторінок веб-дизайнери застосовують гіпертекстові веб-редактори, наприклад, HotMetal PRO, Hot Dog Professional, Netscape Editor тощо, де використовується мова HTML. Сучасні редактори FrontPage і MS Word дають змогу створювати веб-сторінки методом конструювання без застосування кодів мови HTML, оскільки коди вони генерують автоматично. Для підготовки html-файлу можна використати текстовий редактор Note Pad. Після написання файл потрібно зберегти на диску з деякою назвою з розширенням htm чи html. Текст мовою HTML має таку загальну структуру:
<HTML>
<HEAD>
<TITLE> Назва вікна веб-сторінки </TITLE>
</HEAD>
<BODY параметри>
Мене звати… Я хочу стати веб-дизайнером. Це моя перша веб-сторінка. Тут я можу написати будь-який текст, наприклад про себе і мої інтереси. Я розташую свої файли на сервері хостингу Narod.ru і мою сторінку зможуть побачити всі бажаючі.
</ BODY>
</HTML>
Команди мови HTML називають тегами. Теги бувають одинарними і парними. Більшість тегів є парними, наприклад, тег означення html-файлу: <HTML>…</HTML> Парні теги позначають початок і кінець області дії команди. Теги записують у кутових дужках. Тег, що закриває область дії, має косу риску. Тег може містити параметри (атрибути), які користувач записує у першому тезі через пропуск, наприклад, <BODY TEXT=“red”>.
Між тегами <TITLE> …</TITLE> пишуть заголовок сторінки, а між <BODY параметри>…</ BODY> основний текст, до якого застосовують теги форматування.
Тег <BODY> має такі основні параметри:
BACKGROUND = «шлях до графічного файлу» - задає картинку для фону; BGCOLOR = “white” – задає білий колір фону, якщо не використовується фон-картинка; TEXT = «black» - задає чорний колір тексту на сторінці.
Теги для форматування тексту
<P> - початок нового абзацу. Його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю абзацу без відступу у першому рядку.
<BR> - наступний за цим тегом текст буде наведено у новому рядку без пропуску порожнього рядка.
<HR> - буде проведена горизонтальна лінія.
<B> текст </B> - товстий шрифт тексту, що є між тегами.
<I> текст </I> - шрифт курсив.
<U> текст </U> - підкреслений шрифт.
<BIG> текст </BIG> - великий шрифт.
<SMALL> текст </SMALL> - малий шрифт.
Заголовок за замовчуванням вирівнюють до лівого краю вікна. Якщо вирівнювання деякого елемента на сторінці потрібно задати явно, то використовуються теги вирівнювання:
<CENTER> елемент </ CENTER > - вирівнювання до центру;
<LEFT> елемент </ LEFT > - вирівнювання до лівого краю;
<RIGHT> елемент </ RIGHT > - вирівнювання до правого краю.
Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тегу <PRE>… </ PRE >. Текст в середині цього тегу оформляють засобами табуляції. Браузер такий текст переформатовувати не буде.
Тег задання параметрів шрифту FONT
Щоб задати назву конкретного шрифту, його розмір і колір, використовують парний тег FONT з параметрами FACE, SIZE, та COLOR. Наприклад:
<FONT FACE = “Décor, Arbat, Kudriashov” SIZE = +2 COLOR = “red” > текст </FONT>
Якщо на комп’ютері клієнта встановлений шрифт Décor, то він буде застосований до цього тексту, в іншому випадку браузер застосує шрифт Arbat чи Kudriashov, або стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифту можуть бути від 1 до 7. Розмір 3 є стандартним. Число 2 як значення параметра SIZE означає другий розмір. Число +2 означає, що що розмір шрифту має на бути на дві одиниці більший за стандартний, тобто п’ятий. Число -2 означатиме перший розмір, тобто на дві одиниці менший ніж стандартний. Колір тексту буде червоний.
Фонове зображення веб-сторінки
Зазвичай у вікні браузера текст виводиться на стандартному фоні, наприклад білому (Internet Explorer). Якщо веб-сторінка насичена малюнками, то зазвичай цього достатньо. Але якщо вставних малюнків мало рекомендується задати фонове зображення. Для цього потрібно вказати цей параметр в тезі <BODY>:
<BODY BACKGROUND= ім’я файлу із фоновим зображенням>.
Вибране зображення накладається на екран і розмножується таким чином, щоб зайняти все наявне місце. Тобто перший екземпляр зображення розміщується у лівому верхньому куті вікна браузера. Якщо при цьому зайнята не вся ширина вікна, то справа розміщується ще одна копія зображення.
Фонова музика веб-сторінки
Для того щоб вставити фонову музику можна використати тег <BGSOUND>, наприклад:
<BGSOUND SRC= ім’я звукового файлу LOOP= число повторів>. Ця лінія повинна входити в тіло документа HTML. Звуковий файл заданий параметром. SRC= буде автоматично завантажений після чого почнеться його відтворення. Параметр LOOP= вказує на те, скільки разів цей файл буде відтворено. Для безперервного звучання потрібно вказати параметр LOOP=INFINITE.
Завантаження малюнка на сайт з допомогою мови HTML
Щоб вставити в документ зображення необхідно скористатися тегом <IMG>. Наприклад:
<IMG SRC= ім’я файлу із зображенням WIDTH= ширина HEIGHT= висота>
Тут параметр SRC= задає ім’я файлу із зображенням, а параметри WIDTH= і HEIGHT= відповідно ширину і висоту зображення. Якщо вони не співпадають з реальними параметрами зображення, то браузер масштабує зображення. Якщо ці параметри взагалі не задані, то будуть використані реальні розміри зображення.
Щоб зображення прилягало до межі (краю) сторінки і довкола нього був обтічний текст, потрібно також вказати атрибути ALIGN=LEFT чи ALIGN=RIGHT.
Завантаження відеоролика
Завантаження на сторінку відеоролика здійснюється аналогічно тому як вставляється статичне зображення. Наприклад:
<IMG DYNSRC= ім’я файлу з відеороликом START= спосіб запуску LOOP= число повторів>.
Параметр START= задає спосіб запуску відеоролику. Якщо ви вкажете START=OPENFILE, то відтворення почнеться відразу після запуску сторінки, а якщо вказати START=MOUSEOVER, то відтворення почнеться після того, як навести мишкою на зображення першого кадру відеоролика, при цьому клацати мишкою не потрібно. Параметр LOOP= задає кількість повторів відеоролику.
Створення посилання на інший файл
Гіпертекстові посилання задаються за допомогою спеціального парного тегу. Тоді відповідний фрагмент HTML-документа повинен виглядати наступним чином:
<A HREF= ім’я файлу> Текст посилання </A>.
В якості значення параметру HREF= використовується ім’я файлу, який повинен бути відкритий при клацанні на посиланні. Текст, який розміщений на екрані між відкриваючим тегом <A> і закриваючим тегом </A>, виділяється кольором і підкреслюється. Такий механізм дозволяє задати структуру веб-вузла. Кожна з існуючих сторінок являє собою окремий документ HTML. Крім того, в окремих файлах зберігаються всі необхідні елементи: зображення, відеоролики і т.д.
Створення посилання на інше місце в тому ж таки веб-документі.
Немає необхідності у тому, щоб кожне посилання вказувало на інший файл. Наприклад, допускається створення дуже довгих сторінок, які займають багато екранів. Для переміщення по такій сторінці, крім використання смуг прокручування, можуть використовуватись і гіпертекстові посилання. З їх допомогою можна швидко перейти безпосередньо до потрібного місця на сторінці.
Для того щоб реалізувати такий перехід потрібно 2 елементи:
1) посилання, яке вказує на те, куди потрібно перейти;
2) якір, який фіксує місце переходу.
Посилання здійснюється майже так само як це було вказано раніше:
<A HREF= # назва якоря> Текст посилання </A>.
Якір також використовує теги <A> і </A> та задається таким чином:
<A NAME= # назва якоря> Текст </A>.
Зверніть увагу на «назву якоря». Це довільний текст, який ніколи не з’являється на екрані і однозначно визначає місце переходу. Якщо у Вас на одній сторінці є декілька якорів всі вони повинні мати різні назви. Символ # під час задавання посилання вказує на те, що далі ітиме не ім’я файлу, а назва якоря.
Текст, розміщений між тегами <A> і </A>, які задають якір з’явиться на екрані, якщо Ви клацнете на посилання.
Створення малюнка-посилання.
В якості гіпертекстового посилання може використовуватися не тільки текст, але і зображення. Якщо помістити тег зображення <IMG> між тегами <A> і </A> які задають посилання, то все зображення перетвориться в гіперпосилання:
<A HREF= ім’я файлу>< IMG SRC= ім’я файлу із зображенням></A>.
На екрані таке зображення виділяється спеціальною рамкою, хоча в документ можна включити і допоміжний текст, який підказує користувачеві, що даний малюнок є гіперпосиланням.
Посилання на звуковий файл і відео-ролик
Гіпертекстовий документ може вказувати не на інший документ HTML, а на звуковий файл чи відео-ролик. Програми-браузери або відтворюють такі файли самостійно або за допомогою допоміжних програм. Наприклад, якщо Ви вкажете тег:
<A HREF= VOICE1.WAV>коментар</A>, то при клацанні на виділеному кольором (як посилання) слові «коментар» почнеться відтворення звукового файлу VOICE1.WAV. Браузер розпізнає такі файли за їх розширенням. Це дозволяє включати в склад однієї веб-сторінки декілька мультимедійних фрагментів. Використання таких посилань є досить ефективним. Цей метод дає користувачеві можливість самостійно вибирати чи хоче він слухати те, що для нього підготували і відповідно чекати, доки здійснюватиметься завантаження звукового файлу.
Розміщення сторінок на сайті
Спосіб виконання цієї операції залежить від системи, яка використовується для хостингу веб-сторінок. Найчастіше для пересилання використовується протокол FTP.
Пересилання файлів на сайт
В багатьох системах хостингу власнику сайту просто повідомляють адресу, яка повинна використовуватись для пересилання повідомлень. В системі narod.ru, наприклад, у власника сайту є декілька варіантів дій.
По-перше, якщо файлів небагато, їх можна відправити використовуючи веб-інтерфейс. Для цього на вкладці Мастерская є посилання Загрузка файлов на сайт. В такому випадку за одну операцію можна перенести на сайт до 10 файлів, причому ім’я кожного з них потрібно задавати окремо. Для об’ємних сайтів використовувати такі дії незручно. В цьому випадку доцільніше використовувати так звані FTP-клієнти. Як адресу вказують ftp://ftp.narod.ru., а ім’я користувача і пароль ті самі що і при створенні сайту. Далі операція використовується так, як це передбачає клієнт-програма ftp.
Допоміжні операції з файлами, які не потребують пересилання даних з вашого комп’ютера на сайт можна використовувати в режимі Мастерская. Для цього потрібно клацнути на посиланні Управление файлами и HTML-редактор. Подальші операції (перегляд, редагування, копіювання і переміщення, створення папок) застосовуються до окремих файлів, а не до сторінок.