Разделы презентаций


Web- страницы. Язык HTML

Содержание

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

Слайды и текст этой презентации

Слайд 1Web-страницы. Язык HTML
Тема 1. Повторение

Web-страницы. Язык HTMLТема 1. Повторение

Слайд 2Основные элементы HTML
Основными понятиями любого языка разметки являются теги, элементы

и атрибуты.
Теги (tags) – специальные элементы, позволяющие отличать в документе

описание разметки от описания данных.
Элемент – это тэги в совокупности с их содержанием (данными).

Атрибут используется при определении элемента, чтобы задать какие-либо параметры, уточняющие характеристики данного элемента.

Основные элементы HTMLОсновными понятиями любого языка разметки являются теги, элементы и атрибуты.Теги (tags) – специальные элементы, позволяющие

Слайд 3Простейшая Web-страница


Моя первая
Web-страница


Привет!



first.html

Моя первая
Web-страница

шапка ("голова")



Привет!

основная часть («тело»)

Простейшая Web-страницаМоя первая  Web-страницаПривет! first.htmlМоя первая  Web-страницашапка (

Слайд 4Кодирование цвета
имена
red, green, blue, magenta, black,
шестнадцатеричные коды
white
R
G
B
# F

F 0 0 0 0
# F F F F F

F

# 0 0 F F F F

# 0 0 0 0 0 0

# A A A A A A

Кодирование цветаимена red, green, blue, magenta, black, шестнадцатеричные кодыwhiteRGB# F F 0 0 0 0# F F

Слайд 5Тэг BODY – общие свойства страницы
цвет фона и текста





цвет гиперссылок

TEXT="white" BGCOLOR=#00FF00>
Привет!


...

цвет текста
цвет

фона

посещенные ссылки
(visited link)

цвет ссылок

атрибуты тэга

Тэг BODY – общие свойства страницыцвет фона и текстацвет гиперссылокПривет!...цвет текста цвет фона посещенные ссылки(visited link) цвет

Слайд 6цвет текста




размер шрифта
Тэг FONT – свойства блока текста
Привет!

Как дела?

Привет!

COLOR=red
SIZE=6>
Как дела?

от 1 до 7
(3 – нормальный)


цвет текстаразмер шрифтаТэг FONT – свойства блока текстаПривет!Как дела?Привет!Как дела?от 1 до 7(3 – нормальный)

Слайд 7Стили оформления

Стили оформления

Слайд 8Абзацы
переход на новую строку




абзац (с отступами)
Одно физическое тело захотело поменять

три своих старых варежки на что-нибудь хорошее.
До самого вечера тело с


варежками ...


Одно физическое тело захотело поменять три своих старых варежки
на что-нибудь хорошее.


До самого вечера тело с варежками ...


Абзацыпереход на новую строкуабзац (с отступами)Одно физическое тело захотело  поменять три своих старых варежки на что-нибудь

Слайд 9Выравнивание
Этот текст выровнен по центру. Этот текст выровнен по

ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст

выровнен по ширине.


left по левой границе
right по правой границе
center по центру
justify по ширине

атрибут тэга


Выравнивание Этот текст выровнен по центру.   Этот текст выровнен по ширине.Этот текст выровнен по ширине.Этот

Слайд 10Web-страницы. Язык HTML
Тема 2. Гиперссылки

Web-страницы. Язык HTMLТема 2. Гиперссылки

Слайд 11Ссылки на другие страницы сайта
Таблицы
страница в той же папке
anchor

(якорь)
hyper reference (гиперссылка)
страница во вложенной папке
Пример
страница в

соседней папке

Текст

выйти из текущей папки

Ссылки на другие страницы сайтаТаблицыстраница в той же папкеanchor (якорь) hyper reference (гиперссылка) страница во вложенной папкеПримерстраница

Слайд 1218
Строчные элементы (гиперссылки)


Гиперссылки:

Открыть изображение в новом

окне!

Факультет компьютерных наук


body=Привет, у меня есть вопрос!">
Cсылка на адрес электронной почты


Позвонить по телефону.


Пример оформления текcта



Строчные элементы не создают переносов строки до и после себя.
Такие элементы располагаются в строке слева направо.
Если строчный элемент не помещается в родительский контейнер, то он переносится на следующую строку.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

18Строчные элементы (гиперссылки)Гиперссылки:  Открыть изображение в новом окне!  Факультет компьютерных наук Cсылка на адрес электронной

Слайд 13Строчные элементы (пример)
19

Строчные элементы (пример)19

Слайд 14Ссылки на другие сайты
Почта
на главную страницу сайта
index.htm, index.html, default.asp,


на конкретную страницу сайта (URL)

Васин текст
на файл для скачивания

HREF="http://www.vasya.ru/prog.zip">
Скачать
Ссылки на другие сайтыПочтана главную страницу сайтаindex.htm, index.html, default.asp, …на конкретную страницу сайта (URL)Васин текстна файл для

Слайд 15Цвет гиперссылок

...

LINK

ссылки, на которых не были
VLINK посещенные ссылки
ALINK активные

ссылки
Цвет гиперссылок...LINK	  ссылки, на которых не былиVLINK	  посещенные ссылкиALINK	  активные ссылки

Слайд 16Ссылки внутри страницы

Глава 1

Глава 2


Глава 1
Это

текст главы 1. Это текст главы 1.
Это текст главы 1.

Это текст главы 1.

Наверх

Глава 2


Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.

Наверх

в другом файле

Цвет текста

метка (якорь)

переход на метку

Ссылки внутри страницыГлава 1Глава 2Глава 1Это текст главы 1. Это текст главы 1.Это текст главы 1. Это

Слайд 17Web-страницы. Язык HTML
Тема 3. Списки

Web-страницы. Язык HTMLТема 3. Списки

Слайд 18Маркированные списки

Вася
Петя
Коля

unordered list (неупорядоченный список)
list item (элемент

списка)
изменение маркера:

...

disk 
circle ○
square


Маркированные спискиВася  ПетяКоляunordered list  (неупорядоченный список) list item  (элемент списка) изменение маркера:...disk

Слайд 19Нумерованные списки

Вася
Петя
Коля

ordered list (упорядоченный список)
изменение нумерации:

START=3>
...

1, i, I, a, A

Нумерованные спискиВася  ПетяКоляordered list  (упорядоченный список) изменение нумерации:...1, i, I, a, A

Слайд 20Списки определений

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

диск

definition list (список определений)
definition term (термин)
definition description (описание)


Списки определенийкомпьютер  устройство для  обработки информациидискетагибкий магнитный дисквинчестержесткий магнитный  дискdefinition list (список определений) definition

Слайд 21Многоуровневые списки
Города России       



Города Украины   




  Москва   Санкт-Петерург
  Киев   Одесса

Многоуровневые списки Города России       Города Украины       Москва   Санкт-Петерург     Киев   Одесса

Слайд 22Web-страницы. Язык HTML
Тема 4. Рисунки

Web-страницы. Язык HTMLТема 4. Рисунки

Слайд 23Рисунки в документе




из той же папки:
из другой папки:
с другого сервера:

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

Слайд 24Выравнивание

left
right
top
bottom
(по умолчанию)
middle

Выравнивание leftrighttopbottom(по умолчанию)middle

Слайд 25Отступы


VSPACE
(vertical space)
HSPACE
(horizontal space)

Отступы VSPACE(vertical space)HSPACE(horizontal space)

Слайд 26Рисунок-гиперссылка



SRC="tbl.jpg" ALT="Таблицы" BORDER=0>

локальная ссылка:
ссылка на другой сервер:
иначе будет синяя рамка

вокруг

если не вплотную к , будет "хвост"

не будет "хвоста"

Рисунок-гиперссылкалокальная ссылка:ссылка на другой сервер:иначе будет синяя рамка вокругесли не вплотную к , будет

Слайд 27Web-страницы. Язык HTML
Тема 5. Таблицы

Web-страницы. Язык HTMLТема 5. Таблицы

Слайд 28HTML таблицы Состоит из строк и столбцов ячеек, которые могут содержать

текст и рисунки. Используются для упорядочения и представления табличных данных.
Контейнер

для элементов таблицы
Контейнер для строки таблицы Контейнер для одной ячейки
Контейнер для одной ячейки заголовка
Еще больше табличных элементов можно найти на htmlbook.ru

29

HTML таблицы Состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Используются для упорядочения

Слайд 29Простейшая таблица


Таблица из одной строки
из

трех столбцов
без указания ширины таблицы

и ячеек.


толщина рамки

TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)

Простейшая таблица  Таблица из одной строки  из трех столбцов  без указания ширины таблицы

Слайд 30Размеры

...

ширина в пикселях или в % от ширины

окна браузера
высота в пикселях

...

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

...

ширина в пикселях

или в % от ширины таблицы
Размеры...ширина в пикселях или в % от ширины окна браузеравысота в пикселях...всей таблицы:строки:ячейки:...ширина в пикселях или в

Слайд 31Выравнивание


По


центру, по верхней границе

VALIGN="middle"
WIDTH=200>По правой границе,
по середине



...

всей таблицы:

информации в ячейках:

left,
center,
right

left,
center,
right

top,
middle,
bottom

Выравнивание  По   центру, по верхней границе  По правой границе,    по

Слайд 32Фон и цвет текста


COLOR="white">Привет!



Таблица из двух

строк
и двух столбцов


цвет фона

фоновый рисунок

Фон и цвет текста  Привет!    Таблица из двух

Слайд 33Отступы

BGCOLOR = blue>

= 100>1
2


интервал между ячейками

отступ внутри ячеек

CELLSPACING

CELLSPACING

CELLPADDING

CELLPADDING

Отступы  1  2интервал между ячейкамиотступ внутри ячеекCELLSPACINGCELLSPACINGCELLPADDINGCELLPADDING

Слайд 34Объединение ячеек


Привет!


Вася,
Петя,

Маша!




Привет!
Вася,

Петя,
Маша!

column span

охват столбцов

row span охват строк

Объединение ячеек  Привет!  Вася,  Петя,  Маша!  Привет!  Вася,Петя,Маша! column span охват

Слайд 35Вложенные таблицы
















BORDER="1">
ВасяПетя
МашаДаша


122
3334444

Вложенные таблицы      ВасяПетя  МашаДаша  122  3334444

Слайд 36Web-страницы. Язык HTML
Тема 6. Формы

Web-страницы. Язык HTMLТема 6. Формы

Слайд 37HTML формы
предназначены для организации интерактивного обмена информацией между пользователем и

web- приложением.


Контейнер формы


Когда форма отправляется на сервер, управление данными

передается web-приложению, заданному атрибутом action="URL"
HTML формыпредназначены для организации интерактивного обмена информацией между пользователем и web- приложением.Контейнер формы Когда форма отправляется на

Слайд 38Элементы управления HTML формы
Служат для взаимодействия пользователя с формой.
Большинство элементов

ввода и управления в форме можно описать при помощи элемента

.
Обязательными атрибутами которого являются:
name — приписывает данному элементу ввода уникальное имя, использующееся для дальнейшей обработки формы
type — определяет тип элемента управления или ввода.

Подписи и метки элементов управления задаются с помощью элемента
Элементы управления HTML формыСлужат для взаимодействия пользователя с формой.Большинство элементов ввода и управления в форме можно описать

Слайд 3928
Элементы интерфейса формы
Атрибут type тега позволяет задавать:
текстовое поле (text)
поле

с паролем (password) переключатель (radio) флажок (checkbox) скрытое поле (hidden)

кнопку (button)
кнопку для отправки формы (submit) кнопку для очистки формы (reset) поле для отправки файла (file) кнопку с изображением (image)
28Элементы интерфейса формыАтрибут type тега позволяет задавать:текстовое поле (text)поле с паролем (password) переключатель (radio) флажок (checkbox) скрытое

Слайд 4029
Особенности отправки HTML форм
Атрибуты тега :
method задает метод запроса: GET

или POST
enctype задает способ кодирования данных формы. Для отправки файлов

следует использовать enctype="multipart/form-data"
Для отправки данных нужно создать специальную кнопку или нажать на Enter в пределах формы.
29Особенности отправки HTML формАтрибуты тега :method задает метод запроса: GET или POSTenctype задает способ кодирования данных формы.

Слайд 4130
HTML формы (пример)


Строка поиска

для поиска" />



Искать в новостях

/>
Тип новостей

















1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

30HTML формы (пример)Строка поиска Искать в новостяхТип новостейнаучныедругие12345678910111213141516171819202122232425

Слайд 42HTML формы (пример)

HTML формы (пример)

Слайд 43Web-страницы. Язык HTML
Тема 6. Фреймы

Web-страницы. Язык HTMLТема 6. Фреймы

Слайд 44Фреймы
Фрейм (frame) – это часть сложной Web-страницы, в которую может

быть загружена другая Web-страница.
3 файла:
left.html

– страница в левой части
right.html – страница в правой части
index.html – описание структуры
ФреймыФрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница.3 файла:

Слайд 45Описание структуры
index.html


Фреймы-столбцы



SRC="right.html" NAME="qq">


columns
столбцы
ширина в пикселях или %
все остальное место
source
источник
имя фрейма

(для ссылок)
Описание структурыindex.html  Фреймы-столбцы    columnsстолбцыширина в пикселях или %все остальное местоsourceисточникимя фрейма (для ссылок)

Слайд 46Граница между фреймами

...


...

граница между фреймами:
0 –

невидима, 1 - видима
ширина полосы между фреймами, за которую можно

перетащить границу
Граница между фреймами......граница между фреймами:0 – невидима, 1 - видимаширина полосы между фреймами, за которую можно перетащить

Слайд 47Настройка фрейма (FRAME)

MARGINHEIGHT="0"
NORESIZE
SCROLLING="auto">
убрать отступы от края фрейма

до содержимого

полоса прокрутки:
auto – появляется, когда надо
yes – есть всегда
no – нет никогда

запретить изменение размеров

Настройка фрейма (FRAME)убрать отступы от края фрейма до содержимогополоса прокрутки:  auto 	– появляется, когда надо

Слайд 48Фреймы-строки
index.html


Фреймы-строки




NAME="qq">


строки
ширина в пикселях или

%
Фреймы-строкиindex.html  Фреймы-строки    строкиширина в пикселях или %

Слайд 49Сложные структуры (3 фрейма)
index.html












Сложные структуры (3 фрейма)index.html

Слайд 50Как открыть ссылку в другом фрейме

TARGET="qq">Глава 2
TARGET
_blank – в новом окне
_parent

– в родительском окне
_top – в главном окне
(убрать фреймы)

Как открыть ссылку в другом фреймеГлава 2TARGET _blank  	– в новом окне  _parent 	– в

Обратная связь

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

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика