Выбранный для просмотра документ Основы языка HTML.doc
Скачать материал "Урок «Основы языка HTML»"
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ Язык разметки гиппертекста HTML.ppt
Скачать материал "Урок «Основы языка HTML»"
Рабочие листы
к вашим урокам
Скачать
1 слайд
Язык разметки гипертекста
HTML
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 слайд
Прописные и строчные буквы при написании тегов не различаются.
<BODY>=<body>
<Body>=<BoDy>
Тег всегда начинается и заканчивается угловыми скобками “<>”.
8 слайд
ТЕГИ
НЕПАРНЫЕ
ПАРНЫЕ
<HTML></HTML>
<BODY></BODY>
<P></P>
<BR>
<HR>
Парный тег влияет на текст с того места, где употреблён, до того места, где указан признак окончания его действия, а им служит тот же самый тег, только начинающийся с символа слэш «/»
9 слайд
Структурные теги
10 слайд
Структура HTML-файла
<HTML>
<HEAD>
<TITLE>заголовок окна</TITLE>
</HEAD>
<BODY>
…
…
…
</BODY>
</HTML>
11 слайд
Задание
На Рабочем столе в папке СТИХИ открыть файл КОЗЛЕНОК.txt
12 слайд
Сделаем Web-страницу, содержащую это стихотворение
<BODY>
</BODY>
</HEAD>
<HEAD>
<HTML>
<TITLE>
Стих
</TITLE>
</HTML>
13 слайд
Сохраним нашу Web-страницу в текстовом формате
Переименуем полученный текстовой файл, присвоив ему расширение html
14 слайд
Откроем полученный Web-сайт
Браузер Internet Explorer вывел наше стихотворение без переходов на новую строку. Хотелось бы показать стихотворение по-человечески.
Для указания перехода на новую строку используется непарный тег <BR>. Данный тег ставится в месте перехода на новую строку.
15 слайд
Чтобы внести данный тег в текст HTML-файла нужно в Строке меню выбрать
Вид→Просмотр HTML-кода
16 слайд
После внесения изменений HTML-файл будет выглядеть следующим образом:
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
17 слайд
Сохраняем с внесёнными изменениями
Закрываем полученный документ
18 слайд
Снова открываем наш Web-сайт.
Чтобы увидеть внесённые изменения, страницу нужно обновить.
ОБНОВЛЕНИЕ
I способ
В Строке меню выбрать
Вид→Обновить
II способ
На Панели инструментов
нажать
19 слайд
Теперь наша Web-страница выглядит лучше
Добавим на страницу цветной фон. Для этого в теге <BODY> допишем атрибут bgcolor с указанием цвета.
Например: <BODY bgcolor=yellow>
20 слайд
bgcolor=pink
Не забудьте сохранить файл и обновить страницу
21 слайд
Вот наша Web-страница
Сделаем текст стихотворения цветным. Для этого в теге <BODY> допишем атрибут text с указанием цвета.
Например: <BODY text=cyan>
22 слайд
text=blue
Не забудьте сохранить файл и обновить страницу
23 слайд
Наша Web-страница преобразилась
Сделаем заголовок стихотворения и имя автора крупнее. Для этого воспользуемся парным тегом <BIG></BIG>.
24 слайд
Не забудьте сохранить файл и обновить страницу
<BIG>
</BIG>
25 слайд
Теперь наша Web-страница выглядит лучше
Добавим на нашу Web-страницу картинку. Нам понадобится непарный тег <IMG> с атрибутом src, после которого указывается полное название картинки.
Например: <IMG src=kolobok.jpeg>
26 слайд
Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Картинка с козлёнком называется 248.gif
<IMG src=248.gif>
Не забудьте сохранить файл и обновить страницу
27 слайд
Создадим на нашей Web-странице бегущую строку. Движущийся элемент должен находиться внутри парного тега <MARQUEE></MARQUEE>.
Например: <MARQUEE>
<IMG src=kolobok.jpeg>
</MARQUEE>
Задание Сделайте бегущей строкой название стихотворения и изображение козлёнка
28 слайд
<MARQUEE>
</MARQUEE>
<MARQUEE>
</MARQUEE>
Не забудьте сохранить файл и обновить страницу
29 слайд
Задание
Представьте себя Web-дизайнерами и создайте свои сайты со стихами Агнии Барто.
Тексты стихотворений и картинки вы можете найти в папке ЗАДАНИЕ.
30 слайд
СПАСИБО за УРОК!
Рабочие листы
к вашим урокам
Скачать
Рабочие листы
к вашим урокам
Скачать
Это урок изучения нового материала, на котором у детей должно сформироваться первое представление о структуре HTML-документа. На уроке учащиеся получат первые навыки создания Web-страниц, сформируют первое понятие «тега» и познакомятся с типами тегов. В ходе урока ребята просмотрят презентацию к данному уроку, где наглядно смогут увидеть поэтапное создание HTML-документа. Научаться открывать, набирать, просматривать и сохранять Web-страницы. В конце данного урока предусмотрены задания, которые выполняя учащиеся должны применить все полученные знания и навыки работы с HTML- документом.
6 668 913 материалов в базе
Настоящий материал опубликован пользователем Семёнова Надежда Ивановна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.