Язык разметки гипертекста HTML Учитель информатики МОУ СОШ 5 г.Сегежи В.В.Меньшиков. - презентация

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 Структурные теги Указывает браузеру, что далее следует HTML- файл. Тег обрамляет документ – весь текст должен находиться внутри этого тега. Голова HTML-файла, состоящая из нескольких частей, основной из которых является заголовок окна. Тег окна заголовка. Пишется внутри тега HEAD. Тело HTML-файла. Внутри тега пишется то, что будет доступно в области просмотра браузера. Тег может иметь несколько параметров, описывающих цвет фона окна просмотра, рисунок в нём, цвет текста и т.п.

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

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

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

13 Сохраним нашу Web- страницу в текстовом формате Получаем 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