Язык разметки гипертекста

HTML

H yper

T ext

M arkup

L anguage

ЯЗЫК

РАЗМЕТКИ

ГИПЕРТЕКСТА

HTML — язык дескрипторов

Дескриптор ( tag ) - это некое ключевое слово или сокращение.

tag - "признак", "метка", "маркер"

ТЕКСТ

Содержание

• Начертание текста
• Абзацы
• Специальные символы
• Переносы
• Шрифты
• Логическая разметка

• Списки
• Графика
• Гиперссылки
• Таблицы
• Формы

Начертание текста

КУРСИВ (Italic)

ТЕКСТ

Черный тополь

Черный тополь

ЖИРНЫЙ ШРИФТ (Bold)

ТЕКСТ

Черный тополь

Черный тополь

Подчеркивание (Underline)

ТЕКСТ

Черный тополь

Черный тополь

Абзацы

Разрыв строки

строка1
строка2

Дело было вечером,
Делать было нечего

Дело было вечером,

Делать было нечего

Абзац ( paragraph)

ТЕКСТ

Дело было вечером,

Делать было нечего

Дело было вечером,

Делать было нечего

Параметры: Right – правый край Left – левый край Center – по центру J ustify – по ширине Дело было вечером, Делать было нечего Дело было вечером, Делать было нечего " width="640"

Абзац с параметрами

align= параметр

Параметры:

Right – правый край

Left – левый край

Center – по центру

J ustify – по ширине

Дело было вечером,

Делать было нечего

Дело было вечером,

Делать было нечего

Параметры: Right – правый край Left – левый край Center – по центру J ustify – по ширине Дело было вечером, Делать было нечего Дело было вечером, Делать было нечего " width="640"

Абзац с параметрами

align= параметр

Параметры:

Right – правый край

Left – левый край

Center – по центру

J ustify – по ширине

Дело было вечером,
Делать было нечего

Дело было вечером,

Делать было нечего

Задание 1

Специальные символы

Символ

Код

« и »

« и »

“ и ”

“ и ”

„

„

- и 

— и –

< и >

неразрывный пробел

&

&

Переносы

Текст без переноса

ТЕКСТ

У Лукоморья дуб зеленый, златая цепь на дубе том

У Лукоморья дуб зеленый, златая це

Перенос слова (текста)

ТЕКСТ ТЕКСТ

У Лукоморья дуб зеленый, златая цепь на дубе том

У Лукоморья дуб зеленый, златая

цепь на дубе том

Задание 2

Шрифты

ТЕКСТ Параметры: Face – гарнитура (вид) Size – размер Color – цвет " width="640"

Дескриптор

параметры ТЕКСТ

Параметры:

Face – гарнитура (вид)

Size – размер

Color – цвет

Гарнитура

ТЕКСТ

Привет, МЕДВЕД!

Привет, МЕДВЕД !

Гарнитура

ТЕКСТ

Привет, МЕДВЕД!

Привет, МЕДВЕД !

Размер

ТЕКСТ

Размер текста 2

Размер текста 3

число = 1-7

Размер текста 2 Размер текста 3

Размер

ТЕКСТ

Размер текста 7

Размер текста 8

число = 1-7

Размер текста 7 Размер текста 8

Размер

ТЕКСТ

относительно стандартного:

+ больше

- меньше

Это стандартный текст

Меньше на 2

Больше на 2

Это стандартный текст Меньше на 2 Больше на 2

Цвет

ТЕКСТ

код = # 00- FF

код = название (red, black …)

Цвет морской волны

А это какой цвет?

Коды одного цвета!

Причина – монитор!

Цвет морской волны А это какой цвет?

Таблица базовых цветов

Палитра Netscape

ТЕКСТ Свежий ветер Свежий ветер " width="640"

ШРИФТ с несколькими параметрами

пар1 пар2 ТЕКСТ

Свежий ветер

Свежий ветер

ТЕКСТ ТЕКСТ tag : I,U,B, S - зачеркнутый Свежий ветер Свежий ветер " width="640"

ШРИФТ с несколькими параметрами

параметры ТЕКСТ ТЕКСТ

tag : I,U,B, S - зачеркнутый

Свежий ветер

Свежий ветер

обычно ставят в начале страницы текста Лучше меньше да лучше! Лучше меньше да лучше! " width="640"

Параметры шрифта по умолчанию

параметры

обычно ставят в начале страницы текста

Лучше меньше

да лучше!

Лучше меньше да лучше!

Задание 3

Учитель, применяющий ИКТ должен усвоить золотое правило: использование ИКТ на уроках должно быть не самоцелью, а во благо самого процесса обучения и обучающихся. Такая работа требует другой дидактической системы, иных методов и технологий обучения, адекватных личностно-ориентированному подходу в образовании. Эффективность любого урока определяется не тем, что дает детям учитель, а тем, что они взяли в процессе обучения. Умение рационально применять ИКТ с традиционными средствами обучения позволяет учителю создавать ту палитру красок, с помощью которой создается неповторимый шедевр – современный урок.

Логическая разметка

Физическая разметка текста

внешний вид текста (шрифт, размер, цвет, начертание)

Логическая разметка текста

роль текста на странице (заголовок, цитата, акцент, верхний и нижний индекс, пояснения)

ТЕКСТ n n = 1- 6 Глава первая Параграф 1 Глава первая Параграф 1 " width="640"

Заголовки ( header)

n ТЕКСТ n

n = 1- 6

Глава первая

Параграф 1

Глава первая

Параграф 1

ТЕКСТ n n = 1- 6 Глава первая Параграф 1 Глава первая Параграф 1 " width="640"

Заголовки ( header)

n ТЕКСТ n

n = 1- 6

Глава первая

Параграф 1

Глава первая

Параграф 1

Акценты

ТЕКСТ

ТЕКСТ

Здесь выделен важный момент .

А здесь выделен очень важный момент .

Здесь выделен важный момент . А здесь выделен очень важный момент .

Цитаты

ТЕКСТ

ТЕКСТ

Кто сказал: « МЯУ » ?
А вот строки из стихотворения: Я помню чудное мгновенье
Передо мной явилась ты

Кто сказал: « МЯУ »?

А вот строки из стихотворения:

Я помню чудное мгновенье

Передо мной явилась ты

Верхний и нижний индексы

_ТЕКСТ …( нижний)

^ТЕКСТ …( верхний)

H₂SO₄

  E=mc²

H 2 SO 4 E=mc 2

Пояснения

ТЕКСТ

Для разметки текста на WEB -странице используют язык HTML .

Для разметки текста на WEB -странице используют язык HTML

HyperText Markup Language

Задание 4

Списки

параметры элемента 1 Элемент1 параметра элемента 2 Элемент2 …………………………………………………………………………… " width="640"

Общая конструкция

Д - дескриптор

параметры всего списка

параметры элемента 1 Элемент1

параметра элемента 2 Элемент2

……………………………………………………………………………

Нумерованные списки

1. Элемент1
2. Элемент2

Нумерованные списки

Все компьютеры имеют три основных блока:

1. Монитор
2. Системный блок
3. Клавиатуру

Все компьютеры имеют три основных блока:

1 . Монитор

2. Системный блок

3. Клавиатуру

Нумерованные списки

Все компьютеры имеют три основных блока:

1. Монитор
2. Системный блок
3. Клавиатуру

Все компьютеры имеют три основных блока:

0 . Монитор

1 . Системный блок

2 . Клавиатуру

Нумерованные списки

I

Все компьютеры имеют три основных блока:

1. Монитор
2. Системный блок
3. Клавиатуру

Все компьютеры имеют три основных блока:

I . Монитор

II . Системный блок

III . Клавиатуру

Нумерованные списки

A

Все компьютеры имеют три основных блока:

1. Монитор
2. Системный блок
3. Клавиатуру

Все компьютеры имеют три основных блока:

A . Монитор

B . Системный блок

C . Клавиатуру

Нумерованные списки

value

Все компьютеры имеют три основных блока:

1. Монитор
2. Системный блок
3. Клавиатуру

Все компьютеры имеют три основных блока:

1. Монитор

5. Системный блок

6. Клавиатуру

Маркированные списки

• Элемент1
• Элемент2

Маркированные списки

Все компьютеры имеют три основных блока:

• Монитор
• Системный блок
• Клавиатуру

Все компьютеры имеют три основных блока:

• Монитор
• Системный блок
• Клавиатуру

Маркированные списки

circle

Все компьютеры имеют три основных блока:

• Монитор
• Системный блок
• Клавиатуру

Все компьютеры имеют три основных блока:

• Монитор
• Системный блок
• Клавиатуру

Маркированные списки

square

Все компьютеры имеют три основных блока:

• Монитор
• Системный блок
• Клавиатуру

Все компьютеры имеют три основных блока:

• Монитор
• Системный блок
• Клавиатуру

Маркированные списки

Все компьютеры имеют три основных блока:

• Монитор
• Системный блок
• Клавиатуру

Все компьютеры имеют три основных блока:

• Монитор

• Системный блок

• Клавиатуру

Задание 5

Графика

Файл картинки находится в одной папке с HTML- файлом " width="640"

Вставка изображения

src= имя картинки

Файл картинки находится в одной папке с HTML- файлом

Файл картинки находится в папке Images " width="640"

Вставка изображения

src= имя картинки

Файл картинки находится в папке Images

Файл картинки НЕ НАЙДЕН! " width="640"

Вставка изображения

src= имя картинки

Файл картинки НЕ НАЙДЕН!

400 Width = Если задан только один параметр, то размер меняется пропорционально. " width="640"

615

H eight =

Размеры изображения

src=“ имя картинки ” width= A height= B

400

Width =

Если задан только один параметр, то размер меняется пропорционально.

Размеры изображения

" width="640"

Размеры изображения

width=500 height=100

Размеры изображения

При изменении размера окна браузера, изменяется только ширина картинки.

При изменении размера окна браузера, изменяется ширина и высота картинки.

Это Тигра " width="640"

Подпись изображения

src=“ имя картинки ” alt= подпись

Это Тигра

Это веселый и энергичный персонаж из фильма “ Вини и его друзья ” . Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных. Словно в его хвосте кто-то установил пружину. Это веселый и энергичный персонаж из фильма “ Вини и его друзья ” . Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных. Словно в его хвосте кто-то установил пружину. " width="640"

Обтекание графики текстом

src=“ имя картинки ” align= …

Это веселый и энергичный персонаж из фильма “ Вини и его друзья ” . Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных. Словно в его хвосте кто-то установил пружину.

Это веселый и энергичный персонаж из фильма “ Вини и его друзья ” . Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных.

Словно в его хвосте кто-то установил пружину.

Это веселый и энергичный персонаж из фильма “ Вини и его друзья ” . Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных. Словно в его хвосте кто-то установил пружину. Отступ по вертикали Отступ по горизонтали Это веселый и энергичный персонаж из фильма “ Вини и его друзья ” . Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных. Словно в его хвосте кто-то установил пружину. " width="640"

Отступы

src=“ имя картинки ” align= … hspace= … vspace= …

Это веселый и энергичный персонаж из фильма “ Вини и его друзья ” . Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных. Словно в его хвосте кто-то установил пружину.

Отступ по вертикали

Отступ по горизонтали

Это веселый и энергичный персонаж из фильма “ Вини и его друзья ” . Его зовут Тигра. Он любит прыгать, играть и танцевать. По прыжкам в высоту ему нет равных.

Словно в его хвосте кто-то установил пружину.

Absbottom Baseline Bottom Absmiddle Middle Texttop Top Жил-был - румяный бок. Жил-был - румяный бок. Жил-был - румяный бок. " width="640"

Выравнивание по вертикали

src=“ имя картинки ” align= …

Absbottom

Baseline

Bottom

Absmiddle

Middle

Texttop

Top

Жил-был - румяный бок.

Жил-был - румяный бок.

Жил-был - румяный бок.

" width="640"

Изображение в рамке

src=“ имя картинки ” border= …

Задание 6

Гиперссылки

Что такое гиперссылка?

Гиперссылка (hyperlink)

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

текст-ссылка A nchor - якорь Новости вы можете посмотреть на сайте колледжа . Новости вы можете посмотреть на сайте колледжа . " width="640"

Точка входа

href=“ адрес перехода ” текст-ссылка

A nchor - якорь

Новости вы можете посмотреть на сайте колледжа .

Новости вы можете посмотреть на сайте колледжа .

href=“ #a1 ” ссылка метка name=“ a1 ” name=“ end” " width="640"

Закладки

name=“ begin ”

href=“ #a1 ”

ссылка

метка

name=“ a1 ”

name=“ end”

Задание 7

Этапы подготовки и решения задач на ЭВМ

На ЭВМ могут решаться задачи различного характера, например: научно-инженерные; разработки системного программного обеспечения; обучения; управления производственными процессами и т. д. В процессе подготовки и решения на ЭВМ научно -инженерных задач можно выделить следующие этапы:

постановка задачи;

математическое описание задачи;

выбор и обоснование метода решения;

алгоритмизация вычислительного процесса;

составление программы;

отладка программы;

решение задачи на ЭВМ и анализ результатов.

В задачах другого класса некоторые этапы могут отсутствовать, например, в задачах разработки системного программного обеспечения отсутствует математическое описание. Перечисленные этапы связаны друг с другом.

текст-ссылка Написать письмо можно здесь " width="640"

Ссылка на e-mail

href=“mailto: адрес ” текст-ссылка

Написать письмо можно здесь

текст-ссылка " width="640"

Ссылка на e-mail

href=“mailto: адрес 1; адрес2 ?subject= тема письма &body= текст письма ” текст-ссылка

Задание 8

Отправить письмо можно здесь .

адрес своей эл. почты

Письмо от Петровой Анны

Практическая работа выполнена на компьютере N 6 .

имя картинки ” Отключение рамки картинки Адрес ссылки Задание размера картинки Имя (адрес) картинки " width="640"

Ссылки - картинки

href=“ адрес ссылки ” имя картинки ”

Отключение рамки картинки

Адрес ссылки

Задание размера картинки

Имя (адрес) картинки

имя картинки ” Всплывающая надпись " width="640"

href=“ адрес ссылки ” имя картинки ”

Всплывающая надпись

Задание 9

Пиктограмма 1

Карты изображений ( image map )

Изображение

КАРТА

Область ссылки

параметры_области1 href= “ ссылка 1” alt= “ пояснение 1” AREA параметры_области2 href= “ ссылка2 ” alt= “ пояснение2 ” …………………………………………………………………………… Имя наложенной карты “office.jpg” usemap=# map1 border= 0 Имя изображения " width="640"

Карты изображений ( image map )

name “map1”

параметры_области1 href= “ ссылка 1” alt= “ пояснение 1”

AREA параметры_области2 href= “ ссылка2 ” alt= “ пояснение2 ”

……………………………………………………………………………

Имя наложенной карты

“office.jpg” usemap=# map1 border= 0

Имя изображения

ФОРМА: rect ( прямоугольник) circ ( окружность) poly ( многоугольник) " width="640"

Карты изображений ( image map )

AREA shape= форма coords= “ параметры области ”

ФОРМА:

rect ( прямоугольник)

circ ( окружность)

poly ( многоугольник)

Карты изображений ( image map )

КООРДИНАТЫ и РАЗМЕРЫ ОКРУЖНОСТИ

10

coords=“10,20,40”

20

радиус = 40

Карты изображений ( image map )

КООРДИНАТЫ и РАЗМЕРЫ ПРЯМОУГОЛЬНИКА

10

70

coords=“10,20, 70,50 ”

20

50

Карты изображений ( image map )

КООРДИНАТЫ и РАЗМЕРЫ МНОГОУГОЛЬНИКА

50

30

coords=“50,30,55 , 3 0 ,60,40,45, 4 0,50,30”

Задание 10

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

Таблицы

Строки и столбцы

Таблица

Первая строка,первый столбец	Первая строка,второй столбец
Вторая строка,первый столбец	Вторая строка,второй столбец

Строка

Столбец

Рамки

Рамки

Рамки

bordercolor= код цвета

Внутренние отступы

cellspacing= число

отступ между внутренней и внешней рамками

cellpadding= число

отступ между текстом и внутренней рамкой

Внутренние отступы

Горизонтальное выравнивание

align= center (по центру)

align= right (по прав. краю)

align= left (по лев. краю)

" width="640"

Вертикальное выравнивание

valign= m iddle (по середине)

valign= top (по верхн. краю)

valign= bottom (по нижн. краю)

Размер ячеек

Width (ширина)

Height (высота)

25%

75%

Размер ячеек

Width (ширина)

Height (высота)

100 точек

250 точек

Задание 11

Фон таблицы и ячеек

заливка сплошным цветом

Цвет фона всей таблицы

текст 1

текст 2

Цвет фона ячейки

Фон таблицы и ячеек

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

Имя файла рисунка

текст 1

текст 2

pic1.jpg

pic2.jpg

Цвет текста в таблице

текст 1

текст 2

Задание 1 2

20

Файл pic1.jpg

Файл pic1.jpg

Слияние ячеек таблицы

Большая ячейка	Обычная ячейка
Обычная ячейка

Слияние ячеек таблицы

Широкая ячейка
Обычная ячейка	Обычная ячейка

Задание 13

Задание 14

Формы

Что такое форма?

Форма

Это конструкция для ввода информации. Может использоваться в тестах, голосованиях, анкетах, опросах и т.п.

Как работает форма?

HTML- страница

Иванов

Иван

Иванович

ivan@mail.ru

Люблю спорт

********

… элементы формы … " width="640"

Общая конструкция

Название формы

forma1 "

… элементы формы …

maxlength=" 50 " value=" Введите текст " Текст в поле по умолчанию Максимальное количество вводимых символов Длина поля ввода в символах " width="640"

Текстовое поле

Тип вводимой информации

Имя элемента формы

forma1 "

maxlength=" 50 " value=" Введите текст "

Текст в поле по умолчанию

Максимальное количество вводимых символов

Длина поля ввода в символах

maxlength=" 50 " value=" Неактивное поле " disabled maxlength=" 50 " value=" Только для чтения " readonly Блокирует поле от изменений Содержимое поля можно только скопировать " width="640"

Текстовое поле

forma1 "

maxlength=" 50 " value=" Неактивное поле " disabled

maxlength=" 50 " value=" Только для чтения " readonly

Блокирует поле от изменений

Содержимое поля можно только скопировать

" width="640"

Надписи

Ваше имя:

maxlength="50" value="Введите имя"

" width="640"

Ввод пароля

Введите пароль:

maxlength="50"

способ переноса слов ширина поля в символах off – нет переноса virtual – видимый перенос (в памяти сохраняется без переноса) physical – перенос отображается на экране и сохраняется в памяти количество видимых строк " width="640"

Многострочное текстовое поле

forma1 "

способ переноса слов

ширина поля в символах

off – нет переноса

virtual – видимый перенос (в памяти сохраняется без переноса)

physical – перенос отображается на экране и сохраняется в памяти

количество видимых строк

Задание 15

30 симв.

20 симв.

40 симв.

40 симв. в строке, 6 строк, видимый перенос

20 симв.

value="english " checkedанглийский value="german"немецкий value="spanish"испанский value="french"французский Тип элемента «флажок» Флажок включен Передает в программу-обработчик данные : lan1=“english” " width="640"

Флажки

forma1 "

value="english " checkedанглийский

value="german"немецкий

value="spanish"испанский

value="french"французский

Тип элемента «флажок»

Флажок включен

Передает

в программу-обработчик данные : lan1=“english”

Укажите ваш пол: value="man" checkedмужской value="woman"женский Тип элемента «переключатель» Имя одинаковое для группы переключателей " width="640"

Переключатели

forma1 "

Укажите ваш пол:

value="man" checkedмужской

value="woman"женский

Тип элемента «переключатель»

Имя одинаковое для группы переключателей

value= " Отправить " src = “ but.gif " value= " Очистить " value= " Выполнить " Кнопка отправки содержимого формы на сервер-обработчик Графическая кнопка отправки содержимого формы на сервер-обработчик Кнопка восстановления всех значений элементов формы поумолчанию Произвольная кнопка. Действия задает программист. " width="640"

Кнопки

forma1 "

value= " Отправить "

src = “ but.gif "

value= " Очистить "

value= " Выполнить "

Кнопка отправки содержимого формы на сервер-обработчик

Графическая кнопка отправки содержимого формы на сервер-обработчик

Кнопка восстановления всех значений элементов формы поумолчанию

Произвольная кнопка. Действия задает программист.

Отправить " width="640"

Кнопки

forma1 "

Отправить

Задание 1 6

Поле для файлов

Раскрывающиеся списки

Какой язык вы хотите изучать:

html

php

java

Задает весь список

Количество видимых элементов

Задает элемент списка

size=“1”

Элемент видимый в начале

size=“3”

Раскрывающиеся списки

Какой язык вы хотите изучать:

html

php

java

Разрешает множественный выбор

При выборе нескольких элементов нужно держать нажатой клавишу CTRL

Задание 17

Задание 18