HTML Язык описания Web-страниц По материалам курса University of Washington http://www.cs.washington.edu/education/courses/cse190m/07sp/index.shtml http://www.cs.washington.edu/education/courses/cse190m/07sp/index.shtml. - презентация

1 HTML Язык описания Web-страниц По материалам курса University of Washington

2 Что такое HTML? это не язык программирования, а «язык разметки» (HyperText Markup Language); определяет содержание и структуру страницы, но не внешний вид; элементы языка имеют структуру дерева (вложенные элементы); пробелы либо игнорируются, либо заменяются одним пробелом; узлы дерева представляют собой либо текст (содержание), либо «структурные элементы», маркируемые «тегами» и имеющие «атрибуты». Текст на языке HTML и его структура My first page Hello, World! html title body p My first pageHello, World! head

3 Структура элементов языка Элемент, маркированный тегом, имеет следующую структуру: внутреннее содержание Next page Если тег не имеет внутреннего содержания, то он может иметь упрощенную структуру:

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 информация о странице внутреннее содержание Основное отличие во внутреннем содержании документов HTML и XHTML: если браузер видит ошибку в HTML-документе, то он обязан постараться понять, что имел в виду автор документа. Если ошибка обнаружена в XHTML документе, то браузер просто сообщает об ошибке. Кроме того, форматирование элементов XHTML-документа должно быть оформлено с помощью CSS-стилей. Многие теги, такие как font и атрибуты, такие как bgcolor и align не поддерживаются в XHTML.

7 Ошибки XHTML, которые допустимы в HTML 1.Все элементы должны быть закрыты. 2.Все обязательные атрибуты должны присутствовать. 4.В теле документа текст не может быть вложен непосредственно. 6.«Блочные» элементы не могут быть вложены в «строчные». 5.Атрибуты должны заключаться в кавычки. 3.Вложенность элементов должна быть правильной. 7.Спецсимволы всегда должны быть представлены мнемоническими ссылками. 8.Теги и атрибуты записываются только строчными буквами. Неправильно :Правильно : ( или ) some text Hello, World!... & &

8 Блочные и строчные элементы Блочные элементы содержат фрагменты текста, которые всегда отображаются в отдельных блоках. Браузеры всегда визуально отделяют блочные элементы друг от друга. Примеры:,,, Строчные элементы могут располагаться друг за другом в пределах одной строки Примеры:,,, Комментарии вставляются в HTML текст так же, как и обычные элементы:

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

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

11 Гиперссылка Пользуйтесь поиском Гиперссылка – строчный элемент Пользуйтесь поиском Google - самым распространенным поисковиком в мире!Google И удачи вам в поиске! Google – самым распространенным поисковиком в мире! Google Google Будьте аккуратны с вложенностью элементов! Это в первом абзаце А это уже во втором! Здесь две ошибки: блочный элемент внутри строчного и неправильная вложенность элементов. Тем не менее, HTML-браузер может корректно отобразить эти элементы!

12 Картинки Вставка изображений – строчный элемент Дополнительные атрибуты Изображение может служить ссылкой так же, как и текст:

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

14 Нумерованные списки Вымыть посуду Постирать носки Купить жене цветы Нумерованный список 1.Вымыть посуду 2.Постирать носки 3.Купить жене цветы Атрибуты списка могут задавать тип и способ нумерации (не поддерживается в «строгом» XHTML) Сделать домашнее задание Купить билеты на концерт c.Сделать домашнее задание d.Купить билеты на концерт

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

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

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

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

19 Элементы заголовка HTML Описывает формат и кодировку страницы. Определяет основной язык, на котором написана страница. Описывает частоту перезагрузки страницы (в секундах) и, возможно, делает redirection на другую страницу. Описывает иконку, ассоциирующуюся со страницей (устаревший вариант: поместить в корневой каталог сайта файл с именем favicon.ico ).

20 MIME-типы Internet media type (MIME – Multipurpose Internet Mail/Media Extension) application/javascript Текст на JavaScript (обычно.js) application/octet-stream Двоичная программа (обычно.exe) image/jpeg Картинка в формате JPEG image/gif Картинка в формате GIF image/vnd.microsoft.icon Иконка в формате Microsoft audio/mpeg Звуковой файл (обычно.mp3) text/plain Просто текст (например,.txt) text/html Текст на языке HTML text/css Каскадная таблица стилей (.css) video/mp4 Кино в формате MP4 Подробнее см.

21 Мнемоники Специальные символы отображаются в текстах в виде специальных слов (entities). Вот примеры некоторых мнемоник: < > ©™ © π δ Δπ δ Δ И&1048; ¢ £ ¥¢ £ ¥ " &" & Полный список см.