контроля – зачет
Лектор – проф. Бузюков Лев Борисович
Лаб. занятия –
проф. Бузюков Лев Борисович,
доц. Петрова Ольга Борисовна
Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
______ 1(_______HTML).ppt
Содержание
- 1. ______ 1(_______HTML).ppt
- 2. HTML Язык описания Web-страниц
- 3. Что такое HTML? это не язык программирования,
- 4. Структура элементов языкаЭлемент, маркированный тегом, имеет следующую
- 5. Структура страницыПравильная страница имеет две части –
- 6. XHTML – более современный HTML (2000 год)HTML
- 7. Структура документа в формате XHTML информация
- 8. Ошибки XHTML, которые допустимы в HTMLВсе элементы
- 9. Блочные и строчные элементыБлочные элементы содержат фрагменты
- 10. Некоторые элементы HTML и их атрибутыВидимое здесь
- 11. Некоторые элементы HTML и их атрибутыСПб госуниверситет
- 12. Текстовые блокиПишите по следующему адресу:
- 13. ЦитированиеКаркнул ворон: Никогда!Цитирование может быть коротким (строчным)
- 14. Шрифты...Текст документа шрифтом 3 размера...
- 15. Выделение в текстеТекст с курсивомПорой в России
- 16. Специальные типы выделений текстаФормула: n=((x*15-z/1.25)/4)^5 СЕНЯ ЗПТ
- 17. Параметры тега BODYMARGINHEIGHT - определяет ширину (в
- 18. Параметры тега BODYВсегда указывайте параметры BGCOLOR и
- 19. Что такое Интернет?Компьютеры обмениваются данными, используя Интернет-протокол
- 20. Обмен данными по Интернет-протоколуСледующий уровень – Transmission
- 21. Содержание заголовков протоколовДанные TCPДанные IPДанные кадраЗаг. TCPЗаг.
- 22. Символьные именаDomain Name System (DNS) – сеть
- 23. Web-сервер и Web-клиентWeb-сервер – компьютер, на котором
- 24. HTTP-протоколФормат запросов и ответов: заголовок + данные
- 25. Коды ответов по HTTP-протоколу 200 – ОК;
- 26. URL – Uniform Resource Locatorhttp://en.wikipedia.org/wiki/Http_error_codeshttp – используемый
- 27. Дополнительные поля URLhttp://akoub.narod.ru/2007-2008/autumn/func5538.htm#task3После получения страницы перейти к
- 28. ГиперссылкиТег :Href=“путь” – связь с объектом, на
- 29. ГиперссылкаПользуйтесь поискомГиперссылка – строчный элементПользуйтесь поиском Google
- 30. «Якоря»Якорь – специальная метка в документе, невидимый
- 31. КартинкиВставка изображений – строчный элементДополнительные атрибутыИзображение может служить ссылкой так же, как и текст:
- 32. Списки Первая строка списка Вторая строка списка
- 33. Нумерованные списки Вымыть посуду Сделать уборку Сходить
- 34. Вложенные списки Документы:
- 35. Выделение фрагментов текстаВыделение производится с помощью тегов
- 36. Элементы заголовка HTMLЭто моя страницаОтображается в заголовке
- 37. Элементы заголовка HTMLОписывает формат и кодировку страницы.Определяет
- 38. MIME-типыInternet media type (MIME – Multipurpose Internet Mail/Media Extension)Подробнее см. http://ru.wikipedia.org/wiki/MIME
- 39. МнемоникиСпециальные символы отображаются в текстах в виде
- 40. Скачать презентанцию
HTML Язык описания Web-страниц
- ВКонтакте
- РћРТвЂВВВВВВВВнокласснРСвЂВВВВВВВВРєРСвЂВВВВВВВВ
- РњРѕР№ Р В Р’В Р РЋРЎв„ўР В Р’В Р РЋРІР‚ВВВВВВВВРЎР‚
Слайды и текст этой презентации
Слайд 1Дисциплина
«Web-технологии»
Лекции – 16 часов
Лабораторные занятия – 14 часов
Курсовая работа
Форма итогового
контроля – зачет
проф. Бузюков Лев Борисович,
доц. Петрова Ольга Борисовна
Слайд 3Что такое HTML?
это не язык программирования, а «язык разметки»
(HyperText Markup
Language);
определяет содержание и структуру страницы, но не
внешний вид;элементы языка имеют структуру дерева (вложенные элементы);
пробелы либо игнорируются, либо заменяются одним пробелом;
узлы дерева представляют собой либо текст (содержание), либо «структурные элементы», маркируемые «тегами» и имеющие «атрибуты».
Текст на языке HTML и его структура
Hello, World!
html
title
body
p
My first page
Hello, World!
head
Слайд 4Структура элементов языка
Элемент, маркированный тегом, имеет следующую структуру:
внутреннее содержание
Next page
Если тег не имеет внутреннего содержания, то
он может иметь
упрощенную структуру:
Слайд 5Структура страницы
Правильная страница имеет две части – заголовок (информация о
странице)
и тело (содержание страницы)
информация о странице
внутреннее содержание
Пример:
Welcome to my first web page!
This is a paragraph of text.
Слайд 6XHTML – более современный HTML (2000 год)
HTML + XML (eXtended
Markup Language) = XHTML
Браузеры отображают пришедшую к ним по запросу
страницу. Страница
может быть написана как на «старом» HTML, так и на более новых XMLи XHTML. Мы будем использовать «современный» XHTML. Почему?
Более строгий и хорошо структурированный язык
Лучшая «переносимость» между различными браузерами
Лучше использовать более современные средства, чтобы не пришлось
в будущем переделывать ваши замечательные страницы
XHTML допускает вставки на других «языках разметки» XML, SVG,
MathML, MusicML и т.д.
Слайд 7Структура документа в формате XHTML
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
информация о странице
внутреннее содержание
Основное отличие во внутреннем содержании документов HTML и XHTML:
если браузер видит ошибку в HTML-документе, то он обязан постараться
понять, что имел в виду автор документа. Если ошибка обнаружена в
XHTML документе, то браузер просто сообщает об ошибке.
Кроме того, форматирование элементов XHTML-документа должно быть
оформлено с помощью CSS-стилей. Многие теги, такие как font и
атрибуты, такие как bgcolor и align не поддерживаются в XHTML.
Слайд 8Ошибки XHTML, которые допустимы в HTML
Все элементы должны быть закрыты.
Все
обязательные атрибуты должны присутствовать.
В теле документа текст не может быть
вложен непосредственно.«Блочные» элементы не могут быть вложены в «строчные».
Атрибуты должны заключаться в кавычки.
Вложенность элементов должна быть правильной.
Спецсимволы всегда должны быть представлены мнемоническими ссылками.
Теги и атрибуты записываются только строчными буквами.
Неправильно :
Правильно :
1.
2.
3.
4.
5.
6.
7.
8.
(или
)
some text
some text
Hello, World!
Hello, World!
&
&
Слайд 9Блочные и строчные элементы
Блочные элементы содержат фрагменты текста, которые всегда
отображаются в отдельных блоках. Браузеры всегда визуально отделяют блочные элементы друг
от друга.Примеры:
,
,
- ,
Строчные элементы могут располагаться друг за другом в пределах одной
строки
Примеры: , , ,
Комментарии вставляются в HTML текст так же, как и обычные элементы:
Слайд 10Некоторые элементы HTML и их атрибуты
Видимое здесь содержимое
отображается в
браузере в виде одного абзаца. Повторяющиеся пробелы и переходы
со строки на строку игнорируются.Абзац (параграф) – блочный элемент
Видимое здесь содержимое отображается в браузере в виде одного абзаца.
Повторяющиеся пробелы и переходы со строки на строку игнорируются.
Если необходимо сделать переход на следующую строку внутри абзаца,
то это достигается с помощью элемента
.
а это уже вторая
А вот это уже следующий абзац.
Это первая строка параграфа,
а это уже вторая
А вот это уже следующий абзац.
Слайд 11Некоторые элементы HTML и их атрибуты
СПб госуниверситет телекоммуникаций
Факультет СС, СК
и ВТ
Расписание занятий
Заголовки – блочные элементы
СПб госуниверситет телекоммуникаций
Факультет СС, СК
и ВТРасписание занятий
Всего может быть до шести уровней заголовков (от
до
)
СПб госуниверситет телекоммуникаций
Факультет СС, СК и ВТ
Горизонтальная черта (разделитель) – блочный элемент
СПб госуниверситет телекоммуникаций
Факультет СС, СК и ВТ
Слайд 12Текстовые блоки
Пишите по следующему адресу:
Москва. ул. Академика Королева,
13
Мурзилке
Редакция журнала "Домосед" выражает благодарность
Алоизию Магарычу
Шницелю за замечательное стихотворение:
Синели красные ромашки,
Желтели в небе облака,
Синицы в теплый край летели,
К истоку двигалась река.
...
Hi There! Hi There! Hi There!
Слайд 13Цитирование
Каркнул ворон: Никогда!
Цитирование может быть коротким (строчным) и длинным (блочным)
Каркнул
ворон: “Никогда!”
В своем выступлении перед рабочими Леонид Ильич Брежнев,
в частности, сказал:Мы еще теснее сплотимся вокруг родной
Коммунистической Партии и стройными рядами
будем двигаться вперед к полному торжеству
коммунизма!
В своем выступлении перед рабочими Леонид Ильич Брежнев, в частности,
сказал:
Мы еще теснее сплотимся вокруг родной Коммунистической Партии и
стройными рядами будем двигаться вперед к полному торжеству
коммунизма!
Слайд 14Шрифты
...
Текст документа шрифтом 3 размера
...
Слегка увеличиваем шрифт
...
Продолжаем шрифтом 3 размера
...
FACE="Arial, Helvetica, Sans Serif" SIZE="5">Вставка текста увеличенным шрифтом Arial
W
Слайд 15Выделение в тексте
Текст с курсивом
Порой в России встречаются действительно талантливые
веб-мастера. Но только не друг с другом.
Текст с выделенным словом
Я
сильный, но легкий.Подчеркнутый текст
Лена +
Текст с увеличенным словом. Небоскребы, небоскребы, а я маленький такой.
X2, X0 x2 x0
Слайд 16Специальные типы выделений текста
Формула: n=((x*15-z/1.25)/4)^5
СЕНЯ ЗПТ УБЬЮ ТЧК
ПОДРОБНОСТИ В ПИСЬМЕ ТЧК
Чтобы войти в систему наберите GUEST
заглавными
буквами.Переменная Z равна 5.
Как сказал классик:
"Грамотное написание HTML способствует пищеварению"
Слайд 17Параметры тега BODY
MARGINHEIGHT - определяет ширину (в пикселах) верхнего и
нижнего полей документа. Работает только в браузерах Netscape.
TOPMARGIN - определяет
ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer.MARGINWIDTH - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape.
LEFTMARGIN - определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer.
BACKGROUND - определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате gif или jpg.
BGCOLOR - определяет цвет фона документа.
TEXT - определяет цвет текста в документе.
LINK - определяет цвет гиперссылок в документе.
ALINK - определяет цвет подсветки гиперссылок в момент нажатия.
VLINK - определяет цвет гиперссылок на документы, которые вы уже просмотрели.
Слайд 18Параметры тега BODY
LEFTMARGIN="40" MARGINWIDTH="40">
Всегда указывайте параметры BGCOLOR и TEXT одновременно. Считайте, что
они неразлучны. Если один из этих параметров не указан, браузер по умолчанию будет использовать цвет из текущей цветовой схемы Windows. А теперь представьте, что будет, если пользователь использует нестандартную раскраску Windows, где все цвета инвертированы? То-то. Некрасиво получится.
Слайд 19Что такое Интернет?
Компьютеры обмениваются данными, используя Интернет-протокол (IP)
IP-адрес – 4-х-байтовый
(скоро будет 16-ти-байтовый – IPv6) уникальный
идентификатор компьютера, например: 10.254.69.23
Локальный IP-адрес
– адрес компьютера в локальной сети;
Глобальный IP-адрес – адрес компьютера для глобальной сети.С помощью команды ipconfig можно узнать свой локальный IP-адрес,
а обратившись по адресу www.whatismyip.com – узнать глобальный адрес.
Слайд 20Обмен данными по Интернет-протоколу
Следующий уровень – Transmission Control Protocol (TCP)-протокол
На
этом уровне обеспечивается:
гарантированная доставка пакетов;
мультиплексирование – добавляется
номер порта.Некоторые стандартные номера портов:
80 – запрос к Web-странице (HTTP-протокол);
25 – посылка почты (SMTP-протокол);
21 – передача файлов (FTP-протокол).
Данные
Данные
TCP
Данные IP
Данные кадра
Уровень приложений
Уровень протокола TCP
Уровень протокола IP
Уровень физического протокола передачи данных
Заг.
TCP
Заг.
IP
Заг.
кадра
Конец
кадра
Ethernet
IP, ARP, X.25
TCP, UDP
HTTP, SMTP, FTP, Telnet, WebDAV
Слайд 21Содержание заголовков протоколов
Данные
TCP
Данные IP
Данные кадра
Заг.
TCP
Заг.
IP
Заг.
кадра
Конец
кадра
Заголовок TCP (16-20 байтов): номера портов
отправителя и получателя
Заголовок IP (12-32 байта): IP-адреса отправителя и получателя
Заголовки
кадра: Физические адреса сетевых карт
Слайд 22Символьные имена
Domain Name System (DNS) – сеть серверов, содержащих таблицы
соответствия символьных имен IP-адресам. Например,
wikipedia.org –
208.80.152.2akoub.narod.ru – 213.180.199.13
www.cs.washington.edu – 128.208.3.88
Локальные DNS – соответствия имен адресам в пределах одной ОС,
для Windows соответствующая таблица хранится в файле
C:\Windows\system32\drivers\etc\hosts
Слайд 23Web-сервер и Web-клиент
Web-сервер – компьютер, на котором установлено
программное обеспечение, «прослушивающее»
порты
протокола TCP/IP.
Примеры:
IIS от Microsoft (входит в состав Windows),
Apache (www.apache.org)
Web-клиент
– компьютер, посылающий запрос к Web-серверу и получающийот него ответ.
Типичный пример программ такого рода – Web-браузеры
(Firefox, IE, Safari, Opera).
Слайд 24HTTP-протокол
Формат запросов и ответов: заголовок + данные (все в символьном
виде).
Есть 3 основных команды (всего – 8):
GET – получить
данные со страницы;POST – запрос с параметрами;
PUT – записать страницу.
GET /index.html HTTP/1.1
host: www.example.com
Пример запроса:
HTTP/1.1 200 OK
Date: Sat, 22 March 2008 07:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
Etag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes
Content-Length: 438
Connection: close
Content-Type: text/html; charset=UTF-8
<далее следует содержание запрошенной страницы>
и ответа на него:
Слайд 25Коды ответов по HTTP-протоколу
200 – ОК;
404 – not
found (не найден);
403 – forbidden (доступ запрещен);
500 –
ошибка сервераПолный список кодов можно посмотреть, например на
http://en.wikipedia.org/wiki/Http_error_codes
Слайд 26URL – Uniform Resource Locator
http://en.wikipedia.org/wiki/Http_error_codes
http – используемый протокол;
en.wikipedia.org – хост
– адрес или имя запрашиваемого сервера;
80 – явно не указанный
номер порта (но можно указать после имени хоста);/wiki/Http_error_codes – адрес страницы на сервере
Если ввести такой URL в окно браузера, то последовательность действий
будет следующей:
установить адрес хоста через службу DNS;
сформировать HTTP-заголовок, содержащий адрес страницы:
GET /wiki/Http_error_codes HTTP/1.1
установить связь и переслать запрос по IP-протоколу с портом 80;
после получения ответа вывести на экран результат запроса.
Слайд 27Дополнительные поля URL
http://akoub.narod.ru/2007-2008/autumn/func5538.htm#task3
После получения страницы перейти к метке task3
http://www.google.ru/search?source=ig&hl=ru&q=hello+world
В запросе
указываются 3 именованных параметра: source, hl и q.
http://127.0.0.1:8080/secret/money.txt
В запросе указан
нестандартный порт.
Слайд 28Гиперссылки
Тег :
Href=“путь” – связь с объектом, на который идет ссылка
Target=“название”
– указание того окна, где будет открываться объект:
_parent
_self
_blank
Link
Электронная
почтаusername@machine_name.domain_name
Ссылка на электронную почту
levbuz@dean.sut.ru
Copyright Baltazar and Mirron corp
Слайд 29Гиперссылка
Пользуйтесь поиском
Гиперссылка – строчный элемент
Пользуйтесь поиском Google - самым распространенным
поисковиком в мире!
И удачи вам в поиске!
Google
– самым распространенным поисковиком в мире!
target="_blank" title="Нажмите для поиска">
Google
Будьте аккуратны с вложенностью элементов!
Здесь две ошибки: блочный элемент внутри строчного и неправильная
вложенность элементов. Тем не менее, HTML-браузер может корректно
отобразить эти элементы!
Слайд 30«Якоря»
Якорь – специальная метка в документе, невидимый объект, на который
можно создать ссылку.
Вставка якоря:
Ссылка на якорь:
текст
Copyright Baltazar and
Mirron corp
Слайд 31Картинки
Вставка изображений – строчный элемент
Дополнительные атрибуты
width="250" height="150"/>
Изображение может
служить ссылкой так же, как и текст:
Слайд 32Списки
Первая строка списка
Вторая строка списка
Третья строка списка
Список
(нумерованный или ненумерованный) – блочный элемент,
Содержащий внутри себя блочные элементы
– члены списка Первая строка списка
Вторая строка списка
Третья строка списка
Атрибуты списка могут задавать вид маркеров (не поддерживается в
«строгом» XHTML), например
- Первая строка списка
Первая строка списка
Слайд 33Нумерованные списки
Вымыть посуду
Сделать уборку
Сходить на лекцию
Нумерованный список
Вымыть
посуду
Сделать уборку
Сходить на лекцию
Атрибуты списка могут задавать тип и способ
нумерации (не поддерживается в «строгом» XHTML)
- Сделать домашнее задание
- Купить билеты на концерт
Сделать домашнее задание
Купить билеты на концерт
Слайд 34Вложенные списки
Документы:
Паспорт
Билеты
- Зубная щетка
- Паста
- Мыло
Один список может быть вложен в другой
Документы:
Паспорт
Билеты
Гостиница - бронь
Предметы личной гигиены:
Зубная щетка
Паста
Мыло
Слайд 35Выделение фрагментов текста
Выделение производится с помощью тегов , , ,
Изучая HTML следует обратить особое внимание на различие между
нумерованными
списками - и ненумерованными списками
- .
Изучая HTML следует обратить
особое внимание на
различие между нумерованными списками
<ol> и ненумерованными
списками <ul>.
Фрагменты кода можно выделять с помощью блочного тега
public static void main(String[] args) {
System.out.println("Hello, World!");
}Этот фрагмент выводится в точности так же, как он напечатан, включая
все пробелы и переводы строк.
Слайд 36Элементы заголовка HTML
Это моя страница
Отображается в заголовке страницы в браузере.
name="description"
content="Эта страница содержит полезные сведения"/>
content="мир, труд, май"/>Описывает содержимое страницы.
Описывает ключевые слова (часто используется поисковыми машинами).
Указание на автора.
Указание на программу, которая сгенерировала этот текст.
Слайд 37Элементы заголовка HTML
Описывает формат и кодировку страницы.
content="text/html; charset=windows-1251">
Определяет основной язык, на котором написана страница.
Описывает
частоту перезагрузки страницы (в секундах) и, возможно, делает “redirection” на другую страницу.
content="5;http://www.google.com/">
Описывает иконку, ассоциирующуюся со страницей (устаревший вариант:
поместить в корневой каталог сайта файл с именем favicon.ico).
Слайд 38MIME-типы
Internet media type (MIME – Multipurpose Internet Mail/Media Extension)
Подробнее см.
http://ru.wikipedia.org/wiki/MIME
Слайд 39Мнемоники
Специальные символы отображаются в текстах в виде специальных
слов (entities). Вот
примеры некоторых мнемоник:
Полный список см.
http://www.w3schools.com/tags/ref_entities.asp
Похожие презентации
Обратная связь
Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:
Email: Нажмите что бы посмотреть
Что такое TheSlide.ru?
Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно хранить и делиться своими презентациями с другими пользователями.