Учитель информатики
КОШ№120
Лабунская А.В.
Основы HTML и CSS.
Введение и основные
понятия
Основы HTML
Hyper Text Markup Language (HTML) – язык
гипертекстовой разметки документов.
Web-страницы можно создать с помощью
языка HTML
В обычный документ вставляются
управляющие символы - HTML-теги, которые
определяют вид Web-страницы при её
просмотре в браузере.
Основы HTML
В 1991 году британец Тимоти Джон
Бернерс-Ли в Женевском ЦЕРНе
изобрел язык гипертекстовой
разметки, он же HyperText Markup
Language, он же HTML,
предназначенный для разметки и
оформления документов World Wide
Web.
HTML язык по своей сути не является языком программирования,
он является языком разметки гипертекстовых документов.
Иными словами он отвечает за расположение в документе Ваших
текстов, рисунков, таблиц, предназначенных для жизни в сети Интернет.
Заставить его посчитать, сколько будет дважды два невозможно, в нем
нет логических функций, зато красиво и главное легко выложить
информацию о том, что дважды два будет четыре - это запросто.
Читается этот язык при помощи знакомых Вам программ, именуемых
браузерами (обозревателями), которые «знают» стандартные команды
html языка, и «интерпретируя» их выводят на монитор компьютера
документы в том виде, в котором хочет представить их веб мастер -
составитель документа.
Основы HTML
Программы для создания
HTML – файлов:
• Редакторы (HTML Wirtel, HTML Assistant,
WebEdit, HomeSite, Блокнот и т.д.)
• Шаблоны
• Программы-преобразователи
Программы для просмотра
Web - страниц
• Microsoft Internet Explorer
• Netscape Communicator
• The Bat!
• Opera
• Google Chrome и т.д.
Блокнот
(для создания страницы)
Браузер
(для интерпретации файлов)
Программы для создания
HTML – файлов:
• Гипертекст – это текст, содержащий
специальные разметочные теги.
 Теги (tag – ярлык, признак) –
инструкции браузера, указывающие
способ отображения текста.
Пример тега
<HTML> </HTML>
Типы тегов
• Парные (влияет на текст с того места, где
употреблён тег, до того места, где указан
признак окончания его действия)
Например : <Head> </Head>
• Непарные
Например : <br>
• Структурные теги
• Теги символов
• Теги форматирования абзацев
• Теги оформления списков данных
• Теги логического форматирования текста
• Теги физического форматирования текста
Категории тегов
Структура
HTML - документа
<HTML> </HTML>
начинает описание HTML - файла
HTML - документ состоит
из двух частей:
1. Раздел заголовка
2. Содержательная часть
Раздел заголовка
• Начинается тегом <HEAD>
• Заканчивается тегом </HEAD>
• Mежду данными тегами располагается тег
<TITLE> </TITLE> (этот тег используется для
задания названия документа)
Раздел содержательной части
• Начинается тегом <BODY>
• Заканчивается тегом </BODY>
(между которыми располагается содержимое
HTML - документа)
Создать файл в Блокноте
(сохраните в файле Шаблон,
указав расширение *. txt)
<HTML>
<HEAD>
<TITLE>Заголовок HTML – документа </TITLE>
</HEAD>
<BODY>
Это тело HTML – документа. Здесь можно разместить
всё, что угодно.
</BODY>
</HTML>
Создание Web-страницы
1. Создать личную папку.
2. Создать в блокноте шаблон HTML-
документа, набрав HTML-код
страницы.
3. Сохранить файл под именем
Шаблон.txt в личной папке.
4. Открыть файл Шаблон.txt и внести
необходимую информацию,
используя теги и их атрибуты.
5. Сохранить файл под именем
index.html в личной папке.
Шаблон.txt
index.htm
Создание Web-страницы
Для редактирования файла index.html
необходимо выполнить следующие
действия:
index.htm
Переименовать файл index.html
(просмотреть в браузере)

Html 1 Урок

  • 1.
    Учитель информатики КОШ№120 Лабунская А.В. ОсновыHTML и CSS. Введение и основные понятия
  • 2.
    Основы HTML Hyper TextMarkup Language (HTML) – язык гипертекстовой разметки документов. Web-страницы можно создать с помощью языка HTML В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.
  • 3.
    Основы HTML В 1991году британец Тимоти Джон Бернерс-Ли в Женевском ЦЕРНе изобрел язык гипертекстовой разметки, он же HyperText Markup Language, он же HTML, предназначенный для разметки и оформления документов World Wide Web.
  • 4.
    HTML язык посвоей сути не является языком программирования, он является языком разметки гипертекстовых документов. Иными словами он отвечает за расположение в документе Ваших текстов, рисунков, таблиц, предназначенных для жизни в сети Интернет. Заставить его посчитать, сколько будет дважды два невозможно, в нем нет логических функций, зато красиво и главное легко выложить информацию о том, что дважды два будет четыре - это запросто. Читается этот язык при помощи знакомых Вам программ, именуемых браузерами (обозревателями), которые «знают» стандартные команды html языка, и «интерпретируя» их выводят на монитор компьютера документы в том виде, в котором хочет представить их веб мастер - составитель документа. Основы HTML
  • 5.
    Программы для создания HTML– файлов: • Редакторы (HTML Wirtel, HTML Assistant, WebEdit, HomeSite, Блокнот и т.д.) • Шаблоны • Программы-преобразователи
  • 6.
    Программы для просмотра Web- страниц • Microsoft Internet Explorer • Netscape Communicator • The Bat! • Opera • Google Chrome и т.д.
  • 7.
    Блокнот (для создания страницы) Браузер (дляинтерпретации файлов) Программы для создания HTML – файлов:
  • 8.
    • Гипертекст –это текст, содержащий специальные разметочные теги.  Теги (tag – ярлык, признак) – инструкции браузера, указывающие способ отображения текста.
  • 9.
    Пример тега <HTML> </HTML> Типытегов • Парные (влияет на текст с того места, где употреблён тег, до того места, где указан признак окончания его действия) Например : <Head> </Head> • Непарные Например : <br>
  • 10.
    • Структурные теги •Теги символов • Теги форматирования абзацев • Теги оформления списков данных • Теги логического форматирования текста • Теги физического форматирования текста Категории тегов
  • 11.
  • 12.
    <HTML> </HTML> начинает описаниеHTML - файла HTML - документ состоит из двух частей: 1. Раздел заголовка 2. Содержательная часть
  • 13.
    Раздел заголовка • Начинаетсятегом <HEAD> • Заканчивается тегом </HEAD> • Mежду данными тегами располагается тег <TITLE> </TITLE> (этот тег используется для задания названия документа)
  • 14.
    Раздел содержательной части •Начинается тегом <BODY> • Заканчивается тегом </BODY> (между которыми располагается содержимое HTML - документа)
  • 15.
    Создать файл вБлокноте (сохраните в файле Шаблон, указав расширение *. txt) <HTML> <HEAD> <TITLE>Заголовок HTML – документа </TITLE> </HEAD> <BODY> Это тело HTML – документа. Здесь можно разместить всё, что угодно. </BODY> </HTML>
  • 16.
    Создание Web-страницы 1. Создатьличную папку. 2. Создать в блокноте шаблон HTML- документа, набрав HTML-код страницы. 3. Сохранить файл под именем Шаблон.txt в личной папке. 4. Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты. 5. Сохранить файл под именем index.html в личной папке. Шаблон.txt index.htm
  • 17.
    Создание Web-страницы Для редактированияфайла index.html необходимо выполнить следующие действия: index.htm
  • 18.

Editor's Notes

  • #2 Оригинальные шаблоны для презентаций: https://presentation-creation.ru/powerpoint-templates.html Бесплатно и без регистрации.