Создание Web-страниц средствами языка HTML
методическая разработка по информатике и икт (11 класс) по теме
Опубликовано 19.01.2013 - 23:38 - Галанина Марианна Дмитриевна
Методическая разработка к уроку "Создание Web-страниц средствами языка HTML"
Скачать:
| Вложение | Размер |
|---|---|
 1_urok.pptx | 300.39 КБ |
Предварительный просмотр:
Подписи к слайдам:
Создание Web -страниц средствами языка Заголовок документа < 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> Образцы шрифтов
Тег Значение Обязательный тег программы < HEAD > Начало служебной части
Шрифт гельветика
Шрифт курьер
Шрифт таймс