Учні гуртка були ознайомлені з поняттями гіпертексту, тегової моделі, основними тегами мови HTML і засобами розробки веб-сторінок.
Були сформовані знання, уміння та навички, необхідні для створення веб-сторінок, ознайомлені із засобами розроблення веб-документів.
Згідно програми гуртка учнями була виконана така творча робота:
- Створення фотографій цифровим фотоапаратом,
- Створення презентацій “Мій улюблений фільм”,
- Створення сайтів на вільну тему
- Створення таблиці тегів для кращого запам’ятовування тощо.
Для учнів була створена система лабораторних робіт (4 л.р.).
Можна сказати, що рівень зацікавленості учнів до предмету інформатика значно зріс.
Найбільше хотілося б відмітити Перевєрзєва Е. Даний гурток допоміг Едіку “розкритися” з іншої сторони. Зміни у цього учня були помічені й іншими вчителями.
Створена нами таблиця
| <html></html> | открывающий тэг закрывающий | обязательные тэги | |||||||||||
| <head></head> | голова документа | ||||||||||||
| <title></title> | заголовок | ||||||||||||
| <BASE> | href="http://www.igf.ru/other/index.html" | | |||||||||||
| <body></body> | тело документа | ||||||||||||
| | | | |||||||||||
| <br> | перенос текста на другую строку | ||||||||||||
| <font></font> | text | может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial) | Атрибут цвета текста | ||||||||||
| color | Цвет текста | ||||||||||||
| size | размер | ||||||||||||
| face | -Times; -Times New Roman; -Arial; -Helvetica; -Courier; -Verdana; -Tahoma; -Cosmic Sans; -Garamond | тип шрифта(В атрибуте face можно указать сразу несколько типов шрифтов: <font face="arial, verdana, courier"> текст (шрифт Arial) </font>) | |||||||||||
| bgcolor | Атрибут цвета фона | ||||||||||||
| background="…" | картинку можно сделать фоном документа | ||||||||||||
| <p></p> | параграф | ||||||||||||
| align | "center" | По центру | Выравнивание | ||||||||||
| "left" | слева | ||||||||||||
| "right" | справа | ||||||||||||
| "justify" | По обоим краям документа | ||||||||||||
| <div></div> | выравнивание содержимого документа | ||||||||||||
<H1> </H1><H2> </H2><H3> </H3><H4> </H4><H5> </H5><H6> </H6> | Размер текста для небольшой строки | ||||||||||||
| <font size="+4"></font> <font size="+3"></font> <font size="+2"></font> <font size="+1"></font> <font size="+0"></font> <font size="-1"></font> <font size="-2"></font> | устанавливает желаемый размер шрифта | ||||||||||||
| <b> </b> | Полужирный текст | ||||||||||||
| <i> </i> | Наклонный текст (курсив) | ||||||||||||
| <tt> </tt> | моноширинный шрифт (шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки) | ||||||||||||
| <pre></pre> | моноширинный шрифт(текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений) | ||||||||||||
| <u> </u> | Подчеркнутый текст | ||||||||||||
| <strike> </strike> или <s> </s> | | ||||||||||||
| <big> </big> | крупный шрифт | ||||||||||||
| <small> </small> | малый шрифт | ||||||||||||
| <sup> </sup> | Верхний индекс(sup) | ||||||||||||
| <sub> </sub> | Нижний индекс(sub) | ||||||||||||
| <img src="…"> | <img src="…" align="bottom"> | Вставка рисунка | текст может располагаться внизу | ||||||||||
| <img src="…" align="middle"> | текст может располагаться посередине | ||||||||||||
| <img src="…" align="top"> | текст может располагаться вверху | ||||||||||||
| vspace | задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек | ||||||||||||
| hspace | тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях | ||||||||||||
| alt | краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. | ||||||||||||
| width | ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире). | ||||||||||||
| height | высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать | ||||||||||||
| border | рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю. | ||||||||||||
| <a href="…">посмотреть мои фотографии</a> | Тэг <a></a> делает ссылкой заключенную в него картинку или фразу | ||||||||||||
| link | цвет просто ссылки | цвета ссылок мы прописываем в <body> | |||||||||||
| alink | цвет активной ссылки (нажатой) | ||||||||||||
| vlink | цвет уже посещенной ссылки | ||||||||||||
| <a href="big.jpg" target="_blank"> <img src="small.jpg"> </a> | картинка (или любой другой файл-документ) откроется в новом окне броузера | ||||||||||||
| <a href="big.jpg"> <img src="small.jpg"> </a> | картинка (или любой другой файл-документ) откроется в том же окне | ||||||||||||
| <A href="#stih1">Ссылка на стих первый</A><BR> <A name="stih1">Стих первый</A> <PRE> ... тра-ля-ля 1... </PRE> | ссылка не на другой документ, а внутри того же документа - закладка | ||||||||||||
| <A href="ancorpri.html#stih3"> Ссылка на стих третий из какого-то другого документа </A> | ссылка на закладку из других документов | 1 способ | |||||||||||
| <H3 id="stih2">Стих второй</H3> | 2 способ | ||||||||||||
| <table></table> | <tr></tr> | Таблица задается этим тэгом | строчка таблицы | ||||||||||
| <td></td> | столбец (ячейка) таблицы | ||||||||||||
| valign= | "middle" | По середине ячейки | Вертикальное выравнивание | ||||||||||
| top | наверху ячейки | ||||||||||||
| bottom | внизу ячейки | ||||||||||||
| | | ||||||||||||
| | | ||||||||||||
| | | ||||||||||||
Пример:
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>1x3</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699" valign="top"> <center>2x3</center> </td>
</tr>
</table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33" valign="top"> <center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td width="50" bgcolor="#FFCC33" valign="bottom"> <center>1x3</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom"> <center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699" valign="top"> <center>2x3</center> </td>
</tr>
</table>
