Основы Основы HTML HTML

HTML HTML (Hyper Text Markup Language) (Hyper Text Markup Language) язык разметки гипертекста WebWeb­страницы ­страницы язык разметки гипертекста

Программы для Программы для HTML – – создания HTML создания файлов: файлов:  Редакторы ( Редакторы (HTML Wirtel, HTML Assistant,  HTML Wirtel, HTML Assistant,  WebEdit, HomeSite, Блокнот и т.д.) Блокнот и т.д.) WebEdit, HomeSite,   Шаблоны Шаблоны  Программы­преобразователи Программы­преобразователи

Программы для Программы для просмотра WebWeb - страниц - страниц просмотра  Microsoft Internet Explorer Microsoft Internet Explorer  Netscape Communicator Netscape Communicator  The Bat! The Bat!  Opera  Opera и т.д. и т.д.

Программы для Программы для HTML – – создания HTML создания файлов: файлов:            Блокнот Блокнот               ((для создания страницы для создания страницы))                               Internet Explorer Internet Explorer                                                                (для интерпретации файлов)                                (для интерпретации файлов)

 Гипертекст Гипертекст  –  это  текст,  содержащий    –  это  текст,  содержащий  специальные разметочные теги. специальные разметочные теги. ((tag  –  tag  –  ярлык,  признак)  Теги  Теги  ярлык,  признак)   ––   инструкции  браузера,  указывающие  инструкции  браузера,  указывающие  способ отображения     текста.  текста. способ отображения

Пример тега Пример тега Типы тегов Типы тегов  Парные (влияет на текст с того места,  Парные (влияет на текст с того места,  где употреблён тег, до того места, где  где употреблён тег, до того места, где  указан признак окончания его  указан признак окончания его  действия) действия)  Непарные Непарные

Категории тегов Категории тегов  Структурные теги Структурные теги  Теги символов Теги символов  Теги форматирования абзацев Теги форматирования абзацев  Теги оформления списков данных Теги оформления списков данных  Теги логического форматирования  Теги логического форматирования  текста текста  Теги физического  форматирования  Теги физического  форматирования  текста текста

Структура Структура HTML - документа - документа HTML

HTML ­ файла начинает описание HTML  ­ файла начинает описание  HTML - документ состоит - документ состоит HTML из двух частей: из двух частей: 1.1. Раздел заголовка Раздел заголовка 2.2. Содержательная часть Содержательная часть

Раздел заголовка Раздел заголовка Начинается тегом  Заканчивается тегом       Начинается тегом   Заканчивается тегом  MMежду данными тегами располагается  ежду данными тегами располагается   (этот  тег  этот  тег  тег  ( тег  используется для задания названия  используется для задания названия  документа) )  документа

Раздел содержательной Раздел содержательной части части Начинается тегом  Заканчивается тегом   Начинается тегом   Заканчивается тегом  (между которыми располагается содержимое (между которыми располагается содержимое HTML ­ документа) документа) HTML ­

Создать файл в Блокноте ( (сохраните в файле сохраните в файле Создать файл в Блокноте Пример, указав расширение *. html html) ) Пример, указав расширение *. Это тело HTML разместить всё, что угодно. разместить всё, что угодно. HTML – документа. Здесь можно   – документа. Здесь можно

Создать файл в Блокноте ( (сохраните в файле сохраните в файле Создать файл в Блокноте Пример, указав расширение *. html html) ) Пример, указав расширение *.

Теги символов Теги символов Теги логического форматирования     Теги логического форматирования         текста текста Теги физического форматирования  Теги физического форматирования      текста текста

Теги логического Теги логического форматирования текста форматирования текста                                                                                                                                                           

Теги физического Теги физического форматирования текста форматирования текста                                                                                                                                                                             <>

>  используется для отметки аббревиатур,  используется для отметки аббревиатур,  акронимов  (акроним  –  произносимое  акронимов  (акроним  –  произносимое  слово,  состоящее  из  начальных  букв  слово,  состоящее  из  начальных  букв  словосочетания); используя тег 

Пример использования тега Пример использования тега ::            TITLE=«Муниципальное   «Муниципальное   >  МКОУ    учреждение» «Глядянская средняя  «Глядянская средняя  общеобразовательная школа»   общеобразовательная школа»

Пример использования тега Пример использования тега ::

Тег Тег позволяет изменить шрифт позволяет изменить шрифт

Параметры тега Параметры тега  FACE FACE (задаёт  название  шрифта,  которым    (задаёт  название  шрифта,  которым                  будет выводится текст) будет выводится текст)                  SIZESIZE  (задаёт  размеры  шрифта  в  условных   (задаёт  размеры  шрифта  в  условных                 единицах от 1 до 7) единицах от 1 до 7)                 COLOR COLOR (устанавливает    цвет    шрифта,   (устанавливает    цвет    шрифта,                    который   может   задаваться   с   который   может   задаваться   с                                        помощью стандартных имён или  помощью стандартных имён или                                       набором шестнадцатеричных цифр) набором шестнадцатеричных цифр)

Задание цвета Задание цвета на языке HTML HTML на языке Шестнадцатеричные значения Шестнадцатеричные значения       (цветовая  система  базируется  на  трёх  (цветовая  система  базируется  на  трёх        основных  цветах  –  красном,  зеленом  и  основных  цветах  –  красном,  зеленом  и  синем – обозначается RGBRGB)) синем – обозначается  Например: #000000, #0000FF, #FF0000, Например:  #000000, #0000FF, #FF0000,                                                      #FFFFFF #FFFFFF                         Мнемонические обозначения   Мнемонические обозначения     ((название цвета название цвета))      Например: Red, White, Blue, Green Red, White, Blue, Green Например:

Пример использования Пример использования параметра Color Color:: параметра  Шрифт  размера COLOR=Green> Шрифт размера    
66, цвет зелёный   
илиили   Шрифт    Шрифт  COLOR=#008000> ,  цвет  зелёный        размера  6  6,  цвет  зелёный размера

Примеры использования Примеры использования параметров тега : : параметров тега  FACE=“ARIAL”> Название шрифта  
  


SIZE=5> Шрифт размера  Шрифт размера 5    5    Шрифт размера COLOR=Green> зелёный  
  
зелёный  Шрифт размера 6 6, цвет  , цвет  

Тег Тег используется для указания размера,  типа и цвета шрифта по умолчанию

Примеры использования Примеры использования тега : : тега  FACE=“Courier” COLOR=#008080> Шрифт по умолчанию  размера 3

 SIZE=2>Шрифт размера Шрифт размера 2
 2
 размера 4 4, цвет оливковый размера , цвет оливковый 
 
SIZE=4 COLOR=Olive> Шрифт   Шрифт

Пример использования параметра Пример использования параметра тегом :: Color c c тегом Color  BGCOLOR=#008080>  Задание      Задание    цвета фона 
 

Тег Тег <<РР>> тег «параграф», отделяет абзац  друг от друга

Примеры использования Примеры использования тега

: : тега  Выравнивание по левой границе окна
      Выравнивание по левой границе окна
 Выравнивание по центру окна
      Выравнивание по центру окна
 Выравнивание по правой границе окна
      Выравнивание по правой границе окна
 Выравнивание по ширине окна
      Выравнивание по ширине окна

Тег Тег

---

---

отображение горизонтальной линии

Пример использования Пример использования тега

---

---

: : тега  COLOR=#00FF00>

Тег Тег

для разметки заголовков (

,

,

, 

, 

, 

)

Вставка пробелов и Вставка пробелов и специальных символов специальных символов     ""
䕱 ۼ