Слайд 1Основы языка разметки гипертекста
Автор: Русинов А.С.
Слайд 2Оглавление
Урок 1
Урок 2
Урок 3
Урок 4
Урок 5
Урок 6
Урок 7
Урок 8
Слайд 3Урок 1
Введение в HTML, история, работа с текстом
Слайд 4Понятия: HTML, web-сайта
HTML (от англ. Hypertext Markup Language — «язык
разметки гипертекста») - это стандартный язык разметки документов во Всемирной
паутине. Все web-страницы создаются при помощи языка HTML (специальных управляющих символов – тегов).
Web-сайт состоит из Web-страниц (обычно это файлы с расширением .html или htm), объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.
ГЛАВНЫЙ ФАЙЛ НАЗЫВАЕТСЯ index.html или index.htm
Слайд 5Пример структуры сайта
Схема 1
2 урок
Слайд 6Достоинства HTML
Возможность просмотра на любых ПК, под управлением различных операционных
систем (Windows, Linux, Unix, BSD, MacOS, OS/2...)
Малый информационный объем
Слайд 7История
1986 г - Standard Generalized Markup Language (SGML), международная организация
по стандартизации (ISO)
1991 г – создан HTML (сотрудники Европейского
института физики частиц), для Mosaic (22 тега)
1993 г – HTML версия 1.3 (43 тега)
1995 г - HTML версия 2.0
1996 г - HTML версия 3.0 (таблицы стилей CSS )
1997 г - HTML версия 4.0 (фреймы, сложные таблицы…)
2005 г – начата разработка версии 5.0 (Консорциумом Всемирной паутины (W3C) )
Слайд 8Виды тегов
Парные (c закрытием, контейнер)
Текс
Не парные (одинарные)
Слайд 10Мета - теги
Помещаются между тегами ...
Служат для детального
описания страницы
name="Keywords" content="ключевые слова документа, разделенные запятыми или пробелами">
...
Слайд 11Спецсимволы
Иногда возникает необходимость в использовании
символа, которого нет на клавиатуре или
не
воспринемается если мы его напечатаем в документе.
Слайд 13Форматирование текста. Пример.
HTML - код
Заголовок
Пробный текст
Вид на экране
Пробный текст
Слайд 14Форматирование текста
Размерами и начертаниями шрифта можно управлять также с помощью
тега FONT и его атрибутов:
...
Например:
FACE="Arial" SIZE="5">Текст
Цвет текста можно задать следующим образом:
Текст
или
Текст
Слайд 17Сочетания тегов
Теги можно комбинировать друг с другом получая нужный результат.
Например, напечатать на экране жирным курсивом текст. Очередность сочений не
имеет значения.
Код HTML:
Сочетание тегов
Текст
Слайд 18Сочетания тегов
Код HTML:
Сочетание тегов
Текст
Слайд 19Урок 2
Выполните задание №1, №2 в классе.
Слайд 21Списки
Нумерованные
Маркированные
Возможно создавать вложенные
списки
Слайд 22Списки
Располагается внутри контейнера ... (нумерованный список) или ...
(маркированный список)
А каждый элемент определяется тегами …
Слайд 23Маркированный список
HTML код:
Прикладное ПО:
СУБД
Текстовые редакторы
Графические редакторы
Графические редакторы
Вид на экране
Прикладное ПО
:
СУБД
Текстовые редакторы
Графические редакторы
Графические редакторы
Слайд 24Нумерованный список
HTML код:
Прикладное ПО:
Системное ПО
Прикладное ПО
Системы программирование
Вид на экране:
Прикладное ПО:
Системное
ПО
Прикладное ПО
Системы программирование
Слайд 25Нумерованный список
По умолчанию элементы списка нумеруются по порядку 1, 2,
3…
При помощи атрибута TYPE можно изменить стиль нумерации.
Слайд 27Нумерованный список*
При помощи атрибутов START VALUE можно изменить порядок нумерации
списка.
START - служит для задания начального номера списка, отличного от
1.
VALUE - дает возможность назначить произвольный номер любому элементу списка.
Пример:
Слайд 28Вложенный список
ПО:
Системное ПО
Прикладное ПО
СУБД
Текстовые редакторы
Графические редакторы
Графические редакторы
Системы программирование
HTML код:
Вид на экране
Слайд 29Вставка изображений
Для встраивания изображения в документ используется тег
, имеющий обязательный
параметр src, который
определяет адрес файла с картинкой и alt, определяющий
альтернативный
текст.
Слайд 31Вставка изображений. Gif *
256 цветов
поддерживает загрузку файла с чередованием строк
возможен прозрачный фон
осуществляет анимацию изображения
Используют для рисунков и
gif-анимации
Слайд 32Вставка изображений. JPEG *
16 млн. цветов
фотографическое качество изображений
позволяет задать
еще более высокую степень сжатия за счет потери качества
Используют
для фотографий
Слайд 33Вставка изображений. PNG *
281 трлн. цветов
поддерживает загрузку файла с чередованием
строк
возможен прозрачный фон (с различной степенью прозрачности)
помехоустойчивый, осуществляет
проверку на ошибки при передаче файлов
Используют для фотографий
Слайд 34Вставка изображений. Примеры
Изображение risunok.gif находится в той же папке
что
и html файл
Изображение risunok.gif находится в папке
katalog по отношению
к html файлу
Находится на компьютере в папке
c:\site\risunok.gif
Находится на сайте http://test.ru/
Слайд 35Самостоятельная работа
Выполните задания №3, №4
Слайд 36Урок 4
Гиперссылки, графическое оформление
Слайд 37Гиперссылка
Гиперссылка — это связь между веб-страницами или файлами.
Гиперссылка на
Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает
переход на Web-страницу, указанную в адресной части ссылки.
Часто гиперссылка указывает на другую веб-страницу, но может также указывать на рисунок, мультимедийный файл, адрес электронной почты или программу.
См. схема 1.
Слайд 39Гиперссылки. Примеры.
Ссылки с абсолютным адресом
Персональная страничка
Сылка на файл
Ссылки
с относительным адресом
Персональная страничка
Сылка на файл
страничку
Ссылки на e-mail
E-mail для связи
Слайд 40Гипперссылка в виде изображения
Вокруг изображения-ссылки автоматически добавляется
рамка толщиной один пиксел и цветом, совпадающим с
цветом текстовых ссылок.
Чтобы убрать рамку, следует у тега
![]()
установить параметр
border="0"
Слайд 41Гиперссылка в пределах страницы*
Чтобы построить ссылку на область внутри текущей
страницы,
надо дать этой области название при
помощи атрибута NAME тэга .
Имя должно
содержать только буквы и цифры.
Таким образом можно делать гиперссылки, указывающие на
области других страниц внутри сайта.
HTML - код
Наверх страницыВ то место, куда надо сделать переход надо вставить:
Слайд 42Графическое оформление
Цвет фона веб-страницы задается с использованием
параметра bgcolor тега .
HTML
- код :
...
...
Цвет можно указывать в шестнадцатеричном значении
или по
его имени.
Слайд 43Графическое оформление
В качестве фона можно использовать любое подходящее для
этого изображение.
Фон не должен отвлекать внимание от
текста, при этом должен хорошо
сочетаться с цветовой гаммой
веб-страницы и быть маленьким по размеру.
Цвет фона веб-страницы задается с использованием атрибута
(параметра) background тега .
HTML – код:
...
...
Internet Explorer позволяет сделать фон неподвижным с помощью
параметра bgproperties="fixed" тега .
Слайд 46Таблицы
Для создания таблицы служит тэг . Как известно таблица состоит
из строк, а строки, в свою очередь состоят из ячеек.
Для определения строк служит тэг , для создания ячеек - , .
Слайд 47Таблицы
HTML-код:
1
2
3
4
5
6
Вид на экране:
Слайд 48Таблицы
Для создания заголовка таблицы служит тэг .
По умолчанию браузер располагает
заголовок таблицы по центру над ней. При помощи атрибута ALIGN
со значением bottom можно разместить заголовок под таблицей.
HTML-код:
Вид на экране:
Слайд 49Таблицы
Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.
Атрибут ALIGN
предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается
по центру, а ячеек - влево.
Атрибут VALIGN выравнивает данные по вертикали.
HTML-код:
1111
2222 | 22222 |
| Нижняя ячейка | Нижняя ячейка |
Вид на экране:
Слайд 50Таблицы
Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в
абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%").
HTML-код:
width="200">
Ширина 200 пикселей
Вид на экране:
Слайд 51Таблицы
При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек
столбца или строки в одну большую ячейку.
Атрибут COLSPAN тэгов ,
позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.
Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца.
Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.
Слайд 52Таблицы
HTML-код:
1111
22222
33333
44444
55555
66666
77777
88888
99999
Вид на
экране:
