Слайд 2
HTML
язык гипертекстовой разметки документов
Средства создания Web-страниц
и Web-сайтов
Язык гипертекстовой разметки документов (HTML)
Специализированные HTML-редакторы (Homesite, Hotdog
Professional, Coffee Cup HTML Editor ++)
Средства визуального проектирования пакета MS Office
Редакторы визуального проектирования
(MS Front Page, Macromedia Dreamweaver )
Одним из самых популярных визуальных HTML- редакторов является программа Microsoft FrontPage 2003. С данной программой мы познакомимся на следующих уроках информатики.
Слайд 3
HTML
язык гипертекстовой разметки документов
Методы конструирования веб-сайтов
Визуальный
Ручной или программируемый
Слайд 4
HTML
язык гипертекстовой разметки документов
Визуальный метод – МЕТОД, КОТОРЫЙ
ПОЗВОЛЯЕТ ПОСТРОИТЬ ВЕБ-САЙТ С ВЫСОКОЙ СТЕПЕНЬЮ АВТОМАТИЗАЦИИ.
( Редакторы: Microsoft
FrontPage, Dream Weawer (Macromedia), Namo WebEditor? Adobe Golive и др.)
Программируемый метод – метод создания сайта на языке HTML.
Слайд 5
Создание HTML- документа
Есть два основных способа
создания HTML-документов.
Первый- написание кода HTML вручную. Для этого нужно
знать все основные теги HTML, хорошо представлять их действие и представлять, как будет выглядеть итоговый результат после того или иного изменения кода.
Достоинства: позволяет контролировать все тонкости HTML-кода, писать код HTML можно в любом текстовом редакторе, например в Блокноте Windows, хотя и существуют различные программы, облегчающие «ручное» кодирование HTML.
Недостатки:
Процесс трудоемкий и требует постоянно держать в памяти массу информации.
Слайд 6
Создание HTML- документа
Другой способ- «визуальное» составление страниц в
специальном HTML-редакторе
Составлять HTML-документы можно, просто вставляя на страницу нужные
элементы оформления, ссылки на другие документы, изображения, тексты и размещая их так, как необходимо. Такой способ работы называют WYSISWYG (What You See is What You Get-что вы видите, то и получаете)
Достоинства: методика проста в освоении, позволяет быстро создавать достаточно сложные гипертекстовые документы и, кроме того, наглядна.
Недостатки:
HTML- редактор не позволяет реализовать все тонкости языка HTML. Поэтому визуальные HTML-редакторы предусматривают и работу непосредственно с кодом страницы.
Слайд 7
HTML
язык гипертекстовой разметки документов
из истории:
В 1989 году в
Женеве в Европейской лаборатории физики элементарных частиц Тимам Бернерсом-Ли
и его коллегами была создана концепция распределенной информационной системы на основе гипертекста. Цель создания этой системой было упрощение обмена информации между различными группами физиков.
Слайд 8
HTML
язык гипертекстовой разметки документов
Позже
появилась необходимость в создании такой системы, которая могла бы
работать с любым интерфейсом, графическим или текстовым. Система, которая была бы распределенной , нецентрализованной и подстраивающей под пользователя. Вместо попыток искать стандарты на уровне оборудования или программного обеспечения, система должна была делать это на уровне данных В результате , вскоре была разработана система гипертекстовой разметки данных, названная языком HTML
Слайд 9
Основные понятия HTML
Теги
Основой языка HTML являются теги, специальные команды, заключенные в угловые скобки, например ,
, . Между ними находятся коды, которые распознает браузер.
Теги бывают одиночными и парными.
Одиночные теги, как и следует из названия, используются поодиночке, обозначая самостоятельный элемент оформления. Например, тег
означает разрыв строки, а с помощью тега в HTML- документ можно вставить изображение. Теги можно записывать как прописными буквами, так и строчными
(, )
Слайд 10
Основные понятия HTML
Теги
Парные теги образуются
двумя тегами, открывающим и закрывающим, которые отличаются друг от
друга только значком «/» перед закрывающим тегом. Парные теги влияют на оформление всего кода HTML, находящегося между ними.
Слайд 11
Основные понятия HTML
Парные теги еще называют
«контейнером», а код находящийся между ними «содержимом контейнера». Например,
Этот текст будет полужирным. Весь текст, помещенный в контейнер оформляется полужирным шрифтом и в Web– браузере будет выглядеть примерно так: «Этот текст будет полужирным».Контейнеры могут вкладываться друг в друга, действуя вместе на содержимое вложенного контейнера. Например, Этот текст будет полужирным А этот текст еще и курсивным. Как будет выглядеть текст в Web– браузере?
Слайд 12
Основные понятия HTML
В HTML-документе мета-теги содержат
информацию для браузера и поисковых систем и всегда размещаются
между тегами . Большинство мета-тегов являются необязательными.
Слайд 13
Основные понятия HTML
Теги
Примеры самых полезных мета тегов:
- при указании этого мета-тега браузер будет правильно отображать текст страницы: .
. Этот мета- тег указывает имя автора сайта.
. При использовании этого мета-тега определяется дата создания сайта.
Слайд 14
Основные понятия HTML
Атрибуты
Дополнительные параметры
действия тегов задаются атрибутами. Атрибуты записываются вместе с названием тега в угловых скобках. Например, так:
.Атрибут SRC указывает адрес изображения, которое будет вставлено в документ Html на место тега IMG.
Правило записи атрибутов в теге следующее:
<тег атрибут1=значение атрибут2=значение…>
Слайд 15
Структура HTML-документа
С помощью тегов описывается структура документа, его
внешний вид и ссылки на другие документы. В языке
HTML есть несколько основных тегов, которые отвечают за его структуру. Это теги , , .
Слайд 16
Структура HTML-документа
Весь документ HTML заключается в один большой
контейнер . Эта пара тегов сообщает Web- браузеру
о том, что документ написан на языке HTML. Контейнер содержит еще два контейнера. Первый , называется заголовком, и в нем содержится разнообразная информация о содержимом всего документа: язык, на котором написаны тексты, версия языка HTML, на которую ориентировалось создатели документа, основные ключевые слова для поисковых «ботов», общий заголовок HTML- документа и прочее. Второй контейнер включает в себя все основное содержимое документа, его «тело».
В HTML-документе можно разместить комментарии, которые браузером не отображаются:< !Комментарии>.
Слайд 17
Структура HTML-документа
Это моя первая
Web-страница
Это моя первая Web-
страница
Наберите текст в Блокноте и просмотрите в Web- браузере.
Слайд 18
Оформление HTML- документа
внешний вид веб-страницы
Тег определяет внешний
вид веб-страницы, в то время как отдельные ее элементы,
например заголовки, таблицы могут иметь свое особенное оформление
Выбор цвета страницы, фонового рисунка и цвета текста на ней является весьма важным, так как от этого зависит визуальное восприятие всего сайта
Цвет страницы задается атрибутом bgcolor, а цвет текста- text.Значением атрибутов является цвет, который задается своим названием на английском языке или его шестнадцатеричным кодом.
Слайд 19
Оформление HTML- документа
Пример:
или
шестнадцатеричный цвет фона>
Здесь задан синий цвет страницы двумя способами.
Слайд 20
Оформление HTML- документа
Внешний вид веб-страницы- заголовок
При
формировании веб-страниц указывается уровни заголовков, которые обозначаются h1,h2,…h6. Для
описания уровней используются теги ,,…. Заголовок уровня 1 самый крупный, а уровня 6- самый маленький. Для выравнивания текста на странице обычно указывается одно из трех значений атрибута align: align=center-выравнивание заголовка по центру
align=left-выравнивание заголовка по левому краю
align=right -выравнивание заголовка по правому краю
Слайд 21
Практическое задание
Опишите оформление HTML-документ, вставив комментарии
Впервые создаем HTML-документ
align=center>
PS:в сети Интернет существуют сайты, содержащие готовые фоновые рисунки (обои), например сайт «Азбука дизайнера»- http:www.dsgn.al.ru/fons.htm .Эти фоновые рисунки можно использовать для создания веб-страниц. Также в качестве фонового рисунка можно использовать графический файл- , где *.*- имя графического файла с расширением *.jpg, *. gif, *.png.
Слайд 22
Оформление HTML- документа
Форматирование текста на языке HTML
Для создания
нового абзаца используется тег а для перехода на
новую строчку без создания абзаца- тег
.
Эти теги закрывать не обязательно, если в них не используются атрибуты. Выравнивание абзацев происходит аналогично выравниванию заголовков при помощи атрибута align. Для определения типа, размера и цвета символа используется тег . Свойства символа определяются с помощью атрибутов;
faсe=«название шрифта»
сolor=«цвет символа»
size=размер шрифта ( по умолчанию размер равен 3)
Поместив текст между тегами , где n-цифровое значение, можно придать ему нужный размер(1-6).
Слайд 23
Оформление HTML- документа
Форматирование текста на языке
HTML
Выведем текст с использованием тега
Шрифт Arial красного цвета
вдруг стал большим
< font size=-3>Внезапно текст уменьшился
Текст превратился а Tahoma зеленого цвета
Попробуйте объяснить значение тегов: ,
< font size=-3>.
Слайд 24
Оформление HTML- документа
Форматирование текста
на языке HTML
За начертание текста отвечает целая группа тегов,
значение которых приведены в таблице
Слайд 25
Оформление HTML- документа
Вставка изображений
Для хранения изображений используются различные
форматы:gif, jpg, png, wmf, bmp и др. Наиболее предпочтительны
для изображения графические форматы gif, jpeg, png, которые позволяют ускорить процесс загрузки.
Для вставки изображения используется тег
следующей конструкции:
< img src=«Имя файла» border=«Ширина рамки» align=«Выравнивание»> width=«Ширина» height=«Высота» hspace=«Отступ по горизонтали» vspase=«Отступ по вертикали» title=«Подсказка»>
Слайд 26
Оформление HTML- документа
Назначение основных атрибутов тега
Align Выравнивание текста по:
top — верхнему краю изображения;
middle — средней части изображения;
bottom — нижнему краю изображения;
left — показывает изображение слева;
right — показывает изображение в правой части окна.
Height Указывает высоту изображения в пикселах или
процентах
Width Указывает ширину изображения в пикселах или
процентахborderПрисваивает значение ширины рамки в пикселах вокруг
изображения
Vspace Расширяет свободное пространство в пикселах вокруг изображения по
вертикали
Hspace Расширяет свободное пространство в пикселах вокруг изображения по
горизонтали
Title Отображает подсказку по вставленному изображению при установке указателя мыши
Слайд 27
Практическое задание 1
Вставь файл с изображением собаки
Вставка файла
с изображением:
Вставка файла с указанием ширины и
высоты изображения:
Слайд 28
Практическое задание 2
Расположи разными способами изображение ангорской кошки
относительно текста, содержащего сведения о ней.
Слайд 29
Практическое задание 3
Размести на веб- странице изображение петуха,
обрамляя это изображение рамкой различной ширины
Слайд 30
Оформление HTML- документа
Создание таблиц
При
построении таблицы используются следующие основные теги:
а) основной элемент описания таблицы — тег < table > < /table >;
б) определение строк в таблице — тег
;
в) описание ячеек в таблице — теги . Тег использует целый ряд дополнительных атрибутов: align, width, border, bordercolor, cellspacing и др. В дальнейшем рассмотрим назначения еще незнакомых вам атрибутов.
Слайд 31
Оформление HTML- документа
Создание таблиц Ширина таблицы может
быть задана в пикселах или в процентном отношении к ширине страницы, например, width = 450 или width = 40%. При построении таблицы создается «впечатление» их выпуклости с помощью двух рамок— фронтальной и боковой (рис. Ширину боковой рамки в пикселах определяет атрибут border = ширина боковой рамки, а ширину фронтальной рамки определяет атрибут cellspacing = ширина фронтальной рамки, bordercolor= цвет границы таблицы. Боковая рамка
Фронтальная рамка
Слайд 32
Практическая работа Постройте таблицу из двух строк и столбцов
с фиксированной шириной 250 пикселей, шириной боковой рамки 2
пикселя и ячейками светло-зеленого цвета. Если указать атрибуты border=1, cellspacing=0 и bordercolor=black, то эффект выпуклости границы рамки практически исчезнет и получим обычные границы таблицы черного цвета.
Слайд 33
Оформление HTML- документа
Создание таблиц Ячейки в таблице могут быть объединены с помощью атрибутов rowspan = n, где n (n > 1) — количество строк, выделяемых под ячейку или colspan = k, где k (k > 1) — количество столбцов, выделенных под ячейку. При построении таблиц на языке HTML допускается вложение в ячейки других таблиц
|