Скачать презентацию Основы языка разметки гипертекста HTML ВВЕДЕНИЕ В Скачать презентацию Основы языка разметки гипертекста HTML ВВЕДЕНИЕ В

c3769ec49a2f6ede7855682f3c0dd21c.ppt

  • Количество слайдов: 48

Основы языка разметки гипертекста HTML Основы языка разметки гипертекста HTML

ВВЕДЕНИЕ В HTML Общие сведения о HTML Теги HTML Структура HTML -документа Форматирование Определение ВВЕДЕНИЕ В HTML Общие сведения о HTML Теги HTML Структура HTML -документа Форматирование Определение функциональных разделов документа Управление стилем шрифта Определение элементов фразы Создание списков Гипертекстовые ссылки и якоря Мультимедиа и HTML Рисунки Мультимедийные объекты Создание таблиц

ЧТО ТАКОЕ HTML? Hyper Text Markup Language – это язык разметки гипертекста – На ЧТО ТАКОЕ HTML? Hyper Text Markup Language – это язык разметки гипертекста – На данный момент в разработке версия HTML 5. 0 – Гипертекст – текст, содержащий специальные коды (теги, tags) , управляющие форматированием, включающие рисунки и мультимедийные объекты, содержащие ссылки на другие документы – HTML – «родственник» языков программирования, но в отличие от них крайне прост

БРАУЗЕРЫ HTML- документы отображаются с помощью специальной программы – браузера, которая отображает информацию, содержащуюся БРАУЗЕРЫ HTML- документы отображаются с помощью специальной программы – браузера, которая отображает информацию, содержащуюся в документе в соответствии с тегами разметки – На данный момент самыми распространенными браузерами являются Opera, Mozilla Firefox, Google Chrome, Internet Explorer, Safari

ТЕГИ HTML Теги – коды HTML, с помощью которых выполняется разметка текста Тег представляет ТЕГИ HTML Теги – коды HTML, с помощью которых выполняется разметка текста Тег представляет собой набор символов между угловыми скобками < … > Регистр букв в тега не имеет значения, но принято использовать большие буквы Теги, воздействующие на часть документа бывают открывающие и закрывающие : <…> … Теги, дающие разовый эффект в месте их появления в закрывающей части не нуждаются Если использован тег, отсутствующий в HTML или не поддерживаемый браузером, он игнорируется В браузере теги не отображаются (но влияют на отображение документа), их можно увидеть в «исходном коде страницы»

Примеры тегов <Title> <Body> </A> <TABLE> <IMG> </Center> Примеры тегов <Body> </A> <TABLE> <IMG> </Center> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Примеры парных тегов <HTML> </HTML> <B> </B> <HEAD> </HEAD> <H 3> </H 3> <ADDRESS>" src="https://present5.com/presentation/c3769ec49a2f6ede7855682f3c0dd21c/image-7.jpg" alt="Примеры парных тегов <HTML> </HTML> <B> </B> <HEAD> </HEAD> <H 3> </H 3> <ADDRESS>" /> Примеры парных тегов <HTML> </HTML> <B> </B> <HEAD> </HEAD> <H 3> </H 3> <ADDRESS> </ADRESS> <LI> </LI> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Примеры одиночных тегов <BR> <HR> <META> <BASEFONT> <FRAME> <INPUT> " src="https://present5.com/presentation/c3769ec49a2f6ede7855682f3c0dd21c/image-8.jpg" alt="Примеры одиночных тегов <BR> <HR> <META> <BASEFONT> <FRAME> <INPUT> " /> Примеры одиночных тегов <BR> <HR> <META> <BASEFONT> <FRAME> <INPUT> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="АТРИБУТЫ ТЕГОВ Открывающие теги могут содержать атрибуты, влияющие на эффект, производимый тегом это дополнительные" src="https://present5.com/presentation/c3769ec49a2f6ede7855682f3c0dd21c/image-9.jpg" alt="АТРИБУТЫ ТЕГОВ Открывающие теги могут содержать атрибуты, влияющие на эффект, производимый тегом это дополнительные" /> АТРИБУТЫ ТЕГОВ Открывающие теги могут содержать атрибуты, влияющие на эффект, производимый тегом это дополнительные ключевые слова, отделенные от содержимого тега и друг от друга пробелами некоторые атрибуты требуют задания значения атрибута значение отделяется от атрибута знаком = значение атрибута должно быть в кавычках, но иногда их можно не писать Закрывающие теги никогда не имеют атрибутов! </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Примеры тегов с атрибутами <BODY BGCOLOR=“#000000” TEXT=“#FFFFFF” BACKGROUND=“RAIN. JPG”> <OPTION SELECTED> <FRAME SRC=“file. html”" src="https://present5.com/presentation/c3769ec49a2f6ede7855682f3c0dd21c/image-10.jpg" alt="Примеры тегов с атрибутами <BODY BGCOLOR=“#000000” TEXT=“#FFFFFF” BACKGROUND=“RAIN. JPG”> <OPTION SELECTED> <FRAME SRC=“file. html”" /> Примеры тегов с атрибутами <BODY BGCOLOR=“#000000” TEXT=“#FFFFFF” BACKGROUND=“RAIN. JPG”> <OPTION SELECTED> <FRAME SRC=“file. html” NORESIZE> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="СТРУКТУРА HTML-ДОКУМЕНТА Структура HTML- документа строго фиксирована: • начинается с <HTML> и заканчивается </HTML>" src="https://present5.com/presentation/c3769ec49a2f6ede7855682f3c0dd21c/image-11.jpg" alt="СТРУКТУРА HTML-ДОКУМЕНТА Структура HTML- документа строго фиксирована: • начинается с <HTML> и заканчивается </HTML>" /> СТРУКТУРА HTML-ДОКУМЕНТА Структура HTML- документа строго фиксирована: • начинается с <HTML> и заканчивается </HTML> • cостоит из раздела заголовков и тела документа • раздел заголовков ограничен тегами <HEAD> </HEAD> • между ними помещают, например заголовок документа между тегами <TITLE> и • сам текст документа располагается в его теле и ограничивается тегами и

ПРОСТЕЙШИЙ ДОКУМЕНТ <HTML> <HEAD> <TITLE> Моя первая страничка </TITLE> </HEAD> <BODY> Привет всем! Смотрите ПРОСТЕЙШИЙ ДОКУМЕНТ Моя первая страничка Привет всем! Смотрите - это моя первая Web- страничка!

Инструкция по работе с HTML Наиболее простой формой работы с HTML является использование блокнота. Инструкция по работе с HTML Наиболее простой формой работы с HTML является использование блокнота. ШАГ 1. Откройте «Пуск» , далее «Все программы» , далее «Стандартные» , далее «Блокнот» . Шаг 2. Скопируйте теги с прошлого слайда и вставьте их в блокнот Шаг 3. В блокноте нажмите пункт «Файл» , далее «Сохранить как» . В открывшемся окне дайте имя файлу «Моя первая веб-страница» и ИЗМЕНИТЕ расширение файла с. txt на. html Шаг 4. В месте, куда Вы сохранили файл Моя первая веб-страница. html, откройте его с помощью любого браузера

РЕЗУЛЬТАТ РЕЗУЛЬТАТ

Вопросы для самопроверки q Что такое веб-страница? q Что такое веб-сайт? q Что такое Вопросы для самопроверки q Что такое веб-страница? q Что такое веб-сайт? q Что такое браузер? q Какие браузеры Вы знаете? q Что отобразится в браузере, если он обнаружит в документе незнакомый тег? q Можно ли указывать атрибуты в закрывающих тегах? q Как изменится отображение документа браузером, если в веб-странице убрать теги и ?

ФОРМАТИРОВАНИЕ ФОРМАТИРОВАНИЕ

ОПРЕДЕЛЕНИЕ ФУНКЦИОНАЛЬНЫХ РАЗДЕЛОВ ДОКУМЕНТА Существует два вида функциональных разделов заголовки и абзацы • В ОПРЕДЕЛЕНИЕ ФУНКЦИОНАЛЬНЫХ РАЗДЕЛОВ ДОКУМЕНТА Существует два вида функциональных разделов заголовки и абзацы • В HTML имеется шесть уровней заголовков – от и до и • Абзацы ограничиваются тегами

и

– при просмотре абзацы отделяются друг от друга пустой строкой и не содержат отступов – «лишние» пробелы и пустые строки игнорируются • тег
создает горизонтальную линию •
позволяет принудительно перейти на новую строку

Пример документа с форматированием <HTML> <HEAD> <TITLE> О преподавателе</TITLE> </HEAD> <BODY> <H 1> Екатерина Пример документа с форматированием О преподавателе Екатерина Александровна Поддячая

Добрый день!
Меня зовут Екатерина Александровна. Я работаю преподавателем дисциплины «Современные интернеттехнологии» в Институте рекламы и связей с общественностью.

Сферой моих интересов является изучение особенностей маркетинговых коммуникаций в Интернете и оценка их эффективности

Посмотрите результаты данного кода в браузере (см. инструкцию на слайде 13)

Задание По аналогии с примером на предыдущем слайде, создайте страницу с информацией о себе. Задание По аналогии с примером на предыдущем слайде, создайте страницу с информацией о себе. Усложните ее, создав разделы с заголовками второго уровня, такие как «Автобиография» , «Образование» , «Профессиональные интересы» , «Увлечения» .

МЕТА-ТЕГИ Для хранения информации о документе в том виде, в котором ее могут получить МЕТА-ТЕГИ Для хранения информации о документе в том виде, в котором ее могут получить поисковики, используйте следующие атрибуты тега : Данные теги помещаются внутри тегов

УПРАВЛЕНИЕ СТИЛЕМ ШРИФТА Тег <FONT> задает размер, цвет и начертание шрифта и должен иметь УПРАВЛЕНИЕ СТИЛЕМ ШРИФТА Тег задает размер, цвет и начертание шрифта и должен иметь хотя бы один из атрибутов: SIZE= , COLOR= , FACE= – SIZE= задает размер шрифта • от 1 до 7 • по умолчанию 3 • может быть относительным, например, -2 или +3 – COLOR= задает цвет шрифта • ключевые слова black, red, white… • шестнадцатеричные значения #000000, #FFFFFF , … – FACE= задает вид шрифта • «безопасно» устанавливать его значение в Arial или Times New Roman, потому что неизвестно, какие шрифты есть на компьютере пользователя, просматривающего эту страницу Одиночный тег задает параметры шрифта для всего документа в целом

ЕЩЕ О ФОРМАТИРОВАНИИ <B> и </B> делают текст между ними полужирным <I> и </I> ЕЩЕ О ФОРМАТИРОВАНИИ и делают текст между ними полужирным и делают текст между ними курсивным и делают текст между ними подчеркнутым и делают текст между ними перечеркнутым и эффект пишущей машинки

Пример <HTML> <HEAD> <TITLE> О преподавателе </TITLE> </HEAD> <BODY> <BASEFONT SIZE=4 FACE=“Arial”> <FONT SIZE=+2 Пример О преподавателе Екатерина Александровна Поддячая

Добрый день!
Меня зовут Екатерина Александровна. Я работаю преподавателем дисциплины «Современные интернеттехнологии» в Институте рекламы и связей с общественностью.

Сферой моих интересов является изучение особенностей маркетинговых коммуникаций в Интернете и оценка их эффективности

Посмотрите результаты данного кода в браузере (см. инструкцию на слайде 13)

ЦВЕТ Фоновый цвет задается в теге <Body>, он может указываться по имени или кодом ЦВЕТ Фоновый цвет задается в теге , он может указываться по имени или кодом #000000 – Цвет фона определяется атрибутами BGCOLOR • – Цвет всего текста – TEXT •

СОЗДАНИЕ СПИСКОВ HTML использует три вида списков: – упорядоченные (нумерованные) • <OL> и </OL> СОЗДАНИЕ СПИСКОВ HTML использует три вида списков: – упорядоченные (нумерованные) •

    и
– неупорядоченные (маркированные) •
    и
– элементы списков заключаются между тегами •
  • и
    • – списки определений •
    и
    • определяемые термины помечаются тегом
    • определения – тегом

    Пример упорядоченного и неупорядоченного списка <H 1> Устройства компьютера </H 1> <UL> <LI> Внешние Пример упорядоченного и неупорядоченного списка Устройства компьютера

    • Внешние
      1. Принтер
      2. Сканер
      3. Монитор
    • Внутренние

    Пример списка определений • • <H 1> Компьютерные стандарты </H 1> <DL> <DT><STRONG>MIDI <DD> Пример списка определений • • Компьютерные стандарты

    MIDI
    Стандарт подключения к компьютеру музыкальных инструментов
    MPC •
    Стандарт, описывающий требования к мультимедийному компьютеру
    OLE •
    Технология связывания и внедрения объектов от Microsoft •

    Вопросы • Сколько уровней заголовков имеется в HTML? • Что будет отображено в браузере Вопросы • Сколько уровней заголовков имеется в HTML? • Что будет отображено в браузере в результате обработки тегов

    Добрый день! ? • Какие два вида шрифтов можно «безопасно» использовать в веб-страницах? • Какие применения списку определений Вы можете предложить?

    Задание Аналогично примерам предыдущих слайдов – создайте страницу с нумерованным списком профессиональных интернетресурсов – Задание Аналогично примерам предыдущих слайдов – создайте страницу с нумерованным списком профессиональных интернетресурсов – создайте страницу с маркированным списком дел на день

    ГИПЕРТЕКСТОВЫЕ ССЫЛКИ ГИПЕРТЕКСТОВЫЕ ССЫЛКИ

    Гипертекстовые ссылки Гиперссылки – ссылки на другие, связанные вебстраницы или другие файлы • теги Гипертекстовые ссылки Гиперссылки – ссылки на другие, связанные вебстраницы или другие файлы • теги и ограничивают текст ссылки • обязателен атрибут HREF= Его значением является адрес документа (URL), на который указывает ссылка Microsoft • в браузере текст ссылки отображается синим и подчеркнутым • при щелчке на ссылке происходит переход по заданному адресу • здесь описана внешняя ссылка – ссылка на документ, находящийся на другом сервере • если документ находится на том же сервере, то это внутренняя ссылка

    Пример <HTML> <HEAD><TITLE>Ссылки в пределах одного документа</Title> </HEAD> <BODY>Здесь используются текстовые ссылки в пределах Пример Ссылки в пределах одного документа Здесь используются текстовые ссылки в пределах одного и того же документа. При щелчке на ссылке окно браузера будет прокручиваться до тех пор, пока не появится соответствующий ссылке якорь.

    Содержание

    Глава 1. Основы HTML
    Глава 2. Примеры программ

    Глава 1Основы HTML В этой главе мы собираемся рассмотреть основные элементы языка программирования HTML. На языке программирования HTML создаются документы, которые могут быть опубликованы в Интрнете. После изучения основных конструкций языка мы подробно рассмотрим примеры программ (см. Главу 2. )

    Глава 2. Примеры программ Здесь мы рассмотрим примеры программ с использованием элементов языка, которым посвящена Глава 1.

    Вопросы q Что такое гиперссылка? q В чем разница между внутренними и внешними ссылками? Вопросы q Что такое гиперссылка? q В чем разница между внутренними и внешними ссылками? q Какие атрибуты необходимы для тега ? q Что будет отображено в браузере в результате отработки тега? ссылка на внешний ресурс

    Задание Снабдите страничку с информацией о себе ссылкой на сайт ИОДО и НГПУ и Задание Снабдите страничку с информацией о себе ссылкой на сайт ИОДО и НГПУ и свой аккаунт Вконтакте.

    Мультимедиа и HTML Мультимедиа и HTML

    ВСТАВКА РИСУНКОВ Одиночный тег <IMG> – обязательный атрибут SRC= – Его значение – адрес ВСТАВКА РИСУНКОВ Одиночный тег – обязательный атрибут SRC= – Его значение – адрес изображения в абсолютной или относительной форме: • – атрибуты WIDTH= и HEIGHT= позволяют задать ширину и высоту изображения на странице: •

    ВСТАВКА РИСУНКОВ – атрибут ALT= позволяет задать альтернативный текст, который отображается, если браузер не ВСТАВКА РИСУНКОВ – атрибут ALT= позволяет задать альтернативный текст, который отображается, если браузер не может показать рисунок или просто при наведении на него мыши: • “ – рисунок, как и текст, может быть гиперссылкой. Так делаются графические кнопки: •

    Есть два типа ссылок: абсолютная и относительная -абсолютная, в которой прописана адресная часть (http: Есть два типа ссылок: абсолютная и относительная -абсолютная, в которой прописана адресная часть (http: //nspu. ru) -относительная, в которой отсутствует общая адресная часть (iode. nspu. html).

    Применительно к мультимедиа лучше использовать относительные ссылки (изображение. jpg), а не абсолютные (C: UsersАлександрDesktopИРСО Применительно к мультимедиа лучше использовать относительные ссылки (изображение. jpg), а не абсолютные (C: UsersАлександрDesktopИРСО Кофейня. bmp). Но для этого нужно все создаваемые страницы или размещаемые изображения хранить в одной папке данного сайта, только тогда изображения будут отображаться

    ВСТАВКА МУЛЬТИМЕДИЙНЫХ ОБЪЕКТОВ • Самый простой способ – сделать гиперссылку на звук или видео ВСТАВКА МУЛЬТИМЕДИЙНЫХ ОБЪЕКТОВ • Самый простой способ – сделать гиперссылку на звук или видео • Внедрение видео или звука непосредственно в веб-страницу – одиночный тег – обязательный атрибут SRC= , значение которого абсолютный или относительный путь к файлу – можно также использовать WIDTH= или HEIGHT= , чтобы определить размер области на страницы, отведенной под воспроизведение: –

    Вопросы q С помощью какого атрибута тега <IMG> можно задать альтернативный текст? q Вам Вопросы q С помощью какого атрибута тега можно задать альтернативный текст? q Вам необходимо ограничить область воспроизведения видео на веб-странице размером 150 х150. Как этого добиться?

    Задание • Добавьте в страничку с информацией о себе свою фотографию. • Добавьте в Задание • Добавьте в страничку с информацией о себе свою фотографию. • Добавьте в страничку с информацией о себе гиперссылку на MP 3 -файл любимой песни

    Создание таблиц Создание таблиц

    ТАБЛИЦЫ Таблица заключается между тегами <TABLE> и </TABLE> – между ними один раз может ТАБЛИЦЫ Таблица заключается между тегами

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

    ЗАЧЕМ НУЖНЫ ТАБЛИЦЫ? • Для отображения данных табличной структуры • Для точного размещения элементов ЗАЧЕМ НУЖНЫ ТАБЛИЦЫ? • Для отображения данных табличной структуры • Для точного размещения элементов на странице

    Пример <TABLE WIDTH=“ 90%” BORDER=10 CELLPADDING=2 CELLSPACING=10> <CAPTION> Основные теги таблиц </CAPTION> <TR> <TD><B> Пример

    Основные теги таблиц
    Открывающий тег Закрывающий тег Описание
    TABLE Обязателен Начало и конец таблицы
    CAPTION Начало и конец заголовка таблицы
    TR Необязателен Начало строки таблицы
    TD Начало ячейки таблицы

    Вопросы q Можно ли опускать теги </TD> и </TR> ? q Что случится, если Вопросы q Можно ли опускать теги и ? q Что случится, если опустить тег ? q Для чего еще, кроме их прямого назначения, применяют таблицы в веб-дизайне?

    Задание • Дополните страничку с информацией о себе таблицей с оценками по различным предметам, Задание • Дополните страничку с информацией о себе таблицей с оценками по различным предметам, полученным в прошлую сессию (№, Название предмета, Оценка) • Переделайте страничку с информацией о себе так, чтобы вся текстовая информация была помещена в правой части окна браузера, а в левой части было Ваше фото