WEB - дизайн / Лабораторні роботи / Лабораторна робота №3
.pdfЛабораторна робота №3
Створення простого HTML-документа
Мета: навчитися створювати простий гіпертекстовий документ засоб текстового редактора Блокнот; навчитися застосовувати теги форматування шрифту та абзацу.
Завдання:
1. Створити файл з гіпертекстовим документом: · Запустити редактор Блокнот, ввести текст:
Вітаю Вас на моїй першій web-сторінці!
· Збережіть файл у |
створеному каталозі. При |
збереженні, у вікні діалогу |
Зберегти як… в рядку Тип файлу: вибрати варіант Всі файли (*.*), а в рядку |
||
Ім’я файла задати |
ім’я з розширенням.html, |
наприклад 1_name.html (де |
name – ваше ім’я). |
|
|
·Закрити документ, знайти його у своєму каталозі.
·Відкрити файл. Проаналізувати, за допомогою якої прикладної програми відображається файл та як виглядає введена фраза.
2.Ввести теги, що визначають структуру html-документа:
·За допомогою контекстного меню відкрити файл за допомогою редактора Блокнот. Ввести приведені нижче теги, у розділі заголовку документа(між тегами <TITLE> </TITLE>) вказати своє прізвище.
<HTML>
<HEAD> <TITLE> Прізвище </TITLE>
</HEAD>
<BODY>
Вітаю Вас на моїй першій web-сторінці!
</BODY>
</HTML>
·Зберегти документ під тим же ім’ям, оновити його відображення в браузері (натиснути кнопку Оновити на панелі інструментів). Проаналізуйте отримані зміни у відтворенні документа.
3.Відредагувати документ:
·Викликати меню браузераВигляд/Перегляд HTML-кода і додати після тексту «Вітаю Вас на моїй першій web-сторінці!» текст підпису:
Студент групи ___ Прізвище Ім’я
Зберегти документ (але не закривати) та оновити його перегляд в браузері.
·Використовуючи одинарний тег <BR> відредагувати документ таким чином, щоб підпис починався нового рядка, а Прізвище Ім’я – в наступному рядку. Переглянути в браузері новий варіант.
Увага! Після кожного редагування документа потрібнойого зберігати, а
перегляд в браузері |
починати |
з оновлення завантаження |
документа |
|||
допомогою кнопки «Оновити» на панелі інструментів. |
|
|
||||
4. Оформити уривки тексту за допомогою стилів Заголовків: |
|
|
||||
· Перший |
рядок |
документа |
оформити |
стилемЗаголовок 1-го |
рівня |
за |
допомогою |
парного тегу<H1>…</H1>. |
Другий рядок оформити |
як |
|||
Заголовок 6-го рівня, а третій як Заголовок 4-го рівня.
·Переглянути документ в браузері, змінюючи налаштування відображення шрифтів (меню Вигляд/ Розмір шрифта/ Самій великий, Середній і т.д.)
·Змінити стиль оформлення першого рядка наЗаголовок 2-го рівня, другого рядка – на Заголовок 5-го рівня, останнього рядка – на Заголовок 3-го рівня.
5.Виконати форматування шрифту:
·Після рядка Прізвище Ім’я додати ще один рядок тексту:
Машинобудівний коледж СумДУ
·Оформити фразу по приведеному зразку.
·Оформити рядок з підписом (Студент групи ___ Прізвище Ім’я)
курсивом, розмір шрифта задати відносним зміненням. Використати теги
<FONT SIZE=«+2»> та <I>.
·Переглянути отриманий документ в браузері.
6.Виконати форматування абзаців:
·Створити новий документ 2_name.htm, зберегти його у тому ж каталозі.
·Ввести текст:
<HTML>
<HEAD> <TITLE> Прізвище </TITLE>
</HEAD>
<BODY>
Вітаю Вас на моїй другій web-сторінці!
</BODY>
</HTML>
·Вирівняти текст по центру.
·Ввести текст відповідно свого варіанту:
Варіант 1
ІСТОРІЯ УКРАЇНСЬКОЇ м о в и Усі слов'янські мови мають одне джерело— праслов'янську, або
спільнослов'янську основу, яка існувала у слов'янських племінних мовах приблизно із середини III тис. до н. є. і до V ст. н. є.
З перетворенням слов'янських племен в окремі народності в загальних рисах сформувалися і всі слов'янські мови, внаслідок чого виникли нові спільнімовиоснови. Так, предком східнослов'янських мов можна вважатидавньоруську мову, яка утворилася в V-IX ст. у Київській Русі та проіснувала до XIV ст.
Давній період української мови породив багатющий український фолькло:
історичний, обрядовий, календарний, соціальний, господарський, побутовий.
Варіант 2 |
|
УКРАЇНСЬКА МОВА |
|
|
|
|
|
|
|
|
|
||
У часи Івана Котляревського, Григорія |
Квітки-Основ'яненка, Тараса |
|
||||
Шевченка мова збагатилася народнорозмовним фольклором. |
|
|
||||
Основоположником |
нової |
української |
мови |
можна |
вважати |
ви |
українського поета Тараса Шевченка, який синтезував усе найкраще з книжних традицій, з усної творчості та мовлення українців Наддніпрянщини, виробив і закріпив фонетичні, морфологічні та синтаксичні норми.
Після Т. Шевченка українською мовою майстерно користувалися, постійно її збагачуючи, такі талановиті письменники і діячі культуриХІХ-ХХ ст., як Л.
Глібов, Марко Вовчок, Панас Мирний, І. Нечуй-Левицький, Іван Франко, Леся Українка, М. Драгоманов, М. Коцюбинський.
У розвиток сучасної української мови вагомий внесок внесли украї письменники В. Сосюра, П. Тичина, М. Рильський та ін.
Варіант З
Глобальна мережа Інтернет. Призначення HTML
Інтернет започаткований 1969 року Агентством з наукових досліджень Міністерства оборони США(ARPA) як проект із розроблення надійних цифрових комунікацій для військових потреб. Спочатку ця мережа існувала для обміну інформацією між комп'ютерами військових(науково-дослідних та навчальних) закладів. У 80-ті роки XX ст. її вже використовували в державних (навчальних, наукових) та комерційних цілях. У 90-ті роки XX ст. мережа Інтернет вийшла за межі США, і до неї приєдналися країни всіх континентів світу.
Варіант 4
Мова HTML
Основою WWW (World Wide Web) є Hyper Text Markup Language (HTML) —
мова гіпертекстової розмітки. Мова HTML була запропонована Тімом БернесомЛі 1989 року як один із кoмпoнeнтiв тexнoлoгiї WWW, що призначався для опису вигляду документа.
Стандарт HTML було розроблено організацією W3C (World Wide Web Consortium) на початку 1996 року в кооперації з такими фірмами, як IBM, Microsoft, Netscape Communication Corporation, Novell, SoftQuad, Spyglass та Sun Microsystems. Організація W3C спільно зі згаданими фірмами продовжує роботу над розширенням можливостей елементів мови HTML та її інтернаціоналізацією.
Варіант 5
ГІПЕРТЕКСТ
Окрім того, комп'ютер дає можливість користуватися не лише лінійним поданням матеріалу, як це робиться в традиційній книзі, а й гіпертекстуальним. Гіпертекст характеризується нелінійністю (користувач сам обирає шлях читанн),
різнорідністю та мультимедійністю(застосування всіх засобів впливу на користувача).
Вважають, що гіпертекстуальна структура викладення матеріалусхожа на процес нашого мислення, який теж здійснюється нелінійно, і використання такої структури може значно збільшити інтелектуальний потенціал особистості.
Варіант 6
Природа і заповідники
Кримські гори на півдні півострова простягнулися трьома рівнобіжними грядами від Севастополя до Феодосії на 150 кілометрів, їхні південні схили майже стрімкі, а північні переходять у міжгрядові зниження або рівнини.
Дві невисокі гряди (Зовнішня і Внутрішня) на півночі складають Кримське передгір'я, розрізане на окремі масиви мальовничими річковими долинами. У західній частині Передгір'я, що майже цілком розташовується в межах Бахчисарайського району, є півтора десятка знаменитих печерних міст і монастирів.
Значна кількість гротів і скельних навісів у вапнякових обривах Передгір'я, а також сприятливий мікроклімат відіграли вирішальну роль у формуванні культури кам'яного віку.
Варіант 7
Карпати
Велика |
гірська |
системаКарпат |
починається |
недалеко |
відБратіслави |
|
(Словаччина) і |
закінчується на |
південному |
сході поблизуЗалізних |
воріт |
||
(Румунія). |
Довжина Карпат становить приблизно 1500 KM. Дугою із |
трьох |
||||
сторін оточують вони Середньоєвропейську низовину. У північно-західній частині їхня ширина становить 240 км, у південно-західній — 340, а в північно-східній, де розташовані українські Карпати, вона звужується до 100-120 км.
Карпати, а особливо Косівщина, — неповторно мальовничий край високих гір,
стрімких потоків і чистого повітря. Своєрідність краю, краса його природних
ландшафтів, багатий тваринний і рослинний світ Карпат, унікальна скарбниця
природних екосистем, де збереглися рідкісні реліктові види флори,
фауни і, як ніде в Україні, народні звичаї, традиційна
побутова культура ваблять до себе численних туристів.
·Відмежувати фрагмент тексту горизонтальними розділовими лініями зверху та знизу, використовуючи тег <HR>.
·Зберегти документ.
·Переглянути документ у браузері.
7.Оформити звіт з виконаної лабораторної роботи.
Таблиця основних тегів HTML-документа. Теги форматування шрифту і абзацу
Призначення |
Вид тегів |
Примітка |
|
Загальна структура документа HTML |
|
Тип документа |
<HTML></HTML> |
Початок і кінець документа |
Ім'я документа |
<HEAD></HEAD> |
Не відображається браузером |
Заголовок |
<TITLE></TITLE> |
Вміст рядка заголовка вікна |
|
|
браузера |
Тіло документа |
<BODY></BODY> |
Вміст WEB-сторінки |
|
Структура змісту документа |
|
Внутрішні |
<H№> текст </H№> |
Де № – номер рівня заголовка (від |
заголовки різного |
|
1 до 6). Наприклад, <H1>.</H1> - |
рівня |
|
заголовок 1-го рівня. |
Заголовок з |
<H№ ALIGN=”LEFT| CENTER| |
LEFT - по лівому краю |
вирівнюванням |
RIGHT”> текст </H№> |
CENTER - по центру |
|
|
RIGHT - по правому краю. |
|
Форматування абзаців |
|
Створення абзацу |
<P> текст </P> |
Абзаци відділяються подвійним |
(параграфа) |
|
міжрядковим інтервалом |
Перехід рядка |
<BR> |
Одинарний тег |
усередині абзацу |
|
|
Вирівнювання |
<P ALIGN=”LEFT”>текст </P> |
LEFT - по лівому краю |
абзацу |
<P ALIGN= ”CENTER”>текст </P> |
CENTER - по центру |
|
||
|
<P ALIGN=”RIGHT”> текст</P> |
|
|
<P ALIGN=”JUSTIFY”> текст </P> |
RIGHT - по правому краю |
|
|
JUSTIFY – по ширині |
Розділова |
<HR SIZE=«?»> |
Одинарний тег. «?» - товщина |
горизонтальна |
|
лінії в пікселях. Товщину лінії |
лінія між абзацами |
|
можна не указувати. |
|
Форматування шрифту |
|
|
|
|
|
|
Жирний |
<B> текст </B> |
<B>Жирный</B> |
|
|
|
||
Курсив |
<I> текст </I> |
<I> Курсив </I> |
|
|
|
||
Підкреслений |
<U> текст </U> |
<U> Підкреслений </U> |
|
|
|||
Перекреслений |
<S> текст </S> |
<S> Перекреслений</s> |
|
|
|||
Збільшений |
<BIG> текст </BIG > |
|
|
|
|
|
|
розмір |
|
|
|
|
|
|
|
Зменшений розмір |
<SMALL> текст </SMALL> |
|
|
|
|
|
|
Верхній індекс |
<SUP> текст </SUP> |
<SUP> Верхній індекс </SUP> |
|
|
|||
Нижній індекс |
<SUB> текст </SUB> |
<SUB> Нижній індекс </SUB> |
|
|
|||
Розмір шрифту |
<FONT SIZE=«?»> текст </FONT> |
?- значення від 1 до 7 або відносна |
|
||||
|
|
зміна (наприклад +2) |
|
|
|||
Базовий розмір |
<BASEFONT SIZE=«?»> |
Одинарний тег |
|
|
|
||
шрифту |
|
? – розмір |
від 1 до |
7; за |
|
||
|
|
|
|||||
|
|
умовчанням |
рівний 3 і задається |
|
|||
|
|
для всього документа в цілому |
|
||||
Гарнітура шрифту |
<FONT FASE=«назва1, назва2 .»> |
Текст |
оформляється |
першим, |
|||
|
текст </FONT> |
встановленим |
|
на |
комп'ютері |
||
|
|
шрифтом із списку назв |
|
|
|||
Колір шрифту |
<FONT COLOR=”$$$$$$”> текст |
Колір |
задається |
або |
ключовим |
||
|
</FONT> |
словом, |
або |
шістнадцятковим |
|||
|
кодом з символом # |
|
|
||||
|
|
|
|
||||
|
|
RED – червоний, #FF0000 – |
|
|
|||
|
|
шістнадцятковий код – червоного |
|||||
|
|
кольору |
|
|
|
|
|
|
Створення списків |
|
|
|
|
|
|
Нумерований |
<OL>елементи списку </OL> |
<OL> |
|
|
|
|
|
Маркерований |
<UL> елементи списку </UL> |
<LI>Елемент списку 1 </LI> |
|
|
|||
Елемент списку |
<LI> елементи списку </LI> |
<LI>Елемент списку 2</LI> |
|
|
|||
|
|
<LI>Елемент списку 3</LI> |
|
|
|||
|
|
</OL> |
|
|
|
|
|
Таблиця основних кольорів
|
Color's |
Шістнадцятковий код кольору |
||
Колір |
name |
Red |
Green |
Blue |
Чорний |
black |
00 |
00 |
00 |
Темно-синій |
navy |
00 |
00 |
80 |
Блакитний |
blue |
00 |
00 |
FF |
Зелений |
green |
00 |
80 |
00 |
Темно-зелений |
teal |
00 |
80 |
80 |
Салатний |
lime |
00 |
FF |
00 |
Блідо-голубий |
aqua |
00 |
FF |
FF |
Вишневий |
maroon |
80 |
00 |
00 |
Фіолетовий |
purple |
80 |
00 |
80 |
Оливковий |
olive |
80 |
80 |
00 |
Сірий |
gray |
80 |
80 |
80 |
Світло-сірий |
silver |
C0 |
C0 |
C0 |
Червоний |
red |
FF |
00 |
00 |
Ліловий |
fushsia |
FF |
00 |
FF |
Жовтий |
yellow |
FF |
FF |
00 |
Білий |
white |
FF |
FF |
FF |