суббота, 26 апреля 2014 г.

Урок 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

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

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


воскресенье, 20 апреля 2014 г.

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

Тезисы находятся в документе
Список — форма представления объектов в виде перечисления элементов. 
Форматирование каждого элемента одного списка — одинаковое.
Объектами списка могут быть тестовые абзацы, картинки и другие.
На языке HTML список оформляется как контейнер (парный тег), включающий в себя по одному тегу для каждого элемента.

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

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

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

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

воскресенье, 13 апреля 2014 г.

Урок 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. Кодирование специальных символов

суббота, 5 апреля 2014 г.

Урок 27. Разработка документов для WWW

Начинаем новую тему. Что такое WWW?


World Wide Web (Всемирная Паутина) -- это сеть информационных ресурсов.
В Сети (Web) приняты три механизма для предоставления этих ресурсов для наиболее широкой аудитории:

  • Единая система наименований по которым ресурсы могут быть найдены на Сети (URL).
  • Протоколы для доступа к именованым ресурсам посредством Сети (HTTP и другие).
  • Гипертекст для облегчения навигации среди ресурсов (HTML и другие языки).

 URL

Каждый ресурс доступный по Сети -- документ, изображение, видео клип, программа, и т.п. -- обладает адресом который может быть закодирован при помощи Единого Указателя Ресурса (Uniform Resource Locator), или "URL".

Гипертекст

Ресурсы сети представлены  в виде WEB-страниц, содержащих разнообразную информацию и ссылки на другие WEB-страницы. Такие страницы со ссылками называют  гипертекстом.
Гиперссылка – это элемент Web-страницы, содержащий информацию об адресе другой Web-страницы. В качестве такого объекта обычно выступает фрагмент текста, выделенный цветом и подчеркиванием, или графическая иллюстрация, выделенная цветной рамкой.

HTML

HTML - язык создания (или, как говорят, разметки), гипертекстовых документов. На том языке составлены все страницы сайтов и блогов сети Интернет.

Основы языка HTML

Понятие тега

Тег — это команда для Исполнителя.
Исполнителем является программа—браузер. Прочитывая тег, браузер выполняет определенные действия для отображения объектов документа.
Каждый тег — название, заключенное в < >.После названия тега могут следовать параметры.

Теги парные и непарные

Теги бывают парные и непарные с точки зрения записи и по содержанию.
  • Непарный тег: <название список параметров> - содержит всю информацию внутри, его действие заканчивается после >.
  • Парные тег: <название список параметров> содержание</название> - показывает, над каким содержанием надо выполнить действие. Заканчивается действие после признака окончания : </название> .
Правила использования парного тега аналогичны правилам использования скобок — всякую открывающую скобку надо закрыть.

Правила оформления документа HTML 

Структура HTML – документа.

  • Документ HTML имеет начало и конец
  • Документ HTML состоит из заголовка и тела.
В Заголовке содержатся данные о документе – заголовок, таблица кодировки…В Телеразметка самого документа.

Редакторы гипертекста

Для создания гипертекстовых документов разработаны специальные редакторы, которые подготавливают правильные шаблоны, следят за закрытием парных тегов, позволяют визуально редактировать гипертекстовый документ.
  • Редактор HTML для ОС Linux - Geany и Quanta Plus 
  • Редактор HTML для ОС Windows -  Nvu

вторник, 1 апреля 2014 г.

Урок 26. GIMP. Итоговая работа

Итоговую работу выполним в форме рекламного плаката. Например:

В плакате объединим несколько изображений и красивый текст.
Завершенный плакат экспортируем в формат jpg.
В конце работы постарайтесь все созданные вами изображения в формате jpg опубликовать на своей странице сайта Инф-10-2014-драйв
Практическая работа