План уроку виробничого навчання Назва теми .         Основи комп’ютерної графіки та Web- дизайну        Тема уроку:  Робота зі шрифтами, списками та таблицями.

Мета уроку:  

1)     навчальна мета: навчитися створювати найпростішу Web-сторінку використовуючи списки, таблиці, шрифти.

2)     розвиваюча мета: розвивати вміння думати, бачити, спостерігати;

3)     виховна мета: виховання дбайливого ставлення до обладнання та культури навчального процесу;

Тип уроку: урок засвоєння нових знань та умінь.

Методи проведення уроку: розповідь-пояснення, самостійна робота. 

Матеріально-технічне забезпечення уроку: 

персональні комп’ютери, програмне забезпечення:, ОС Windows 7.

 забезпечення уроку: самостійна робота.

                             Хід виконання роботи

Теорія

Для поділу HTML-документа на логічно закінчені блоки використовують заголовки. Завдяки заголовкам відвідувач Web-сторінки може отримати уявлення про її вміст. Для задання заголовків на Web-сторінці використовується парний тег:

<Hn> заголовок текста </Hn> , де де n = 1, 2, 3, 4, 5, 6. 

 

Існує шість рівнів заголовків – від H1 (найбільш важливий) до H6

(найменш важливий). Програма броузера відображає заголовки більшим (напівжирним) шрифтом. Чим вище рівень заголовка, тим більший розмір шрифту. Заголовки відокремлюються порожніми рядками від іншого тексту. Наприклад: <Н1> Джерельце </НІ>

 

Для поділу HTML-документа на абзаци використовують теги: 

<Р> текст <Р> – абзац. Можна використовувати тільки відкриваючий тег.

<ВR> – початок нового рядка (але не абзаца). Теги <BR> зручні при оформленні поштових адрес, наборі віршів тощо.

<HR> – вставка горизонтальної лінії.

 

Абзаци, що задаються тегами <Р> і <BR>, за умовчанням вирівнюються по лівому краю сторінки. Змінити таке вирівнювання можна за допомогою атрибута align. 

align= "center" – вирівнювання по центру;

alіgn= "right" - вирівнювання по правому краю сторінки; align="left")  - вирівнювання по лівому краю сторінки.

 

Наприклад, заголовок

<НІ аlign="сеnter">Джерельце</Н1> розташовуватиметься по центру сторінки.

 

Параметри шрифту, який використовується для відображення тексту на Web-сторінках, найпростіше визначити за допомогою елемента FONT. Для цього елемента передбачені такі атрибути: 

face (гарнітура шрифту або список допустимих шрифтів);  color (колір шрифту);  size (розмір шрифту). 

 

Наприклад, для виведення слова “Вода” шрифтом Arial червоного кольору, потрібно ввести в документ параметри: <FONT face="Arial" со1ог="red"> Вода </FONT>

 

Для оформлення шрифтів на Web-сторінки використовуються теги, які задають вигляд абзацу та шрифту. Деякі з них:

 

<B>текст</B> – напівжирний; 

<I>текст</I> – курсив;

<U>текст</U> – підкреслювання;

<FONT SIZE = n > текст </FONT> - задання розміру шрифта. (n=1,2,3,

..., 7);

<FONT COLOR = кольорова специфікація > текст </FONT> - задання кольору шрифта

 

Кольорова специфікація

                                                                   Black (Чорний) = "#000000"  

                                                                   Green (Зелений) = "#008000"

                                                                   Silver (Срібло)= "#C0C0C0" 

                                                                  Lime (Лимон) = "#00FF00"

                                                                   Gray (Сірий) = "#808080"        

                                                                   Olive (Оливковий) = "#808000"

                                                                  White (Білий) = "#FFFFFF" 

                                                                  Yellow (Жовтий)= "#FFFF00"

                                                                  Maroon (Темно-бордовий) = "#800000"

                                                                   Navy (Темно-синій) = "#000080"

                                                                  Red (Червоний) = "#FF0000" 

                                                                  Blue (Синій) = "#0000FF"

                                                                   Purple (Фіолетовий) = "#800080"      

                                                                  Teal (Бірюзовий) = "#008080"

                                                                  Fuchsia (Фуксія) = "#FF00FF" 

                                                                   Aqua (Блакитний) = "#00FFFF"

Увага! При використанні парних тегів потрібно слідкувати за їх правильним “вкладанням” , наприклад:

 

<НІ аlign="сеnter"> <FONT COLOR = "#000000> <B> Джерельце </B>

</FONT> </Н1>  

5. Таблиці

 Таблиці потрібні для представлення інформації в табличному виді, а також для необхідного розміщення тексту та рисунків.

Таблиця починається з тегу <TABLE> і закінчується тегом </TABLE>.

Тег <TABLE> може включати атрибути:

ALIGN 

Встановлює розташування таблиці стосовно полів документа. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER

(вирівнювання по центрі), ALIGN=RIGHT (вирівнювання вправо).  WIDTH 

Ширина таблиці. Її можна задати в пікселях (наприклад, WIDTH=400) або у відсотках від ширини сторінки (наприклад, WIDTH=80%).  BORDER 

Встановлює ширину зовнішньої рамки таблиці й комірок у пікселях (наприклад, BORDER=4). Якщо атрибут не встановлений, таблиця показується без рамки. 

CELLSPACING  Встановлює відстань між рамками комірок таблиці в пікселях (наприклад, CELLSPACING=2).  CELLPADDIN Встановлює відстань між рамкою комірки і текстом у пікселях (наприклад, CELLPADDING=10). 

Таблиця може мати заголовок (<CAPTION> ... </CAPTION>), хоча заголовок не є обов'язковим. Тег <CAPTION> може включати атрибут ALIGN. Припустимі значення: <CAPTION ALIGN=TOP> (заголовок міститься над таблицею)    і       <CAPTION          ALIGN=BOTTOM>       (заголовок міститься    під таблицею).

Кожен рядок таблиці починається з тега <TR> і закінчується тегом </TR>.

Мітка <TR> може включати наступні атрибути:

ALIGN Встановлює вирівнювання тексту в комірках рядка. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо).  VALIGN 

Встановлює вертикальне вирівнювання тексту в комірках рядка. Припустимі значення: VALIGN=TOP (вирівнювання по верхньому краю),

      VALIGN=MIDDLE      (вирівнювання      по      центру),      VALIGN=BOTTOM

(вирівнювання по нижньому краю).

Кожна комірка таблиці починається з тега <TD> і закінчується тегом

</TD>. Тег <TD> може включати наступні атрибути:

NOWRAP 

Присутність цього атрибуту означає, що вміст комірки повинен бути показаний в один рядок. 

COLSPAN 

Встановлює "розмах" комірки по горизонталі. Наприклад, COLSPAN=3 означає, що комірка простирається на три стовпчики. 

ROWSPAN 

Встановлює "розмах" комірки по вертикалі. Наприклад, ROWSPAN=2 означає, що комірка займає два рядки.  ALIGN 

Встановлює      вирівнювання      тексту         в        комірці.      Припустимі       значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо).  VALIGN 

Встановлює вертикальне вирівнювання тексту в комірці. Припустимі значення: VALIGN=TOP (вирівнювання     по      верхньому краю),         VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTTOM (вирівнювання по нижньому краю). 

WIDTH 

Встановлює ширину комірки в пікселях (наприклад, WIDTH=200). HEIGHT 

Встановлює висоту комірки в пікселях (наприклад, HEIGHT=40). Якщо комірка таблиці порожня, навколо неї не малюється рамка. Якщо комірка порожня, а рамка потрібна, в комірку можна ввести символьний об'єкт &nbsp; (non– breaking space – пробіл, що не розриває,). Комірка як і раніше буде порожньою, а рамка навколо неї буде. Будь–яка комірка таблиці може містити в собі іншу таблицю. 

 

Практичне виконання завдання

1. Основа html-документа. У текстовому редакторі, наприклад WordPad або Notepade (Блокнот) введіть простий HTML-документ: 

<html> 

 <head>   <title> 

 Приклад 1 

 </title>

 </head> 

 <body>   <H1> 

 Початок! 

 </H1>   <P> 

 Це найпростіший приклад HTML-документа. 

 </P> 

 <P> 

 Цей sample.htm-файл може бути одночасно відкритий і у Notepad (або

WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл–Сохранить).

Відкрийте sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML-документі. 

 </P> 

 </body> 

</html>

 

Для зручності читання були введені абзаци, але у HTML це не обов'язково. Браузери ігнорують символи кінця рядку і пропуски у HTML–файлах. 

 

Змініть sample1.htm таким чином і збережіть зміни:

<html> 

<head>  <title>Приклад 1 </title> 

</head> 

<body> 

<H1> Початок! </H1> 

<P>Це найпростіший приклад HTML–документа. .</P> 

<P> Цей sample.htm–файл може бути одночасно відкритий і у 

Notepad (або WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл– Сохранить). Необхідно відкрити sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML–документі.</P>  </body> 

</html>

 

Зробіть активним вікно Internet Explorer з відкритим файлом sample1.htm і застосуйте команду Обновить. 

 

2. Заголовки та абзаци. У редакторі Блокнот створіть файл sample2.htm з таким вмістом: 

<html> 

<head>  <title>Приклад 2</title> 

</head> 

<body> 

<H1 ALIGN=CENTER>Продовження!</H1> 

<H2>Це складніший приклад HTML–документа</H2> 

<P>Тепер ми знаємо, що абзац можна вирівнювати не тільки вліво, </P> 

<P ALIGN=CENTER> але й по центру </P> <P ALIGN=RIGHT> або по правому краю.</P> 

</body> 

</html>

Перегляньте файл sample2.htm у браузері Internet Explorer.

 

3. Заголовки. У редакторі Блокнот створіть файл sample3.htm з таким вмістом: <html> 

<head> 

<title>Приклад 3</title> 

</head> 

<body> 

<H1>Деякі положення</H1> 

<H2>Основи роботи</H2> 

<P>HTML–файли розробляються на локальному диску <BR> 

Іншими словами, комп'ютер, на якому виконуються роботи може і не мати підключення до Інтернет<BR> 

*.htm–файл може бути одночасно відкритий і у Notepad (або WordPad), і у Internet Explorer. <BR> 

Для того, щоб побачити зміни, що зроблені у текстовому редакторі, у

Internet Explorer, застосовується команда Обновить <BR> 

 </body>

</html>

 

4.   Лінії.          У       редакторі    Блокнот      створіть      файл sample4.htm       колекції горизонтальних ліній з таким вмістом:

<html> 

<head>  <title>Приклад 4</title> 

</head> 

<body> 

<H1>Колекція горизонтальних ліній</H1> 

<HR SIZE=2 WIDTH=100%><BR> 

<HR SIZE=4 WIDTH=50%><BR> 

<HR SIZE=8 WIDTH=25%><BR> 

<HR SIZE=16 WIDTH=12%><BR> 

</body>  </html>  5. Форматування шрифту. У редакторі Блокнот створіть файл sample5.htm з таким вмістом: 

<html> 

<head>  <title>Приклад 5</title> 

</head> 

<body> 

<H1>Шрифтове виділення фрагментів текста</H1> 

<P> Ми знаємо, що фрагменти тексту можна виділяти <B> жирним </B> або <I> нахиленим </I> або <U>підкреслиним</U> шрифтами. Крім того, можна включати в текст фрагменти з фіксованою шириною символу

<TT>(імітація друкарської машинки)</TT></P> 

<P>Існує ряд логічних стилів:</P> 

<P><EM>EM – акцент </EM><BR> 

<STRONG>STRONG – сильний акцент </STRONG><BR>  <CODE>CODE – для фрагментів вихідних текстів</CODE><BR> 

<SAMP>SAMP – взірець </SAMP><BR> 

<KBD>KBD – клавіатура</KBD><BR> 

<VAR>VAR – змінна </VAR></P> 

</body> 

</html> 

 

6. Марковані списки. У редакторі Блокнот створіть файл sample6.htm з таким вмістом: 

<html> 

<head>  <title>Приклад 6</title> 

</head> 

<body>  <H1>Створення маркірованих списків</H1> 

<UL> 

<LI>1 елемент списку; </LI> 

<LI>1 елемент списку; </LI>  <LI>1 елемент списку; </LI>

</UL> <H1>Створення нумерованих списків</H1> 

<OL> 

<LI>1 елемент списку; </LI> 

<LI>2 елемент списку; </LI>  <LI>3 елемент списку; </LI> </OL>

<DT>Списки визначень 

<DD>Цей вид списків складніший, ніж два попередніх, але він виглядає більш ефектно. 

<P>Списки можна вбудовувати один в другий, але не  слід вбудовувати багато рівнів. </P> 

<P>Всередині елемента списку може знаходитись  декілька абзаців. Всі абзаци при цьому будуть мати однакове  ліве поле. </P> 

</DL> 

</body>  </html> 

Перегляньте результат у оглядачі.

 

7. Таблиці. У редакторі Блокнот  створіть файл sample7.htm. 

<HTML> 

<HEAD>  <TITLE>Приклад 10</TITLE> </HEAD> 

<H1>Найпростіша таблиця </H1> 

<TABLE BORDER=1> <!–Це початок таблиці–> 

<CAPTION> <!–Це заголовок таблиці–>  У таблиці може бути заголовок  </CAPTION> 

<TR> <!–Це початок першого рядка–> 

<TD> <!–Це початок першої комірки–> 

Перший рядок, перший стовпчик 

</TD> <!–Це кінець першої комірки–> 

<TD> <!–Це початок другої комірки–> Перший рядок, другий стовпчик 

</TD> <!–Це кінець другої комірки–> 

</TR> <!–Це кінець першого рядка –> 

<TR> <!–Це початок другого рядка–> 

<TD> <!–Це початок першої комірки–> Другий рядок, перший стовпчик 

</TD> <!–Це кінець першої комірки–>  

<TD> <!–Це початок другої комірки–> Другий рядок, другий стовпчик 

</TD> <!–Це кінець другої комірки–> 

</TR> <!–Це кінець другого рядка–> 

</TABLE> <!–Це кінець таблиці–> 

</BODY> 

</HTML>

 

Перегляньте sample7.htm у оглядачі.

 

Запитання для контролю:

1.                        Призначення мови HTML.

2.                        Поняття тегу, парні та непарні теги, правила написання тегів. Призначення атрибутів тегів.

3.                        Обов’язкові теги та їх призначення.

4.                        Назвіть теги для створення заголовків шести різних рівнів.

5.                        Створення коментарів у HTML документі.

6.                        Теги форматування шрифтів.

7.                        Створення маркірованих та нумерованих списків.

8.                        Створення форматованого списку.

9.                        Створення таблиць у HTML.

10.                   Атрибути тегу <table>.

11.                   Атрибути тегу <tr>.

12.                   Атрибути тегу <td>.

13.                   Створення заголовку таблиці.

14.                   Створення загальних посилань.

15.                   Кольорове оформлення сторінок.