Рабочие листы
к вашим урокам
Скачать
1 слайд
Основы HTML
Учитель информатики и ИКТ
МКОУ «Глядянская СОШ»
Притобольного района
Кузнецова Оксана Николаевна
2 слайд
HTML
(Hyper Text Markup Language)
язык разметки гипертекста Web-страницы
3 слайд
Программы для создания HTML – файлов:
Редакторы (HTML Wirtel, HTML Assistant, WebEdit, HomeSite, Блокнот и т.д.)
Шаблоны
Программы-преобразователи
4 слайд
Программы для просмотра Web - страниц
Microsoft Internet Explorer
Netscape Communicator
The Bat!
Opera и т.д.
5 слайд
Блокнот
(для создания страницы)
Internet Explorer
(для интерпретации файлов)
Программы для создания HTML – файлов:
6 слайд
Гипертекст – это текст, содержащий специальные разметочные теги.
Теги (tag – ярлык, признак) – инструкции браузера, указывающие способ отображения текста.
7 слайд
Пример тега
<HTML> </HTML>
Типы тегов
Парные (влияет на текст с того места, где употреблён тег, до того места, где указан признак окончания его действия)
Непарные
8 слайд
Структурные теги
Теги символов
Теги форматирования абзацев
Теги оформления списков данных
Теги логического форматирования текста
Теги физического форматирования текста
Категории тегов
9 слайд
Структура
HTML - документа
10 слайд
<HTML> </HTML>
начинает описание HTML - файла
HTML - документ состоит из двух частей:
Раздел заголовка
Содержательная часть
11 слайд
Раздел заголовка
Начинается тегом <HEAD>
Заканчивается тегом </HEAD>
Mежду данными тегами располагается тег <TITLE> </TITLE> (этот тег используется для задания названия документа)
12 слайд
Раздел содержательной части
Начинается тегом <BODY>
Заканчивается тегом </BODY>
(между которыми располагается содержимое
HTML - документа)
13 слайд
Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html)
<HTML>
<HEAD>
<TITLE>Заголовок HTML – документа </TITLE>
</HEAD>
<BODY>
Это тело HTML – документа. Здесь можно разместить всё, что угодно.
</BODY>
</HTML>
14 слайд
Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html)
15 слайд
Теги символов
Теги логического форматирования
текста
Теги физического форматирования
текста
16 слайд
Теги логического форматирования текста
<CITE> </CITE>
<CODE> </CODE>
<DEL> </DEL>
<DFN> </DFN>
<INS> </INS>
<EM> </EM>
<KBD> </KBD>
<SAMP> </SAMP>
<STRONG> </STRONG>
<VAR> </VAR>
17 слайд
Теги физического форматирования текста
<B> </B>
<I> </I>
<U> </U>
<TT> </TT>
<STRIKE> </STRIKE>
<S> </S>
<BIG> </BIG>
<SMALL> </SMALL>
<SUB> </SUB>
<SUP> </SUP>
<FONT> </FONT>
<BASEFONT>
18 слайд
<ACRONYM></ACRONYM>
используется для отметки аббревиатур, акронимов (акроним – произносимое слово, состоящее из начальных букв словосочетания); используя тег <TITLE> - можно указать «расшифровку» акронима, которая появляется на экране, когда курсор располагается на акрониме.
19 слайд
Пример использования тега <ACRONYM>:
<ACRONYM TITLE=«Муниципальное казённое общеобразовательное учреждение»> МКОУ </ACRONYM> «Глядянская средняя общеобразовательная школа»
20 слайд
Пример использования тега <ACRONYM>:
21 слайд
Тег <FONT>
позволяет изменить шрифт
22 слайд
Параметры тега <FONT>
FACE (задаёт название шрифта, которым
будет выводится текст)
SIZE (задаёт размеры шрифта в условных
единицах от 1 до 7)
COLOR (устанавливает цвет шрифта,
который может задаваться с
помощью стандартных имён или
набором шестнадцатеричных цифр)
23 слайд
Задание цвета
на языке HTML
Шестнадцатеричные значения
(цветовая система базируется на трёх основных цветах – красном, зеленом и синем – обозначается RGB)
Например: #000000, #0000FF, #FF0000,
#FFFFFF
Мнемонические обозначения
(название цвета)
Например: Red, White, Blue, Green
24 слайд
Пример использования
параметра Color:
<FONT COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR>
или
<FONT COLOR=#008000> Шрифт размера 6, цвет зелёный </FONT> <BR>
25 слайд
Примеры использования
параметров тега <FONT> :
<FONT FACE=“ARIAL”>
Название шрифта </FONT> <BR>
<FONT SIZE=5> Шрифт размера 5 </FONT> <BR>
<FONT FACE=“ARIAL” SIZE=+3 COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR>
26 слайд
Тег <BASEFONT>
используется для указания размера,
типа и цвета шрифта по умолчанию
27 слайд
Примеры использования
тега <BASEFONT> :
<BASEFONT FACE=“Courier” COLOR=#008080>
Шрифт по умолчанию размера 3<BR>
<BASEFONT SIZE=2>Шрифт размера 2<BR>
<BASEFONT SIZE=4 COLOR=Olive> Шрифт размера 4, цвет оливковый <BR>
28 слайд
Пример использования параметра
Color c тегом <BODY>:
<BODY BGCOLOR=#008080> Задание
цвета фона <BR>
29 слайд
тег «параграф», отделяет абзац
друг от друга
Тег <Р>
30 слайд
Примеры использования
тега <P> :
<P ALIGN=LEFT>
Выравнивание по левой границе окна<BR>
<P ALIGN=CENTER>
Выравнивание по центру окна<BR>
<P ALIGN=RIGHT>
Выравнивание по правой границе окна<BR>
<P ALIGN=JUSTIFY>
Выравнивание по ширине окна<BR>
31 слайд
Тег <HR>
отображение горизонтальной линии
32 слайд
Пример использования
тега <HR> :
<HR ALIGN=LEFT WIDHT=20 SIZE=30 COLOR=#00FF00>
33 слайд
Тег <H1>
для разметки заголовков (<H1>,<H2>,
<H3>, <H4>, <H5>, <H6>)
34 слайд
Вставка пробелов и специальных символов
 
"
±
²
35 слайд
Список использованной литературы
Информатика. 7 – 9 класс. Базовый курс. Практикум по информационным технологиям /Под ред. Н.В.Макаровой. – СПб.: Питер, 2006.
А.А. Медведев. Основы HTML: Учебное пособие для средних учебных заведений. – Курган: Изд-во Курганского ИПКРО, 2002.
Изображения http://www.xard.ru/post/18613/
Рабочие листы
к вашим урокам
Скачать
6 625 090 материалов в базе
Настоящий материал опубликован пользователем Ильичева Татьяна Михайловна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материалВаша скидка на курсы
40%Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
72/180 ч.
Курс профессиональной переподготовки
300/600 ч.
Мини-курс
6 ч.
Мини-курс
6 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.