close

Вход

Забыли?

вход по аккаунту

?

Уроки веб

код для вставкиСкачать
Глобальна комп'ютерна мережа Інтернет
Практична робота № 1 Створення Web-документів
Тема: Створення документів, що містять теги форматування
символів, гіперпосилання та графіку.
Мета: * засвоїти основні теги мови гіпертекстової розмітки HTML;
* розвивати практичні навички по створенню web-документів, що містять теги форматування символів, гіперпосилання та графіку;
* виховувати художній смак, кмітливість, бажання працювати в Інтернеті.
Завдання № 1. Прочитати пам'ятку "Покрокові інструкції створення Web-сторінки"
1. Створити на Робочому столі папку "Мій сайт" (ім'я може бути іншим)
2. Помістити у цю папку фото, малюнки, музичні файли
3. Запустити програму Блокнот
4. Набрати шаблон сторінки
5. Зберегти в папці "Мій сайт" як prima.htm (ім'я може бути іншим, але поширення обов'язково *.htm)
6. Переглянути web-сторінку у Internet Explorer або Opera
Увага! Далі треба працювати з двома вікнами (Internet Explorer та Блокнот)
7. Знов повернутися до Блокноту
8. Дописати декілька тегів
9. Зберегти зміни у сторінці (меню Файл - Сохранить)
10. Зробити активним вікно Internet Explorer
11. Натиснути кнопку "Відновити" (або Меню - Вид - Обновить)
12. Переглянути зміни у документі
13. Повторювати кроки 7 - 11 до кінця документу (</html>)
Завдання № 2
* І - ІІ рівень - створити сайт з матеріалів Практичної роботи № 3 (що запропоновані учителем). Папка "Мій сайт" з малюнками знаходиться на Робочому столі. Можна використовувати фото і малюнки учителя
Для виконання роботи треба набирати теги сторінок, що містяться на кожному уроці
* ІІІ рівень - Створити свій сайт за зразком сайту учителя
(документ повинен містити теги форматування символів, гіперпосилання, графіку) Папка "Мій сайт" з малюнками знаходиться на Робочому столі. Фото, малюнки для фону і вставку треба додати свої.
Для виконання роботи треба набирати теги сторінок, що містяться на кожному уроці, вносити зміни.
* ІУ рівень - створити сайт школи з 3-4 сторінок
(документ повинен містити теги форматування символів, гіперпосилання, графіку)
Практична робота № 2
Теги форматування символів та абзаців
Завдання № 1 . Створення шаблону сторінки
1. Набрати шаблон сторінки. <HTML> <HEAD><TITLE>Форматування символів</TITLE></HEAD> <BODY></BODY></HTML>
2. Зберегти як text.htm у папці UROK. Вікно Блокноту не закривати!!!
3. Відкрити файл format.htm, переглянути результат у Internet Explorer. Вікно не закривати!!!
4. Далі працювати з двома вікнами Додаємо у шаблон теки, що виділено жирним шрифтом.
Завдання № 2. Введення тегів перегляд результатів
БлокнотInternet Explorer Введення текстуЯк це виглядає1. Ввести текст між тегами <BODY></BODY>
<HTML> <HEAD><TITLE>Форматування символів</TITLE>
</HEAD> <BODY> Заголовок1 Заголовок2 Заголовок3 3аголовок4 Заголовок5 Заголовок6
</BODY> </HTML>
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Перейти до Internet Explorer
Обновить
Заголовок1 Заголовок2 . . .Заголовок6 Форматування заголовківЯк це виглядає1.Ввести теги заголовків (h1, h2, h3, h4, h5, h6)
<HTML> <HEAD><TITLE>Форматування символів</TITLE>
</HEAD> <BODY>
<h1> Заголовок1</h1> <h2>Заголовок2</h2>
<h3> Заголовок3</h3> <h4>3аголовок4</h4>
<h5> Заголовок5</h5><h6> Заголовок6</h6>
</BODY>
</HTML>
2 Зберегти зміни у файлі (Файл-Сохранить)
3 Перейти до Internet Explorer
Обновить
Заголовок1
Заголовок2
Заголовок3
3аголовок4
Заголовок5
Заголовок6Рядок, що біжитьЯк це виглядає1.Додати після тегу <BODY> теги бегущего рядка
<BODY>
<HTML> <HEAD><TITLE>Форматування символів</TITLE>
</HEAD> <BODY>
<marquee><b>Бегущая строка</b></marquee>
<h1> Заголовок1</h1> <h2>Заголовок2</h2>
<h3> Заголовок3</h3> <h4>3аголовок4</h4>
<h5> Заголовок5</h5><h6> Заголовок6</h6>
</BODY></HTML>
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Перейти до Internet ExplorerОбновить
Бігучий рядокВирівнювання по центруЯк це виглядає1.Ввести вирівнювання по центру(<center></center>) <HTML> <HEAD><TITLE>Форматування символів</TITLE>
</HEAD> <BODY>
<center>
<h1> Заголовок1</h1> <h2>Заголовок2</h2>
<h3> Заголовок3</h3> <h4>3аголовок4</h4>
<h5> Заголовок5</h5><h6> Заголовок6</h6>
</center>
</BODY></HTML>
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Перейти до Internet Explorer
Обновить
Заголовок1
Заголовок2
Заголовок3
3аголовок4
Заголовок5
Заголовок6
Розмір шрифтуЯк це виглядає1. Ввести текст різного розміру (від 1 до 7)
<HTML> <HEAD><TITLE>Форматування символів</TITLE>
</HEAD> <BODY>
<center>
<h1> Заголовок1</h1> <h2>Заголовок2</h2>
<h3> Заголовок3</h3> <h4>3аголовок4</h4>
<h5> Заголовок5</h5><h6> Заголовок6</h6>
</center>
<font size=1>шрифт1</font>
<font size=2> шрифт2</font>
<font size=4> шрифт4</font>
<font size=5> шрифт5</font>
<font size=6> шрифт6</font>
<font size=7> шрифт7</font>
</BODY></HTML>
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Перейти до Internet Explorer
Обновить
Заголовок1
Заголовок2
Заголовок3
3аголовок4
Заголовок5
Заголовок6
шрифт1 шрифт2 ... шрифт5 шрифт7
,,Форматування абзацівЯк це виглядає1.Ввести теги абзацу <P> (створити 3 абзаци)
<HTML> <HEAD><TITLE>Форматування символів</TITLE>
</HEAD> <BODY>
<center>
<h1> Заголовок1</h1> <h2>Заголовок2</h2>
<h3> Заголовок3</h3> <h4>3аголовок4</h4>
<h5> Заголовок5</h5><h6> Заголовок6</h6>
</center>
<p><font size=1>шрифт1</font> <font size=2> шрифт2<font>
<p><font size=4> шрифт4</font>
<font size=5> шрифт5</font>
<p><font size=6> шрифт6</font>
<font size=7> шрифт7</font>
</BODY></HTML>
2. Зберегти зміни у файлі (Файл-Сохранить)
3.. Перейти до Internet Explorer
Обновить
Заголовок1
Заголовок2
Заголовок3
3аголовок4
Заголовок5
Заголовок6
шрифт1 шрифт2 шрифт4 шрифт5 шрифт6 шрифт7 Переривання рядкаЯк це виглядає1. Ввести теги переривання рядка <br>
<HTML> <HEAD><TITLE>Форматування символів</TITLE>
</HEAD> <BODY>
<center>
<h1> Заголовок1</h1> <h2>Заголовок2</h2>
<h3> Заголовок3</h3> <h4>3аголовок4</h4>
<h5> Заголовок5</h5><h6> Заголовок6</h6>
</center>
<p><font size=1>шрифт1</font><br>
<font size=2> шрифт2<font><br>
<p><font size=4> шрифт4</font><br>
<font size=5> шрифт5</font><br>
<p><font size=6> шрифт6</font><br>
<font size=7> шрифт7</font><br>
</BODY>
</HTML>
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Перейти до Internet ExplorerОбновить
Заголовок2
Заголовок3
3аголовок4
Заголовок5
Заголовок6
шрифт1
шрифт2
шрифт4
шрифт5
шрифт6
шрифт7
ВирівнюванняЯк це виглядає1.Розташувати абзаци по лівому краю сторінки, по центру, по правому краю
<HTML> <HEAD><TITLE>Форматування символів</TITLE>
</HEAD><BODY>
<center>
<h1> Заголовок1</h1> <h2>Заголовок2</h2>
<h3> Заголовок3</h3> <h4>3аголовок4</h4>
<h5> Заголовок5</h5><h6> Заголовок6</h6>
</center>
<p align=left><font size=1>шрифт1</font><br>
<font size=2> шрифт2<font><br>
<p align=center><font size=4> шрифт4</font><br>
<font size=5> шрифт5</font><br>
<p align=right><font size=6> шрифт6</font><br>
<font size=7> шрифт7</font><br>
= = = = = = = = = = = = = = = = = = = = = = = </BODY>
</HTML>
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Перейти до Internet ExplorerОбновить
Заголовок2
Заголовок3
3аголовок4
Заголовок5
Заголовок6
шрифт1
шрифт2
шрифт4
шрифт5
шрифт6
шрифт7
Накреслення шрифтуЯк це виглядає1. Вставити замість = = = = = шрифти різного накреслення
<center>
<b>жирний</b><i>курсив</i><u>підкреслений</u>
</center>
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Перейти до Internet ExplorerОбновить
Жирний курсив підкреслений Колір тексту. Колір фону сторінкиЯк це виглядає1.Розфарбувати три останніх слова сторінки
2.Зробити фон сторінки = жовтий
<HTML> <HEAD><TITLE>Форматування символів</TITLE>
</HEAD> <BODY>
<BODY BGCOLOR=yellow>
<center>
<h1> Заголовок1</h1> <h2>Заголовок2</h2>
<h3> Заголовок3</h3> <h4>3аголовок4</h4>
<h5> Заголовок5</h5><h6> Заголовок6</h6>
</center>
<p align=left><font size=1>шрифт1</font><br>
<font size=2> шрифт2<font><br>
<p align=center><font size=4> шрифт4</font><br>
<font size=5> шрифт5</font><br>
<p align=right><font size=6> шрифт6</font><br>
<font size=7> шрифт7</font><br>
<center>
<font size=4 color=green>
<b>жирний</b></font>
<p><font size=4 color=red>
<i>курсив</i></font>
<p><font size=4 color=blue>
<u>підкреслений</u></font>
</center>
</BODY>
</HTML>
2.Зберегти зміни у файлі (Файл-Сохранить)
3.Перейти до Internet ExplorerОбновить
Заголовок2
Заголовок3
3аголовок4
Заголовок5
Заголовок6
шрифт1
шрифт2
шрифт4
шрифт5
шрифт6
шрифт7
жирний
курсив підкреслений Таблиця кольорівИз русской классической поэзии
Федор Тютчев
Silentium
Молчи, скрывайся и таи
И чувства, и мечты свои -
Пускай в душевной глубине
Встают и заходят оне
Безмолвно, как звезды в ночи, -
Любуйся ими - и молчи.
Как сердцу высказать себя?
Другому как понять тебя?
Поймет ли он, чем ты живешь?
Мысль изреченная есть ложь.
Взрывая, возмутишь ключи, -
Питайся ими - и молчи.
Лишь жить в себе самом умей -
Есть целый мир в душе твоей
Таинственно-волшебных дум;
Их оглушит наружный шум,
Дневные разгонят лучи, -
Внимай их пенью - и молчи!.цветcolorцветcoloraкваAquaТемно-синийnavyЧерныйblackОливковыйoliveСинийblueфиолетовыйpurpleФуксияfuchsiaКрасныйredСерыйgrayСеребряныйsilverЗеленыйgreenЧирокtealИзвесть limeБелыйwhiteТемно-бордов.maroonжелтыйyellowСамостійна робота
1. Створити Web-сторінку, яка буде мати такий вигляд (Фон сторінки - чорний, перший рядок "біжить") 2. Зберегти на дискеті як virsh.htm
Практична робота № 3 Графіка в HTML
* Вставка малюнку на сторінку
* Альтернативний текст * Малюнок як фон сторінки
Завдання № 1 . Створення шаблону сторінки
1. Знайти на Робочому столі папку UROK
2. Відкрити папку, переглянути її зміст. У папці знаходяться графічні файли у форматі *jpg. Ці файли будемо вставляти у веб сторінку
3. Набрати шаблон сторінки: <HTML> <HEAD><TITLE>Графіка</TITLE>
</HEAD> <BODY>
</BODY>
</HTML>
4. Зберегти як grafika.htm у папці UROK. Вікно Блокноту не закривати!
5. Відкрити файл grafika.htm , переглянути результат у Internet Explorer. Вікно не закривати!
6. Далі працювати з двома вікнами Завдання № 2. Введення тегів. Перегляд результатів
БлокнотInternet Explorer Вставка малюнкуЯк це виглядає
1.Вставити у сторінку малюнок з папки UROK
<HTML> <HEAD><TITLE>Графіка</TITLE></HEAD> <BODY>
<img src=cat.jpg>
</BODY></HTML>
2. Зберегти зміни (Файл-Сохранить)
3. Переглянути результат у Internet Explorer
Обновить
Малюнок заповнює всю сторінкуЗменшення розміру малюнкаЯк це виглядає
1. Змінити розмір малюнку в три рази:
(widht - ширина height - довжина)
<HTML> <HEAD><TITLE>Графіка</TITLE></HEAD> <BODY>
<img src=cat.jpg widht=30% height=30%>
</BODY></HTML> 2. Зберегти зміни у файлі (Файл-Сохранить)
3. Переглянути результат у Internet ExplorerОбновить
(Малюнок зменшено в три рази)Вирівнювання малюнкуЯк це виглядає
1. Вирівняти малюнок по центру
<HTML> <HEAD><TITLE>Графіка</TITLE></HEAD> <BODY>
<center>
<img src=cat.jpg widht=30% height=30%>
</center>
</BODY></HTML >
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Переглянути результат у Internet Explorer
Обновить
Підпис до малюнкуЯк це виглядає
1. Вставити підпис до малюнку
<HTML> <HEAD><TITLE>Графіка</TITLE></HEAD> <BODY>
<center>
<img src=cat.jpg widht=30% height=30%>
<p>Цей підпис буде розташовано по центру</p>
</center>
</BODY></HTML> 2. Зберегти зміни у файлі (Файл-Сохранить)
3. Переглянути результат у Internet Explorer
Обновить
Альтернативний текстЯк це виглядає
1. Ввести до малюнку альтернативний текст
(підказку, що випливає)
<HTML> <HEAD><TITLE>Графіка</TITLE></HEAD> <BODY>
<center>
<img src=cat.jpg widht=30% height=30% alt="Це моє кошеня Васька">
<p>Цей підпис буде розташовано по центру</p>
</center>
</BODY></HTML >
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Переглянути результат у Internet Explorer
Обновить
Малюнок як фон сторінкиЯк це виглядає
1. Зробити малюнок fon1.jpg фоном сторінки
<HTML> <HEAD><TITLE>Графіка</TITLE></HEAD> <BODY>
<body background=fon1.jpg>
<center>
<img src=cat.jpg widht=30% height=30% alt="Це моє кошеня Васька">
<p>Цей підпис буде розташовано по центру</p>
</center>
</BODY></HTML> 2. Зберегти зміни у файлі (Файл-Сохранить)
3. Переглянути результат у Internet Explorer
Обновить
Практична робота № 4 Гіперпосилання
* Внутрішні гіперпосилання
* Зовнішні гіперпосилання
* Гіперпосилання на музичний файл
* Гіперпосилання на великий малюнок (з мініатюри)
* Гіперпосилання на пошту
Завдання № 1 . Створення шаблону сторінки
1. Знайти на Робочому столі папку UROK
2. Відкрити папку, переглянути її зміст. У папці знаходяться * графічні файли у форматі *jpg * музичний файл у форматі *midi.
* Web-сторінки (text. htm, grafika.htm )
3. На ці файли будемо робити посилання.
4. Набрати шаблон сторінки: <HTML> <HEAD><TITLE>Гіпертекст</TITLE>
</HEAD> <BODY></BODY>
</HTML>
5. Зберегти як gipertext.htm у папці UROK. Вікно Блокноту не закривати!
6. Відкрити файл gipertext.htm , переглянути результат у Internet Explorer. Вікно не закривати!
7. Далі працювати з двома вікнами Довідка
Внутрішні гіперпосилання
(Посилання на об'єкт в межах одного документа)
<body link=blue>
<body alink=aqua>
<body vlink=purple>Колір гіперпосилань на протязі сторінки
Колір гіперпосилань при натисненні мишею
Колір гіперпосилань на яких вже побували
<a href=#Історія>Історія </a>
<a name=Історія>Історія</a>Посилання на слово "Історія" з меню сторінки А) перший елемент: посилання, яке вказує, куди треба перейти:
Б) мітка, що фіксує місце переходуЛокальне посилання
(Посилання на об'єкт в межах однієї папки)
<a href=gipertext.htm>
Повернутися</a>
Гіперпосилання на початок сторінки
(на саму себе)
<a href=big.jpg>
<img src=min.jpg alt="кликай сюди, побачиш великий малюнок">
Гіперпосилання на великий малюнок big.jpg
з мініатюри min.jpg <a href=pesnya.mid>пісню</a>
Гіперпосилання на музичний файл
<a href=mailto:my@rambler.ru>
Чекаємо на ваші листи</a>
Гіперпосилання на пошту
<p align=right>
<a href=grafika.htm>
На наступну сторінку</a>Гіперпосилання на іншу сторінку з тієї ж папки
Завдання № 2. Введення тегів. Перегляд результатів
Посилання на початок сторінки Як це виглядає1. Додати до сторінки текст.(перед тегом </body>)
2. Додати посилання на початок сторінки
<h3 align=center><a name=Історія>
<b><font color=red>Історія</font></b></a></h3>
Нашу школу було побудовано у 60-ті роки минулого століття.
На ювілей школи приїхали її випускники. Вони стали лікарями, інженерами, юристами, службовцями. Випускники зустрілися зі своїми учителями, згадали шкільні роки, висловили подяку своїм наставникам.
Під час зустрічі лунало багато теплих слів, пісень, жартів.
Випускники заходили в класи, сиділи за партами, пригадували різні випадки зі шкільного життя.
Учні школи, батьки, артисти співали гімн школи
<p align=center><a href=gipertext.htm>
<b><font size=3>Повернутися</font></b></a></p>
3. Зберегти зміни у файлі (Файл-Сохранить)
4. Переглянути результат у Internet ExplorerОбновить
Посилання на великий малюнок з мініатюриЯк це виглядає1. Додати до сторінки мініатюру (після тегу <center>)
2. Зробити посилання на великий малюнок
<p><a href=школа.jpg>
<img src=школа.jpg width=92 height=69 alt="кликай сюди, побачиш великий малюнок">
3. Зберегти зміни у файлі (Файл-Сохранить)
4. Переглянути результат у Internet Explorer
Обновить
Посилання на поштуЯк це виглядає
1. Додати до сторінки посилання на пошту
(дописати теги після посилання "Повернутися")
<a href=mailto:uchiha@rambler.ru>
Чекаємо на ваші листи</a>
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Переглянути результат у Internet Explorer
При натисненні на фразу "чекаємо на ваші листи"
запускається програма OutlookExpress та з'являється пустий бланк для листаОбновить
Локальне гіперпосилання (відносне)Як це виглядає1. Додати до сторінки гіперпосилання на іншу сторінку з того ж серверу.
(Після посилання на пошту дописати з нового абзацу "На наступну сторінку")
<p align=right><a href=grafika.htm>На наступну сторінку</a>
2. Зберегти зміни у файлі (Файл-Сохранить)
3. Переглянути результат у Internet Explorer
Обновить
При натисненні на відносне посилання відкривається інша сторінка
Практична робота № 7
Тема "Створення сайту" Сайт - це група сторінок, * присвячених певній темі
* пов'язаних гіперпосиланнями
* розміщених в певному каталозі Web-сервера
Етапи створення Web-сайтів
1
Визначення цілей та функцій сайту:
* інформація про людину чи заклад; * електронна бібліотека;
* електронний бізнес; * дискусійний форум;
* дистанційне навчання тощо.2
Створення макету сайта3Добір матеріалів (текстів, графіки тощо)4
Створення окремих сторінок
5Тестування 6Публікація сторінок на сервері7Реклама сайту8Експлуатація сайту
Урок № 1
Створення першої сторінки сайту
Рядок, що біжить. Колір та розмір шрифту. Вирівнювання. Створення таблиці
Завдання № 1. Створити веб-сторінку
Завдання № 2. Додати на сторінку таблицю (1 колонка)
Так буде виглядати сторінка на першому уроці
Так буде виглядати HTML код сторінки
1. <html>
2. <head>
3. <title>Моя перша сторінка</title>
4. </head>
5. <body>
6. <body bgcolor=gold>
7. <body text=black>
8. <h1><font color=green><marquee><b>Моя перша сторінка</b></marquee></font></h1>
9. </body>
10. </html>
Пояснення
1 - 14<html></html>Межи сторінки2 - 4<head></head>
<title></title>Заголовок сторінки.
Назва сторінки5 - 13<body></body<Тіло документу6<body bgcolor=gold>Колір фону сторінки - золотий7<body text=black>Колір тексту сторінки - чорний8<marquee></marquee>Рядок, що біжить: заголовок №1,колір тексту зелений,
шрифт жирнийЗміст
Про мене
Адреса і телефон
сМої друзі
Про мене
Моє ім'я Олександр. Я навчаюсь в 11 класі харківської школи.
Ходжу на уроки, гуляю с друзями, слухаю музику - одним словом, середньостатистичний учень
Повернутися до змісту
Адреса і телефон
Моя адреса: м. Харків, вул. Рибалка, 41
Мій телефон: 92-12-47
Моя електронна пошта: uchiha@rambler.ru Чекаю на ваші листи
Повернутися до змісту
Мої друзі
Мої друзі - це Дмитро, Сергій та Олег. Це гарні хлопці, яких я знаю вже 10 років. Вони ніколи не підведуть, завжди прийдуть на допомогу в тяжку хвилину.
Хто хоче, може послухати нашу улюблену пісню У вільний час ми вивчаємо архітектуру нашого рідного міста. Тут ви можете подивитись фото будинків та вулиць Харкова
Повернутися до змісту
ДаліМоя перша сторінка
Уроки № 2
Гіперпосилання.
1. Додати в тіло сторінки * колір посилань (8)
* колір посилань при натискувані (9)
* колір посилань, на яких вже побували (10)
2. Ввести в таблицю текст та посилання:
* внутрішні посилання
* посилання на пошту * посилання на музику
* посилання на іншу сторінку
Автор
lyubov
Документ
Категория
Без категории
Просмотров
104
Размер файла
530 Кб
Теги
урок, веб
1/--страниц
Пожаловаться на содержимое документа