Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


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

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

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

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

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

Содержание

Что такое HTML? это не язык программирования, а «язык разметки» (HyperText Markup Language); определяет содержание и структуру страницы, но не внешний вид; элементы языка имеют структуру дерева (вложенные элементы); пробелы либо игнорируются, либо заменяются одним
HTML Язык описания Web-страницПо материалам курса University of Washington http://www.cs.washington.edu/education/courses/cse190m/07sp/index.shtml Что такое HTML? это не язык программирования, а «язык разметки» (HyperText Markup Структура элементов языкаЭлемент, маркированный тегом, имеет следующую структуру: внутреннее содержание Next pageЕсли Структура страницыПравильная страница имеет две части – заголовок (информация о странице) и XHTML – более современный HTML (2000 год)HTML + XML (eXtended Markup Language) Структура документа в формате XHTML   информация о странице Ошибки XHTML, которые допустимы в HTMLВсе элементы должны быть закрыты.Все обязательные атрибуты Блочные и строчные элементыБлочные элементы содержат фрагменты текста, которые всегда  отображаются Некоторые элементы HTML и их атрибутыВидимое здесь содержимое  отображается в браузере Некоторые элементы HTML и их атрибутыУниверситет Информационных ТехнологийЕстественнонаучный факультетРасписание занятийЗаголовки – блочные ГиперссылкаПользуйтесь поискомГиперссылка – строчный элементПользуйтесь поиском Google - самым распространенным поисковиком в КартинкиВставка изображений – строчный элементДополнительные атрибутыИзображение может служить ссылкой так же, как и текст: Списки Первая строка списка Вторая строка списка Третья строка спискаСписок (нумерованный или Нумерованные списки Вымыть посуду Постирать носки Купить жене цветыНумерованный списокВымыть посудуПостирать носкиКупить Вложенные списки Документы:        Паспорт ЦитированиеКаркнул ворон: Никогда!Цитирование может быть коротким (строчным) и длинным (блочным)Каркнул ворон: “Никогда!”В Выделение фрагментов текстаВыделение производится с помощью тегов , , , Изучая HTML Элементы заголовка HTMLЭто моя страницаОтображается в заголовке страницы в браузере.Описывает содержимое страницы.Описывает Элементы заголовка HTMLОписывает формат и кодировку страницы.Определяет основной язык, на котором написана MIME-типыInternet media type (MIME – Multipurpose Internet Mail/Media Extension)Подробнее см. http://ru.wikipedia.org/wiki/MIME МнемоникиСпециальные символы отображаются в текстах в виде специальных слов (entities). Вот примеры
Слайды презентации

Слайд 2 Что такое HTML?
это не язык программирования, а

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

«язык разметки» (HyperText Markup Language);
определяет содержание и структуру

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

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



My first page


Hello, World!




html

title

body

p

My first page

Hello, World!

head


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

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

attr1="value1" attr2="value2"...>
внутреннее содержание
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 +

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

XML (eXtended Markup Language) = XHTML
Браузеры отображают пришедшую к

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

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

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

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

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


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

Структура документа в формате XHTML  информация о странице

XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


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

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

Основное отличие во внутреннем содержании документов 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 - самым распространенным поисковиком

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

name="bookmark1"/>

Google

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



Google

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

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

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

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


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


Слайд 12 Картинки

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

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

src="server.jpg" alt="Сервер"
width="250" height="150"/>

width="50%"/>

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


Сервер


Слайд 13 Списки

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

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

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

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

себя блочные элементы – члены списка

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

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


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


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


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

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

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

цветы

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

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


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

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


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


Слайд 15 Вложенные списки

Документы:

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

Паспорт
Билеты

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



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

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

    • Паста

    • Мыло




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

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


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

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

    длинным (блочным)
    Каркнул ворон: “Никогда!”
    В своем выступлении перед рабочими Леонид

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


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


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

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

    , ,
    Изучая HTML следует обратить особое внимание на

    различие между
    нумерованными списками
      и ненумерованными списками
        .

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


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



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

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


    Слайд 18 Элементы заголовка HTML
    Это моя страница
    Отображается в заголовке страницы

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

    в браузере.

    полезные сведения"/>


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

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


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


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


    Слайд 19 Элементы заголовка HTML

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

    Элементы заголовка HTMLОписывает формат и кодировку страницы.Определяет основной язык, на котором

    страницы.

    Определяет основной язык, на

    котором написана страница.

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

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

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



    Слайд 20 MIME-типы
    Internet media type (MIME – Multipurpose Internet Mail/Media

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

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


    • Имя файла: html-yazyk-opisaniya-web-stranits.pptx
    • Количество просмотров: 216
    • Количество скачиваний: 0