Итоговый урок

Ура! Каникулы

Тест словарного запаса (Тест определяет ваш пассивный словарный запас, или, говоря проще, количество известных вам слов русского языка. )

Как воплотить свою идею:

Лучшая монета никогда не расходуется (видео)
Что такое Сторителлинг

Распорядок жизни великих людей 

Урок 32. HTML. Самостоятельная работа

В самостоятельную  работу включены вопросы по оформлению текста на WEB-странице

Вы должны выполнить два задания:

1. написать теги для оформления текста по заданному образцу, включая структурные теги html документа - html, head, body
2. нарисовать вид WEB-страницы по заданной разметке

Работу выполняйте в тетради для контрольных работ

Задание

• Вариант 1 
• Вариант 2 

Урок 32. Изображение на WEB-странице

Материалы к уроку

Урок  5  курса Дуванова А.А.

ссылка работает только в школе

Картинка в тексте

Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться командой IMG.  Команда не имеет парного закрывающего тега, но имеет много атрибутов. 

Атрибут src = имя файла

Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда <IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога. 

Обычно графические файлы не смешивают с HTML-текстами, а помещают в отдельный каталог pic, который является подкаталогом для каталога с программами (html-файлами). Тогда команда вывода графики будет иметь вид: <IMG src=./pic/img.gif> 

Атрибут alt = "текст надписи"

Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:

<IMG src=monstr.jpg alt="Страшный зверь"> 

Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию. 

Атрибут title = "текст надписи"

Аналогичен alt, но более современен

Атрибуты width = n и height = m

Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка. 

Если атрибуты не заданы, картинка рисуется в естественных размерах. 

Атрибут border = n

Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов. При отсутствии атрибута, или при значении n=0 рамка не рисуется. 

Атрибут align

Этот атрибут позволяет определять положение иллюстрации по отношению к соседним элементам документа. 

Практическая работа 

Урок 31. Списки в таблице на WEB-странице

Повторение. Вложенные списки

На прошлом уроке нужно было построить вложенный список вида:

1. Введение
2. Что такое информатика ?
3. Что такое информация ?
4. Что такое вычислительная машина ?
• Общие положения
• Подробнее о памяти
• Ввод-вывод
• Оперативная память, внешняя память
• Порядок некоторых величин
5. Что может делать вычислительная машина?
6. Что такое программирование?
7. Несколько ключевых слов.

Внешний список - нумерованный. Вложенный - маркированный. 

Нумерация внешнего списка правильно продолжается после вложенного.

Для такой организации списков достаточно после нужного элемента внешнего списка вставить теги для организации вложенного списка:

<ol type=1>
	<li>Введение</li>
	<li>Что такое информатика ?</li>
	<li>Что такое информация ?</li>
	<li>Что такое вычислительная машина ?</li>
	<ul>
	<li>Общие положения</li>
	<li>Подробнее о памяти</li>
	<li>Ввод-вывод</li>
	<li>Оперативная память, внешняя память</li>
	<li>Порядок некоторых величин</li>
	</ul>
	<li> Что может делать вычислительная машина?</li>
	<li>Что такое программирование?</li>
	<li>Несколько ключевых слов.</li>
</ol>

Повторение. Оформление таблицы

Для создания таблицы применяются теги
<TABLE border=1> 
<CAPTION> Заголовок таблицы </CAPTION> <TR>            <!-- строка -->   
<TD>1,1</TD>     <!-- ячейка -->     
</TR>  <!-- конец строки --> 
</TABLE> <!-- конец таблицы --> 

Для размещения в ячейки таблицы объектов нужно использовать теги для создания этих объектов.
Практическая работа 

Урок 30. Таблицы на WEB-странице

Материалы к уроку в документе.

Таблица - форма представления информации в виде, удобном для анализа. Таблица состоит из строк, которые разделены на ячейки. Внешний контур таблицы и ее частей — прямоугольный.

В практическом HTML-программировании таблицы совершенно незаменимы для… создания левых и правых полей окна браузера, выравнивания элементов в окне, много колонной верстки, наложения картинок друг на друга. И, наконец, для отображения на экране табличного материала.

Пример создания таблицы:

Браузер отображает строки и ячейки в строке так, как описано – слева направо:

<TABLE border=1> 
<TR>            <!-- Первая строка -->   
<TD>1,1</TD>     <!-- Первая ячейка -->   
<TD>1,2</TD>     <!-- Вторая ячейка --> 
</TR> 
<TR>            <!-- Вторая строка -->   
<TD>2,1</TD>     <!-- Первая ячейка -->   
<TD>(2,2)</TD>     <!-- Вторая ячейка -->  </TR> 
<TR>            <!-- Третья строка -->   
<TD>3,1</TD>     <!-- Первая ячейка -->   
<TD>3,2</TD>     <!-- Вторая ячейка --> 
</TR>
</TABLE>

Получится такая таблица:

1,1	1,2
2,1	2,2
3,1	3,2

Атрибуты таблицы в целом и ее отдельных элементов задают следующие свойства:

• выравнивание (по горизонтали и по вертикали, где возможно)
• абсолютную ширину таблицы (в пикселях) или относительно окна браузера (в процентах);
• абсолютную ширину столбца (в пикселях) или относительно строки таблицы (в процентах);
• цвет или картинку фона
• цвет и толщину рамки
• объединение ячеек по горизонтали или по вертикали.

Более подробно о тегах и их параметрах читайте в документе.

Практическая работа

Урок 29. Списки на WEB - странице

Тезисы находятся в документе

Список — форма представления объектов в виде перечисления элементов. 

Форматирование каждого элемента одного списка — одинаковое.

Объектами списка могут быть тестовые абзацы, картинки и другие.

На языке HTML список оформляется как контейнер (парный тег), включающий в себя по одному тегу для каждого элемента.

Примеры списков:

Маркированный список	Нумерованный список
Список вопросов Пятачка: ·        Какой он, этот Слонопотам? ·        Неужели очень злой? ·        Идет ли он на свист? И если идет, то зачем? ·        Любит ли он поросят или нет? ·        И как он их любит?	Список слов из словаря Эллочки: 1.      Хамите. 2.      Хо-хо! 3.      Знаменито. 4.      Мрачный. 5.      Мрак. 6.      Жуть.

В этих списках каждый элемент списка помечен маркером или номером

Практическая работа

Урок 28. Разметка текста для WEB- страниц.

Далее будем рассматривать теги, которые управляют расположением объектов в окне браузера. Эти теги располагаются в теле документа, т.е. внутри тега <body> ... </body>.

Тезисы находятся в документе.

Рассмотрим структуру HTML-документа:

<HTML> начало парного тега документа

<HEAD> начало парного тега заголовка 

  <META http-equiv="Content-Type"

  content="text/html; charset=windows-1251">

  <TITLE>Упражнение 1</TITLE>

</HEAD> конец парного тега

<BODY> начало парного тега тела. Внутри этого парного тега располагаются описания объектов, которые видны в окне браузера.

   <H1>Первый HTML-документ</H1>

   <HR> горизонтальная черта

   <P>

     Корова не похожа на лошадь. 

   </P>

</BODY> конец парного тега

</HTML> конец парного тега

Рассмотрим следующие темы:

1. Теги отображения абзацев, строк, разделительных линий
2. Атрибуты тегов
3. Форматирование текста
4. Кодирование специальных символов

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