Практична робота №1 (6 годин)
Мета та задачі роботи: Засвоєння роботи з HTML та створення сайту заданого варіанту.
Порядок виконання роботи:
1. Скласти тести до 6 уроків наданих за адресою
2. Скласти результуючий тест за адресою
3. Розробити Web-сайт (умови надано нижче)
4. Переслати сайт на адресу і отримати рецензію. Виправити зауваження
Завдання та особливі вимоги
1. Ім'я файлу index.html кодування UTF 8
2. Згідно вибраного варіанту заповнити метадані
< TITLE >Заголовок Web -сторінки</ TITLE >
<META name="description" content=" Опис Web- сторінки ">
<META name="keywords" content=" Ключові слова для пошукових машин ">
3. Логотип сайту «Вивчаємо та працюємо з HTML» роботу виконано студентом гр……..
Варіанти роботи студентів
Номер варіанту |
Сторінка 1 |
Сторінка 2 |
Сторінка 3 |
Сторінка4 |
1 |
Пр.№3 |
Пр.№4 |
Пр.№1 |
Пр.№6 |
2 |
Пр.№4 |
Пр.№5 |
Пр.№1 |
Пр.№6 |
3 |
Пр.№4 |
Пр.№5 |
Пр.№2 |
Пр.№6 |
4 |
Пр.№4 |
Пр.№5 |
Пр.№2 |
Пр.№6 |
5 |
Пр.№5 |
Пр.№6 |
Пр.№2 |
Пр.№4 |
6 |
Пр.№5 |
Пр.№6 |
Пр.№3 |
Пр.№2 |
7 |
Пр.№6 |
Пр.№5 |
Пр.№3 |
Пр.№1 |
8 |
Пр.№6 |
Пр.№2 |
Пр.№4 |
Пр.№3 |
9 |
Пр.№3 |
Пр.№1 |
Пр.№4 |
Пр.№5 |
10 |
Пр.№4 |
Пр.№2 |
Пр.№5 |
Пр.№3 |
11 |
Пр.№4 |
Пр.№2 |
Пр.№5 |
Пр.№6 |
12 |
Пр.№2 |
Пр.№3 |
Пр.№5 |
Пр.№1 |
13 |
Пр.№2 |
Пр.№3 |
Пр.№6 |
Пр.№1 |
14 |
Пр.№3 |
Пр.№5 |
Пр.№6 |
Пр.№2 |
15 |
Пр.№4 |
Пр.№1 |
Пр.№6 |
Пр.№3 |
16 |
Пр.№6 |
Пр.№4 |
Пр.№3 |
Пр.№2 |
17 |
Пр.№4 |
Пр.№5 |
Пр.№2 |
Пр.№1 |
18 |
Пр.№1 |
Пр.№5 |
Пр.№2 |
Пр.№4 |
19 |
Пр.№2 |
Пр.№5 |
Пр.№4 |
Пр.№6 |
20 |
Пр.№2 |
Пр.№6 |
Пр.№5 |
Пр.№4 |
21 |
Пр.№2 |
Пр.№6 |
Пр.№1 |
Пр.№4 |
22 |
Пр.№3 |
Пр.№6 |
Пр.№4 |
Пр.№2 |
23 |
Пр.№4 |
Пр.№5 |
Пр.№6 |
Пр.№1 |
24 |
Пр.№4 |
Пр.№1 |
Пр.№3 |
Пр.№6 |
Пояснення:
Важливо: Варіант береться по порядковому номеру згідно списку групи, Стовпчики – це 4 сторінки, на яких Ви повинні реалізувати практичні завдання;
Інформацію на сторінки Ви повинні взяти з конспекту по «Працюємо з HTML та вивчаємо JavaScripts і PHP»
Методичні рекомендації до виконання практичної роботи №1 в цьому розділі розглянуті головні теги html коду. Описано структуру документу та можливості редагування тексту.
1.1. Основні поняття
HTML ( Hyber Text Markup Lenguage ) - це мова розмітки документа, що описує форму відображення інформації на екрані комп'ютера.
При створенні документа часто доводиться виділяти якусь частину тексту напівжирним шрифтом, змінювати розмір або колір шрифту, вирівнювати текст по центру сторінки і т.д. В текстовому редакторі для цього достатньо виділити потрібний фрагмент і застосувати до нього форматування. Наприклад, щоб підкреслити текст, потрібно виділити його і натиснути кнопку Підкреслений. Мовою HTML та ж дія досягається наступним рядком коду:
<U>Підкреслений текст</U>
Символ < U > вказує, що текст треба підкреслити, починаючи з цього місця, а </ U > є міткою кінця підкресленого фрагмента.
Символи <U> і прийнято називати тегами. За допомогою тегів описується вся структура документа. Теги виділяються кутовими дужками "<" і ">", між якими що показують ім'я тега. Більшість тегів є парними, т. я. є відкриваючий тег (<U>) і відповідний йому закриваючий (</ U>). Закриваючий тег відрізняється наявністю слеша ("/") перед його ім'ям. Є також теги, які взагалі не мають закриваючого тега, наприклад, тег перенесення рядка <BR>.
Деякі теги можуть мати параметри. Параметри вказуються після імені тега через пропуск в форматі параметр ="значення". Якщо параметрів декілька, то вони перераховуються через пробіл. наприклад:
<FONT color="#FF0000" face="Verdana">Текст</FONT>
У цьому прикладі параметру color тега <FONT> присвоєно значення # FF0000, а параметру face - значення Verdana. Іншими словами, текст між тегами <FONT> і </ FONT> буде виведений шрифтом Verdana червоного кольору.
Теги можуть вкладатися один в одного. Наприклад:
<FONT color="#FF0000" face="Verdana"> <U> Підкреслений текст </U> </FONT>
ПРИМІТКА: Назви тегів і параметрів можна записувати на будь-якому регістрі.
Переглядати HTML-документи, можна за допомогою спеціальних програм, які називаються Web-браузерами. Web-браузери відображають документи вже з форматуванням, на основі вихідного коду, що описує його структуру.
Результат інтерпретації HTML-документа, що відображається у вікні Web-браузера, називається Web-сторінкою. На відміну від HTML-документа Web-сторінка може містити не тільки текст, а й графіку, відео, звуковий супровід, може реагувати на дії користувача і т. д. Крім того, Web-сторінка може бути результатом інтерпретації відразу декількох HTML -документів.
Документи у форматі HTML мають розширення html або htm.
1.2. Створюємо перший html-документ
Спробуємо створити наш перший HTML-документ. Для його створення можна скористатися будь-яким текстовим редактором. Найзручнішим редактором є звичайний Блокнот. Відкриваємо Блокнот і набираємо вміст лістингу 1.1.
Лістинг 1.1. Перший HTML-документ
<HTML>
<HEAD>
<TITLE>Заголовок сторінки</TITLE>
</HEAD>
<BODY>
< P >Моя перша Web-сторінка!</ P >
</BODY>
</HTML>
Зберігаємо введений текст у форматі HTML, наприклад, під ім'ям test.html. Для цього в меню Файл вибираємо пункт Зберегти як. У вікні в рядку Ім'я файлу вводимо «test.html», а в списку Тип файлу вказуємо Всі файли. Вибираємо папку, наприклад, Робочий стіл, і натискаємо Зберегти. Закриваємо Блокнот.
ПРИМІТКА: Якщо в списку Тип файлу залишити Текстові документи (*.txt), то в рядку Ім'я файлу назва файлу необхідно взяти в лапки, інакше текст буде збережений у форматі. TXT, а не HTML.
Запускаємо Web-браузер, наприклад, Internet Explorer за допомогою меню Файл пункт Відкрити відриваємо збережений файл test.html. Якщо все зроблено правильно, то у вікні Web-браузера буде підкреслений напис червоного кольору «Підкреслений текст», а в рядку заголовка буде напис «Заголовок сторінки - Microsoft Internet Explorer». Теги у вікні Web-браузера не відображаються!
Наразі спробуємо змінити заголовок у вікні Web-браузера. Для цього необхідно відкрити вихідний текст у форматі HTML. Це можна зробити трьома способами:
У меню Вид вибираємо пункт Початковий текст (Текст у форматі HTML);
Правою клавішею миші клацаємо в будь-якому місці вікна Web-браузера. У контекстному меню вибираємо пункт Початковий текст (Текст у форматі HTML);
ПРИМІТКА: В деяких випадках результат може бути різним. Якщо Web-сторінка складається з декількох HTML-документів, то перший спосіб відобразить тільки код структури Web-сторінки, а не вихідний код кожного з HTML-документів. Другий спосіб дозволяє відобразити вихідний код лише одного HTML-документа, а від місця клацання залежить, код якого HTML-документа буде відображено. У нашому випадку результат буде тим самим.
відкриваємо файл, що містить вихідний код, за допомогою Блокнота або іншого текстового редактора.
У результаті початковий текст буде доступний для редагування, Змінимо рядок
<TITLE>Заголовок сторінки</TITLE>
на
<TITLE>Моя перша Web-сторінка</TITLE>
І збережемо файл (меню Файл пункт Зберегти). Тепер повернемося в Web-браузер і оновимо Web-сторінку. Оновити можна наступними способами:
У меню Вид виберемо пункт Оновити;
У контекстному меню вибираємо пункт Оновити;
Натиснемо кнопку Оновити на панелі інструментів;
На клавіатурі натиснемо клавішу <F5>.
В результаті рядок заголовка зміниться на «Моя перша Web-сторінка» - «Microsoft Internet Explorer».
Таким чином, змінюючи що-небудь у вихідному коді, можна візуально оцінювати результати проведених дій. Відображаємо вихідний код, вносимо коректування, зберігаємо, а потім оновлюємо Web-сторінку.
ПРИМІТКА: Необхідно зауважити, що всі описані дії справедливі тільки для локально збережених HTML-документів. Якщо HTML-документ опублікований в Інтернеті, то можна лише споглядати вихідний код, а от змінити його таким чином не можна.