|
|
работа с HTML. НТМЛ1. Язык разметки гипертекста html
Язык разметки гипертекста HTML
Учитель информатики
МОУ СОШ №5 г.Сегежи
В.В.Меньшиков
Сегодня я познакомлю Вас с языком разметки гипертекста HTML (HyperText Markup Language). Если Вы хотите стать Web - дизайнером, то вы непременно должны знать этот язык.
Язык HTML состоит из специальных разметочных указателей, иногда их называют флаги разметки, а также команды или коды языка HTML, но чаще их называют теги (от английского слова tag).
Браузер – это программа, служащая для просмотра Web-документов (страниц в Internet).
Тег – это инструкция браузеру, указывающая способ отображения текста.
Существует много программ-браузеров.
Каждая из них предоставляет разные возможности при работе с
Web-документами.
Наиболее известные и конкурирующие браузеры – Netscape Navigator и Microsoft Internet Explorer.
Каким бы браузером не отображался Web-документ, всегда можно увидеть описывающие его теги.
Сделать это очень легко: достаточно открыть любую Web-страницу и в Строке меню выбрать
Вид→Просмотр HTML-кода
Тогда страница будет выглядеть следующим образом:
Прописные и строчные буквы при написании тегов не различаются.
=
=
Тег всегда начинается и заканчивается угловыми скобками “<>”.
ТЕГИ
НЕПАРНЫЕ
ПАРНЫЕ
Тело HTML-файла. Внутри тега пишется то, что будет доступно в области просмотра браузера. Тег может иметь несколько параметров, описывающих цвет фона окна просмотра, рисунок в нём, цвет текста и т.п.
|
Структура HTML-файла
…
…
…
допишем атрибут bgcolor с указанием цвета.
Например:
bgcolor=pink
Не забудьте сохранить файл и обновить страницу
Вот наша Web-страница
Сделаем текст стихотворения цветным. Для этого в теге допишем атрибут text с указанием цвета.
Например:
text=blue
Не забудьте сохранить файл и обновить страницу
Наша Web-страница преобразилась
Сделаем заголовок стихотворения и имя автора крупнее. Для этого воспользуемся парным тегом .
Не забудьте сохранить файл и обновить страницу
Теперь наша Web-страница выглядит лучше
Добавим на нашу Web-страницу картинку. Нам понадобится непарный тег ![]() с атрибутом src, после которого указывается полное название картинки.
Например: 
Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Картинка с козлёнком называется 248.gif
Не забудьте сохранить файл и обновить страницу
Создадим на нашей Web-странице бегущую строку. Движущийся элемент должен находиться внутри парного тега .
Например:
Задание Сделайте бегущей строкой название стихотворения и изображение козлёнка
Не забудьте сохранить файл и обновить страницу
Задание
Представьте себя Web-дизайнерами и создайте свои сайты со стихами Агнии Барто.
Тексты стихотворений и картинки вы можете найти в папке ЗАДАНИЕ.
СПАСИБО за УРОК!
|
|
|
Скачать 0.59 Mb.
