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

Август 20, 2022

Главная
Информатика
HTML. Язык описания Web-страниц

Содержание

2. Что такое HTML? это не язык программирования, а «язык разметки» (HyperText Markup Language); определяет содержание и
3. Структура элементов языка Элемент, маркированный тегом, имеет следующую структуру: внутреннее содержание Next page Если тег не
4. Структура страницы Правильная страница имеет две части – заголовок (информация о странице) и тело (содержание страницы)
5. XHTML – более современный HTML (2000 год) HTML + XML (eXtended Markup Language) = XHTML Браузеры
6. Структура документа в формате XHTML "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> информация о странице внутреннее содержание Основное отличие во внутреннем содержании
7. Ошибки XHTML, которые допустимы в HTML Все элементы должны быть закрыты. Все обязательные атрибуты должны присутствовать.
8. Блочные и строчные элементы Блочные элементы содержат фрагменты текста, которые всегда отображаются в отдельных блоках. Браузеры
9. Некоторые элементы HTML и их атрибуты Видимое здесь содержимое отображается в браузере в виде одного абзаца.
10. Некоторые элементы HTML и их атрибуты Университет Информационных Технологий Естественнонаучный факультет Расписание занятий Заголовки – блочные
11. Гиперссылка Пользуйтесь поиском Гиперссылка – строчный элемент Пользуйтесь поиском Google - самым распространенным поисковиком в мире!
12. Картинки Вставка изображений – строчный элемент Дополнительные атрибуты width="250" height="150"/> width="50%"/> Изображение может служить ссылкой так
13. Списки Первая строка списка Вторая строка списка Третья строка списка Список (нумерованный или ненумерованный) – блочный
14. Нумерованные списки Вымыть посуду Постирать носки Купить жене цветы Нумерованный список Вымыть посуду Постирать носки Купить
15. Вложенные списки Документы: Паспорт Билеты Гостиница - бронь Предметы личной гигиены: Зубная щетка Паста Мыло Один
16. Цитирование Каркнул ворон: Никогда! Цитирование может быть коротким (строчным) и длинным (блочным) Каркнул ворон: “Никогда!” В
17. Выделение фрагментов текста Выделение производится с помощью тегов , , , Изучая HTML следует обратить особое
18. Элементы заголовка HTML Это моя страница Отображается в заголовке страницы в браузере. content="Эта страница содержит полезные
19. Элементы заголовка HTML Описывает формат и кодировку страницы. content="text/html; charset=windows-1251"> Определяет основной язык, на котором написана
20. MIME-типы Internet media type (MIME – Multipurpose Internet Mail/Media Extension) Подробнее см. http://ru.wikipedia.org/wiki/MIME
22. Скачать презентацию

Слайд 2

Что такое HTML?
это не язык программирования, а «язык разметки» (HyperText

Markup Language);
определяет содержание и структуру страницы, но не внешний вид;
элементы языка имеют структуру дерева (вложенные элементы);
пробелы либо игнорируются, либо заменяются одним пробелом;
узлы дерева представляют собой либо текст (содержание), либо «структурные элементы», маркируемые «тегами» и имеющие «атрибуты».

Текст на языке HTML и его структура

My first page

Hello, World!

html

title

body

My first page

Hello, World!

head

Слайд 3

Структура элементов языка
Элемент, маркированный тегом, имеет следующую структуру:

внутреннее

содержание

Если тег не имеет внутреннего содержания, то он может иметь упрощенную структуру:

My photo

Слайд 4

Структура страницы
Правильная страница имеет две части – заголовок (информация о странице) и

тело (содержание страницы)

информация о странице

внутреннее содержание

Пример:

My first web page

Welcome to my first web page!

This is a paragraph of text.

Слайд 5

XHTML – более современный HTML (2000 год)
HTML + XML (eXtended Markup

Language) = XHTML

Браузеры отображают пришедшую к ним по запросу страницу. Страница может быть написана как на «старом» HTML, так и на более новых XML
и XHTML. Мы будем использовать «современный» XHTML. Почему?

Более строгий и хорошо структурированный язык

Лучшая «переносимость» между различными браузерами

Лучше использовать более современные средства, чтобы не пришлось в будущем переделывать ваши замечательные страницы

XHTML допускает вставки на других «языках разметки» XML, SVG, MathML, MusicML и т.д.

Слайд 6

Структура документа в формате XHTML

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

информация о странице

внутреннее содержание

Основное отличие во внутреннем содержании документов HTML и XHTML:
если браузер видит ошибку в HTML-документе, то он обязан постараться
понять, что имел в виду автор документа. Если ошибка обнаружена в
XHTML документе, то браузер просто сообщает об ошибке.

Кроме того, форматирование элементов XHTML-документа должно быть
оформлено с помощью CSS-стилей. Многие теги, такие как font и
атрибуты, такие как bgcolor и align не поддерживаются в XHTML.

Слайд 7

Ошибки XHTML, которые допустимы в HTML
Все элементы должны быть закрыты.
Все обязательные

атрибуты должны присутствовать.

В теле документа текст не может быть вложен непосредственно.

«Блочные» элементы не могут быть вложены в «строчные».

Атрибуты должны заключаться в кавычки.

Вложенность элементов должна быть правильной.

Спецсимволы всегда должны быть представлены мнемоническими ссылками.

Теги и атрибуты записываются только строчными буквами.

Неправильно :

Правильно :

(или

)

some text

Hello, World!

...

Слайд 8

Блочные и строчные элементы
Блочные элементы содержат фрагменты текста, которые всегда отображаются

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

Примеры:

Строчные элементы могут располагаться друг за другом в пределах одной строки

Примеры: , , ,

Комментарии вставляются в HTML текст так же, как и обычные элементы:

Слайд 9

Некоторые элементы HTML и их атрибуты
Видимое здесь содержимое отображается в браузере

в виде одного абзаца. Повторяющиеся пробелы и переходы со строки на строку игнорируются.

Абзац (параграф) – блочный элемент
Видимое здесь содержимое отображается в браузере в виде одного абзаца. Повторяющиеся пробелы и переходы со строки на строку игнорируются.
Если необходимо сделать переход на следующую строку внутри абзаца, то это достигается с помощью элемента

Это первая строка параграфа,
а это уже вторая

А вот это уже следующий абзац.

Это первая строка параграфа, а это уже вторая
А вот это уже следующий абзац.

Слайд 10

Некоторые элементы HTML и их атрибуты
Университет Информационных Технологий

Естественнонаучный факультет

Расписание занятий

Заголовки –

блочные элементы
Университет Информационных Технологий
Естественнонаучный факультет
Расписание занятий
Всего может быть до шести уровней заголовков (от
до
)
Университет Информационных Технологий

Естественнонаучный факультет

Горизонтальная черта (разделитель) – блочный элемент
Университет Информационных Технологий
Естественнонаучный факультет

Слайд 11

Гиперссылка
Пользуйтесь поиском
Гиперссылка – строчный элемент
Пользуйтесь поиском Google - самым распространенным поисковиком

в мире!
И удачи вам в поиске!

Google
– самым распространенным поисковиком в мире!

Google
target="_blank" title="Нажмите для поиска">
Google
Будьте аккуратны с вложенностью элементов!
Это в первом абзаце

А это уже во втором!

Здесь две ошибки: блочный элемент внутри строчного и неправильная вложенность элементов. Тем не менее, HTML-браузер может корректно
отобразить эти элементы!

Слайд 12

Картинки

Вставка изображений – строчный элемент
Дополнительные атрибуты
width="250"

height="150"/>
width="50%"/>
Изображение может служить ссылкой так же, как и текст:

Слайд 13

Списки

Первая строка списка

Вторая строка списка

Третья строка списка

Список (нумерованный

или ненумерованный) – блочный элемент,
Содержащий внутри себя блочные элементы – члены списка
Первая строка списка
Вторая строка списка
Третья строка списка
Атрибуты списка могут задавать вид маркеров (не поддерживается в
«строгом» XHTML), например

Первая строка списка

Первая строка списка

Слайд 14

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

Вымыть посуду

Постирать носки

Купить жене цветы

Нумерованный список
Вымыть посуду
Постирать

носки
Купить жене цветы
Атрибуты списка могут задавать тип и способ нумерации
(не поддерживается в «строгом» XHTML)

Сделать домашнее задание

Купить билеты на концерт

Сделать домашнее задание
Купить билеты на концерт

Слайд 15

Вложенные списки

Документы:

Паспорт

Билеты

Гостиница - бронь

Предметы личной гигиены:

Зубная щетка

Паста

Мыло

Один список может быть вложен в другой
Документы:
Паспорт
Билеты
Гостиница - бронь
Предметы личной гигиены:
Зубная щетка
Паста
Мыло

Слайд 16

Цитирование
Каркнул ворон: Никогда!

Цитирование может быть коротким (строчным) и длинным (блочным)
Каркнул ворон:

“Никогда!”
В своем выступлении перед рабочими Леонид Ильич Брежнев,
в частности, сказал:

Мы еще теснее сплотимся вокруг родной
Коммунистической Партии и стройными рядами
будем двигаться вперед к полному торжеству
коммунизма!

В своем выступлении перед рабочими Леонид Ильич Брежнев, в частности,
сказал:
Мы еще теснее сплотимся вокруг родной Коммунистической Партии и
стройными рядами будем двигаться вперед к полному торжеству
коммунизма!

Слайд 17

Выделение фрагментов текста
Выделение производится с помощью тегов , , `,`
`Изучая`

HTML следует обратить особое внимание на различие между нумерованными списками и ненумерованными списками . Изучая HTML следует обратить особое внимание на различие между нумерованными списками <ol> и ненумерованными списками <ul>. Фрагменты кода можно выделять с помощью блочного тега public static void main(String[] args) { System.out.println("Hello, World!"); } Этот фрагмент выводится в точности так же, как он напечатан, включая все пробелы и переводы строк.

Слайд 18

`Элементы заголовка HTML`
Это моя страница
`Отображается в заголовке страницы в браузере.`

content="Эта страница содержит полезные сведения"/> Описывает содержимое страницы. Описывает ключевые слова (часто используется поисковыми машинами). Указание на автора. Указание на программу, которая сгенерировала этот текст.

Слайд 19

`Элементы заголовка HTML`
`Описывает формат и кодировку страницы.`
`content="text/html;`

charset=windows-1251"> Определяет основной язык, на котором написана страница. Описывает частоту перезагрузки страницы (в секундах) и, возможно, делает “redirection” на другую страницу. content="5;http://www.google.com/"> Описывает иконку, ассоциирующуюся со страницей (устаревший вариант: поместить в корневой каталог сайта файл с именем favicon.ico).

Слайд 20

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

Содержание

Что такое HTML? это не язык программирования, а «язык разметки» (HyperText

Структура элементов языкаЭлемент, маркированный тегом, имеет следующую структуру: внутреннее

Структура страницыПравильная страница имеет две части – заголовок (информация о странице) и

Welcome to my first web page!

XHTML – более современный HTML (2000 год)HTML + XML (eXtended Markup

Структура документа в формате XHTML

Ошибки XHTML, которые допустимы в HTMLВсе элементы должны быть закрыты.Все обязательные

Блочные и строчные элементыБлочные элементы содержат фрагменты текста, которые всегда отображаются

Некоторые элементы HTML и их атрибутыВидимое здесь содержимое отображается в браузере

Некоторые элементы HTML и их атрибутыУниверситет Информационных ТехнологийЕстественнонаучный факультетРасписание занятийЗаголовки –

Университет Информационных Технологий

Естественнонаучный факультет

Расписание занятий

до

ГиперссылкаПользуйтесь поискомГиперссылка – строчный элементПользуйтесь поиском Google - самым распространенным поисковиком

КартинкиВставка изображений – строчный элементДополнительные атрибуты width="250"

Списки Первая строка списка Вторая строка списка Третья строка спискаСписок (нумерованный

Нумерованные списки Вымыть посуду Постирать носки Купить жене цветыНумерованный списокВымыть посудуПостирать

Вложенные списки Документы: Паспорт Билеты Гостиница - бронь

ЦитированиеКаркнул ворон: Никогда!Цитирование может быть коротким (строчным) и длинным (блочным)Каркнул ворон:

Выделение фрагментов текстаВыделение производится с помощью тегов , , , Изучая

Элементы заголовка HTMLЭто моя страницаОтображается в заголовке страницы в браузере.

Элементы заголовка HTMLОписывает формат и кодировку страницы. content="text/html;

MIME-типыInternet media type (MIME – Multipurpose Internet Mail/Media Extension)Подробнее см. http://ru.wikipedia.org/wiki/MIME

Похожие презентации

Что такое HTML?
это не язык программирования, а «язык разметки» (HyperText

Структура элементов языка
Элемент, маркированный тегом, имеет следующую структуру:

внутреннее

Структура страницы
Правильная страница имеет две части – заголовок (информация о странице) и

XHTML – более современный HTML (2000 год)
HTML + XML (eXtended Markup

Ошибки XHTML, которые допустимы в HTML
Все элементы должны быть закрыты.
Все обязательные

Блочные и строчные элементы
Блочные элементы содержат фрагменты текста, которые всегда отображаются

Некоторые элементы HTML и их атрибуты
Видимое здесь содержимое отображается в браузере

Некоторые элементы HTML и их атрибуты
Университет Информационных Технологий

Естественнонаучный факультет

Расписание занятий

Заголовки –

Гиперссылка
Пользуйтесь поиском
Гиперссылка – строчный элемент
Пользуйтесь поиском Google - самым распространенным поисковиком

Картинки

Вставка изображений – строчный элемент
Дополнительные атрибуты
width="250"

Списки

Первая строка списка

Вторая строка списка

Третья строка списка

Список (нумерованный

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

Вымыть посуду

Постирать носки

Купить жене цветы

Нумерованный список
Вымыть посуду
Постирать

Вложенные списки

Документы:

Паспорт

Билеты

Гостиница - бронь

Цитирование
Каркнул ворон: Никогда!

Цитирование может быть коротким (строчным) и длинным (блочным)
Каркнул ворон:

Выделение фрагментов текста
Выделение производится с помощью тегов , , `,`
`Изучая`

`Элементы заголовка HTML`
Это моя страница
`Отображается в заголовке страницы в браузере.`

`Элементы заголовка HTML`
`Описывает формат и кодировку страницы.`
`content="text/html;`

`MIME-типы`
`Internet media type (MIME – Multipurpose Internet Mail/Media Extension)`
`Подробнее см. http://ru.wikipedia.org/wiki/MIME`

`Похожие презентации`