Создание Web-страниц средствами языка HTML
методическая разработка по информатике и икт (11 класс) по теме

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

Скачать:

ВложениеРазмер
Файл 1_urok.pptx300.39 КБ

Предварительный просмотр:


Подписи к слайдам:

Слайд 1

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

Слайд 2

Тег Значение Обязательный тег программы < HEAD > Начало служебной части Заголовок документа < BODY > Начало тела документа <H 1 > Заголовок первого уровня < Р > Абзац (пропускается строка) < BR> Перенос строки без начала нового абзаца < HR > Вставляет горизонтальную линию на страницу</p><p class='slide-number'>Слайд 3</p><p>Тег Значение < B > Жирный < I > Курсив < U > Подчёркнутый < S > Зачёркнутый Форматирование шрифта <B > < I > Текст </ I > </ B></p><p class='slide-number'>Слайд 4</p><p><HTML> <HEAD> <TITLE> Простейшая веб-страница </ TITLE> </HEAD> <BODY> <H1> Пример веб-страницы </ H1> <P> Это простейшая web- страничка, созданная в стандартном < I> Блокноте </ I> и отображенная в браузере < B> Microsoft Internet Explorer </B> . </P> <HR> </BODY> </HTML> Пример</p><p class='slide-number'>Слайд 5</p><p>Задание 1. Заголовок web -страницы – «Уровни» Содержание web -страницы: заголовок первого уровня заголовок второго уровня заголовок третьего уровня заголовок четвёртого уровня заголовок пятого уровня заголовок шестого уровня</p><p class='slide-number'>Слайд 6</p><p>Задание 2. Заголовок web -страницы – «Формат» Содержание web -страницы: Текст жирный Текст курсив Текст подчёркнутый Текст зачёркнутый Текст курсив подчёркнутый</p><p class='slide-number'>Слайд 7</p><p>Википедия гласит Интернет (произносится [ интэрнэт ]; англ. Internet ) - всемирная система объединённых компьютерных сетей , построенная на использовании протокола IP и маршрутизации пакетов данных . Интернет образует глобальное информационное пространство , служит физической основой для Всемирной паутины ( WWW , World Wide Web ) и множества других систем (протоколов) передачи данных. Задание 3. Заголовок web -страницы – «Интернет» Содержание web -страницы: Интернет, Интернет, Интернет, Интернет.</p><p class='slide-number'>Слайд 8</p><p><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> Пример</p><p class='slide-number'>Слайд 9</p><p>Тег Значение < SUB > Подстрочный индекс < SUP > Надстрочный индекс < TT > Шрифт с фиксированной шириной букв < BIG > Текст с крупным размером букв Форматирование шрифта < SMALL > Текст с малым размером букв</p><p class='slide-number'>Слайд 10</p><p>Задание 4. Заголовок web -страницы – «Шрифты» Содержание web -страницы:</p><p class='slide-number'>Слайд 11</p><p>Управление пробелами и отступами текста <P> & nbsp     Этот абзац начинается с красной строки… </P> Тег Значение & nbsp Неразрывный пробел</p><p class='slide-number'>Слайд 12</p><p>Управление пробелами и отступами текста Веб-страницы обычно создаются на языках разметки HTML или XHTML и могут содержать гиперссылки для быстрого перехода на другие страницы. Информационно значимое содержимое веб-страницы обычно называется контентом . Тег Значение <BLOCKQUOTE> Выделение абзаца: отступ слева и справа Информация на веб-странице может быть представлена в различных формах: текст, статические и анимированные графические, изображения, аудио, видео апплеты . Задание 4. Создать web -страницу используя тег <BLOCKQUOTE></p><p class='slide-number'>Слайд 13</p><p>Управление пробелами и отступами текста Тег Значение <PRE> Учитываются все символы пробелов и табуляции</p><p class='slide-number'>Слайд 14</p><p><PRE> Эта таблица создана путём табуляции Фамилия Имя Отчество Иванов Иван Иванович Петров Петя Петрович </PRE> <P> Эта таблица создана путём табуляции Фамилия Имя Отчество Иванов Иван Иванович Петров Петя Петрович </P> Задание 5. Набрать данный текст используя табуляцию и просмотреть результат web -страницы.</p><p class='slide-number'>Слайд 15</p><p>Тег Значение < VAR > Отображение переменных, как правило, курсив Форматирование шрифта < CITE > Отображение цитат, как правило, курсив <ADDRESS> Отображение адреса</p><p class='slide-number'>Слайд 16</p><p>В языке HTML определены четыре специальных символа , предназначенных для служебных целей. Это символы <, >, & и “. Вы не можете вставлять специальные символы в обычный текст, вместо этого необходимо использовать следующую замену: Символ Замена < & lt > & gt & & amp “ & quot Вставка специальных символов</p><p class='slide-number'>Слайд 17</p><p>Символ Замена § § ° ° ± & plusmn ← & larr Вставка специальных символов ↑ & uarr → & rarr ↓ & darr — & mdash</p><p class='slide-number'>Слайд 18</p><p>Выравнивание текста абзаца <BODY> <P ALIGN = left> Абзац выровнен влево </P> <P ALIGN = center> Абзац выровнен по центру </P> <P ALIGN = right> Абзац выровнен вправо </P> <P ALIGN = justify> Абзац выровнен по ширине </P> <P> <NOBR> Этот текст всегда должен оставаться в одной строке < / NOBR> </P> </BODY> Пример</p><p class='slide-number'>Слайд 19</p><p>Тег Значение < CENTER > Выравнивание по центру Выравнивание текста абзаца <BODY> <P > Использование таких приложений как < CENTER > FrontPage, < / CENTER > позволит Вам полностью реализовать свой творческий потенциал при создании Web -страниц. </P> </BODY> </HTML> Пример</p><p class='slide-number'>Слайд 20</p><p>Этот тег имеет дополнительные параметры , с помощью которых можно управлять внешним видом шрифта. SIZE — задает размер шрифта. FACE — задаёт шрифт COLOR — задаёт цвет текста Тег Значение < FONT > Определяет параметры шрифта Форматирование шрифта</p><p class='slide-number'>Слайд 21</p><p>Номер шрифта Размер шрифта в кеглях 1 8 2 10 3 12 4 14 5 18 6 24 7 36</p><p class='slide-number'>Слайд 22</p><p><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> Пример</p><p class='slide-number'>Слайд 23</p><p><HTML> <HEAD> <TITLE> Образцы шрифтов

Шрифт гельветика

Шрифт курьер

Шрифт таймс

Пример


По теме: методические разработки, презентации и конспекты

Проект по информатике "Электронный учебник средствами языка HTML"

Проект "Электронный учебник средствами языка HTML" выполнен на уроках информатики учащимися 11 класса (общеобразовательный профиль) под руководством учителя информатики Соболевой Г.В....

Методическая разработка открытого урока по дисциплине «Интернет-технологии» Тема: Создание простой Web-страницы на языке HTML.

Актуальность выбранной темы открытого урока заключается в необходимости  владения навыками создания web-документов, учитывая, что в настоящее время очень развиты Интернет коммуникации. Необходимо...

Создание таблиц средствами языка HTML

Практическая работа "Таблицы средствами языка HTML"...

Материалы к уроку "Создание сайта. Знакомство с языком HTML"

Представлены материалы к уроку в 9 классе: презентация для знакомства с языком разметки гипертекста, памятка с основными тегами и инструкция для практической работы, а также необходимые графические из...

Создание Web-страниц с помощью HTML (часть 1)

Создание Web-страниц с помощью HTML (часть 1) Использованная литература:1) Алленова Наталья "HTML - Первые шаги". Учебник (руководство) по HTML.2) Е.Н.Новоселова "Создание Web-стра...

Создание Web-страниц с помощью HTML (часть 2)

Создание Web-страниц с помощью HTML (часть 2) Использованная литература:1) Алленова Наталья "HTML - Первые шаги". Учебник (руководство) по HTML.2) Е.Н.Новоселова "Создание Web-стра...

Создание Web-страниц с помощью HTML (часть 3)

Создание Web-страниц с помощью HTML (часть 3) Использованная литература:1) Алленова Наталья "HTML - Первые шаги". Учебник (руководство) по HTML.2) Е.Н.Новоселова "Создание Web-стра...