Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Презентации / Методическая разработка к урокам по теме: "Создание Web-страниц средствами языка HTML"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

Методическая разработка к урокам по теме: "Создание Web-страниц средствами языка HTML"

библиотека
материалов
Создание Web-страниц средствами языка
Тег Значение  Обязательный тег программы < HEAD > Начало служебной части  Заг...
Тег Значение < B > Жирный < I > Курсив < U > Подчёркнутый < S > Зачёркнутый Ф...
Простейшая веб-страница     Пример веб-страницы   Это простейшая web-стран...
Задание 1. Заголовок web-страницы – «Уровни» Содержание web-страницы: заголов...
Задание 2. Заголовок web-страницы – «Формат» Содержание web-страницы: Текст ж...
Википедия гласит Интернет (произносится [интэрнэт]; англ. Internet) - всемирн...
   Линии     Коллекция горизонтальных линий         Пример
Тег Значение < SUB > Подстрочный индекс < SUP > Надстрочный индекс < TT > Шри...
Задание 4. Заголовок web-страницы – «Шрифты» Содержание web-страницы:
Управление пробелами и отступами текста  &nbsp&nbsp&nbsp&nbsp&nbsp Этот абзац...
Управление пробелами и отступами текста Веб-страницы обычно создаются на язык...
Управление пробелами и отступами текста Тег Значение  Учитываются все символы...
Эта таблица создана путём табуляции Фамилия		Имя		Отчество Иванов		Иван		Ива...
Тег Значение < VAR > Отображение переменных, как правило, курсив Форматирован...
В языке HTML определены четыре специальных символа, предназначенных для служ...
Символ Замена § &sect ° &deg ± &plusmn ← &larr Вставка специальных символов ↑...
Выравнивание текста абзаца   Абзац выровнен влево   Абзац выровнен по центру...
Тег Значение < CENTER > Выравнивание по центру Выравнивание текста абзаца   И...
Этот тег имеет дополнительные параметры, с помощью которых можно управлять вн...
Номер шрифта Размер шрифта в кеглях 1 8 2 10 3 12 4 14 5 18 6 24 7 36
Шрифты разных размеров     текст размера 1    текст размера 2    текст раз...
  Образцы шрифтов    Шрифт гельветика   Шрифт курьер   Шрифт таймс    Пример
23 1

Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

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

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

Создание Web-страниц средствами языка

№ слайда 2 Тег Значение  Обязательный тег программы &lt; HEAD &gt; Начало служебной части  Заг
Описание слайда:

Тег Значение <HTML> Обязательный тег программы < HEAD > Начало служебной части <TITLE> Заголовок документа < BODY > Начало тела документа <H1> Заголовок первого уровня < Р > Абзац (пропускается строка) <BR> Перенос строки без начала нового абзаца < HR > Вставляет горизонтальную линию на страницу

№ слайда 3 Тег Значение &lt; B &gt; Жирный &lt; I &gt; Курсив &lt; U &gt; Подчёркнутый &lt; S &gt; Зачёркнутый Ф
Описание слайда:

Тег Значение < B > Жирный < I > Курсив < U > Подчёркнутый < S > Зачёркнутый Форматирование шрифта <B> <I> Текст </I> </B>

№ слайда 4 Простейшая веб-страница     Пример веб-страницы   Это простейшая web-стран
Описание слайда:

<HTML> <HEAD> <TITLE> Простейшая веб-страница </TITLE> </HEAD> <BODY> <H1> Пример веб-страницы </H1> <P> Это простейшая web-страничка, созданная в стандартном <I> Блокноте </I> и отображенная в браузере <B> Microsoft Internet Explorer </B> . </P> <HR> </BODY> </HTML> Пример

№ слайда 5 Задание 1. Заголовок web-страницы – «Уровни» Содержание web-страницы: заголов
Описание слайда:

Задание 1. Заголовок web-страницы – «Уровни» Содержание web-страницы: заголовок первого уровня заголовок второго уровня заголовок третьего уровня заголовок четвёртого уровня заголовок пятого уровня заголовок шестого уровня

№ слайда 6 Задание 2. Заголовок web-страницы – «Формат» Содержание web-страницы: Текст ж
Описание слайда:

Задание 2. Заголовок web-страницы – «Формат» Содержание web-страницы: Текст жирный Текст курсив Текст подчёркнутый Текст зачёркнутый Текст курсив подчёркнутый

№ слайда 7 Википедия гласит Интернет (произносится [интэрнэт]; англ. Internet) - всемирн
Описание слайда:

Википедия гласит Интернет (произносится [интэрнэт]; англ. Internet) - всемирная система объединённых компьютерных сетей, построенная на использовании протокола IP и маршрутизации пакетов данных. Интернет образует глобальное информационное пространство, служит физической основой для Всемирной паутины (WWW, World Wide Web) и множества других систем (протоколов) передачи данных. Задание 3. Заголовок web-страницы – «Интернет» Содержание web-страницы: Интернет, Интернет, Интернет, Интернет.

№ слайда 8    Линии     Коллекция горизонтальных линий         Пример
Описание слайда:

<HTML> <HEAD> <TITLE> Линии </TITLE> </HEAD> <BODY> <H1> Коллекция горизонтальных линий </H1> <HR> <BR> <HR SIZE = 4 WIDTH = 80% ALIGN = “left”> <BR> <HR SIZE = 8 WIDTH = 60% ALIGN = “right”> </BODY> </HTML> Пример

№ слайда 9 Тег Значение &lt; SUB &gt; Подстрочный индекс &lt; SUP &gt; Надстрочный индекс &lt; TT &gt; Шри
Описание слайда:

Тег Значение < SUB > Подстрочный индекс < SUP > Надстрочный индекс < TT > Шрифт с фиксированной шириной букв < BIG > Текст с крупным размером букв Форматирование шрифта < SMALL > Текст с малым размером букв

№ слайда 10 Задание 4. Заголовок web-страницы – «Шрифты» Содержание web-страницы:
Описание слайда:

Задание 4. Заголовок web-страницы – «Шрифты» Содержание web-страницы:

№ слайда 11 Управление пробелами и отступами текста  &amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp Этот абзац
Описание слайда:

Управление пробелами и отступами текста <P> &nbsp&nbsp&nbsp&nbsp&nbsp Этот абзац начинается с красной строки… </P> Тег Значение &nbsp Неразрывный пробел

№ слайда 12 Управление пробелами и отступами текста Веб-страницы обычно создаются на язык
Описание слайда:

Управление пробелами и отступами текста Веб-страницы обычно создаются на языках разметки HTML или XHTML и могут содержать гиперссылки для быстрого перехода на другие страницы. Информационно значимое содержимое веб-страницы обычно называется контентом. Тег Значение <BLOCKQUOTE> Выделение абзаца: отступ слева и справа Информация на веб-странице может быть представлена в различных формах: текст, статические и анимированные графические, изображения, аудио, видео апплеты. Задание 4. Создать web-страницу используя тег <BLOCKQUOTE>

№ слайда 13 Управление пробелами и отступами текста Тег Значение  Учитываются все символы
Описание слайда:

Управление пробелами и отступами текста Тег Значение <PRE> Учитываются все символы пробелов и табуляции

№ слайда 14 Эта таблица создана путём табуляции Фамилия		Имя		Отчество Иванов		Иван		Ива
Описание слайда:

<PRE> Эта таблица создана путём табуляции Фамилия Имя Отчество Иванов Иван Иванович Петров Петя Петрович </PRE> <P> Эта таблица создана путём табуляции Фамилия Имя Отчество Иванов Иван Иванович Петров Петя Петрович </P> Задание 5. Набрать данный текст используя табуляцию и просмотреть результат web-страницы.

№ слайда 15 Тег Значение &lt; VAR &gt; Отображение переменных, как правило, курсив Форматирован
Описание слайда:

Тег Значение < VAR > Отображение переменных, как правило, курсив Форматирование шрифта < CITE > Отображение цитат, как правило, курсив <ADDRESS> Отображение адреса

№ слайда 16 В языке HTML определены четыре специальных символа, предназначенных для служ
Описание слайда:

В языке HTML определены четыре специальных символа, предназначенных для служебных целей. Это символы <, >, & и “. Вы не можете вставлять специальные символы в обычный текст, вместо этого необходимо использовать следующую замену: Символ Замена < &lt > &gt & &amp “ &quot Вставка специальных символов

№ слайда 17 Символ Замена § &amp;sect ° &amp;deg ± &amp;plusmn ← &amp;larr Вставка специальных символов ↑
Описание слайда:

Символ Замена § &sect ° &deg ± &plusmn ← &larr Вставка специальных символов ↑ &uarr → &rarr ↓ &darr — &mdash

№ слайда 18 Выравнивание текста абзаца   Абзац выровнен влево   Абзац выровнен по центру
Описание слайда:

Выравнивание текста абзаца <BODY> <P ALIGN = left> Абзац выровнен влево </P> <P ALIGN = center> Абзац выровнен по центру </P> <P ALIGN = right> Абзац выровнен вправо </P> <P ALIGN = justify> Абзац выровнен по ширине </P> <P> <NOBR> Этот текст всегда должен оставаться в одной строке </NOBR> </P> </BODY> Пример

№ слайда 19 Тег Значение &lt; CENTER &gt; Выравнивание по центру Выравнивание текста абзаца   И
Описание слайда:

Тег Значение < CENTER > Выравнивание по центру Выравнивание текста абзаца <BODY> <P > Использование таких приложений как < CENTER > FrontPage, </ CENTER > позволит Вам полностью реализовать свой творческий потенциал при создании Web-страниц. </P> </BODY> </HTML> Пример

№ слайда 20 Этот тег имеет дополнительные параметры, с помощью которых можно управлять вн
Описание слайда:

Этот тег имеет дополнительные параметры, с помощью которых можно управлять внешним видом шрифта. SIZE — задает размер шрифта. FACE — задаёт шрифт COLOR — задаёт цвет текста Тег Значение < FONT > Определяет параметры шрифта Форматирование шрифта

№ слайда 21 Номер шрифта Размер шрифта в кеглях 1 8 2 10 3 12 4 14 5 18 6 24 7 36
Описание слайда:

Номер шрифта Размер шрифта в кеглях 1 8 2 10 3 12 4 14 5 18 6 24 7 36

№ слайда 22 Шрифты разных размеров     текст размера 1    текст размера 2    текст раз
Описание слайда:

<HTML> <HEAD> <TITLE> Шрифты разных размеров </TITLE> </HEAD> <BODY> <FONT SIZE="1" FACE="COMIC SANS MS"> текст размера 1 </FONT> <BR> <FONT SIZE="2" FACE="COMIC SANS MS"> текст размера 2 </FONT> <BR> <FONT SIZE="3" FACE="COMIC SANS MS"> текст размера 3 </FONT> <BR> <FONT SIZE="4" FACE="COMIC SANS MS"> текст размера 4 </FONT> <BR> <FONT SIZE="5" FACE="COMIC SANS MS"> текст размера 5 </FONT> <BR> <FONT SIZE="6" FACE="COMIC SANS MS"> текст размера 6 </FONT> <BR> <FONT SIZE="7" FACE="COMIC SANS MS"> текст размера 7 </FONT> <BR> </BODY> </HTML> Пример

№ слайда 23   Образцы шрифтов    Шрифт гельветика   Шрифт курьер   Шрифт таймс    Пример
Описание слайда:

<HTML> <HEAD> <TITLE>Образцы шрифтов</TITLE> </HEAD> <BODY> <P><FONT FACE="Arial Cyr, Arial, Helv DL"> Шрифт гельветика </P> <P><FONT FACE="Courier New Cyr, Courier New"> Шрифт курьер </P> <P><FONT FACE="Times New Roman Cyr, Times New Roman"> Шрифт таймс </P> </BODY> </HTML> Пример


Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

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

Тема 1 из методического пособия, разработанного мною, к элективному курсу по информатике "Создаём свой сайт".

Все темы элективного курса "Создаём свой сайт":

1. "Создание Web-страниц средствами языка HTML"

2. "Использование цветов в языке HTML"

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

4. "Таблицы"

5. "Графика на Web-страницах"

6. "Создание гиперссылок"

7. "Создание WEB-страниц с рамками"

Автор
Дата добавления 22.11.2015
Раздел Информатика
Подраздел Презентации
Просмотров242
Номер материала ДВ-179678
Получить свидетельство о публикации
Похожие материалы

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