Презентация "Язык разметки гипертекста HTML" (9 класс) по информатике – проект, доклад

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

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

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

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

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

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

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

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

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

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

= =

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

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

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

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

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

… … …

Задание

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

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

Сохраним нашу Web-страницу в текстовом формате

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

Откроем полученный Web-сайт

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

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

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

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

Сохраняем с внесёнными изменениями

Закрываем полученный документ

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

ОБНОВЛЕНИЕ

I способ В Строке меню выбрать Вид→Обновить

II способ На Панели инструментов нажать

Теперь наша Web-страница выглядит лучше

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

Например:

bgcolor=pink

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

Вот наша Web-страница

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

Например:

text=blue

Наша Web-страница преобразилась

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

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

Например:

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

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

Например:

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

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

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