984823
столько раз учителя, ученики и родители
посетили сайт «Инфоурок»
за прошедшие 24 часа
+Добавить материал
и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015
Дистанционные курсы профессиональной переподготовки и повышения квалификации для педагогов

Дистанционные курсы для педагогов - курсы профессиональной переподготовки от 1.410 руб.;
- курсы повышения квалификации от 430 руб.
Московские документы для аттестации

ВЫБРАТЬ КУРС СО СКИДКОЙ ДО 90%

ВНИМАНИЕ: Скидка действует ТОЛЬКО до конца апреля!

(Лицензия на осуществление образовательной деятельности №038767 выдана ООО "Столичный учебный центр", г.Москва)

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

Методическая разработка к урокам по теме: "Создание 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    текст раз...
  Образцы шрифтов    Шрифт гельветика   Шрифт курьер   Шрифт таймс    Пример

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

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> Пример

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

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

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

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

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

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

4. "Таблицы"

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

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

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

Общая информация

Номер материала: ДВ-179678

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

Курс повышения квалификации «Табличный процессор MS Excel в профессиональной деятельности учителя математики»
Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Современные информационные технологии и их использование в работе преподавателей. Системы автоматизированного проектирования одежды и организация технологического процесса»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Облачные технологии в образовании»
Курс «Фирменный стиль» (Corel Draw, Photoshop)
Курс «1С: Предприятие 7.7»
Курс «WEB-ВЕРСТКА (HTML, CSS)»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Введение в программирование на языке С (СИ)»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»

Благодарность за вклад в развитие крупнейшей онлайн-библиотеки методических разработок для учителей

Опубликуйте минимум 3 материала, чтобы БЕСПЛАТНО получить и скачать данную благодарность

Сертификат о создании сайта

Добавьте минимум пять материалов, чтобы получить сертификат о создании сайта

Грамота за использование ИКТ в работе педагога

Опубликуйте минимум 10 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Свидетельство о представлении обобщённого педагогического опыта на Всероссийском уровне

Опубликуйте минимум 15 материалов, чтобы БЕСПЛАТНО получить и скачать данное cвидетельство

Грамота за высокий профессионализм, проявленный в процессе создания и развития собственного учительского сайта в рамках проекта "Инфоурок"

Опубликуйте минимум 20 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Грамота за активное участие в работе над повышением качества образования совместно с проектом "Инфоурок"

Опубликуйте минимум 25 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Почётная грамота за научно-просветительскую и образовательную деятельность в рамках проекта "Инфоурок"

Опубликуйте минимум 40 материалов, чтобы БЕСПЛАТНО получить и скачать данную почётную грамоту

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