Рабочие листы
к вашим урокам
Скачать
1 слайд
Язык разметки гипертекста HTML.
2 слайд
Чем привлекает пользователей Интернет?
3 слайд
WWW – World Wide Web.
в переводе - всемирная паутина, одна из популярных служб Интернета
WWW – информационная система подобная большой энциклопедии, страницы которой разбросаны по компьютерам-серверам.
4 слайд
Web-сайты и Web-страницы
Публикации во всемирной паутине реализуются в форме Web-сайтов.
Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.
5 слайд
Web-страница – основная информационная единица WWW, отдельный документ, хранящийся на отдельном сервере.
6 слайд
Web-сайт - совокупность тематически связанных Web-страниц.
7 слайд
Web-сайты и Web-страницы
Сайт является интерактивным средством представления информации.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах, что обеспечивает возможность пользователю свободно перемещаться по сайту. Такие гиперссылки называют системой навигации сайта.
Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую и видеоинформацию.
8 слайд
Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.
Web-страницы можно создать с помощью языка HTML
9 слайд
Технология HTML: в текстовый документ вставляются управляющие символы - тэги.
Основные достоинства HTML-документа:
Малый информационный объем;
Возможность просмотра на ПК, оснащенных различными операционными системами.
10 слайд
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение БЛОКНОТ.
11 слайд
Создание Web-страницы:
Открыть БЛОКНОТ;
Набрать HTML-код страницы;
Сохранить под именем *****.htm (титульная страница сайта называется index.htm);
12 слайд
ТЭГИ
Парные
(контейнер)
Открывающий
<…>
Закрывающий
</…>
Одиночные
<…>
Язык HTML не чувствителен к регистру !
13 слайд
Структура HTML документа:
<HTML>
<HEAD>
<TITLE>
название окна
</TITLE>
</HEAD>
<BODY>
информация страницы
</BODY>
</HTML>
<HTML> - указывает программе просмотра что это HTML документ;
<HEAD> - заголовок, содержит название документа и справочную информацию;
<TITLE> - название Web-страницы, отображается в строке заголовка браузера;
<BODY> - располагается всё содержание страницы.
заголовок
тело
14 слайд
Атрибуты для оформления Web - страницы.
15 слайд
Вопросы:
Что такое Web-страница?
Что такое Web-сайт?
16 слайд
Вопросы:
В чём заключается суть HTML технологии?
Основные достоинства HTML-документа;
17 слайд
Вопросы:
Что такое тэг?
Виды тэгов;
18 слайд
Какова структура HTML документа?
19 слайд
Структура HTML документа:
<HTML>
<HEAD>
<TITLE>
название окна
</TITLE>
</HEAD>
<BODY>
информация страницы
</BODY>
</HTML>
<HTML> - указывает программе просмотра что это HTML документ;
<HEAD> - заголовок, содержит название документа и справочную информацию;
<TITLE> - название Web-страницы, отображается в строке заголовка браузера;
<BODY> - располагается всё содержание страницы.
заголовок
тело
20 слайд
Работа с файлом «Шаблон»
21 слайд
Выбор цвета - программа
22 слайд
Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения, они влияют на внешний вид Web-страницы.
имя атрибута = «значение»
23 слайд
Структура Web-страницы
<HTML>
<HEAD>
<TITLE>
Название Web-страницы
</TITLE>
</HEAD>
<BODY атрибуты>
На этой странице можно разместить любую интересную информацию в Интернете.
</BODY>
</HTML>
24 слайд
I. Цветовая схема Web – страницы:
1. Атрибут цвета фона
<BODY bgcolor = «код цвета»>
<body bgcolor = “red”>
<body bgcolor = “#FF0000”>
25 слайд
2. Атрибут вставки фонового рисунка
<BODY background=“ URL”>
<body background = “dog.gif”>
26 слайд
3. Атрибут цвета текста
<BODY text = «код цвета»>
<body bgcolor = “red” text=“blue”>
27 слайд
II. Оформление заголовка:
Существует 6 уровней заголовков:
<h1> . . . </h1>
. . .
<h6> . . . </h6>
28 слайд
<html>
<title>Тестовая страница</title>
<Body bgcolor= «green» >
Эта страница является тестовой
<h1> Самый большой заголовок </h1>
<h2> Заголовок 2 </h2>
<h3> Заголовок 3 </h3>
<h4> Заголовок 4 </h4>
<h5> Заголовок 5 </h5>
<h6> Самый маленький заголовок 6 </h6>
</body>
</html>
29 слайд
![align = "Left " (по умолчанию)
align = "Right "
align = "Center "
align = "...](https://documents.infourok.ru/936430b6-c82a-446b-8908-5365d1cd7b22/0/slide_30.jpg "align = "Left " (по умолчанию)
align = "Right "
align = "Center "
align = "...")
30 слайд
align = "Left " (по умолчанию)
align = "Right "
align = "Center "
align = "Justify"
III. Атрибуты для выравнивания текста – align:
31 слайд
<body bgcolor ="#CC3399" text="#CCCCCC">
<h1 align = “center”> Title 1 </H1>
<h2 align = “right”> Title 2 </H2>
<h3 align = “left”> Title 3 </H3>
<h4> Title 4 </H4>
<h5> Title 5 </H5>
<h6> Title 6 </H6>
</body>
32 слайд
IV. Тэг для выравнивания по центру:
<center> ТЕКСТ </center>
33 слайд
<H 1 align="center">Компьютер</H 1>
<center> <H1>Компьютер</H 1></center>
34 слайд
35 слайд
V. Разделительная линия
Горизонтальная линия – тэг <HR>
36 слайд
Атрибуты тэга <HR>:
SIZE = 5 – толщина линии
WIDTH = Х % - длина линии
COLOR = “код цвета” – цвет линии
37 слайд
Атрибуты тэга <HR>:
<HR size=5 color="#330066" width=75%>
38 слайд
д/з
Учить тэги;
Создать страницу с фоновым рисунком;
39 слайд
Форматирование текста.
40 слайд
Вопросы:
Какие атрибуты используются для оформления цветовой схемы в тэге <BODY>?
41 слайд
Вопросы:
С помощью какого тэга оформляются заголовки?
42 слайд
Вопросы:
Какие атрибуты используются для выравнивания текста в тэге <H1> … </H1>?
43 слайд
Вопросы:
Какой тэг можно использовать для выравнивания текста по центру?
44 слайд
Вопросы:
Какой тэг используется для создания горизонтальной линии?
45 слайд
Вопросы:
Какие атрибуты используются для оформления линии в тэге <HR>?
46 слайд
I. Абзацы:
1.
- разрыв строки.
<p> - разделение текста на абзацы (вставляет пустую строку перед абзацем). В нем можно использовать атрибут align.
47 слайд
Компьютер имеет то преимущество перед мозгом,
что им пользуются. (Габриэль Лауб)
48 слайд
<p>Жизнь современного человека невозможно представить без компьютера. </p>
<p> Даже если Вы не являетесь профессиональным копьютерщиком, без ПК Вам наверняка не обойтись. </p>
<p> Компьютер есть в каждом доме и офисе. Во многих сферах, профессиях и даже в личной жизни, он является незаменимым атрибутом повседневной жизни. Поэтому каждый современный человек должен иметь представление о том, что такое компьютер. На этом сайте Вы можете найти информацию о том, как устроен компьютер. </p>
49 слайд
II. Тэг для изменения шрифта:
<font> … </font>- изменяет размер, цвет и стиль текста.
![Атрибуты тэга :
1) FACE = “…” гарнитура шрифта
face="Comic Sans MS, Courier...](https://documents.infourok.ru/936430b6-c82a-446b-8908-5365d1cd7b22/0/slide_50.jpg "Атрибуты тэга :
1) FACE = “…” гарнитура шрифта
face="Comic Sans MS, Courier...")
50 слайд
Атрибуты тэга <FONT>:
1) FACE = “…” гарнитура шрифта
face="Comic Sans MS, Courier New”
51 слайд
Атрибуты тэга <FONT>:
2) SIZE = … размера шрифта
size = 4
размер шрифта 1-7. По-умолчанию size = 3.
Размер изменяется на 20%:
4 размер больше 3 на 20%,
5 размер больше 4 на 20%
52 слайд
Атрибуты тэга <FONT>:
3) COLOR = “…” цвет шрифта
color = “blue”
53 слайд
Атрибуты тэга <FONT>:
4) ALIGN = “…” выравнивание текста
54 слайд
Например:
<font face= «Arial» size=3 color= «blue»> Это шрифт arial размером 3, цвет синий </font>
55 слайд
Форматирование текста.
56 слайд
I. Специальные символы:
  – пробел
« - кавычки
»
✔ - ✔
& - амперсант
57 слайд
58 слайд
59 слайд
60 слайд
II. Изменение начертания шрифта:
<B> Текст </B> - жирный
<I> Текст </I> - курсив
<U> Текст </U> - подчеркнутый
61 слайд
Например:
Эта <i>страница</i>является<b> тестовой</b>
62 слайд
<B> <I> <U> Компьютер </U></I></B>
63 слайд
64 слайд
65 слайд
Д/З
Создать Web – страницу со специальными символами.
66 слайд
Вставка изображений.
67 слайд
Какие тэги используются для изменения начертания шрифта?
68 слайд
  – пробел
« - ?
»
& - ?
69 слайд
<IMG SRC=“имя файла”>
<IMG SRC=“полное имя файла”>
<IMG SRC=“URL - адрес файла”>
70 слайд
<IMG SRC=“computer.gif”>
<IMG SRC=“C:/COMPUTER/computer.gif”>
<IMG SRC=“http://www.server.ru/computer.gif”>
поддерживаются форматы файлов GIF, JPG, JPEG, PNG
71 слайд
Изображения
Текст кода:
<Html>
<Head>
<Title> Компьютер </title>
</head>
<body>
<FONT COLOR="blue">
<H1 ALIGN="center"> Все о компьютере </H1>
</FONT>
<HR>
<IMG SRC="comp.jpg" >
<P ALIGN="left"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </p>
<p ALIGN="right"> Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету. </p>
</body>
</html>
72 слайд
Атрибут для текстового пояснения к изображению:
ALT = «Поясняющий текст»
<img src="pr1.png" alt="моя фотография">
![align="left" - выравнивание;
Vspace="10" - задает расстояние между тексто...](https://documents.infourok.ru/936430b6-c82a-446b-8908-5365d1cd7b22/0/slide_73.jpg "align="left" - выравнивание;
Vspace="10" - задает расстояние между тексто...")
73 слайд
align="left" - выравнивание;
Vspace="10" - задает расстояние между текстом и рисунком по вертикали;
Hspace="30" - задает расстояние между текстом и рисунком по горизонтали;
border="5“ > - рамка вокруг картинки;
74 слайд
<img src="pr1.png” align="left" > - выравнивание;
<img src="pr1.png" Vspace="10" > - задает расстояние между текстом и рисунком по вертикали;
<img src="pr1.png" Hspace="30" >- задает расстояние между текстом и рисунком по горизонтали;
<img src="pr1.png" border="5“ > - рамка вокруг самой картинки (в пикселях)
75 слайд
<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">
76 слайд
77 слайд
Д/З
Создать Web – страницу со своей фотографией.
78 слайд
Связывание Web страниц.
79 слайд
Гиперссылки
Для связывания Web- страниц используют гиперссылки.
Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.
80 слайд
Гиперссылки
Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы (создана панель навигации).
81 слайд
82 слайд
Гиперссылки
<A> указатель гиперссылки < /A>
HREF=“URL”
<A HREF=“URL”> указатель гиперссылки </A>
<A HREF=“comp.htm” > Что такое компьютер </A>
<A HREF=“istoria.htm” > История создания ЭВМ </A>
<A HREF=“sxema.htm” > Функциональная схема ЭВМ </A>
<A HREF=“ustroistvo.htm” > Устройство компьютера </A>
83 слайд
84 слайд
85 слайд
Гиперссылки
В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга <IMG>
Обычно на Web-страницах размещают изображения небольших размеров в целях экономии времени загрузки страницы. Предусмотреть получение крупной копии имеющегося изображения можно с помощью тэга:
<A href=“carsk.jpg”> <IMG src=“carsk.gif” width=“30” height=“75”> </A>, где width=“30” height=“75” – размеры изображения на Web-странице
86 слайд
Создание таблиц.
87 слайд
<TABLE> … </TABLE> контейнер для создания таблиц;
Внутри содержится описание структуры таблицы и её содержания.
88 слайд
<TR>…</TR> определяет строку в таблице;
89 слайд
<TH>…</TH> определяет заголовок для столбца в таблице;
90 слайд
<TD>…</TD> определяет отдельную ячейку в таблице;
91 слайд
BORDER – атрибут для задания толщины разделительных линий;
ALIGN – атрибут для выравнивания информации внутри ячейки по горизонтали;
92 слайд
Таблицы
Чтобы получить в браузере следующий вид Web-страницы, нужно внести в код соответствующие тэги
93 слайд
<Html>
<Head>
<Title> Компьютер </title>
</head>
<body>
<H1 >Комплектующие </H1>
<HR>
<Table border="1">
<TR>
<TH> наименование</TH>
<TH> производитель</TH>
<TH> характеристики</TH>
<TH> цена</TH>
</TR>
</Table>
</body>
</HTML>
94 слайд
<TR>
<TD> Винчестер </TD>
<TD> Caviar Blue </TD>
<TD> 640 Gb </TD>
<TD> 4800 руб. </TD>
</TR>
Для добавления второй строки в таблицу нужно добавить следующую группу тэгов:
95 слайд
Создание списков на Web-странице.
96 слайд
<OL>…</OL> контейнер для создания нумерованных списков
<LI> тег элемента списка
<UL>…</UL> контейнер для создания маркированного списка
<LI> тег элемента списка
<DL>…</Dl> контейнер для создания списка терминов
<DT> тег для создания термина
<DD> тег для создания определения
97 слайд
Использованные источники
1. http://www.postroika.ru/
2. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угинович. – М.: БИНОМ. Лаборатория знаний, 2008
Рабочие листы
к вашим урокам
Скачать
Презентация к циклу уроков по теме "Изучение языка разметки гипертекста HTML" 10 - 11 класс; В данной презентации содержится наглядный материал, вопросы, домашние задания для отдельных уроков по созданию Web - страниц с помощью языка разметки гипертекста HTML.
1. Язык разметки гипертекста HTML.
2. Структура HTML документа.
3. Атрибуты для оформления Web - страницы.
4. Цветовая схема Web – страницы.
5. Оформление заголовков.
6. Атрибуты для выравнивания текста.
7. Форматирование текста.
8. Специальные символы.
9. Вставка графических объектов.
10. Связывание Web-страниц.
11. Работа с таблицами.
12. Создание списков.
6 663 765 материалов в базе
Настоящий материал опубликован пользователем Гатауллина Роза Михайловна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Курс профессиональной переподготовки
600 ч.
Мини-курс
6 ч.
Мини-курс
10 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.