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

Содержание

• 
  Слайд 1

  Язык разметки гипертекста HTML

  Учитель информатики МОУ СОШ №5 г.Сегежи В.В.Меньшиков

• 
  Слайд 2
  

  Сегодня я познакомлю Вас с языком разметки гипертекста HTML (HyperText Markup Language). Если Вы хотите стать Web - дизайнером, то вы непременно должны знать этот язык.

• 
  Слайд 3
  

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

• 
  Слайд 4
  

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

• 
  Слайд 5
  

  Существует много программ-браузеров. Каждая из них предоставляет разные возможности при работе с Web-документами. Наиболее известные и конкурирующие браузеры – Netscape Navigatorи Microsoft Internet Explorer.

• 
  Слайд 6
  

  Каким бы браузером не отображался Web-документ, всегда можно увидеть описывающие его теги. Сделать это очень легко: достаточно открыть любую Web-страницу и в Строке меню выбрать Вид→Просмотр HTML-кода Тогда страница будет выглядеть следующим образом:

• 
  Слайд 7
  

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

  =

   

  =

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

• 
  Слайд 8
  

  ТЕГИ НЕПАРНЫЕ ПАРНЫЕ

   

   

   

  Парный тег влияет на текст с того места, где употреблён, до того места, где указан признак окончания его действия, а им служит тот же самый тег, только начинающийся с символа слэш «/»
• 
  Слайд 9
  

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

• 
  Слайд 10
  

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

  … … …

• 
  Слайд 11
  

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

• 
  Слайд 12
  

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

• 
  Слайд 13
  

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

• 
  Слайд 14
  

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

• 
  Слайд 15
  

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

• 
  Слайд 16
  

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

• 
  Слайд 17
  

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

• 
  Слайд 18
  

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

• 
  Слайд 19
  

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

  допишем атрибут bgcolorс указанием цвета. Например:

   

• 
  Слайд 20
  

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

• 
  Слайд 21
  

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

  допишем атрибут textс указанием цвета. Например:

   

• 
  Слайд 22
  

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

• 
  Слайд 23
  

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

• 
  Слайд 24
  

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

• 
  Слайд 25
  

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

• 
  Слайд 26
  

  Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Картинка с козлёнком называется 248.gif Не забудьте сохранить файл и обновить страницу

• 
  Слайд 27
  

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

• 
  Слайд 28
  

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

• 
  Слайд 29
  

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

• 
  Слайд 30
  

  СПАСИБО за УРОК!