Разделы презентаций

ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА Часть1. Структура и параметры html- документа

Содержание

Появление HTML пришлось на начало 90-х годов благодаря двум протоколам, которые являются базовыми для Internet – TCP (Transmission Control Protocol – транспортный протокол) и IP (Internet Protocol – протокол маршрутизации).HyperText Markup

Слайды и текст этой презентации

Слайд 1ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА
Часть1. Структура и параметры html-документа. Форматирование текста. Графика

на Web-страницах. Ссылки. Маркеры.

ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТАЧасть1. Структура и параметры html-документа. Форматирование текста. Графика на Web-страницах. Ссылки. Маркеры.

Слайд 2Появление HTML пришлось на начало 90-х годов благодаря двум протоколам,

которые являются базовыми для Internet – TCP (Transmission Control Protocol

– транспортный протокол) и IP (Internet Protocol – протокол маршрутизации).
HyperText Markup Language – язык разметки гипертекста
Гипертекст – это своего рода нелинейное письмо, линейность которого нарушается применением гиперссылок.

История языка HTML

Появление HTML пришлось на начало 90-х годов благодаря двум протоколам, которые являются базовыми для Internet – TCP

Слайд 3Для разметки HTML документа используют теги(флаги разметки).
Тег – это определенная

последовательность символов, заключенные между знаками (меньше).
< - начало

тега
> - конец тега
ПРИМЕР:
и
Флаги бывают парные и непарные, открывающие и закрывающие. Отличительный признак закрывающего флага символ /

Теги

Для разметки HTML документа используют теги(флаги разметки).Тег – это определенная последовательность символов, заключенные между знаками (меньше).< -

Слайд 4HTML-теги
HTML-тег напоминает переключатель, с помощью которого вы что-то включаете или

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

буквами. Наиболее мудро в тегах использовать заглавные буквы, чтобы они выделялись в тексте.
...
Теги, в основном, используются попарно. Открывающий тег включает, закрывающий тег выключает.
...
Иногда теги имеют один или несколько атрибутов. Атрибуты предоставляют дополнительную информацию для браузера. Тег говорит браузеру ЧТО делать, а атрибут говорит КАК это делать.
...
HTML-тегиHTML-тег напоминает переключатель, с помощью которого вы что-то включаете или выключаете в вашем браузере.Теги могут быть написаны

Слайд 5
Всегда обращайте внимание на порядок расположения тегов:

Верно:


Неверно:



HTML-теги

Всегда обращайте внимание на порядок расположения тегов: Верно: Неверно: HTML-теги

Слайд 6
простое название
содержание страницы


простое название
содержание страницы


простое название
содержание страницы




простое название


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



Структура HTML-документа

простое название содержание страницы простое название содержание страницы

Слайд 7Структура HTML-документа

Структура HTML-документа

Слайд 8Параметры документа задаются через тег .
Параметры – это специальные

символьные команды, которые «понимает» браузер.
Параметры документа

Параметры документа задаются через тег . Параметры – это специальные символьные команды, которые «понимает» браузер.Параметры документа

Слайд 9

Заглавие документа


Это наш пример!!!


Параметры

документа: пример

Заглавие документаЭто наш пример!!! Параметры документа: пример

Слайд 10Индексирование документы
HTML-документы могут содержать набор ключевых слов и других вспомогательных

параметров, такие как заглавие, описание сайта, авторство для индексирования и

лучшего нахождения поисковыми системами страницы. Эти параметры обозначены в META-тегах.

Индексирование документыHTML-документы могут содержать набор ключевых слов и других вспомогательных параметров, такие как заглавие, описание сайта, авторство

Слайд 11Для здания кодировки используется тег META, стоящий в теге HEAD.

Атрибуты тега для задания кодировок:
Кодировка страницы

Для здания кодировки используется тег META, стоящий в теге HEAD. Атрибуты тега для задания кодировок:

Слайд 12



CONTENT="Пупкин, дизайн, htm, html">
Заглавие документа


Вася


Содержание документа: автоматически отображается на Кириллице!


Кодировка

страницы: пример
Заглавие документаВасяСодержание документа: автоматически отображается на Кириллице!Кодировка страницы: пример

Слайд 13В HTML существуют специальные теги для заголовков: от Н1 (самого

крупного) до Н6 (самого мелкого):




Заголовок 1

Заголовок 2

Заголовок 3


Заголовок 4


Заголовок 5

Заголовок 6



Заголовки

В HTML существуют специальные теги для заголовков: от Н1 (самого крупного) до Н6 (самого мелкого):

Слайд 14 Bold жирный
Italic наклонный
Underline подчеркнутый
Strikethrough зачеркнутый




Bold

Italic

Underline

Strikethrough



Bold & Italic


Стили текста

Bold жирный Italic наклонный Underline подчеркнутый Strikethrough зачеркнутый Bold Italic Underline Strikethrough Bold & Italic Стили текста

Слайд 15Шрифт задаётся тегом FONT.











Helvetica" SIZE="4" COLOR="green">
Цвет, размер и шрифт выбраны.


Шрифт

Шрифт задаётся тегом FONT. Цвет, размер и шрифт выбраны.Шрифт

Слайд 16Неразрывный пробел –   (non-breaking space). Перенос строки –

Размещение текста в том виде, в котором он представлен –

...


Пример: 



Предварительное   форматирование текста
 //    *    //


Mitsubishi Galant

Mitsubishi Galant.

Начало нового абзаца!




Предварительное форматирование

Неразрывный пробел –   (non-breaking space). Перенос строки – Размещение текста в том виде, в

Слайд 17Верхний индекс - тег SUP, а нижний - SUB.

X3


A3


Верхние и нижние индексы

Верхний индекс - тег SUP, а нижний - SUB. X3A3 Верхние и нижние индексы

Слайд 18Тег нового абзаца










Значение CENTER - центрирование
Значение RIGHT

- выравнивание по правому краю.
Значение LEFT - выравнивание по

левому краю




Выравнивание

Тег нового абзаца Значение CENTER - центрированиеЗначение RIGHT - выравнивание по правому краю.Значение LEFT - выравнивание

Слайд 19Графика на Web-страницах
На Web-страницах возможно размещать графическую информацию.
Желаемым условием

графики в сети является небольшой размер файлов, наиболее часто реализуется

в форматах GIF и JPEG.
Графика на Web-страницахНа Web-страницах возможно размещать графическую информацию. Желаемым условием графики в сети является небольшой размер файлов,

Слайд 20Для публикаций изображений используется тег IMG:











HEIGHT="155" BORDER="2" ALT="Бабочка" align="right">


Графика на Web-страницах

Для публикаций изображений используется тег IMG: Графика на Web-страницах

Слайд 21

от текста...
Графика на Web-страницах: пример

Слайд 22

Атрибут ALIGN дает возможность

разместить текст на Web-странице между двумя изображениями...
Графика на Web-страницах: пример

Атрибут ALIGN дает возможность разместить текст на Web-странице между двумя изображениями...Графика на Web-страницах: пример

Слайд 23
Этот текст выровнен по верхней кромке изображения
Графика на

Web-страницах: пример

Этот текст выровнен по средней оси изображения

SRC=3.GIF ALIGN="BOTTOM">
Этот текст выровнен по нижней кромке изображения
Этот текст выровнен по верхней кромке изображенияГрафика на Web-страницах: примерЭтот текст выровнен по средней оси изображенияЭтот

Слайд 24Графика на Web-страницах: пример

Графика на Web-страницах: пример

Слайд 25Ссылки на Web-страницах
Ссылки служат для перехода с одной страницы на

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

тега A.
Ссылки на Web-страницахСсылки служат для перехода с одной страницы на другую, перенаправление по протоколам ссылок и прочее.

Слайд 26Ссылки на Web-страницах

Ссылки на Web-страницах

Слайд 27Ссылки на Web-страницах

Ссылки на Web-страницах

Слайд 28Ссылки на Web-страницах

Ссылки на Web-страницах

Слайд 29Списки на Web-страницах
Атрибут TYPE позволяет изменить вид маркера:

Раз Два Три

  • Четыре
  • Пять


    • Списки на Web-страницахАтрибут TYPE позволяет изменить вид маркера:

    Слайд 30Списки на Web-страницах
    Атрибут TYPE позволяет изменить стиль нумерации:

    Раз Два Три

  • Четыре
  • Пять


    • Списки на Web-страницахАтрибут TYPE позволяет изменить стиль нумерации: Раз Два

    Слайд 31Списки на Web-страницах
    Атрибуты START и VALUE позволяют изменить порядок нумерации

    списка:

    START – дает возможность присвоить начальному элементу номер, отличный от

    1;
    VALUE – принудительно назначает элементу произвольный номер.


    1. Иванов

    2. Сидоров

    3. Пупкин



    Списки на Web-страницахАтрибуты START и VALUE позволяют изменить порядок нумерации списка:START – дает возможность присвоить начальному

    Слайд 32Списки на Web-страницах
    Список с несколькими уровнями вложенности:



    форматирование текста



    жирность;
    наклон;

  • цвет


  • работа с абзацами


    • Списки на Web-страницахСписок с несколькими уровнями вложенности: форматирование текста жирность;

    Слайд 33Списки с графическими маркерами
    Картинки для маркеров должны быть небольшого размера,

    соответствовать форматированию текста. Образцы маркеров можно найти на сайтах: www.grapholina.com/Grafics

    и www.theshockzone.com



      Раз

      Два

      Три

      Четыре

      Пять

    Для указания способа вертикального выравнивания текста относительно границ маркеров можно воспользоваться атрибутом ALIGN (top, middle, bottom) тега IMG:

    Раз
    Атрибут HSPACE тега IMG позволит отделить картинку маркера от текста:

    Раз

    Списки с графическими маркерамиКартинки для маркеров должны быть небольшого размера, соответствовать форматированию текста. Образцы маркеров можно найти

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

    МБУ Муниципальная информационно-библиотечная система г МБУ Муниципальная информационно-библиотечная система г 244
    Задания «Заглавная буква в именах существительных» Задания «Заглавная буква в именах существительных» 364
    Важнейшие архитектурные элементы здания Важнейшие архитектурные элементы здания 210
    Кафедра Уголовного права профессор кафедры уголовного права ПФ “ РГУП ”, Кафедра Уголовного права профессор кафедры уголовного права ПФ “ РГУП ”, 261
    Серебряный век русской культуры Серебряный век русской культуры 177
    Складской технологический процесс Складской технологический процесс 201
    Притяжательный падеж Притяжательный падеж 255
    Викторина Викторина 547
    Литературное чтение Литературное чтение 201
    Установки непрерывного действия для приготовления абс Установки непрерывного действия для приготовления абс 186
    Субкультуры Субкультуры 240
    Акалькулия Акалькулия 724
    Профилактика и ликвидация чрезвычайных ситуациях на железнодорожном транспорте Профилактика и ликвидация чрезвычайных ситуациях на железнодорожном транспорте 248
    Битва под Москвой Битва под Москвой 339
    Публичная защита исследовательской работы Т.А. Гартунг, директор МАУ ТМР Центр Публичная защита исследовательской работы Т.А. Гартунг, директор МАУ ТМР Центр 217
    Илья Е фимович Репин Илья Е фимович Репин 252
    Гигиена юного туриста в походе Гигиена юного туриста в походе 275
    Рождение новой европейской науки Рождение новой европейской науки 543
    Г е р о и р у с с к и х с к а з о к Интерактивный кроссворд Г е р о и р у с с к и х с к а з о к Интерактивный кроссворд 186
    Этапы работы над проектом Этапы работы над проектом 348

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

    Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

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

    Что такое TheSlide.ru?

    Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.

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

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