SlideShare a Scribd company logo
1 of 18
Учитель информатики
КОШ№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
(просмотреть в браузере)

More Related Content

What's hot

Язык разметки
Язык разметкиЯзык разметки
Язык разметкиelenash584
 
презентация по миру
презентация по мирупрезентация по миру
презентация по мируkuzeenka31
 
основы Html
основы Htmlосновы Html
основы Htmlgalka08m
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЯковенко Кирилл
 
Как осуществить поиск в Интернете
Как осуществить поиск в ИнтернетеКак осуществить поиск в Интернете
Как осуществить поиск в ИнтернетеBorisovna
 
Основы языка HTML для интернет-журналистов
Основы языка HTML для интернет-журналистовОсновы языка HTML для интернет-журналистов
Основы языка HTML для интернет-журналистовMarina Litvinovich
 
Лекция #2. Принцип организации World Wide Web
Лекция #2. Принцип организации World Wide WebЛекция #2. Принцип организации World Wide Web
Лекция #2. Принцип организации World Wide WebЯковенко Кирилл
 
Секреты внутренней оптимизации: как правильно составить title и description
Секреты внутренней оптимизации: как правильно составить title и description Секреты внутренней оптимизации: как правильно составить title и description
Секреты внутренней оптимизации: как правильно составить title и description Pavel Shtanko
 

What's hot (18)

Html 1
Html  1Html  1
Html 1
 
Html
HtmlHtml
Html
 
Язык разметки
Язык разметкиЯзык разметки
Язык разметки
 
Язык HTML
Язык HTMLЯзык HTML
Язык HTML
 
Язык HTML
Язык HTMLЯзык HTML
Язык HTML
 
нтмл код
нтмл   коднтмл   код
нтмл код
 
презентация по миру
презентация по мирупрезентация по миру
презентация по миру
 
Lection1
Lection1Lection1
Lection1
 
основы Html
основы Htmlосновы Html
основы Html
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страниц
 
Как осуществить поиск в Интернете
Как осуществить поиск в ИнтернетеКак осуществить поиск в Интернете
Как осуществить поиск в Интернете
 
Введение в DOM
Введение в DOMВведение в DOM
Введение в DOM
 
Основы языка HTML для интернет-журналистов
Основы языка HTML для интернет-журналистовОсновы языка HTML для интернет-журналистов
Основы языка HTML для интернет-журналистов
 
Лекция #2. Принцип организации World Wide Web
Лекция #2. Принцип организации World Wide WebЛекция #2. Принцип организации World Wide Web
Лекция #2. Принцип организации World Wide Web
 
Html, Css, Java Script
Html, Css, Java ScriptHtml, Css, Java Script
Html, Css, Java Script
 
XML
XMLXML
XML
 
Vvedenie html 1
Vvedenie html 1Vvedenie html 1
Vvedenie html 1
 
Секреты внутренней оптимизации: как правильно составить title и description
Секреты внутренней оптимизации: как правильно составить title и description Секреты внутренней оптимизации: как правильно составить title и description
Секреты внутренней оптимизации: как правильно составить title и description
 

Similar to Html 1 Урок

Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1itc73
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1itc73
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdfmmmitioglo
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTMLDenis Latushkin
 
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Max Kornev
 
Php intro rus
Php intro rusPhp intro rus
Php intro rusaDDDitive
 
язык разметки
язык разметкиязык разметки
язык разметкиelenash584
 
лекция №10
лекция №10лекция №10
лекция №10student_kai
 
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxexxdisillusion69
 
HTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад СавицкийHTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад СавицкийVlad Savitsky
 

Similar to Html 1 Урок (20)

Верстка_Лекция_1
Верстка_Лекция_1Верстка_Лекция_1
Верстка_Лекция_1
 
Верстка_Лекция1
Верстка_Лекция1Верстка_Лекция1
Верстка_Лекция1
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTML
 
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
 
Php intro rus
Php intro rusPhp intro rus
Php intro rus
 
HTML
HTMLHTML
HTML
 
язык разметки
язык разметкиязык разметки
язык разметки
 
HTML
HTMLHTML
HTML
 
лекция №10
лекция №10лекция №10
лекция №10
 
Lect1
Lect1Lect1
Lect1
 
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptx
 
55
5555
55
 
9773
97739773
9773
 
HTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад СавицкийHTML. Быстрое погружение. Влад Савицкий
HTML. Быстрое погружение. Влад Савицкий
 
представление о языке Html
представление о языке Htmlпредставление о языке Html
представление о языке Html
 
Основы HTML
Основы HTMLОсновы HTML
Основы HTML
 
Html лаб 2
Html лаб 2Html лаб 2
Html лаб 2
 
1. Введение
1. Введение1. Введение
1. Введение
 
Frontend
FrontendFrontend
Frontend
 

More from Nexa50

Наказ МОіН "Про звільнення від проходження державної підсумкової атестації"
Наказ МОіН "Про звільнення від проходження державної підсумкової атестації"Наказ МОіН "Про звільнення від проходження державної підсумкової атестації"
Наказ МОіН "Про звільнення від проходження державної підсумкової атестації"Nexa50
 
Щодо проведення державної підсумкової атестації 2020
Щодо проведення державної підсумкової атестації 2020Щодо проведення державної підсумкової атестації 2020
Щодо проведення державної підсумкової атестації 2020Nexa50
 
Дистанційне навчання 1-4
Дистанційне навчання 1-4Дистанційне навчання 1-4
Дистанційне навчання 1-4Nexa50
 
Використання бюджетних коштів
Використання бюджетних коштівВикористання бюджетних коштів
Використання бюджетних коштівNexa50
 
Спеціальний фонд 120
Спеціальний фонд 120Спеціальний фонд 120
Спеціальний фонд 120Nexa50
 
Спеціальний фонд 120
Спеціальний фонд 120Спеціальний фонд 120
Спеціальний фонд 120Nexa50
 
Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)Nexa50
 
Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)Nexa50
 
Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)Nexa50
 
Вступ до школи
Вступ до школиВступ до школи
Вступ до школиNexa50
 
Графік проведення факультативів та курсів за вибором за 2019-2020 н. р.
Графік проведення  факультативів та курсів за вибором за 2019-2020 н. р.Графік проведення  факультативів та курсів за вибором за 2019-2020 н. р.
Графік проведення факультативів та курсів за вибором за 2019-2020 н. р.Nexa50
 
Переменные в языке Delphi
Переменные в языке DelphiПеременные в языке Delphi
Переменные в языке DelphiNexa50
 
Пам'ятка для батьків
Пам'ятка для батьківПам'ятка для батьків
Пам'ятка для батьківNexa50
 
Відповідальність батьків
Відповідальність батьківВідповідальність батьків
Відповідальність батьківNexa50
 
Порядок подання та розгляду заяв про випадки булінгу (цькування) в школі
Порядок подання та розгляду заяв про випадки булінгу (цькування) в школіПорядок подання та розгляду заяв про випадки булінгу (цькування) в школі
Порядок подання та розгляду заяв про випадки булінгу (цькування) в школіNexa50
 
План заходів КЗШ№120 спрямованих на запобігання та протидію булінгу (цькуванн...
План заходів КЗШ№120 спрямованих на запобігання та протидію булінгу (цькуванн...План заходів КЗШ№120 спрямованих на запобігання та протидію булінгу (цькуванн...
План заходів КЗШ№120 спрямованих на запобігання та протидію булінгу (цькуванн...Nexa50
 
Наказ КЗШ №120 вiд 22.08.2019 №226 "Про органiзацію роботи з превентивного ви...
Наказ КЗШ №120 вiд 22.08.2019 №226 "Про органiзацію роботи з превентивного ви...Наказ КЗШ №120 вiд 22.08.2019 №226 "Про органiзацію роботи з превентивного ви...
Наказ КЗШ №120 вiд 22.08.2019 №226 "Про органiзацію роботи з превентивного ви...Nexa50
 
Наказ_ДОiН_вiд_14.08.2019_№232_Про_органiз._превентивного_в-ня_у_2019-2020н.р.
Наказ_ДОiН_вiд_14.08.2019_№232_Про_органiз._превентивного_в-ня_у_2019-2020н.р.Наказ_ДОiН_вiд_14.08.2019_№232_Про_органiз._превентивного_в-ня_у_2019-2020н.р.
Наказ_ДОiН_вiд_14.08.2019_№232_Про_органiз._превентивного_в-ня_у_2019-2020н.р.Nexa50
 
Закон України "Про внесення змін до деяких законодавчих актів України щодо пр...
Закон України "Про внесення змін до деяких законодавчих актів України щодо пр...Закон України "Про внесення змін до деяких законодавчих актів України щодо пр...
Закон України "Про внесення змін до деяких законодавчих актів України щодо пр...Nexa50
 

More from Nexa50 (20)

Наказ МОіН "Про звільнення від проходження державної підсумкової атестації"
Наказ МОіН "Про звільнення від проходження державної підсумкової атестації"Наказ МОіН "Про звільнення від проходження державної підсумкової атестації"
Наказ МОіН "Про звільнення від проходження державної підсумкової атестації"
 
Щодо проведення державної підсумкової атестації 2020
Щодо проведення державної підсумкової атестації 2020Щодо проведення державної підсумкової атестації 2020
Щодо проведення державної підсумкової атестації 2020
 
Дистанційне навчання 1-4
Дистанційне навчання 1-4Дистанційне навчання 1-4
Дистанційне навчання 1-4
 
Використання бюджетних коштів
Використання бюджетних коштівВикористання бюджетних коштів
Використання бюджетних коштів
 
Спеціальний фонд 120
Спеціальний фонд 120Спеціальний фонд 120
Спеціальний фонд 120
 
Спеціальний фонд 120
Спеціальний фонд 120Спеціальний фонд 120
Спеціальний фонд 120
 
Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)
 
Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)
 
Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)Карточки КЗШ(загал.фонд)
Карточки КЗШ(загал.фонд)
 
Вступ до школи
Вступ до школиВступ до школи
Вступ до школи
 
Графік проведення факультативів та курсів за вибором за 2019-2020 н. р.
Графік проведення  факультативів та курсів за вибором за 2019-2020 н. р.Графік проведення  факультативів та курсів за вибором за 2019-2020 н. р.
Графік проведення факультативів та курсів за вибором за 2019-2020 н. р.
 
1
11
1
 
Переменные в языке Delphi
Переменные в языке DelphiПеременные в языке Delphi
Переменные в языке Delphi
 
Пам'ятка для батьків
Пам'ятка для батьківПам'ятка для батьків
Пам'ятка для батьків
 
Відповідальність батьків
Відповідальність батьківВідповідальність батьків
Відповідальність батьків
 
Порядок подання та розгляду заяв про випадки булінгу (цькування) в школі
Порядок подання та розгляду заяв про випадки булінгу (цькування) в школіПорядок подання та розгляду заяв про випадки булінгу (цькування) в школі
Порядок подання та розгляду заяв про випадки булінгу (цькування) в школі
 
План заходів КЗШ№120 спрямованих на запобігання та протидію булінгу (цькуванн...
План заходів КЗШ№120 спрямованих на запобігання та протидію булінгу (цькуванн...План заходів КЗШ№120 спрямованих на запобігання та протидію булінгу (цькуванн...
План заходів КЗШ№120 спрямованих на запобігання та протидію булінгу (цькуванн...
 
Наказ КЗШ №120 вiд 22.08.2019 №226 "Про органiзацію роботи з превентивного ви...
Наказ КЗШ №120 вiд 22.08.2019 №226 "Про органiзацію роботи з превентивного ви...Наказ КЗШ №120 вiд 22.08.2019 №226 "Про органiзацію роботи з превентивного ви...
Наказ КЗШ №120 вiд 22.08.2019 №226 "Про органiзацію роботи з превентивного ви...
 
Наказ_ДОiН_вiд_14.08.2019_№232_Про_органiз._превентивного_в-ня_у_2019-2020н.р.
Наказ_ДОiН_вiд_14.08.2019_№232_Про_органiз._превентивного_в-ня_у_2019-2020н.р.Наказ_ДОiН_вiд_14.08.2019_№232_Про_органiз._превентивного_в-ня_у_2019-2020н.р.
Наказ_ДОiН_вiд_14.08.2019_№232_Про_органiз._превентивного_в-ня_у_2019-2020н.р.
 
Закон України "Про внесення змін до деяких законодавчих актів України щодо пр...
Закон України "Про внесення змін до деяких законодавчих актів України щодо пр...Закон України "Про внесення змін до деяких законодавчих актів України щодо пр...
Закон України "Про внесення змін до деяких законодавчих актів України щодо пр...
 

Html 1 Урок

  • 1. Учитель информатики КОШ№120 Лабунская А.В. Основы HTML и CSS. Введение и основные понятия
  • 2. Основы HTML Hyper Text Markup 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. • Структурные теги • Теги символов • Теги форматирования абзацев • Теги оформления списков данных • Теги логического форматирования текста • Теги физического форматирования текста Категории тегов
  • 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

Editor's Notes

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