Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Презентации / Презентация к циклу уроков по теме "Изучение языка разметки гипертекста HTML" 10 - 11 класс;

Презентация к циклу уроков по теме "Изучение языка разметки гипертекста HTML" 10 - 11 класс;



Осталось всего 4 дня приёма заявок на
Международный конкурс "Мириады открытий"
(конкурс сразу по 24 предметам за один оргвзнос)


  • Информатика
Язык разметки гипертекста HTML.
Чем привлекает пользователей Интернет?
WWW – World Wide Web. в переводе - всемирная паутина, одна из популярных служ...
Web-сайты и Web-страницы 		Публикации во всемирной паутине реализуются в форм...
Web-страница – основная информационная единица WWW, отдельный документ, храня...
Web-сайт - совокупность тематически связанных Web-страниц.
Web-сайты и Web-страницы 		Сайт является интерактивным средством представлени...
Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов....
Технология HTML: в текстовый документ вставляются управляющие символы - тэги...
Для создания Web-страниц используются простейшие текстовые редакторы, кот...
Создание Web-страницы: Открыть БЛОКНОТ; Набрать HTML-код страницы; Сохранить...
Язык HTML не чувствителен к регистру !
Структура HTML документа:  	 		 	название окна 		 	 	 	 	информация страницы...
Атрибуты для оформления Web - страницы.
Вопросы: Что такое Web-страница? Что такое Web-сайт?
Вопросы: В чём заключается суть HTML технологии? Основные достоинства HTML-до...
Вопросы: Что такое тэг? Виды тэгов;
Какова структура HTML документа?
Структура HTML документа:  	 		 	название окна 		 	 	 	 	информация страницы...
Работа с файлом «Шаблон»
Выбор цвета - программа
Некоторые теги имеют атрибуты, которые являются именами свойств и могут прин...
Название Web-страницы    На этой странице можно разместить любую интересну...
I. Цветовая схема Web – страницы: 1. Атрибут цвета фона
2. Атрибут вставки фонового рисунка
3. Атрибут цвета текста
II. Оформление заголовка: Существует 6 уровней заголовков:  . . .  . . .  . ....
Тестовая страница  Эта страница является тестовой  Самый большой заголовок...
align = "Left " (по умолчанию) align = "Right " align = "Center " align = "Ju...
  Title 1   Title 2   Title 3   Title 4   Title 5   Title 6
IV. Тэг для выравнивания по центру:  ТЕКСТ
Компьютер  Компьютер
V. Разделительная линия Горизонтальная линия – тэг
Атрибуты тэга : SIZE = 5 – толщина линии WIDTH = Х % - длина линии COLOR = “к...
Атрибуты тэга :
д/з Учить тэги; Создать страницу с фоновым рисунком;
Форматирование текста.
Вопросы: Какие атрибуты используются для оформления цветовой схемы в тэге ?
Вопросы: С помощью какого тэга оформляются заголовки?
Вопросы: Какие атрибуты используются для выравнивания текста в тэге  … ?
Вопросы: Какой тэг можно использовать для выравнивания текста по центру?
Вопросы: Какой тэг используется для создания горизонтальной линии?
Вопросы: Какие атрибуты используются для оформления линии в тэге ?
I. Абзацы: 1.  - разрыв строки.  - разделение текста на абзацы (вставляет пус...
Компьютер имеет то преимущество перед мозгом,  что им пользуются. (Габриэль Л...
Жизнь современного человека невозможно представить без компьютера.   Даже есл...
II. Тэг для изменения шрифта:  … - изменяет размер, цвет и стиль текста.
Атрибуты тэга : 1) FACE = “…” гарнитура шрифта face="Comic Sans MS, Courier N...
Атрибуты тэга : 2) SIZE = … размера шрифта size = 4 размер шрифта 1-7. По-умо...
Атрибуты тэга : 3) COLOR = “…” цвет шрифта color = “blue”
Атрибуты тэга : 4) ALIGN = “…” выравнивание текста
Например:  Это шрифт arial размером 3, цвет синий
Форматирование текста.
I. Специальные символы: &nbsp – пробел &laquo - кавычки &raquo &#10004 - ✔ &...
II. Изменение начертания шрифта:  Текст  - жирный  Текст  - курсив  Текст  -...
Например: Эта страницаявляется тестовой
   Компьютер
Д/З Создать Web – страницу со специальными символами.
Вставка изображений.
Какие тэги используются для изменения начертания шрифта?
&nbsp – пробел &laquo - ? &raquo & - ?
    поддерживаются форматы файлов GIF, JPG, JPEG, PNG
Изображения Текст кода:    Компьютер      Все о компьютере      На этом сайте...
Атрибут для текстового пояснения к изображению: ALT = «Поясняющий текст»
align="left" - выравнивание; Vspace="10" - задает расстояние между текстом и...
 - рамка вокруг самой картинки (в пикселях)
Д/З Создать Web – страницу со своей фотографией.
Связывание Web страниц.
Гиперссылки Для связывания Web- страниц используют гиперссылки. Термин «гипер...
Гиперссылки Первая титульная страница должна предоставлять посетителю Web-сай...
Гиперссылки  указатель гиперссылки < /A> HREF=“URL”  указатель гиперссылки...
Гиперссылки В качестве указателя ссылки можно использовать не только текст, н...
 Создание таблиц.
…  контейнер для создания таблиц; Внутри содержится описание структуры табли...
… определяет строку в таблице;
… определяет заголовок для столбца в таблице; Название 1-го столбца	Название...
… определяет отдельную ячейку в таблице;
BORDER – атрибут для задания толщины разделительных линий; ALIGN – атрибут дл...
Таблицы Чтобы получить в браузере следующий вид Web-страницы, нужно внести в...
Компьютер    Комплектующие      наименование  производитель  характеристик...
Винчестер   Caviar Blue   640 Gb   4800 руб.   Для добавления второй строк...
Создание списков на Web-странице.
… контейнер для создания нумерованных списков  тег элемента списка … контейне...
Использованные источники 1. http://www.postroika.ru/ 2. Угринович, Н. Д. Инфо...
1 из 97

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

№ слайда 1 Язык разметки гипертекста HTML.
Описание слайда:

Язык разметки гипертекста HTML.

№ слайда 2 Чем привлекает пользователей Интернет?
Описание слайда:

Чем привлекает пользователей Интернет?

№ слайда 3 WWW – World Wide Web. в переводе - всемирная паутина, одна из популярных служ
Описание слайда:

WWW – World Wide Web. в переводе - всемирная паутина, одна из популярных служб Интернета WWW – информационная система подобная большой энциклопедии, страницы которой разбросаны по компьютерам-серверам.

№ слайда 4 Web-сайты и Web-страницы 		Публикации во всемирной паутине реализуются в форм
Описание слайда:

Web-сайты и Web-страницы Публикации во всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.

№ слайда 5 Web-страница – основная информационная единица WWW, отдельный документ, храня
Описание слайда:

Web-страница – основная информационная единица WWW, отдельный документ, хранящийся на отдельном сервере.

№ слайда 6 Web-сайт - совокупность тематически связанных Web-страниц.
Описание слайда:

Web-сайт - совокупность тематически связанных Web-страниц.

№ слайда 7 Web-сайты и Web-страницы 		Сайт является интерактивным средством представлени
Описание слайда:

Web-сайты и Web-страницы Сайт является интерактивным средством представления информации. Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах, что обеспечивает возможность пользователю свободно перемещаться по сайту. Такие гиперссылки называют системой навигации сайта. Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую и видеоинформацию.

№ слайда 8 Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.
Описание слайда:

Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов. Web-страницы можно создать с помощью языка HTML

№ слайда 9 Технология HTML: в текстовый документ вставляются управляющие символы - тэги
Описание слайда:

Технология HTML: в текстовый документ вставляются управляющие символы - тэги. Основные достоинства HTML-документа: Малый информационный объем; Возможность просмотра на ПК, оснащенных различными операционными системами.

№ слайда 10 Для создания Web-страниц используются простейшие текстовые редакторы, кот
Описание слайда:

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение БЛОКНОТ.

№ слайда 11 Создание Web-страницы: Открыть БЛОКНОТ; Набрать HTML-код страницы; Сохранить
Описание слайда:

Создание Web-страницы: Открыть БЛОКНОТ; Набрать HTML-код страницы; Сохранить под именем *****.htm (титульная страница сайта называется index.htm);

№ слайда 12 Язык HTML не чувствителен к регистру !
Описание слайда:

Язык HTML не чувствителен к регистру !

№ слайда 13 Структура HTML документа:  	 		 	название окна 		 	 	 	 	информация страницы
Описание слайда:

Структура HTML документа: <HTML> <HEAD> <TITLE> название окна </TITLE> </HEAD> <BODY> информация страницы </BODY> </HTML> <HTML> - указывает программе просмотра что это HTML документ; <HEAD> - заголовок, содержит название документа и справочную информацию; <TITLE> - название Web-страницы, отображается в строке заголовка браузера; <BODY> - располагается всё содержание страницы. заголовок тело

№ слайда 14 Атрибуты для оформления Web - страницы.
Описание слайда:

Атрибуты для оформления Web - страницы.

№ слайда 15 Вопросы: Что такое Web-страница? Что такое Web-сайт?
Описание слайда:

Вопросы: Что такое Web-страница? Что такое Web-сайт?

№ слайда 16 Вопросы: В чём заключается суть HTML технологии? Основные достоинства HTML-до
Описание слайда:

Вопросы: В чём заключается суть HTML технологии? Основные достоинства HTML-документа;

№ слайда 17 Вопросы: Что такое тэг? Виды тэгов;
Описание слайда:

Вопросы: Что такое тэг? Виды тэгов;

№ слайда 18 Какова структура HTML документа?
Описание слайда:

Какова структура HTML документа?

№ слайда 19 Структура HTML документа:  	 		 	название окна 		 	 	 	 	информация страницы
Описание слайда:

Структура 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. Атрибут цвета фона
Описание слайда:

I. Цветовая схема Web – страницы: 1. Атрибут цвета фона <BODY bgcolor = «код цвета»> <body bgcolor = “red”> <body bgcolor = “#FF0000”>

№ слайда 25 2. Атрибут вставки фонового рисунка
Описание слайда:

2. Атрибут вставки фонового рисунка <BODY background=“ URL”> <body background = “dog.gif”>

№ слайда 26 3. Атрибут цвета текста
Описание слайда:

3. Атрибут цвета текста <BODY text = «код цвета»> <body bgcolor = “red” text=“blue”>

№ слайда 27 II. Оформление заголовка: Существует 6 уровней заголовков:  . . .  . . .  . .
Описание слайда:

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
Описание слайда:

№ слайда 30 align = &quot;Left &quot; (по умолчанию) align = &quot;Right &quot; align = &quot;Center &quot; align = &quot;Ju
Описание слайда:

align = "Left " (по умолчанию) align = "Right " align = "Center " align = "Justify" III. Атрибуты для выравнивания текста – align:

№ слайда 31   Title 1   Title 2   Title 3   Title 4   Title 5   Title 6
Описание слайда:

<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. Тэг для выравнивания по центру:  ТЕКСТ
Описание слайда:

IV. Тэг для выравнивания по центру: <center> ТЕКСТ </center>

№ слайда 33 Компьютер  Компьютер
Описание слайда:

<H 1 align="center">Компьютер</H 1> <center> <H1>Компьютер</H 1></center>

№ слайда 34
Описание слайда:

№ слайда 35 V. Разделительная линия Горизонтальная линия – тэг
Описание слайда:

V. Разделительная линия Горизонтальная линия – тэг <HR>

№ слайда 36 Атрибуты тэга : SIZE = 5 – толщина линии WIDTH = Х % - длина линии COLOR = “к
Описание слайда:

Атрибуты тэга <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.  - разрыв строки.  - разделение текста на абзацы (вставляет пус
Описание слайда:

I. Абзацы: 1. <br> - разрыв строки. <p> - разделение текста на абзацы (вставляет пустую строку перед абзацем). В нем можно использовать атрибут align.

№ слайда 47 Компьютер имеет то преимущество перед мозгом,  что им пользуются. (Габриэль Л
Описание слайда:

Компьютер имеет то преимущество перед мозгом, <br> что им пользуются. (Габриэль Лауб)

№ слайда 48 Жизнь современного человека невозможно представить без компьютера.   Даже есл
Описание слайда:

<p>Жизнь современного человека невозможно представить без компьютера. </p> <p> Даже если Вы не являетесь профессиональным копьютерщиком, без ПК Вам наверняка не обойтись. </p> <p> Компьютер есть в каждом доме и офисе. Во многих сферах, профессиях и даже в личной жизни, он является незаменимым атрибутом повседневной жизни. Поэтому каждый современный человек должен иметь представление о том, что такое компьютер. На этом сайте Вы можете найти информацию о том, как устроен компьютер. </p>

№ слайда 49 II. Тэг для изменения шрифта:  … - изменяет размер, цвет и стиль текста.
Описание слайда:

II. Тэг для изменения шрифта: <font> … </font>- изменяет размер, цвет и стиль текста.

№ слайда 50 Атрибуты тэга : 1) FACE = “…” гарнитура шрифта face=&quot;Comic Sans MS, Courier N
Описание слайда:

Атрибуты тэга <FONT>: 1) FACE = “…” гарнитура шрифта face="Comic Sans MS, Courier New”

№ слайда 51 Атрибуты тэга : 2) SIZE = … размера шрифта size = 4 размер шрифта 1-7. По-умо
Описание слайда:

Атрибуты тэга <FONT>: 2) SIZE = … размера шрифта size = 4 размер шрифта 1-7. По-умолчанию size = 3. Размер изменяется на 20%: 4 размер больше 3 на 20%, 5 размер больше 4 на 20%

№ слайда 52 Атрибуты тэга : 3) COLOR = “…” цвет шрифта color = “blue”
Описание слайда:

Атрибуты тэга <FONT>: 3) COLOR = “…” цвет шрифта color = “blue”

№ слайда 53 Атрибуты тэга : 4) ALIGN = “…” выравнивание текста
Описание слайда:

Атрибуты тэга <FONT>: 4) ALIGN = “…” выравнивание текста

№ слайда 54 Например:  Это шрифт arial размером 3, цвет синий
Описание слайда:

Например: <font face= «Arial» size=3 color= «blue»> Это шрифт arial размером 3, цвет синий </font>

№ слайда 55 Форматирование текста.
Описание слайда:

Форматирование текста.

№ слайда 56 I. Специальные символы: &amp;nbsp – пробел &amp;laquo - кавычки &amp;raquo &amp;#10004 - ✔ &amp;
Описание слайда:

I. Специальные символы: &nbsp – пробел &laquo - кавычки &raquo &#10004 - ✔ & - амперсант

№ слайда 57
Описание слайда:

№ слайда 58
Описание слайда:

№ слайда 59
Описание слайда:

№ слайда 60 II. Изменение начертания шрифта:  Текст  - жирный  Текст  - курсив  Текст  -
Описание слайда:

II. Изменение начертания шрифта: <B> Текст </B> - жирный <I> Текст </I> - курсив <U> Текст </U> - подчеркнутый

№ слайда 61 Например: Эта страницаявляется тестовой
Описание слайда:

Например: Эта <i>страница</i>является<b> тестовой</b>

№ слайда 62    Компьютер
Описание слайда:

<B> <I> <U> Компьютер </U></I></B>

№ слайда 63
Описание слайда:

№ слайда 64
Описание слайда:

№ слайда 65 Д/З Создать Web – страницу со специальными символами.
Описание слайда:

Д/З Создать Web – страницу со специальными символами.

№ слайда 66 Вставка изображений.
Описание слайда:

Вставка изображений.

№ слайда 67 Какие тэги используются для изменения начертания шрифта?
Описание слайда:

Какие тэги используются для изменения начертания шрифта?

№ слайда 68 &amp;nbsp – пробел &amp;laquo - ? &amp;raquo &amp; - ?
Описание слайда:

&nbsp – пробел &laquo - ? &raquo & - ?

№ слайда 69
Описание слайда:

<IMG SRC=“имя файла”> <IMG SRC=“полное имя файла”> <IMG SRC=“URL - адрес файла”>

№ слайда 70     поддерживаются форматы файлов GIF, JPG, JPEG, PNG
Описание слайда:

<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 = «Поясняющий текст»
Описание слайда:

Атрибут для текстового пояснения к изображению: ALT = «Поясняющий текст» <img src="pr1.png" alt="моя фотография">

№ слайда 73 align=&quot;left&quot; - выравнивание; Vspace=&quot;10&quot; - задает расстояние между текстом и
Описание слайда:

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 – страницу со своей фотографией.
Описание слайда:

Д/З Создать Web – страницу со своей фотографией.

№ слайда 78 Связывание Web страниц.
Описание слайда:

Связывание Web страниц.

№ слайда 79 Гиперссылки Для связывания Web- страниц используют гиперссылки. Термин «гипер
Описание слайда:

Гиперссылки Для связывания Web- страниц используют гиперссылки. Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей. Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.

№ слайда 80 Гиперссылки Первая титульная страница должна предоставлять посетителю Web-сай
Описание слайда:

Гиперссылки Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы (создана панель навигации).

№ слайда 81
Описание слайда:

№ слайда 82 Гиперссылки  указатель гиперссылки &lt; /A&gt; HREF=“URL”  указатель гиперссылки
Описание слайда:

Гиперссылки <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 … определяет заголовок для столбца в таблице; Название 1-го столбца	Название
Описание слайда:

<TH>…</TH> определяет заголовок для столбца в таблице; Название 1-го столбца Название 2-го столбца Название 3-го столбца Название 4-го столбца

№ слайда 90 … определяет отдельную ячейку в таблице;
Описание слайда:

<TD>…</TD> определяет отдельную ячейку в таблице;

№ слайда 91 BORDER – атрибут для задания толщины разделительных линий; ALIGN – атрибут дл
Описание слайда:

BORDER – атрибут для задания толщины разделительных линий; ALIGN – атрибут для выравнивания информации внутри ячейки по горизонтали;

№ слайда 92 Таблицы Чтобы получить в браузере следующий вид Web-страницы, нужно внести в
Описание слайда:

Таблицы Чтобы получить в браузере следующий вид 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 Винчестер   Caviar Blue   640 Gb   4800 руб.   Для добавления второй строк
Описание слайда:

<TR> <TD> Винчестер </TD> <TD> Caviar Blue </TD> <TD> 640 Gb </TD> <TD> 4800 руб. </TD> </TR> Для добавления второй строки в таблицу нужно добавить следующую группу тэгов:

№ слайда 95 Создание списков на Web-странице.
Описание слайда:

Создание списков на Web-странице.

№ слайда 96 … контейнер для создания нумерованных списков  тег элемента списка … контейне
Описание слайда:

<OL>…</OL> контейнер для создания нумерованных списков <LI> тег элемента списка <UL>…</UL> контейнер для создания маркированного списка <LI> тег элемента списка <DL>…</Dl> контейнер для создания списка терминов <DT> тег для создания термина <DD> тег для создания определения

№ слайда 97 Использованные источники 1. http://www.postroika.ru/ 2. Угринович, Н. Д. Инфо
Описание слайда:

Использованные источники 1. http://www.postroika.ru/ 2. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угинович. – М.: БИНОМ. Лаборатория знаний, 2008



57 вебинаров для учителей на разные темы
ПЕРЕЙТИ к бесплатному просмотру
(заказ свидетельства о просмотре - только до 11 декабря)


Краткое описание документа:

Презентация к циклу уроков по теме "Изучение языка разметки гипертекста HTML" 10 - 11 класс; В данной презентации содержится наглядный материал, вопросы, домашние задания для отдельных уроков по созданию Web - страниц с помощью языка разметки гипертекста HTML.

1.      Язык разметки гипертекста HTML.

2.      Структура HTML документа.

3.      Атрибуты для оформления Web - страницы.

4.      Цветовая схема Web – страницы.

5.      Оформление заголовков.

6.      Атрибуты для выравнивания текста.

7.      Форматирование текста.

8.      Специальные символы.

9.      Вставка графических объектов.

10.  Связывание Web-страниц.

11.  Работа с таблицами.

12.  Создание списков.

Автор
Дата добавления 01.07.2015
Раздел Информатика
Подраздел Презентации
Просмотров381
Номер материала 579289
Получить свидетельство о публикации

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх