Презентація "Основи HTML"

Бібліотека Інформатика 11 клас Матеріали до уроків
Про матеріал
Основні поняття html. Структура html-документа. Опис структури html-документа. Основні теги.
Перегляд файлу
Основи HTML. Правила побудови HTML-документів
План. Основні поняття. Структура html-документа. Опис структури html-документа. Основні теги
Основні поняття. Веб-документ – це текст, написаний мовою HTML чи іншою, який призначений для перегляду електронної інформації на екрані комп’ютера за допомогою браузера. Гіпертекст – це електронний документ, який містить гіперпосилання на інші документи. Гіпертекстова технологія – це інформаційна технологія, що базується на використанні гіпертекстів. Веб-документ, який ми бачимо на екрані браузера, називають веб-сторінкою. Це пов’язано з тим, що хорошим стилем вважається подання деякої частини інформації на одній умовній сторінці.
Структура документа Програми мовою HTML містять інструкції, що називаються тегами. Всі теги мови HTML виділяються символами-обмежувачами (< і >), між якими записується ідентифікатор (ім’я) тега і, можливо, його параметри. Тегипарнінепарнівідкриваючізакриваючі<HTML> </HTML> <br />
Загальний вигляд HTML документу<!doctype html><html lang= " title="Загальний вигляд HTML документу ">
Опис структури HTML документу. Елемент doctype. Doctype повинен розміщуватись на самому початку HTML документу. У цьому розділі необхідно вказати той стандарт HTML згідно з яким браузеру потрібно інтерпретувати гіпертекстову мову розмітки. Елемент html. Елемент html це кореневий елемент документу. Любий HTML документ повинен починатися з тега <HTML> и закінчуватись тегом </HTML> . Елемент head. Елемент head містить мета-опис документу. Між тегами заголовка <head> та </head> вставляються теги метаінформації (<meta>), назва сторінки вікна у браузері (<title>), а також список вмонтованих в документ таблиць стилів та сценаріїв клієнтських скриптів(<link>). Елемент body. Елемент body містить основний контент для відображення на сторінці. Між тегами <body> та </body> міститься розмітка, що безпосередньо виводиться на екран користувача (видимий контент).
Система кодування символів. Система кодування символів, що застосована в документі визначається атрибутом charset елементу meta. Приклад:<meta charset=Елемент title. Назва сторінки у вікні браузера визначається елементом title. Елемент title також використовується в:• Назві сторінки у вікні браузера• Історії перегляду Веб сторінок• Закладках• Результатах пошукових систем. Приклад:Про HTML | Навчальний Веб ресурс для вивчення HTML." title="Система кодування символів. Система кодування символів, що застосована в документі визначається атрибутом charset елементу meta. Приклад:Елемент title. Назва сторінки у вікні браузера визначається елементом title. Елемент title також використовується в:• Назві сторінки у вікні браузера• Історії перегляду Веб сторінок• Закладках• Результатах пошукових систем. Приклад:Про HTML | Навчальний Веб ресурс для вивчення HTML.">
Мета-інформація опису сторінки. Для додавання мета-інформації опису сторінки додайте елемент meta з параметрами name, рівному Мета-інформація ключових слів сторінки. Для додавання мета-інформації ключових слів сторінки додайте елемент meta з параметрами name, рівному "keywords" та параметром content, в який введіть необхідне описання. Приклади:" title="Мета-інформація опису сторінки. Для додавання мета-інформації опису сторінки додайте елемент meta з параметрами name, рівному "description" та параметром content, в який введіть необхідне описання. Приклади:Мета-інформація ключових слів сторінки. Для додавання мета-інформації ключових слів сторінки додайте елемент meta з параметрами name, рівному "keywords" та параметром content, в який введіть необхідне описання. Приклади:">
Приклад з тілом HTML документу:<!doctype html><html lang= Приклад тіла HTML документу

Вітаю! Ви вивчаєте гіпертекстову мову розмітки!

HTML це мова розмітки для створення Веб сторінок.

Майбутнє за інформаційними технологіями

HTML це абревіатура від Hyper. Text Markup Language

  • Що таке HTML ?
  • Як створити HTML документ?
  • Синтаксис тегів
и, показано на рисунку. " title="Приклад з тілом HTML документу: Приклад тіла HTML документу

Вітаю! Ви вивчаєте гіпертекстову мову розмітки!

HTML це мова розмітки для створення Веб сторінок.

Майбутнє за інформаційними технологіями

HTML це абревіатура від Hyper. Text Markup Language

  • Що таке HTML ?
  • Як створити HTML документ?
  • Синтаксис тегів
и, показано на рисунку. ">
Результат виконання
Теги тіла документа. Тег <strong> (<B>) – напівжирний текст. Форма запису: <strong>текст</strong> Тег <em> (<I>) – текст курсивом. Форма запису: <em> текст </em>Тег <U> - текст підкреслений. Форма запису: <u> текст </u>Тег <STRIKE> (<S>) – текст перекресленим горизонтальною лінією. Форма запису: <s> текст </s>Тег <BIG> - текст шрифтом більшого (ніж нерозмічена частина тексту) розміру. Форма запису: <big> текст </big>Тег <SMALL> - текст шрифтом меншого (ніж нерозмічена частина тексту) розміру. Тег <SUB> - Зміщує текст у нижній індекс. Приклад: x<sub>1</sub>Тег <SUP> - Зміщує текст у верхній індекс. Приклад: y<sup>2</sup>
Форматування абзаців. Тег <P> - використовується для створення абзацу. Форма запису: <p>текст абзацу</p> Приклад:<p>Перший параграф</p><p>Другий параграф</p>Тег <BR /> - використовується для переведення, розриву рядка (кінцевого тегу немає). Тег <hr /> - горизонтальна лінія у рядку.{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Параметри тегу <HR>Призначенняalign. Вирівнює по краю чи центру (можливі значення: LEFT, CENTER, RIGHT)width. Встановлює довжину лінії в пікселях чи відсотках від довжини вікнаsize. Встановлює товщину лінії в пікселяхcolor. Вказує колір лінії
Заголовки всередині документа. Використовуються теги <h1>,<h2>,<h3>,<h4>,<h5>,<h6> (h1 – найбільший розмір, h6 – найменший). Форма запису: <h1>Заголовок розміру 1</h1>Приклад:<h1>Заголовок першого рівня</h1><h2>Заголовок другого рівня</h2><h3>Заголовок третього рівня</h3><h4>Заголовок четвертого рівня</h4><h5>Заголовок п'ятого рівня</h5><h6>Заголовок шостого рівня</h6>Горизонтальне вирівнювання тексту. Використовується параметр align в тегах <p> і <h1>…<h6>{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Значення параметру ALIGNДія параметруleft. Вирівнювання тексту по лівій межі вікнаcenter. Вирівнювання тексту по центру вікнаright. Вирівнювання тексту по правій межі вікнаjustify. Вирівнювання тексту по ширині вікна
1 / 13
Зміст слайдів
Номер слайду 1

Основи HTML. Правила побудови HTML-документів

Номер слайду 2

План. Основні поняття. Структура html-документа. Опис структури html-документа. Основні теги

Номер слайду 3

Основні поняття. Веб-документ – це текст, написаний мовою HTML чи іншою, який призначений для перегляду електронної інформації на екрані комп’ютера за допомогою браузера. Гіпертекст – це електронний документ, який містить гіперпосилання на інші документи. Гіпертекстова технологія – це інформаційна технологія, що базується на використанні гіпертекстів. Веб-документ, який ми бачимо на екрані браузера, називають веб-сторінкою. Це пов’язано з тим, що хорошим стилем вважається подання деякої частини інформації на одній умовній сторінці.

Номер слайду 4

Структура документа Програми мовою HTML містять інструкції, що називаються тегами. Всі теги мови HTML виділяються символами-обмежувачами (< і >), між якими записується ідентифікатор (ім’я) тега і, можливо, його параметри. Тегипарнінепарнівідкриваючізакриваючі

Номер слайду 5

Загальний вигляд HTML документу

Номер слайду 6

Опис структури HTML документу. Елемент doctype. Doctype повинен розміщуватись на самому початку HTML документу. У цьому розділі необхідно вказати той стандарт HTML згідно з яким браузеру потрібно інтерпретувати гіпертекстову мову розмітки. Елемент html. Елемент html це кореневий елемент документу. Любий HTML документ повинен починатися з тега и закінчуватись тегом . Елемент head. Елемент head містить мета-опис документу. Між тегами заголовка та вставляються теги метаінформації (), назва сторінки вікна у браузері (), а також список вмонтованих в документ таблиць стилів та сценаріїв клієнтських скриптів(<link>). Елемент body. Елемент body містить основний контент для відображення на сторінці. Між тегами <body> та </body> міститься розмітка, що безпосередньо виводиться на екран користувача (видимий контент).</p> </div> </div> </div> <div class="slide-transcript"> <div class="row"> <div class="col-md-5"> <a href="/uploads/files/694088/220900/236833_images/7.jpg" data-lightbox="slides" data-title="Слайд №7"><img src="/uploads/files/694088/220900/236833_images/thumb_7.jpg" width="100%" /></a> </div> <div class="col-md-7"> <div class="num">Номер слайду 7</div> <p>Система кодування символів. Система кодування символів, що застосована в документі визначається атрибутом charset елементу meta. Приклад:<meta charset="utf-8">Елемент title. Назва сторінки у вікні браузера визначається елементом title. Елемент title також використовується в:• Назві сторінки у вікні браузера• Історії перегляду Веб сторінок• Закладках• Результатах пошукових систем. Приклад:<title>Про HTML | Навчальний Веб ресурс для вивчення HTML.

Номер слайду 8

Мета-інформація опису сторінки. Для додавання мета-інформації опису сторінки додайте елемент meta з параметрами name, рівному "description" та параметром content, в який введіть необхідне описання. Приклади:Мета-інформація ключових слів сторінки. Для додавання мета-інформації ключових слів сторінки додайте елемент meta з параметрами name, рівному "keywords" та параметром content, в який введіть необхідне описання. Приклади:

Номер слайду 9

Приклад з тілом HTML документу: Приклад тіла HTML документу

Вітаю! Ви вивчаєте гіпертекстову мову розмітки!

HTML це мова розмітки для створення Веб сторінок.

Майбутнє за інформаційними технологіями

HTML це абревіатура від Hyper. Text Markup Language

  • Що таке HTML ?
  • Як створити HTML документ?
  • Синтаксис тегів
и, показано на рисунку.

Номер слайду 10

Результат виконання

Номер слайду 11

Теги тіла документа. Тег () – напівжирний текст. Форма запису: текст Тег () – текст курсивом. Форма запису: текст Тег - текст підкреслений. Форма запису: текст Тег () – текст перекресленим горизонтальною лінією. Форма запису: текст Тег - текст шрифтом більшого (ніж нерозмічена частина тексту) розміру. Форма запису: текст Тег - текст шрифтом меншого (ніж нерозмічена частина тексту) розміру. Тег - Зміщує текст у нижній індекс. Приклад: x1Тег - Зміщує текст у верхній індекс. Приклад: y2

Номер слайду 12

Форматування абзаців. Тег

- використовується для створення абзацу. Форма запису:

текст абзацу

Приклад:

Перший параграф

Другий параграф

Тег
- використовується для переведення, розриву рядка (кінцевого тегу немає). Тег
- горизонтальна лінія у рядку.{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Параметри тегу
Призначенняalign. Вирівнює по краю чи центру (можливі значення: LEFT, CENTER, RIGHT)width. Встановлює довжину лінії в пікселях чи відсотках від довжини вікнаsize. Встановлює товщину лінії в пікселяхcolor. Вказує колір лінії

Номер слайду 13

Заголовки всередині документа. Використовуються теги

,

,

,

,

,
(h1 – найбільший розмір, h6 – найменший). Форма запису:

Заголовок розміру 1

Приклад:

Заголовок першого рівня

Заголовок другого рівня

Заголовок третього рівня

Заголовок четвертого рівня

Заголовок п'ятого рівня
Заголовок шостого рівня
Горизонтальне вирівнювання тексту. Використовується параметр align в тегах

і

…

{5 C22544 A-7 EE6-4342-B048-85 BDC9 FD1 C3 A}Значення параметру ALIGNДія параметруleft. Вирівнювання тексту по лівій межі вікнаcenter. Вирівнювання тексту по центру вікнаright. Вирівнювання тексту по правій межі вікнаjustify. Вирівнювання тексту по ширині вікна

pptx
Додав(-ла)
Медвідь Христина Миколаївна
Пов’язані теми
Інформатика, 11 клас, Матеріали до уроків
Додано
11 лютого 2021
Переглядів
5998
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку
Рекомендовані матеріали
pptx
1133 0
Презентація "Вставка зображень в html-документ"
pptx
1386 0
Презентація "Гіпертекстові посилання"
docx
6329 4.7
«Застосування гіпертекстових, графічних, анімаційних та мультимедійних елементів на веб-сторінках»
zip
932 0
Додатки до відкритого уроку на тему: «Застосування гіпертекстових, графічних, анімаційних та мультимедійних елементів на веб-сторінках»
Схожі матеріали
ppt
2743 3
Презентація "Створення найпростішого калькулятора у середовищі візуального програмування Delphi"
docx
2927 5
Розробка відкритого бінарного заняття з дисциплін «ІНФОРМАТИКА ТА КОМП’ЮТЕРНА ТЕХНІКА» та «ЕКОНОМІКИ ПІДПРИЄМСТВА»
docx
3096 0
Урок "Сортування і фільтрація. Практична робота"
zip
3345 5
Урок "Аналіз даних за допомогою функцій табличного процесора"
docx
5262 0
"Конспект уроку з інформатики для 11 класу на тему "Електронне листування."
Завантажити
Зберегти на потім