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

Содержание

Слайд 2

Что такое HTML?

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

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

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



My first page


Hello, World!




html

title

body

p

My first page

Hello, World!

head

Слайд 3

Структура элементов языка

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


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

Структура элементов языка Элемент, маркированный тегом, имеет следующую структуру: внутреннее содержание Next
href="page2.html">Next page

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


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 (2000 год) HTML + XML (eXtended Markup
= XHTML

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

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

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

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

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

Слайд 6

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

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

Структура документа в формате XHTML "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> информация о странице внутреннее содержание Основное
xmlns="http://www.w3.org/1999/xhtml">

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

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

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

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

Слайд 7

Ошибки XHTML, которые допустимы в HTML

Все элементы должны быть закрыты.

Все обязательные атрибуты

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

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

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

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

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

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

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

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

Правильно :

1.

2.

3.

4.

5.

6.

7.

8.




(или
)



some text

some text

Hello, World!

Hello, World!





&

&



Слайд 8

Блочные и строчные элементы

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

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

Примеры:

,

,

Слайд 9

Некоторые элементы HTML и их атрибуты

Видимое здесь содержимое отображается в браузере в

Некоторые элементы HTML и их атрибуты Видимое здесь содержимое отображается в браузере
виде одного абзаца. Повторяющиеся пробелы и переходы со строки на строку игнорируются.


Абзац (параграф) – блочный элемент

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

Если необходимо сделать переход на следующую строку внутри абзаца, то это достигается с помощью элемента

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


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


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

Слайд 10

Некоторые элементы HTML и их атрибуты

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


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


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


Заголовки – блочные

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

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

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

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

Всего может быть до шести уровней заголовков (от

до

)

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



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


Горизонтальная черта (разделитель) – блочный элемент

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

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

Слайд 11

Гиперссылка

Пользуйтесь поиском

Гиперссылка – строчный элемент

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

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

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



Google

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



Google

target="_blank" title="Нажмите для поиска">
Google

Будьте аккуратны с вложенностью элементов!

Это в первом абзаце

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


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

Слайд 12

Картинки

Сервер


Вставка изображений – строчный элемент

Дополнительные атрибуты

Сервер width="250" height="150"/>

Картинки Вставка изображений – строчный элемент Дополнительные атрибуты width="250" height="150"/> width="50%"/> Изображение
src="server.jpg" alt="Сервер"
width="50%"/>

Изображение может служить ссылкой так же, как и текст:


Сервер

Слайд 13

Списки


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

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

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


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

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

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

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


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


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

Слайд 14

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


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

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

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


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

Вымыть посуду
Постирать носки
Купить

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

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


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

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


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

Слайд 15

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


  1. Документы:

    • Паспорт

    • Билеты

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



  2. Предметы

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

  • Зубная щетка

  • Паста

  • Мыло




  • Один список может быть вложен в другой

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

  • Слайд 16

    Цитирование

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


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

    Каркнул ворон: “Никогда!”

    В

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


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

    Слайд 17

    Выделение фрагментов текста

    Выделение производится с помощью тегов , , ,

    Изучая HTML

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

        Изучая HTML следует обратить
        особое внимание на
        различие между нумерованными списками
        <ol> и ненумерованными
        списками <ul>.


        Фрагменты кода можно выделять с помощью блочного тега



        public static void main(String[] args) {
        System.out.println("Hello, World!");
        }

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

    Слайд 18

    Элементы заголовка HTML

    Это моя страница

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

    Элементы заголовка HTML Это моя страница Отображается в заголовке страницы в браузере.
    content="Эта страница содержит полезные сведения"/>


    Описывает содержимое страницы.

    Описывает ключевые слова (часто используется поисковыми машинами).


    Указание на автора.


    Указание на программу, которая сгенерировала этот текст.

    Слайд 19

    Элементы заголовка HTML


    Описывает формат и кодировку страницы.

    content="text/html; charset=windows-1251">

    Определяет

    Элементы заголовка HTML Описывает формат и кодировку страницы. content="text/html; charset=windows-1251"> Определяет основной
    основной язык, на котором написана страница.

    Описывает частоту перезагрузки страницы (в секундах)
    и, возможно, делает “redirection” на другую страницу.

    content="5;http://www.google.com/">

    Описывает иконку, ассоциирующуюся со страницей (устаревший вариант:
    поместить в корневой каталог сайта файл с именем favicon.ico).


    Слайд 20

    MIME-типы

    Internet media type (MIME – Multipurpose Internet Mail/Media Extension)

    Подробнее см. http://ru.wikipedia.org/wiki/MIME

    MIME-типы Internet media type (MIME – Multipurpose Internet Mail/Media Extension) Подробнее см. http://ru.wikipedia.org/wiki/MIME
    Имя файла: HTML.-Язык-описания-Web-страниц.pptx
    Количество просмотров: 43
    Количество скачиваний: 0