Geum.ru

Hyper Text Markup Language (html) Эта лекция

Вид материалаЛекция

Содержание


Дизайн WEB – страниц и виды сайтов
Введение в стандарт Hyper Text Markup Language (HTML)
Структура HTML – документа
Таблица 1.1. Структура Web - страницы
Информация, видимая в рабочей зоне окна браузера
Основные тэги HTML
Таблица 1.3. Параметры некоторых тэгов
Задание 1.2 (зачетное) Создание визитной карточки
Подобный материал:

Лекция 1. Создание web-сайтов. Введение в стандарт Hyper Text Markup Language (HTML)

Эта лекция частично повторяет материал прошлого года и предназначена в основном для тех участников, которые участвуют в ОСО впервые и незнакомы с сайтостроением. Остальные могут ее пропустить и сразу перейти к выполнению заданий. Но это не полное повторение прошлогоднего курса, так что если у начинающих будут вопросы, предлагаю просмотреть каталог ссылок по сайтостроению, составленный участниками ОСО 2005 ссылка скрыта. Если останутся какие-то вопросы, то пишите.

    1. Дизайн WEB – страниц и виды сайтов


Web – страницей называют гипертекстовый документ, содержащий текстовую и графическую информацию. Несколько web – страниц, объединенных общей темой, служащих общей цели, образуют web – сайт. Ценность сайта, конечно же, определяет содержание, но важную роль также играют дизайн и удобство перемещения по сайту (навигация)

Дизайн сайта должен создавать определённый настрой, соответствующий поставленной задаче. Важно продумать оригинальный стиль сайта и выдерживать его на всех страницах сайта. В этом могут помочь шаблоны страниц, которые вы можете создать в HTML – редакторе, например, Macromedia Dreamweaver (о нем мы поговорим подробнее во второй лекции). В понятие дизайна сайта входят грамотно подобранная цветовая гамма оформления сайта, графические элементы, присутствующие на сайте, в том числе логотип, кнопки навигации, их сочетание с текстом и друг с другом, шрифты и т.п.

Навигация сайта должна быть удобной и интуитивно понятной пользователю, выдержанна в одном стиле и расположена на одном и том же месте на всех страницах сайта, чтобы попав на сайт, пользователь мог спокойно работать, не испытывая физического и нервного напряжения, разгадывая логику создателя.

Содержание сайта должно быть информационно насыщенным, свежим, поданным доступным, нескучным языком, разнообразным. Чтобы пользователь нашел полезным для себя Ваш сайт, и ему захотелось еще раз на него зайти. В рамках нашего проекта нам предстоит создать сайт, который можно будет использовать в образовательных целях. Это может быть отдельный урок или учебный блок, методический материал в помощь ученикам и/или учителю и т.д. Конечно, по мере разработки и наполнения сайта, его содержание может меняться, но основные направления лучше выработать сразу.

Чтобы с сайтом было удобно работать, информация должна быть грамотно разбита на разделы, он должен иметь простую и понятную навигацию. Поэтому, разобравшись с темой и содержанием, надо продумать структуру сайта. Лучше составить для себя что-то вроде схемы, в которой указать названия страниц и переходы между ними.

Задание 1.1 Разработать структуру и дизайн сайта, подобрать содержание (текст) и элементы оформления (графика). Это Вам потребуется для дальнейшей работы над сайтом.

    1. Введение в стандарт Hyper Text Markup Language (HTML)


Под гипертекстом понимают особым образом структурированный документ, с переходами – ссылками внутри документа, позволяющими переходить в любое место документа, к другим документам. Технология WWW, использующая такие документы широко используется в Интернет. Такие документы называют web – страницами. Для создания web – страниц, из которых состоит сайт, используется специальный язык: HTML (Hyper Text Mark Language) - язык разметки гипертекста. С помощью специальных команд этого языка - тэгов - можно легко управлять текстом и рисунками на странице и организовывать переходы между страницами.

Создать web – страничку можно в любом текстовом редакторе, например, Блокноте из группы Стандартные Windows (текстовым редактором является программа, которая создает текстовый файл. Word для этих целей лучше не использовать). Вот только сохранить файл надо будет с расширением htm или html (например, page.htm). Будьте внимательны! При сохранении файла в Блокноте, надо выбрать тип файла - все файлы и набрать полностью имя файла с расширением. Тогда его потом легко можно будет просмотреть в браузере. А имя файлам лучше всегда давать маленькими латинскими буквами, тогда не будет проблем с публикацией страниц в Интернете.

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


HTML – документ (файл, соответствующий web - странице) выглядит следующим образом: это обычный текстовый файл, в котором наряду с простым читаемым текстом встречаются команды языка (тэги), которые управляют представлением текста, графических и других элементов, располагаемых на web - странице. "Браузер" - специальная программа - просмотрщик HTML – обрабатывает тэги HTML. Чаще используется Microsoft Internet Explorer, но существуют и другие браузеры, например, Netscape Communicator, Opera. К сожалению, разные браузеры не всегда воспринимают одинаково одни и те же тэги, и есть даже тэги, которые понимает один браузер, и совсем не понимает другой.

Все команды языка записываются в угловых скобках: <>, например и могут быть парными и одиночными. Парные тэги ограничивают область применения этой команды, например, если мы хотим указать, что часть текста должна быть заголовком 1–го уровня, то этот текст ограничивается соответствующими открывающим и закрывающим тэгами:

заголовок страницы

.

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

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

Каждый тэг несет информацию о том, что должно быть в данной части HTML – документа и какой иметь вид. Внутри тэга записываются параметры, которые могут принимать различные значения.

Таблица 1.1. Структура Web - страницы



Начало HTML – документа


Здесь следует служебная информация для браузера
Начало головной части

<br />Заголовок страницы<br /> <br />

Текст, расположенный между этими тэгами, появляется в зоне заголовка окна браузера



Конец головной части


Информация, видимая в рабочей зоне окна браузера



Начало основной части. Все, что расположено между этими тэгами отображается в рабочей зоне браузера.



Конец HTML - документа

      1. Основные тэги HTML


В таблицах 2.2 и 2.3 приведены основные тэги и некоторые их параметры.

Таблица 1.2 .Основные тэги.

Название тэга
Назначение

Примечание

HTML
границы HTML документа
парный

HEAD
границы служебной информации
парный

TITLE
зона заголовка
парный

BODY
границы страницы
парный

FONT
управление шрифтами
парный

IMG
вставка рисунка
одиночный

P
абзац
парный

А
якорь, указатель
парный

A HREF
организация гиперссылки
парный

TABLE
таблица
парный

TR
строка таблицы
парный

TD
ячейка таблицы
парный

Таблица 1.3. Параметры некоторых тэгов

параметры тэгов
назначение
В каком тэге используется
Примеры значений значения

COLOR
Цвет
FONT
Red, green, …, #FF00DD,..234

SIZE
Размер
FONT
3, 5, +2, -4

SRC
источник, имя файла
IMG
ris.gif, image.jpg, ..

FACE
название шрифта
FONT
Arial, Times, …

ALIGN
Расположение рисунка относительно текста
IMG
Left, right

Горизонтальное расположение в ячейке
TD
Left, right, center

VALIGN
Вертикальное расположение в ячейке
TD
Top, bottom, middle

COLSPAN
Объединение ячеек столбца таблицы

TD
2, 3, …

ROWSPAN
Объединение ячеек строки таблицы

TD
2, 3, …ение

BGCOLOR
цвет фона
BODY, TABLE
Red, green, …, #FF00DD,..234

BACKGROUND
рисунок фона
BODY, TABLE
ris.gif, image.jpg, ..

HREF
"адрес" ссылки (URL)
A
“ru“, “pag1.htm”

BORDER
толщина границы (рамки)
IMG
0, 1, 2, …

ALT
подпись рисунка
IMG
«переход на начало», «портрет..»

TEXT
цвет текста
BODY
Red, green, …, #FF00DD,..234

LINK
цвет ссылки
BODY
Red, green, …, #FF00DD,..234

VLINK
цвет просмотренной ссылки
BODY
Red, green, …, #FF00DD,..234

ALINK
цвет активной ссылки
BODY
Red, green, …, #FF00DD,..234

Наглядно познакомиться со структурой HTML – документа и использованием основных тэгов (форматирование текста, вставка рисунка и организация гиперссылки) можно на сайте web – мастерской (ссылка скрыта и ссылка скрыта)

Чтобы поместить рисунки на страницу применяется тэг IMG с обязательным параметром SRC, значение которого – это имя файла с рисунком. При этом рисунок должен быть в формате jpg, gif или png. В качестве значения параметра SRC указывается имя файла вместе с путем к нему или URL (адрес рисунка в Интернет). Важно только, чтобы это значение не изменялось с переносом HTML – документа на сервер в Интернет с Вашего компьютера. Поэтому надо задавать относительный путь к файлу. Например, если HTML – файл proba.htm расположен в папке page1, то для файла oso_ikt.jpg параметр SRC=”oso_ikt.jpg”, для файла foto1.jpg из папки photo параметр SRC=“photo/foto1.jpg”, а для файла ris1.gif из папки pictures SRC=“../pictures/ris1.gif” (Рис. 1.1).

Во многих тэгах используются параметры, которые позволяют присвоить различные свойства помещаемым на страницы объектам. Например, если поставить втэге с параметры SIZE и COLOR, определяющими размер и цвет шрифта, можно изменить размер и цвет выводимого на экран текста.

Для перехода между страницами используются гиперссылки. Если у нас имеются две странички, например, proba.htm и proba1.htm, то добавив строчку

на вторую страницу

в текст первого документа proba.htm и

назад

в текст документа proba1.htm мы свяжем два этих документа: Чтобы сделать гиперссылку в виде рисунка, надо поместить тэг IMG с соответствующим параметром SRC вместо слов «назад» или «на вторую страницу». Обычно при этом картинку сопровождают подписью: значением параметра alt надо пояснить, что собственно произойдет, если щелкнуть мышкой по рисунку. Например, во втором случае. можно было бы написать:

Задание 1.2 (зачетное) Создание визитной карточки


Создайте свою визитную карточку. Она должна состоять не менее, чем из 2 страниц, соединенных гиперссылками. Расскажите немного о себе и своей команде. В визитной карточке отразите следующую информацию:
  1. Название команды (имя и фамилия для индивидуального участника).
  2. Состав участников, возраст (класс) и немного о них.
  3. Немного о своем городе, селе крае …
  4. Немного о своей школе.
  5. Приветствие и пожелания участникам ОСО.
  6. На визитной карточке укажите название секции и поставьте ссылку на сайт ОСО.

Если у вас уже есть место в Интернете, разместите свою визитку там (приветствуется) и пришлите копию в архиве zip. Имя архива с визиткой: idXXX-wbs_1.zip , тема письма [oso-wbs] idXXX-wbs task1, в теле письма укажите пожалуйста, еще раз ваш номер, название команды, ФИО руководителя , школу и город.

В дальнейшем эта визитка может стать частью Вашего сайта. Визитки команд – участников секции «Учебный WEB- сайт» ОСО-2005 можно посмотреть по адресу .narod.ru/oso2005/task2.htm