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

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


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

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

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

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

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

Содержание

Сегодня я познакомлю Вас с языком разметки гипертекста HTML (HyperText Markup Language). Если Вы хотите стать Web - дизайнером, то вы непременно должны знать этот язык.
Язык разметки гипертекста  HTMLУчитель информатикиМОУ СОШ №5 г.СегежиВ.В.Меньшиков Сегодня я познакомлю Вас с языком разметки гипертекста HTML (HyperText Markup Language). Язык HTML состоит из специальных разметочных указателей, иногда их называют флаги разметки, Браузер – это программа, служащая для просмотра Web-документов (страниц в Internet).Тег – Существует много программ-браузеров. Каждая из них предоставляет разные возможности при работе с Каким бы браузером не отображался Web-документ, всегда можно увидеть описывающие его теги. Прописные и строчные буквы при написании тегов не различаются.==Тег всегда начинается и ТЕГИНЕПАРНЫЕПАРНЫЕПарный тег влияет на текст с того места, где употреблён, до того Структурные теги Структура HTML-файла			заголовок окна			…	…	… ЗаданиеНа Рабочем столе в папке СТИХИ открыть файл КОЗЛЕНОК.txt Сделаем Web-страницу, содержащую это стихотворениеСтих Сохраним нашу Web-страницу в текстовом форматеПереименуем полученный текстовой файл, присвоив ему расширение html Откроем полученный Web-сайтБраузер Internet Explorer вывел наше стихотворение без переходов на новую Чтобы внести данный тег в текст HTML-файла нужно в Строке меню выбрать Вид→Просмотр HTML-кода После внесения изменений HTML-файл будет выглядеть следующим образом: Сохраняем с внесёнными изменениямиЗакрываем полученный документ Снова открываем наш Web-сайт.Чтобы увидеть внесённые изменения, страницу нужно обновить.ОБНОВЛЕНИЕI способВ Строке меню выбратьВид→Обновить Теперь наша Web-страница выглядит лучшеДобавим на страницу цветной фон. Для этого в bgcolor=pinkНе забудьте сохранить файл и обновить страницу Вот наша Web-страница Сделаем текст стихотворения цветным. Для этого в теге допишем text=blueНе забудьте сохранить файл и обновить страницу Наша Web-страница преобразиласьСделаем заголовок стихотворения и имя автора крупнее. Для этого воспользуемся парным тегом . Не забудьте сохранить файл и обновить страницу Теперь наша Web-страница выглядит лучшеДобавим на нашу Web-страницу картинку. Нам понадобится непарный Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Картинка с козлёнком Создадим на нашей Web-странице бегущую строку. Движущийся элемент должен находиться внутри парного Не забудьте сохранить файл и обновить страницу ЗаданиеПредставьте себя Web-дизайнерами и создайте свои сайты со стихами Агнии Барто.Тексты стихотворений СПАСИБО за УРОК!
Слайды презентации

Слайд 2 Сегодня я познакомлю Вас с языком разметки гипертекста

Сегодня я познакомлю Вас с языком разметки гипертекста HTML (HyperText Markup

HTML (HyperText Markup Language). Если Вы хотите стать Web

- дизайнером, то вы непременно должны знать этот язык.

Слайд 3 Язык HTML состоит из специальных разметочных указателей, иногда

Язык HTML состоит из специальных разметочных указателей, иногда их называют флаги

их называют флаги разметки, а также команды или коды

языка HTML, но чаще их называют теги (от английского слова tag).

Слайд 4 Браузер – это программа, служащая для просмотра Web-документов

Браузер – это программа, служащая для просмотра Web-документов (страниц в Internet).Тег

(страниц в Internet).
Тег – это инструкция браузеру, указывающая способ

отображения текста.

Слайд 5 Существует много программ-браузеров.

Каждая из них предоставляет разные

Существует много программ-браузеров. Каждая из них предоставляет разные возможности при работе

возможности при работе с
Web-документами.

Наиболее известные и конкурирующие браузеры

– Netscape Navigator и Microsoft Internet Explorer.

Слайд 6 Каким бы браузером не отображался Web-документ, всегда можно

Каким бы браузером не отображался Web-документ, всегда можно увидеть описывающие его

увидеть описывающие его теги.
Сделать это очень легко: достаточно

открыть любую Web-страницу и в Строке меню выбрать
Вид→Просмотр HTML-кода

Тогда страница будет выглядеть следующим образом:


Слайд 7 Прописные и строчные буквы при написании тегов не

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

различаются.
=
=
Тег всегда начинается и заканчивается угловыми скобками “”.


Слайд 8
ТЕГИ
НЕПАРНЫЕ
ПАРНЫЕ






Парный тег влияет на текст с того места,

ТЕГИНЕПАРНЫЕПАРНЫЕПарный тег влияет на текст с того места, где употреблён, до

где употреблён, до того места, где указан признак окончания

его действия, а им служит тот же самый тег, только начинающийся с символа слэш «/»

Слайд 9 Структурные теги

Структурные теги

Слайд 10 Структура HTML-файла


заголовок окна







Структура HTML-файла			заголовок окна			…	…	…

Слайд 11 Задание
На Рабочем столе в папке СТИХИ открыть файл

ЗаданиеНа Рабочем столе в папке СТИХИ открыть файл КОЗЛЕНОК.txt

КОЗЛЕНОК.txt


Слайд 12 Сделаем Web-страницу, содержащую это стихотворение






Стих


Сделаем Web-страницу, содержащую это стихотворениеСтих

Слайд 13 Сохраним нашу Web-страницу в текстовом формате
Переименуем полученный текстовой

Сохраним нашу Web-страницу в текстовом форматеПереименуем полученный текстовой файл, присвоив ему расширение html

файл, присвоив ему расширение html


Слайд 14 Откроем полученный Web-сайт
Браузер Internet Explorer вывел наше стихотворение

Откроем полученный Web-сайтБраузер Internet Explorer вывел наше стихотворение без переходов на

без переходов на новую строку. Хотелось бы показать стихотворение

по-человечески.

Для указания перехода на новую строку используется непарный тег
. Данный тег ставится в месте перехода на новую строку.


Слайд 15 Чтобы внести данный тег в текст HTML-файла нужно

Чтобы внести данный тег в текст HTML-файла нужно в Строке меню выбрать Вид→Просмотр HTML-кода

в Строке меню выбрать
Вид→Просмотр HTML-кода


Слайд 16 После внесения изменений HTML-файл будет выглядеть следующим образом:
















После внесения изменений HTML-файл будет выглядеть следующим образом:

Слайд 17 Сохраняем с внесёнными изменениями
Закрываем полученный документ

Сохраняем с внесёнными изменениямиЗакрываем полученный документ

Слайд 18 Снова открываем наш Web-сайт.
Чтобы увидеть внесённые изменения, страницу

Снова открываем наш Web-сайт.Чтобы увидеть внесённые изменения, страницу нужно обновить.ОБНОВЛЕНИЕI способВ Строке меню выбратьВид→Обновить

нужно обновить.
ОБНОВЛЕНИЕ
I способ
В Строке меню выбрать
Вид→Обновить


Слайд 19 Теперь наша Web-страница выглядит лучше
Добавим на страницу цветной

Теперь наша Web-страница выглядит лучшеДобавим на страницу цветной фон. Для этого

фон. Для этого в теге допишем атрибут bgcolor

с указанием цвета.

Например:


Слайд 20 bgcolor=pink
Не забудьте сохранить файл и обновить страницу

bgcolor=pinkНе забудьте сохранить файл и обновить страницу

Слайд 21 Вот наша Web-страница
Сделаем текст стихотворения цветным. Для

Вот наша Web-страница Сделаем текст стихотворения цветным. Для этого в теге

этого в теге допишем атрибут text с указанием

цвета.

Например:


Слайд 22 text=blue
Не забудьте сохранить файл и обновить страницу

text=blueНе забудьте сохранить файл и обновить страницу

Слайд 23 Наша Web-страница преобразилась
Сделаем заголовок стихотворения и имя автора

Наша Web-страница преобразиласьСделаем заголовок стихотворения и имя автора крупнее. Для этого воспользуемся парным тегом .

крупнее. Для этого воспользуемся парным тегом .


Слайд 24 Не забудьте сохранить файл и обновить страницу


Не забудьте сохранить файл и обновить страницу

Слайд 25 Теперь наша Web-страница выглядит лучше
Добавим на нашу Web-страницу

Теперь наша Web-страница выглядит лучшеДобавим на нашу Web-страницу картинку. Нам понадобится

картинку. Нам понадобится непарный тег с атрибутом src,

после которого указывается полное название картинки.

Например:


Слайд 26 Вставьте на созданную нами Web-страницу картинку с изображением

Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Картинка с

козлёнка. Картинка с козлёнком называется 248.gif

Не забудьте сохранить

файл и обновить страницу

Слайд 27 Создадим на нашей Web-странице бегущую строку. Движущийся элемент

Создадим на нашей Web-странице бегущую строку. Движущийся элемент должен находиться внутри

должен находиться внутри парного тега .
Например:


Задание Сделайте бегущей строкой название стихотворения и изображение козлёнка


Слайд 28



Не забудьте сохранить файл и обновить страницу

Не забудьте сохранить файл и обновить страницу

Слайд 29 Задание
Представьте себя Web-дизайнерами и создайте свои сайты со

ЗаданиеПредставьте себя Web-дизайнерами и создайте свои сайты со стихами Агнии Барто.Тексты

стихами Агнии Барто.
Тексты стихотворений и картинки вы можете найти

в папке ЗАДАНИЕ.

  • Имя файла: yazyk-razmetki-giperteksta-html.pptx
  • Количество просмотров: 130
  • Количество скачиваний: 0