Что такое 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. Сделать домашнее задание

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


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

Слайд 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
    • Количество просмотров: 195
    • Количество скачиваний: 0
    - Предыдущая Задачи психолого-педагогической поддержки подростков в образовательном процессе
    Следующая - Скелет поясов и свободных конечностей

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

    Устройство компьютера 7 класс Устройство компьютера 7 класс 171
    Программирование на языке Паскаль. Графика Программирование на языке Паскаль. Графика 114
    Компьютернеые вирусы Компьютернеые вирусы 114
    КВН: мир информатики КВН: мир информатики 110
    Создание веб-документов Создание веб-документов 153
    Контроль знаний учащихся при работе в среде ЛогоМиры Контроль знаний учащихся при работе в среде ЛогоМиры 197
    Презентация. 10 класс Создание 3D модели Презентация. 10 класс Создание 3D модели 140
    Типы алгоритмов Типы алгоритмов 115
    Интернет – телевидение (IPTV) Интернет – телевидение (IPTV) 131
    Презентация к уроку по теме Использование языка программирования Pascal при решении квадратных уравнений Презентация к уроку по теме Использование языка программирования Pascal при решении квадратных уравнений 122
    Сценарии shell и make-файлы Сценарии shell и make-файлы 90
    Алгоритмы Алгоритмы 92
    Табличный процессор MS Excel Табличный процессор MS Excel 125
    LSMW Material data load using BAPI LSMW Material data load using BAPI 115
    Пространственные базы данных Пространственные базы данных 109
    Новые возможности интернет-рекламы Новые возможности интернет-рекламы 89
    Кестелер арасында байланыс Кестелер арасында байланыс 131
    Человек и компьютер Человек и компьютер 118
    Электронды кілттің модельдері Электронды кілттің модельдері 127
    Презентация к уроку информатики в 7 классе Измерение информации Презентация к уроку информатики в 7 классе Измерение информации 162
    Презентация к уроку Компьютерная графика Презентация к уроку Компьютерная графика 97
    Презентация к мастер-классу на тему: Создание Web-страниц с помощью языка HTML и других программных средств для представления проектов учащихся. Презентация к мастер-классу на тему: Создание Web-страниц с помощью языка HTML и других программных средств для представления проектов учащихся. 96
    Количественная характеристика информации Количественная характеристика информации 250
    Обход графа в глубину Обход графа в глубину 132
    КОМПЬЮТЕРНАЯ ПАМЯТЬ КОМПЬЮТЕРНАЯ ПАМЯТЬ 100
    ПЕРЕВОД ЧИСЕЛ ИЗ ОДНОЙ СИСТЕМЫ СЧИСЛЕНИЯ В ДРУГУЮ ПЕРЕВОД ЧИСЕЛ ИЗ ОДНОЙ СИСТЕМЫ СЧИСЛЕНИЯ В ДРУГУЮ 120
    Действия с информацией. Хранение информации (5 класс) Действия с информацией. Хранение информации (5 класс) 122
    Единичное имя объекта Единичное имя объекта 103
    Информатика эрудиті (информатикалық интеллектуалдық ойын) Информатика эрудиті (информатикалық интеллектуалдық ойын) 286
    Презентация по информатике на тему: Кодирование информации Презентация по информатике на тему: Кодирование информации 111