Презентация на тему "Язык HTML"

Содержание

• 
  Слайд 1

  Начальныесведения

  Язык HTML 1

• 
  Слайд 2

  ЯзыкHTML

  HTML (Hyper Text Markup Language) – язык разметки гипертекста, включает в себя способы оформления гипертекстовых документов. SGML (Standard Generalized Markup Language) - стандартный язык обобщенной разметки. XML (Extended Markup Language) - расширяемый язык разметки. 2

• 
  Слайд 3
  

  Основные понятия Гипертекст – структура, позволяющая устанавливать смысловые связки между элементами текста и другими документами. Гиперссылка – фрагмент текста, который является указателем на другой файл или объект. Web-узел или Web-сайт – группа Web-страниц, принадлежащих одному автору или одному издателю, взаимосвязанных общими гиперссылками. 3

• 
  Слайд 4
  

  Фрейм (Frame) Этоттерминимеетдвазначения: Областьдокументасосвоимиполосамипрокрутки Одиночноеизображениеванимационномграфическомфайле (кадр) 4

• 
  Слайд 5
  

  Апплет (Applet) Программа, передаваемаянакомпьютерклиентаввидеотдельногофайлаизапускаемаяприпросмотреWeb-страницы Браузер (Browser) ПрограммадляпросмотраWeb-страницы 5

• 
  Слайд 6
  

  Скриптилисценарий (Script) Программа, включеннаявсоставWeb-страницы, длярасширенияеевозможностей CGI (Common Gateway Interface) – общееназваниепрограмм, которыеработаянасервере, позволяютрасширитьвозможностиWeb –страничек. 6

• 
  Слайд 7
  

  ЧтомогутсодержатьWeb-страницы: 1). Тексты;   2). Таблицы;   3). Логотипы;   4). Эмблемы; 7

• 
  Слайд 8
  

  5).Графику Графическиефайлысамыераспространенныеивыгодныевформате .jpg (jpig), менеераспространенныеgif , номогутсодержатьнеболее 256 цветов, редко .png, и .bmpт.к. ониимеютбольшиеразмеры, аосновноеправилохорошооформленнойстраницы, этобыстраязагрузка!!! Поэтомуправилуразмерлюбогографическогофайланедолженпревышать 70 Кбайтили 400-500 пикселейсосреднимкачеством.  ЧтомогутсодержатьWeb-страницы: 8

• 
  Слайд 9

  Графическиеформаты

  GIF - Graphic Interchange Format.Присохраненииизображениявэтомформатеколичествоиспользуемыхцветовнедолжнопревышать 256. JPEG (JPG) - Joint Photography Experts Group. Этотформатдопускаетсохранениеизображений, содержащихмиллионыцветов. 9

• 
  Слайд 10

  Чтомогутсодержать Web-страницы:

  6). Банеры – анимированныеинеанимированные, выполняютчащерекламнуюрольирольпереключателейнадругиестраницы. большиеимеютразмер 468 х 60 пикселей, средние 120 х 60, маленькие 88 х 31. Собираютсяизфайлов, созданных, например, вFotoShope. Этоможетбытьтекст, сменяющийдругойиликартинки. Могутбытьанимированныекнопки. Gif- анимация – это, например, принаведениинакнопкупоявляетсянадпись 10

• 
  Слайд 11
  

  7). Мультимедиа –файлы (содержащиемузыку(.mid), речь (.wav), видео (.avi). avi-фрагментыэтооченьбольшиефайлы, поэтомунаWeb-страницахонинедолжныпревышать 100 Кбайт wav-файлылучшеупаковывать, длячегоестьспециальныепрограммы, которыесжимаютв 10 раз (например, 10 секундзвучанияэтопримерно 250 Кбайтможноупаковатьдо 25 Кбайт) mid – файлыэтовосновноминструментальнаямузыкабезголоса. ПоддерживаютсятолькобраузеромInternet Explorer. .mp3 – файлытожеможноиспользовать, ноониоченьбольшие(среднийразмер 5-7 Мбайт, 3 мин 3 Мбайта. Этифайлы (avi, wav, mid, mp3) практическинесжимаются. Из 3 Мбайтполучаетсяприблизительно 2,8 Мбайт. Gif-файлысжимаютсяна 20%. ЧтомогутсодержатьWeb-страницы: 11

• 
  Слайд 12
  

  8) Скрипты – программы, которыерасширяютвозможностистраниц, делаютееактивнойсобратнойсвязью (формы, регистрационныелисты, пишутсянаязыкеJawaит.п.). Можноделатьсамим (бегущаястрока, падающиебуквыит.п.), аможнобратьготовые.  9). Апплеты – программы, которыезагружаютсяссайтанакомпьютерклиентаприоткрытиистраницы, создаютразличныевидеоэффекты (перелистываниестраниц, вихревоедвижение, эффектпламени, деформацииизображения, пишутсянаязыкеJawaсрасширением .class).   ЧтомогутсодержатьWeb-страницы: 12

• 
  Слайд 13
  

  10). Флэш-анимации – файлысделанныепотехнологиимакромедиасрасширением .swf. Вэтихфайлахпроисходитдействие, рекламныеролики. (Онибыстрооткрываются, нодляихоткрытиядополнительнокбраузерудолжнабытьустановленаспециальнаяпрограмма, позволяющаяпросматриватьэтифайлы, еслипрограмманеустановлена, токакправиловыдаетсязапроснаеезагрузкуизинтернет). 11). Гиперссылки – ссылкинадругиестаницы. 12). Таблицыстилей –тофайлысрасширением .css, вкоторыхпрописанывсеизменения. Такоеоформлениепридаютстраницамсовременный, эстетическийстиль. ЧтомогутсодержатьWeb-страницы: 13

• 
  Слайд 14
  

  теги HTML 14

• 
  Слайд 15

  HTML - теги

  Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами (от английского tag). Тег – начальный или конечный маркер элемента записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов (все атрибуты располагаются в начальном теге). Большинство тегов имеют два компонента: открывающий и закрывающий.Закрывающий компонент имеет то же название, но при записи перед названием ставится символ « / ». 15

• 
  Слайд 16

  Назначение HTML-тегов

  Форматированиятекста; Описаниякадровиформ; Форматированиятаблицисписков; Организацииссылокнадругиересурсы; ВставкиизображенийирасширенийHTML. 16

• 
  Слайд 17
  

  Структура HTML-документа …. …. Началоразметкидокумента содержаниестраницы Конецразметкидокумента 17

• 
  Слайд 18
  

  Междутегами

  пишетсяназваниесайта Тегнесетслужебнуюинформациюосайте инеотображаетсянаэкранебраузера: Имяавторастраницы; Информацияокодировке; Наборключевыхсловдляпоиска, отображающихсодержаниесайта. 18

• 
  Слайд 19
  

  ПримерWeb -страницы

  Здесь размещается содержимое страницы

  19

• 
  Слайд 20
  

  Сайт, посвященный школе < META NAME=“keywords” CONTENT =“школа, класс, урок, обучение, образование, знание”> ПримерWeb –страницысметатегами 20

• 
  Слайд 21
  

  Задание 1 Созданиеструктурыстраницы Откройтетекстовыйредакторблокнот. Наберитеструктуруприведеннойранеестраницы Междуэлементами

  наберите

  Мояперваястраница

  4. Сохранитефайлсименемindex.htmвпапке STRANICA 5. Просмотритестраницувбраузере. 21

• 
  Слайд 22
  

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

• 
  Слайд 23

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

  Форматироватьтекстможнотрадиционнымиспособами: выделятькурсивом, полужирным, выбиратьшрифт, размер, цвет, выравниватьтекстовыефрагменты. Всеэтихарактеристикизадаютсяприпомощисоответствующихатрибутоввтегеуправленияшрифтом текст РазмерзадаетсяатрибутомSIZE, которыйможетприниматьзначенияот 1 до 7. Пример. текстузаданразмер 3 23

• 
  Слайд 24
  

  COLOR– атрибут для определения цвета, названиекоторогозадаетсячисломвшестнадцатеричнойсистемесчисленияилиназваниенаанглийскомязыке color=“#FF0000” color=”red” Пример. это шрифт синего цвета R-red 00-FF 0-255 G-green 00-FF 0-255 B - blue 00-FF 0-255 RGB 24

• 
  Слайд 25

  Названияцветовизначения RGB

  25

• 
  Слайд 26
  

  форматирование шрифтов 26

• 
  Слайд 27
  

  FACE – позволяетзадаватьтипшрифтаилинесколькошрифтов (черезточкусзапятой) Пример. Всеатрибутымогутбытьиспользованысовместновнутритега< FONT> Пример. Это шрифт arial размером 3 синего цвета 27

• 
  Слайд 28
  

  тествыделениешрифтаполужирнымшрифтом тествыделениешрифтакурсивом тестподчеркнутыйшрифт x2верхнийиндекс(х2) x2нижнийиндекс(х2) Форматированиешрифтов 28

• 
  Слайд 29
  

  Примеры со шрифтами Пример действия параметра FASE

  ШРИФТ РАЗНОГО < FONTSIZE=5 FACE=Courier New Cyr>НАЧЕРТАНИЯ

  29

• 
  Слайд 30
  

  Примеры со шрифтами Пример действия параметра SIZE

  ШР ИФ Т РА ЗН ОГ О РА ЗМ ЕР>/FONT> А

  30

• 
  Слайд 31
  

  Примеры со шрифтами Пример действия параметра COLOR

  ШРИФТ РАЗНОГО < FONT SIZE=5 COLOR=BLUE>ЦВЕТА

  ЗАДАНИЕ Написать разными по цвету буквами: КАЖДЫЙОХОТНИКЖЕЛАЕТЗНАТЬ ГДЕ СИДИТФАЗАН 31

• 
  Слайд 32
  тест

  -сохраняетисходныйвидотформатированноготекстаспробелами, разбивкаминастрокиит.п.(тест ) Пример

  ПУТЬ К МУДРОСТИ К мудрости путь – по ухабам ошибок; Иди же и носа не вешай: Ушибы, ушибы, и снова ушибы Но реже и реже, и реже…

  Форматированиешрифтов 32

• 
  Слайд 33
  

  фоматирование заголовков 33

• 
  Слайд 34

  Форматированиязаголовков

  тест

   тест

  тест

   тест

  тест

   тест

  тест

   тест

  тест

   тест

  тест

   тест Существуетшестьуровнейзаголовков 34

• 
  Слайд 35
  

  Пример

  ОСНОВНОЙ ЗАГОЛОВОК (H1) ПОЦЕНТРУ ПОДЗАГОЛОВОК (Н2) ПО ПРАВОМУ КРАЮ ПОДЗАГОЛОВОК (Н3), ВЫРАВНИВАНИЕИ ПО УМОЛЧАНИЮ ПОДЗАГОЛОВОК (Н4) ПО ЦЕНТРУ ПОДЗАГОЛОВОК (Н5) ПО ПРАВОМУ КРАЮ ПОДЗАГОЛОВОК (Н6) ПО ПРАВОМУ КРАЮ

  35

• 
  Слайд 36
  

  форматирование абзацев 36

• 
  Слайд 37

  Разбивканаабзацы

  текст

  - новыйабзац, можноиспользоватьтольконачальныйтег, т.к. следующийэлемент

  обозначаетнетольконачалоследующегоабзаца, ноиконецпредыдущего тест тест -переностекстанановуюстрокубезабзацногоотступа тест тест тест

  тестразделительнаялиния тест тест 37

• 
  Слайд 38

  ПараметрытегаHR

  38

• 
  Слайд 39
  

  NOSHADE запрет выпуклости

  ПРИМЕРЫ ОТЛИНОВОК

  простая отлиновка толщиной 2 пикселя

  толстая и короткая линия

  такая же линия красного цвета

   

  ALIGN=CENTER>черный квадрат 30х30 пикселей

   

  Примеры отлиновок 39

• 
  Слайд 40
  

  Пример. Уронилимишкунапол, Оторвалимишкелапу, Всеравноегонеброшу, Потому, чтоонхороший Наэкранебраузераувидимразбиениетекстаначетверостишие 40

• 
  Слайд 41
  

  Выравниваниеабзацев Вместесэлементомабзац

  можноиспользоватьатрибутвыравнивания align 41

• 
  Слайд 42
  

  По умолчанию выравнивание по левому краю

  Центрирование всех строк абзаца, в том числе включая принудительные разрывы

  Этот абзац выровнен по правому краю

  Этот абзац выровнен по левому краю, также, как и по умолчанию

  Этот абзац выровнен одновременно по левому и правому краям, но в старых версиях браузеров воспринимается как выравнивание по левому краю

  Пример 42

• 
  Слайд 43
  

  Задание2Форматированиетекстанастранице Создайтеновуюстраницувредактореблокнот. Вэлемент

• 
  Слайд 44
  

  1. Создайтеновуюстраницувредактореблокнот.2. Вэлементукажите «Практическаяработа 3» ивашуфамилию.3. Отформатируйтетекстпозаданию: Практическаяработа3 Фамилия Каждый охотник желает знать, где сидит фазан

  Задание 3 Форматированиетекстанастранице 44

• 
  Слайд 45
  

  Практическаяработа 4 Фамилия Роман Книга Том Часть Глава Параграф

  Задание 4 Форматированиезаголовков 1. Создайтеновуюстраницувредактореблокнот.2. Вэлемент

• 
  Слайд 46
  

  Задание 5 Форматированиеабзацев Создайтеновуюстраницувредактореблокнот.2. Вэлемент

• 
  Слайд 47
  

  html> 1 способформатирования

  Ужнебоосеньюдышало.

  Всережесолнышкоблистало.

  Корочестановилсядень.

  Пример 1 ответкзаданию 5 47

• 
  Слайд 48
  

  html> 2 способформатирования

  Ужнебоосеньюдышало.Всережесолнышкоблистало.Корочестановилсядень. >

  Пример 2 ответакзаданию 5 48

• 
  Слайд 49
  

  html> 3 способформатирования Ужнебоосеньюдышало.Всережесолнышкоблистало.Корочестановилсядень. >

  Пример 3 ответакзаданию 5 49

• 
  Слайд 50

  Бегущая строка…

  Параметры: BGCOLOR- фоновый цвет плашки WIDTH HEIGHT -ширина и высота плашки LOOP -количество повтороений (INFINITE - непрерывно) SCROOLLAMOUNT-скорость прокручивания, на котором строка смещается при каждом шаге прокрутки в пикселях SCROOLLDELAY- задает задержку в миллисекундах между шагами прокрутки DIRECTION-указывает напрвление прокрутки BEHAVIOR=SCROOLL -напрвление слева направо BEHAVIOR=SLIDE - напрвление справа налево 50

• 
  Слайд 51

  Пример бегущей строки

    НАЗВАНИЕ ФИРМЫ ПРИХОДИТЕ ПОЖАЛУЙСТА!

   

  Строка пять разпроплывает вправо-влево, затем останавливается возле правого края желтой плашки 51

   

• 
  Слайд 52
  

  форматирование списков 52

• 
  Слайд 53

  Маркированные списки

  • первыйэлемент
  • второйэлемент

  Результат: первыйэлемент второйэлемент 53

• 
  Слайд 54

  Нумерованные списки

  1. первыйэлемент
  2. второйэлемент

  1. первыйэлемент 2. второйэлемент 54

• 
  Слайд 55
  

  Способы нумерации списков Способнумерациизадаетсязасчетатрибутаtype Атрибут Виднумерации type=“1”1, 2, 3, 4… type=“i” i, ii, iii, iv… Type=“I” I, II, III, IV… type=“a” a, b, c, d… type=“A” A, B, C, D… 55

• 
  Слайд 56

  Спискиопределений

  Термин Определение

  Результат: Термин Определение 56

• 
  Слайд 57
  

  ПРИМЕР

  1. введение
  2. назначение языка HTML
  3. команды теги HTML
     1. форматирование текста
        • жирность
        • наклон
        • подчеркивание
        • индексы
          • нижние
          • верхние
          • подчеркивание
        • цвет
     2. работа с абзацами
  4. дизайн страницы
  5. li>размещение сайта на сервере

  57

• 
  Слайд 58
  

  Задание 6 Созданиесписков Создайтеновуюстраницувредактореблокнот. Вэлемент

• 
  Слайд 59
  

  Задание 6 -1 Созданиесписков Создайте страницы со следующими списками: Перечень покупок: Говядина -1кг Масло сливочное -500 г Хлеб - 2 батона Молоко - 1 литр Алгоритм вычисления дробей: очистить экран ввести значения X и Y если у=0, вернуться к пункту 2 вычислить z=x/y вывести результат z 59

• 
  Слайд 60
  

  оформление фона и вставка рисунков 60

• 
  Слайд 61
  

  Заданиефонастраницы Длязаданияцветафонанастраниценадовнутриначальногоэлемента

  указатьатрибут bgcolor =“цвет”. Цветзадаетсятакжекакидляшрифтаназваниемилицифровымкодом. Пример

  …

  …61

• 
  Слайд 62
  

  Вставкарисунков IMG– тегдлясозданияссылкинаграфическийфайл. Сегопомощьютакжеможноиспользоватьизображениевгиперссылках, вставлятькартинкивтаблицы, использоватьизображениядляфонастраницы.Несодержитконечноготега. Необходимыматрибутомявляетсяsrc- указательпутикграфическомуфайлу, alt– выводиттекст, поясняющийзагружаемыйрисунок. Высотуиширинурисунказадаютспомощьюатрибутовheightиwidth. Рамкавокругобъектазадаетсяатрибутом border. Пример. 

  62

• 
  Слайд 63
  

   

  рисуноквцентре, текстсверхуиснизу

  рисунокслева

  рисуноксправа Примерыобтеканияиллюстрацийвдокументе 63

• 
  Слайд 64
  

  Задание 7 РазмещениеграфикинаWeb - страницах Создайтеновуюстраницувредактореблокнот. Вэлемент

  задайтеатрибут, чтобыцветфонастраницыбылчерным. Сделайтенадпись «Спокойнойночи» голубым цветом, 6 шрифтом, центральнымвыравниванием. Вставьтегоризонтальнуюлиниюкрасногоцвета. Сделайтенадписьжелтогоцвета «Приятныхсновидений» 8 шрифтом, центральнымвыравниванием. Вставьтегоризонтальнуюлиниюсинегоцветатолщиной 10 пикселей, длиной 50%, выровнитепоцентру. Рисунок 64

• 
  Слайд 65
  

  Задание 8 РазмещениеграфикинаWeb - страницах Создайтеновуюстраницувредактореблокнот. Вэлемент

• 
  Слайд 66
  

  Задание 9 изменениеразмеровизображения Создайтеновуюстраницувредактореблокнот. Вэлемент

  задайтеатрибут, чтобыцветфонастраницызеленым. Вставьтеизображение.Задайтеегоразмеры 100x100 пикселей. Отредактируйтекартинкувграфическомредакторетак, чтобырисунокбылнапрозрачномфонеидобавьтеэтоизображениенавашустраничку. 66

• 
  Слайд 67
  

  гиперссылки 67

• 
  Слайд 68
  

  Гиперссылки Гиперссылкиусловноможноразделитьнаследующиевиды: Внутренние–связывающиедокументывнутриодногоитогожеузла; Внешние– связывающиеWeb-страницусдокументами,непринадлежащимиданномуузлу; Гиперссылканапочтовыйадрес; Метки-якоря – позволяющиепереходитьпосетителюнаопределенныеразделыдокумента. 68

• 
  Слайд 69
  

  Гиперссылки текстдлящелчкамыши  Внутритега

  используетсяатрибут, задающийцветгиперссылок link– задаетцветисходныхссылок vlink– задаетцветпосещенныхссылок alink – задаетцветактивныхссылок(цветпринажатиимыши) Дляуказанияэлектроннойпочтыизапускаэлектроннойпрограммыиспользуетсяссылка: ИвановИван 69

• 
  Слайд 70
  

  Примерыгиперссылок Новыепоступления -переходкстрокетойжестраницы, помеченнойтегом примечания -переходнастраницусайтаpag2кстроке, помеченной тегом

  -ссылканадругуюстраницутогожесайта 70

• 
  Слайд 71
  

  IMG src=log.gif alt=“онашейфирме”

  -ссылканадругуюстраницутогожесайта, носсылкойявляетсярисунок Скачатьпрограмму-ссылкасподсказкойtitle тест - внешняяссылка Примерыгиперссылок 71

• 
  Слайд 72
  

  Примерыгиперссылок первая страница yandex Почта 72

• 
  Слайд 73
  

  Задание10Созданиегиперссылок 1.Создайте две страницы с именами str1.htm str2.htm 2.В элемениеTITLTRE укажите название странички 3. Задайте фон первой страницы зеленого цвета, а второй Синего 4. На первой странице задайте ссылку на вторую страницу На вторую страницу 5. На второй странице задайте ссылку на 1 страницу На вторую страницу 6.Поместите на страницы две разные картинки и проверьте работу гиперссылок 73

• 
  Слайд 74
  

  Задание11Созданиегиперссылок 1.Создайте к страницам прошлого задания с именами str1.htm str2.htm еще одну страницу str3.htm 2.Добавьте на первых двух страницах ссылку на 3 страницу? А на третьей ссылки на две первые 3. В теге

  определите текст гиперссылок: все гиперссылки -белые активные гиперсылки - красные посещенные гиперссылки -серые 4. На третьей странице задайте ссылки на вторую и первую страницы в виде рисунка кнопки IMG src=“kn.gif”> 5. Задайте бордюр для кнопок=2 6. Проверьте работу гиперссылок 74