Учитель информатики МОУ СОШ №5 г.Сегежи В.В.Меньшиков
Язык HTML состоит из специальных разметочных указателей, иногда их называют флаги разметки, а также команды или коды языка HTML, но чаще их называют теги (от английского слова tag ).
Браузер – это программа, служащая для просмотра Web -документов (страниц в Internet ). Тег – это инструкция браузеру, указывающая способ отображения текста.
Существует много программ-браузеров. Каждая из них предоставляет разные возможности при работе с Web -документами. Наиболее известные и конкурирующие браузеры – Netscape Navigator и Microsoft Internet Explorer.
Каким бы браузером не отображался Web -документ, всегда можно увидеть описывающие его теги. Сделать это очень легко : достаточно открыть любую Web -страницу и в Строке меню выбрать Вид →Просмотр HTML -кода Тогда страница будет выглядеть следующим образом:
Прописные и строчные буквы при написании тегов не различаются. <BODY>=<body> <Body>=<BoDy> Тег всегда начинается и заканчивается угловыми скобками “ <> ”.
ТЕГИ НЕПАРНЫЕ ПАРНЫЕ <HTML></HTML> <BODY></BODY> <P></P> <BR> <HR> Парный тег влияет на текст с того места, где употреблён, до того места, где указан признак окончания его действия, а им служит тот же самый тег, только начинающийся с символа слэш «/»
Структурные теги <HTML></HTML> Указывает браузеру, что далее следует HTML -файл. Тег обрамляет документ – весь текст должен находиться внутри этого тега. <HEAD></HEAD> Голова HTML -файла, состоящая из нескольких частей, основной из которых является заголовок окна. <TITLE></TITLE> Тег окна заголовка. Пишется внутри тега HEAD. <BODY></BODY> Тело HTML -файла. Внутри тега пишется то, что будет доступно в области просмотра браузера. Тег может иметь несколько параметров, описывающих цвет фона окна просмотра, рисунок в нём, цвет текста и т.п.
Структура HTML -файла <HTML> <HEAD> <TITLE> заголовок окна </TITLE> </HEAD> <BODY> … … … </BODY> </HTML>
Задание На Рабочем столе в папке СТИХИ открыть файл КОЗЛЕНОК.txt
Сделаем Web -страницу, содержащую это стихотворение <BODY> </BODY> </HEAD> <HEAD> <HTML> <TITLE> Стих < / TITLE> < / HTML>
Сохраним нашу Web -страницу в текстовом формате Получаем Web -страницу Переименуем полученный текстовой файл, присвоив ему расширение html
Откроем полученный Web -сайт Браузер Internet Explorer вывел наше стихотворение без переходов на новую строку. Хотелось бы показать стихотворение по-человечески. Для указания перехода на новую строку используется непарный тег <BR>. Данный тег ставится в месте перехода на новую строку.
Чтобы внести данный тег в текст HTML- файла нужно в Строке меню выбрать Вид→Просмотр HTML -кода
После внесения изменений HTML -файл будет выглядеть следующим образом: <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
Сохраняем с внесёнными изменениями Закрываем полученный документ
Снова открываем наш Web -сайт. Чтобы увидеть внесённые изменения, страницу нужно обновить. ОБНОВЛЕНИЕ I способ В Строке меню выбрать Вид →Обновить II способ На Панели инструментов нажать
Теперь наша Web -страница выглядит лучше Добавим на страницу цветной фон. Для этого в теге <BODY> допишем атрибут bgcolor с указанием цвета. Например: <BODY bgcolor=yellow>
bgcolor=pink Не забудьте сохранить файл и обновить страницу
Вот наша Web -страница Сделаем текст стихотворения цветным. Для этого в теге <BODY> допишем атрибут text с указанием цвета. Например: <BODY text=cyan>
text=blue Не забудьте сохранить файл и обновить страницу
Наша Web -страница преобразилась Сделаем заголовок стихотворения и имя автора крупнее. Для этого воспользуемся парным тегом <BIG></BIG>.
Не забудьте сохранить файл и обновить страницу <BIG> </BIG>
Теперь наша Web -страница выглядит лучше Добавим на нашу Web -страницу картинку. Нам понадобится непарный тег <IMG> с атрибутом src, после которого указывается полное название картинки. Например: <IMG src=kolobok.jpeg>
Вставьте на созданную нами Web -страницу картинку с изображением козлёнка. Картинка с козлёнком называется 248.gif <IMG src=248.gif> Не забудьте сохранить файл и обновить страницу
Создадим на нашей Web -странице бегущую строку. Движущийся элемент должен находиться внутри парного тега <MARQUEE></MARQUEE>. Например: <MARQUEE> <IMG src=kolobok.jpeg> </MARQUEE> Задание Сделайте бегущей строкой название стихотворения и изображение козлёнка
<MARQUEE> </MARQUEE> <MARQUEE> </MARQUEE> Не забудьте сохранить файл и обновить страницу
Задание Представьте себя Web -дизайнерами и создайте свои сайты со стихами Агнии Барто. Тексты стихотворений и картинки вы можете найти в папке ЗАДАНИЕ.
СПАСИБО за УРОК!
