13166

Створення найпростішої Web-сторінки

Лабораторная работа

Информатика, кибернетика и программирование

ЛАБОРАТОРНА РОБОТА № 15 Тема: Створення найпростішої Webсторінки. Мета: навчитися застосовувати знання з HTML набуті на лекційних заняттях; навчитися створювати вебсторінки використовуючи мову HTML та редактор PSPad. Теоретичні відомості: ...

Украинкский

2013-05-10

164.58 KB

37 чел.

ЛАБОРАТОРНА РОБОТА № 15

  1.  Тема:

Створення найпростішої Web-сторінки.

  1.  Мета:

навчитися застосовувати знання з HTML, набуті на лекційних заняттях; навчитися створювати веб-сторінки, використовуючи мову HTML та  редактор PSPad.

  1.  Теоретичні відомості:

HTML (HyperText Markup Language) -  мова розмітки гіпертексту. Тег – елемент мови розмітки гіпертексту.

Синтаксис

<тег атрибут1="значення" атрибут2="значення"> - непарний тег

<тег атрибут1="значення" атрибут2="значення">...</тег> - парний тег

Приклад.

<body bgcolor=”red”> <p align="center">Вирівнювання тексту абзацу по центру</p>

- правильний запис.

Рисунок 1 – Правильна вкладеність тегів

- неправильний запис.

Рисунок 2 – Неправильна вкладеність тегів

Структура документу:

<HTML> - повідомляє браузеру, що далі слідує текст, який слід інтерпретувати як HTML документ.

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

<TITLE> ... </TITLE> - виділяють назву сторінки, яка відображається в заголовку вікна браузера|.

</HEAD>

<BODY> - виділяють основну частину – “тіло” – web-сторінки.

...

</BODY>

</HTML>

Приклад. Проста веб-сторінка

<html>

<head>

  <title>Моя перша веб-сторінка</title>

</head>

<body>

 <h1>Заголовок</h1>

 <p>Тут знаходиться текст</p>

 </body>

</html>

Атрибути тега BODY

<BODY bgcolor=”колір”> – атрибут задає колір фону сторінки. Колір може приймати значення: red, green, blue, yellow та ін., або в шіснадцятковій формі (#000000, #ffffff, #f0f0f0, #c3e500 тощо.)

<BODY background="URL\*.jpg"> – атрибут заповнює сторінку графічним малюнком, якщо графічний файл в одній папці із сторінкою указується тільки ім'я файлу.

<BODY text=”колір ”> – задає базовий колір шрифту для сторінки.

Оформлення смислових частин сторінки абзацами.

<P>…</P> – тег розбиває текст на параграфи (абзаци).

<BR> – обриває рядок і починає новий.

<!- - … - -> – тег коментарів. Текст розміщений в цьому тезі не відображається комп’ютером

Теги заголовків. Зміна розміру шрифту. Горизонтальні лінії. Параметри вирівнювання тексту. Зміна зображення символів.

<Hn>…</Hn> – тег керує розміром символів в заголовках (1≤n≤6)

<BIG>...</BIG> – збільшує розмір шрифту на 10% в порівнянні з базовим.

<SMALL>…</SMALL> – зменшує розмір шрифту на 10% в порівнянні з базовим.

<PRE>…</PRE> – позначає фрагмент тексту форматування якого здійснено наперед. Зручно використовувати при виведенні програм на мовах програмування, при виведенні тексту, що містить спеціальні символи, в деяких випадках замінює тег <NOBR>…</NOBR>

<HR> – тег горизонтальної лінії, може бути засобом організації тексту і дизайну.

align=Left (Right, Center) – вирівнювання лінії на сторінці.

saze=n – товщина лінії в пікселях (1n175) за умовчанням 2 пікселі.

color=”колір – колір лінії задається назвою кольору або 16-ковим кодом width=n% – ширина лінії у відсотках до ширини екрану.

<Center> ... <Center> – вирівнювання тексту по середині сторінки.

<B>…</B> – виділення напівжирним шрифтом.

<I>…</I> – виділення курсивом.

<SUB>…</SUB> – нижні індекси.

<SUP>…</SUP> – верхні індекси.

<S>…</S> – закреслений текст

<U>…</U> – підкреслений текст

<DEL>…</DEL> – виділяє текст (закресленням), який необхідно позначити як видалений (застарілий).

<INS>…</INS> – виділяє текст (підкресленням), який необхідно позначити як вставлений.

Додаткові можливості форматування. Завдання атрибутів окремим розділам сторінки. Елемент "рядок, що біжить".

<FONT>…</FONT> – визначає стиль елементу сторінки.

size=n – установка фактичного розміру шрифту (1 … 7)

color= – колір символів

<BLOCKQUOTE>…</BLOCKQUOTE> – позначає цитату, текст цитати розташовується з відступом від лівого краю вікна і може використовуватися в самих різних випадках. Якщо необхідно, лапки задаються явним чином

site=URL – адреса джерела цитати, якщо вона з Інтернет

<MARQUEE> ... </ MARQUEE > – рядок символів, що біжить.

direction= ... – напрям руху рядка (left, right).

behavior= ... – поведінка рядка (scroll – безперервний рух, slide – вийшла і зупинилася, alternate – реверс)

Гіперпосилання

Для створення посилання необхідно повідомити браузер, що є посиланням, а також вказати адресу документу, на який слід зробити посилання. Обидві дії виконуються за допомогою тега <a>. Загальний синтаксис створення посилань наступний.

<a href="URL">текст посилання</a>

Атрибут href визначає URL (Universal Resource Locator, універсальний покажчик ресурсу), наприклад, http://www.google.com.ua, іншими словами, адреса ресурсу, на який слід перейти, а вміст контейнера <a> є посиланням. Текст, розташований між тегами <a> і </a>, за умовчанням стає синього кольору і підкреслюється.

Приклад.

<html>

<head>

 <title>Посилання на сторінці</title>

</head>

<body>

 <p><a href="index.html">Головна</a></p>

 <p><a href="foto.html">Фотогалерея</a></p>

</body>

</html>

Рисунок

Для роботи з рисунками в HTML використовується тег <img>.

Приклад.

<img src="cat.jpg" alt="Кіт">

  1.  Хід роботи:

Завдання.

І рівень (оцінка «задовільно»)

Створити веб-сторінку за зразком (додаток 1). Для цього потрібно виконати хід роботи.

ІІ рівень (оцінки «добре», «відмінно»)

Створити веб-сторінку за зразком (додаток 1). Виконати індивідуальне завдання.

Зауваження. 

Підчас виконання лабораторної роботи потрібно використовувати програму-редактор коду  PSPad (d:\Programs\pspad\PSPad.exe). Результат проглядати браузером Opera.

Більш детальну інформацію про теги дивитись в довіднику tags.chm. (d:\Work\Rt2\informatics\lab11\tags.chm).

  1.  Відкрити програму PSPad. Якщо відкриті які-небудь вкладки файлів – закрити їх.
  2.  Вибрати Файл-Новий файл, на вкладці  Новий файл вибрати HTML і натиснути Добре.
  3.  Вилучити рядки, які починаються тегом <meta>.
  4.  Зберегти файл веб-сторінки у власну папку під назвою page1.
  5. Розмістити на сторінці ній наступний текст:

HTML (англ. HyperText Markup Language — Мова розмітки гіпертекстових документів) — основана на SGML текстова мова розмітки, призначена для маркування документів, що містять текст, зображення, гіперпосилання, тощо. HTML-документи лежать в основі Веб, і відображаються із допомогою веб-браузерів. Разом із видимою інформацією, HTML-документи містять додаткові метадані, такі як, наприклад, мова тексту, автор документа, стислий підсумок. Мова розмітки розроблялась консорціумом W3C, остання версія — 4.01, очікується, що HTML буде замінена розширюваною мовою розмітки гіпертексту (XHTML).

Дані у форматі HTML нагадують звичайні текстові файли за винятком того, що деякі символи в них (так звані теги (tag)) інтерпретуються як розмітка. Розмітка надає документу деяку, визначену тегами, структуру: параграфи, розділи, абзаци, списки, малюнки, таблиці, колонтитули, індекси, зміст тощо. Всередині кожного блоку можна змінювати шрифт, розмір символів, колір тексту, виділяти текст курсивом та/або робити його напівжирним. Головною особливістю HTML є спроможність використовувати гіперзв'язки (links), завдяки яким можливі посилання та переходи з поточної веб-сторінки на інші документи, як локальні (документи поточного сервера), так і такі, що знаходяться на серверах в найвіддаленіших регіонах земної кулі. Мова HTML, також дозволяє вставляти в документи зображення, звук, відео та ін. Перегляд HTML-документу здійснюється за допомогою веб-оглядача (таких програм як Internet Explorer, Netscape та ін.).

Первинна мова розмітки HTML розроблялася у стандарті SGML, але зараз все частіше можна бачити використання XHTML, в основному подібної до звичайного HTML за вийнятком деяких синтаксичних відмінностей, введених стандартом XML.

  1.  В тег <title> помістити текст «HTML».
  2.  Використовуючи тег <h1> створити заголовок першого рівня «HTML».
  3.  Використовуючи тег <p> розбити текст на два абзаци. В одному з абзаців здійснити перехід на новий рядок, використовуючи тег <br>.
  4.  В довільному абзаці виділити фрагмент тексту напівжирним шрифтом, використовуючи тег <b>.
  5.  Змінити колір фону за допомогою атрибуту bgcolor тега <body>. Колір можна задати використовуючи інструмент PSpad Вікно вибору кольорів (Alt+C).
  6.  Змінити базовий колір тексту, за допомогою атрибуту text тега <body>.
  7.  Створити горизонтальну лінію використовуючи тег <hr>.
  8.  Вставити рисунок example.jpg на сторінку. Для вставки рисунку скористатись тегом <img> і його атрибутом src. Рисунок взяти з папки з лабораторною роботою і помістити у папку з веб-сторінкою. Для атрибуту src задати значення example.jpg.
  9.  Додати на сторінку гіперпосилання на сайт технікуму у панель «Навігація» (див. додаток 1), використовуючи тег <a> і його атрибут href . Як URL (значення атрибуту href) використати адресу сайту технікуму: http://www.chrmt.cg.ukrtel.net. Для виділення тексту «Навігація» кольором та зміни розміру використати тег <font> і його атрибути  color та size відповідно. Задати значення кольору - «red», розміру - «4» .

Результат виконаної роботи повинен мати вигляд відповідно до зразка в додатку 1.

  1.  Виконати індивідуальне завдання.
  2.  Оформити звіт.
  3.  Показати роботу викладачу.

  1.  Варіанти індивідуальних завдань

Примітка. Варіант завдання обирати згідно номеру комп’ютера.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок другого рівня, який має колір #000066; три абзаци тексту, вирівняні по ширині; фрагмент тексту, який відображається курсивом; рисунок в тексті розміром 200x100 пікселів, вирівнювання по правому краю; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок третього рівня, який має червоний колір; п’ять абзаців тексту, вирівняні по правому краю; фрагмент тексту, який відображається закресленим; рисунок в тексті розміром 250x150 пікселів, вирівнювання по лівому краю; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок першого рівня, який має синій колір; чотири абзаців тексту, вирівняні по правому краю; фрагмент тексту, який відображається підкресленим; рисунок в тексті розміром 120x80 пікселів, вирівнювання по центру; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок четвертого рівня, який має жовтий колір; три абзаци тексту, вирівняні по центру; хімічну формулу H2SO4; рисунок в тексті розміром 320x280 пікселів, вирівнювання по нижньому краю; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок першого рівня, який має оранжевий колір; чотири абзаци тексту, вирівняні по ширині; математичну формулу у = х1/2; рисунок в тексті розміром 280x200 пікселів, вирівнювання по верхньому краю; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок першого рівня, який має зелений колір; п’ять абзаців тексту, вирівняні по правому краю; рядок символів, що біжить; рисунок в тексті розміром 200x170 пікселів, вирівнювання по середині; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок другого рівня, який має фіолетовий колір; шість абзаців тексту, вирівняні по лівому краю; виділену в тексті цитату; рисунок в тексті розміром 250x150 пікселів, вирівнювання по лівому краю; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок другого рівня, який має колір #f00000; три абзаци тексту, вирівняні по ширині; фрагмент тексту, який відображається курсивом; рисунок в тексті розміром 200x100 пікселів, вирівнювання по правому краю; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок третього рівня, який має червоний колір; п’ять абзаців тексту, вирівняні по правому краю; фрагмент тексту, який відображається закресленим; рисунок в тексті розміром 250x150 пікселів, вирівнювання по лівому краю; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок першого рівня, який має синій колір; чотири абзаців тексту, вирівняні по правому краю; фрагмент тексту, який відображається підкресленим; рисунок в тексті розміром 120x80 пікселів, вирівнювання по центру; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок четвертого рівня, який має жовтий колір; три абзаци тексту, вирівняні по центру; хімічну формулу C2H5OH; рисунок в тексті розміром 320x280 пікселів, вирівнювання по нижньому краю; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок першого рівня, який має оранжевий колір; чотири абзаци тексту, вирівняні по ширині; математичну формулу у = х2+x4; рисунок в тексті розміром 280x200 пікселів, вирівнювання по верхньому краю; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок першого рівня, який має зелений колір; п’ять абзаців тексту, вирівняні по правому краю; рядок символів, що біжить; рисунок в тексті розміром 200x170 пікселів, вирівнювання по середині; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок другого рівня, який має фіолетовий колір; шість абзаців тексту, вирівняні по лівому краю; виділену в тексті цитату; рисунок в тексті розміром 250x150 пікселів, вирівнювання по лівому краю; гіперпосилання на раніше створену веб-сторінку.

  1.  На основі створеної веб-сторінки створити нову, яка повинна містити наступні елементи: заголовок другого рівня, який має колір #c5c5c5; три абзаци тексту, вирівняні по ширині; фрагмент тексту, який відображається курсивом; рисунок в тексті розміром 200x100 пікселів, вирівнювання по правому краю; гіперпосилання на раніше створену веб-сторінку.

Додаткове завдання

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

  1.  Вимоги до оформлення звіту

Звіт повинен містити: номер та назву роботи; мету роботи;  код веб-сторінки, створеної за індивідуальним завданням, висновки.

  1.  Контрольні запитання:
  2.  Якими тегами виділяють заголовок документу html?
  3.  Які теги повідомляють браузеру про початок документу html?
  4.  Яке призначення HTML?
  5.  Якими тегами повідомляють браузеру про початок Основної частини ("тіла") документу html?
  6.  Які теги призначені для позначення абзаців?
  7.  Як створити новий рядок?
  8.  Як додати горизонтальну лінію?
  9.  Які теги використовуються для виділення тексту жирним шрифтом?
  10.  Які теги використовуються для виділення тексту курсивом?
  11.  Яке призначення тега <h1>?
  12.  Які теги використовуються для задання кольору фону сторінки?
  13.  Які теги використовуються для задання кольору основного тексту сторінки?
  14.   Яке призначення тега <marquee>?
  15.   Яке розширення має веб-документ?
  16.   Які теги використовуються для створення гіперпосилання?

  1.  Література:
  2.  Дунаев В. HTML, скрипты и стили. - СПб.: BHV-СПб, 2011. – 816 с.
  3.   Прохоренок Н. А. HTML, javascript, PHP и MySQL. Джентльменский набор Web-мастера. – СПб.: БХВ-Петербург, 2011. – 912 с.
  4.  Дригалкин В.В. HTML в примерах. Как создать свой Web-сайт. Самоучитель. – М.: Вильямс, 2003. – 188 с.
  5.  Мержсвич В. В.  HTML и CSS на примерах. — СПб.: БХВ-Петербург, 2005. — 448 с.
  6.  http://html.manual.ru/ 


Додаток 1