Презентация к уроку "Язык разметки гипертекста HTML" (9

Презентация к уроку "Язык разметки гипертекста HTML" (9 - 10 класс)

Скачать материал

HTML
(Hyper Text Markup Language)
язык разметки гипертекста
Основы языка гип...

Скачать материал

Скачать материал "Презентация к уроку "Язык разметки гипертекста HTML" (9 - 10 класс)"

Описание презентации по отдельным слайдам:

1 слайд

HTML
(Hyper Text Markup Language)
язык разметки гипертекста

Основы языка гипертекстовой разметки документов
2 слайд

Структура документа
<HTML>
<HEAD>
<TITLE>заголовок web-документа</TITLE>
</HEAD>
<BODY>
содержимое web-страницы
</BODY>
</HTML>
3 слайд

Заголовки разных уровней
<H1 ALIGN=LEFT>заголовок первого уровня, выровнен по левому краю</H1>
<H3 ALIGN=CENTER>заголовок третьего уровня, выровнен по центру</H3>
<H5 ALIGN=RIGHT>заголовок пятого уровня, выровнен по правому краю</H5>
4 слайд

Оформление горизонтальных линий
Атрибут размера SIZE
SIZE= число – задает высоту линии в пикселях (от 1 до 100)
WIDTH= число – задает длину линии в пикселях
WIDTH= число% - задает длину линии в процентах от ширины окна браузера
Атрибут цвета COLOR
COLOR= цвет, где в качестве значения после знака равенства пишется английское название цвета или числовой код оттенка
<HR ALIGN=LEFT SIZE=5 WIDTH=500 COLOR=red>
Горизонтальная линия – тег <HR>
5 слайд

Форматирование линии
<HR SIZE=100 WIDTH=2> - вертикальная линия высотой 100 пикселей и длиной 2 пикселя

<HR SIZE=50 WIDTH=50> - квадрат (одно и то же значение для высоты и длины)

<HR SIZE=40 WIDTH=120> - прямоугольник
6 слайд

Палитра цветов
7 слайд

Фон Web-страницы
Цвет фона задается с помощью параметра BGCOLOR ТЕГА <BODY>

<HTML>
<HEAD>….</HEAD>
<BODY BGCOLOR=#DCDCDC>….</BODY>
</HTML>
8 слайд

Для добавления фонового рисунка на страницу используется параметр BACKGROUND тега <BODY>

<HTML>

<HEAD>….</HEAD>

<BODY BACKGROUND=«имя файла»>….</BODY>

</HTML>
9 слайд

Теги форматирования абзацев
10 слайд

Задание шрифта
Контейнер (<FONT>….</FONT)
<FONT FACE=“Monotype Corsiva”>Текст</FONT>
Verdana, Arial, Arial Black, Arial Narrow, Book Antiqua, Bookman Old Style, Century Gothic, Garamond, Courier New, Comic Sans MS, Impact, Times New Roman, Tahoma
11 слайд

Задание размера шрифта

<FONT SIZE=1>Шрифт размера 1</FONT>
<FONT SIZE=2>Шрифт размера 2</FONT>
<FONT SIZE=3>Шрифт размера 3</FONT>
<FONT SIZE=4>Шрифт размера 4</FONT>
<FONT SIZE=5>Шрифт размера 5</FONT>
<FONT SIZE=6>Шрифт размера 6</FONT>
<FONT SIZE=7>Шрифт размера 7</FONT>
12 слайд

Шрифтовое выделение
13 слайд

Нумерованные списки (теги <OL>…<LI>…</OL>)
14 слайд

Маркированные списки (теги <UL>…<LI>…</UL>
15 слайд

Для добавления таблицы на web-страницу используется контейнер <TABLE>…</TABLE>, при этом таблица должна содержать хотя бы одну строку и одну ячейку в ней.
Внутрь этого контейнера помещаются другие контейнеры, формирующие основные элементы таблицы:
<CAPTION>…</CAPTION> - заголовок таблицы.
Размещение заголовка определяется значением параметра ALIGN:
ALIGN=TOP – заголовок над таблицей
ALIGN=BOTTOM – заголовок под таблицей
ALIGN=LEFT – заголовок над таблицей и выровнен влево
ALIGN=RIGHT – заголовок над таблицей и выровнен вправо
16 слайд

<TR>…</TR> - контейнер, создающий строку таблицы

<TH>…</TH> - контейнер, создающий ячейку «шапки» таблицы (заголовка столбца или строки таблицы). Данный контейнер должен находиться внутри <TR>…</TR>

<TD>…</TD> - контейнер, создающий ячейку таблицы. Этот контейнер также должен находиться внутри <TR>…</TR>
17 слайд

<HTML>
<HEAD>
<TITLE>Таблица из 4 ячеек</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2>
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
18 слайд

<HTML>
<HEAD>
<TITLE>Таблица 3x4</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3>
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
<TR>
<TD>Ячейка 5</TD>
<TD>Ячейка 6</TD>
<TD>Ячейка 7</TD>
<TD>Ячейка 8</TD>
</TR>
<TR>
<TD>Ячейка 9</TD>
<TD>Ячейка 10</TD>
<TD>Ячейка 11</TD>
<TD>Ячейка 12</TD>
</TR>
</TABLE>
</BODY>
</HTML>
19 слайд

Выравнивание данных в ячейке
20 слайд

Объединение ячеек таблицы
21 слайд

Для объединения прямоугольного блока n x m ячеек необходимо одновременно записать оба указанных параметра для тега <TD>, соответствующего верхней левой из объединяемых ячеек:
<TD COLSPAN=n ROWSPAN=m>
22 слайд

<<TABLE BORDER=2>
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
<TD>Ячейка 3</TD>
</TR>
<TR>
<TD>Ячейка 4</TD>
<TD COLSPAN=2>Ячейка 5</TD>
</TR>
</TABLE>
23 слайд

Вставка иллюстраций
тег <IMG>
Пример: <IMG SRC=“имя файла. расширение”>
24 слайд

Задание размеров иллюстрации
Атрибуты HEIGHT и WIDTH

<IMG SRC=“имя файла.расширение” HEIGHT=“137” WIDTH=“180”>
<img src="pk.jpg" width="134" height="78">
25 слайд

Задание рамки вокруг рисунка
<IMG SRC=“имя файла. расширение” BORDER=2>
26 слайд

Альтернативный текст
<IMG SRC=“имя файла. расширение” ALT=“текст”>

<img border="0" src="pk.jpg" width="134" height="78">
27 слайд

Совместная верстка рисунка и текста с помощью таблицы
<TABLE BORDER=0>
<TR>
<TD>
<H3>КОМПЬЮТЕР</H3>
</TD>
<TD>
<img border="0" src="pk.jpg" width="134" height="78">
</TD>
</TR>
</TABLE>
28 слайд

Гиперссылки (тег <A>…</A>)
Абсолютная ссылка
<A HREF=http://www.yandex.com>Поисковая система Яндекс</A>

Относительная ссылка
<A HREF=“index.html”>главная страница</A>

Создание подсказки к ссылке
(атрибут TITLE тега <A>

<A HREF=“index.html” TITLE=“главная страница”>
<IMG SRC=“рисунок.gif”></A>
29 слайд

Формы на Web-страницах
Текстовые поля
<FORM>Пожалуйста, введите ваше имя:
<BR>
<INPUT TYPE=“text”
NAME=“name” SIZE=30><BR>
E-mail: <BR>
<INPUT TYPE=“text”
NAME=“name” SIZE=30><BR>
</FORM>
30 слайд

Переключатели
Укажите, к какой группе пользователей вы себя относите: <BR>
<INPUT TYPE=radio NAME=group VALUE=“schoolboy”>учащийся<BR>
<INPUT TYPE=radio NAME=group VALUE=“student”>студент<BR>
<INPUT TYPE=radio NAME=group VALUE=“teacher”>учитель<BR>
31 слайд

Флажки
Какие из сервисов Интернета вы используете наиболее часто:
<BR>
<INPUT TYPE=checkbox NAME=group VALUE=“www”>
WWW<BR>
<INPUT TYPE=checkbox NAME=group VALUE=“e-mail”>e-mail<BR>
<INPUT TYPE=checkbox NAME=group VALUE=“ftp”>FTP<BR>
32 слайд

Поля списков
<SELECT NAME=“browsers”>
<OPTION SELECTED>Internet Explorer
<OPTION>
Netscape Navigator
<OPTION>Opera
<OPTION>Neo Planet
</SELECT>
33 слайд

Текстовая область
Какую еще информацию вы хотели бы видеть на нашем сайте?<BR>
<TEXTAREA NAME=“resume”
ROWS=4 COLS=30>
</TEXTAREA>
<BR>
34 слайд

Отправка данных из формы
<INPUT TYPE=submit
VALUE=“отправить”>
<INPUT TYPE=reset
VALUE=“очистить”>
35 слайд

Создание фреймов
(теги <FRAMESET> и <FRAME>)
36 слайд

25%
15%
<HTML>
<HEAD>
<TITLE>Фрейм с заголовком</TITLE>
</HEAD>
<FRAMESET ROWS=“15%,*”>
<FRAME SRC=zagolovok.html>
<FRAMESET COLS=“25%,*”>
<FRAME SRC=menu.html>
<FRAME SRC=sodergimoe.html>
</FRAMESET>
</FRAMESET>
</HTML>
37 слайд

Оформление файла zagolovok.html
<HTML>
<HEAD>
<TITLE>заголовок</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>заголовок</H1>
</BODY>
</HTML>
38 слайд

Оформление файла menu.html
<HTML>
<HEAD>
<TITLE>Меню</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER>меню</H2>
</BODY>
</HTML>
39 слайд

Оформление файла sodergimoe.html
<HTML>
<HEAD>
<TITLE>Содержимое</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER>Содержимое</H2>
</BODY>
</HTML>
40 слайд
41 слайд
42 слайд

Практическое задание
20%
15%
10%
20%
43 слайд

Глава 1. Основы сети Интернет
В наше время особо важное значение имеет информация. Наиболее удобным способом получения и передачи информации является использование всемирной компьютерной сети Интернет.
Компьютерная сеть – это объединение компьютеров, линий связи между ними и программ, обеспечивающих обмен информацией.
Виды компьютерных сетей:
Локальная сеть – это компьютерная сеть, объединяющая компьютеры, расположенные в одном здании или в соседних зданиях.
Распределенная (территориальная) сеть – это компьютерная сеть, объединяющие компьютеры, которые находятся в разных частях города, а иногда и в разных городах.
Корпоративная сеть – это когда к распределенной сети подключается не отдельные компьютеры, а локальные сети. Создание корпоративных сетей нашло применение для предприятий, имеющих филиалы в других городах.
Глобальная сеть – это распределенная сеть мирового масштаба. Интернет и является самой известной глобальной компьютерной сетью.

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 656 299 материалов в базе

Найти материалы

Скачать материал

Другие материалы

docx

Рабочая программа по информатике для 7-9 классов ФГОС

30.03.2016
579
0

pptx

"Информатика және махаббат" кеші

30.03.2016
1114
1

docx

Инструкционные карты по созданию изображенив в графическом редакотре Paint

30.03.2016
1790
25

docx

"Жас информатиктер" сайыс сабақ (7 - 8 сыныптар)

30.03.2016
974
5

docx

Доклад, тема самообразования "АКТИВНЫЕ МЕТОДЫ ОБУЧЕНИЯ С ПРИМЕНЕНИЕМ ИКТ КАК СРЕДСТВО ФОРМИРОВАНИЯ КОМПЕТЕНТНОСТИ СТУДЕНТОВ "

30.03.2016
958
3

docx

Конспект урока: "Настройка эффектов анимации, демонстрация презентации"

Рейтинг: 3 из 5

30.03.2016
3699
10

docx

Конспект урока: "Блокнот. Калькулятор"

30.03.2016
1410
10

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

Скачать материал
- 30.03.2016 2590
- PPTX 579.5 кбайт
- 81 скачивание
- Рейтинг: 5 из 5
- Оцените материал:
Настоящий материал опубликован пользователем Бобылева Елена Александровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Автор материала

Бобылева Елена Александровна
- На сайте: 8 лет и 9 месяцев
- Подписчики: 1
- Всего просмотров: 54451
- Всего материалов: 43