🗊Презентация Мова розмітки гіпертексту HTML 5

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Мова розмітки гіпертексту HTML 5, слайд №1Мова розмітки гіпертексту HTML 5, слайд №2Мова розмітки гіпертексту HTML 5, слайд №3Мова розмітки гіпертексту HTML 5, слайд №4Мова розмітки гіпертексту HTML 5, слайд №5Мова розмітки гіпертексту HTML 5, слайд №6Мова розмітки гіпертексту HTML 5, слайд №7Мова розмітки гіпертексту HTML 5, слайд №8Мова розмітки гіпертексту HTML 5, слайд №9Мова розмітки гіпертексту HTML 5, слайд №10Мова розмітки гіпертексту HTML 5, слайд №11Мова розмітки гіпертексту HTML 5, слайд №12
Скачать
Вы можете ознакомиться и скачать презентацию на тему Мова розмітки гіпертексту HTML 5. Доклад-сообщение содержит 12 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Мова розмітки гіпертексту HTML 5, слайд №1
Описание слайда:

Слайд 2


HTML (від англ. Hyper Text Markup Language - «мова розмітки гіпертексту») - стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Мова HTML інтерпретується браузерами і відображається у вигляді документа в зручній для людини формі.
Описание слайда:
HTML (від англ. Hyper Text Markup Language - «мова розмітки гіпертексту») - стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML). Мова HTML інтерпретується браузерами і відображається у вигляді документа в зручній для людини формі.

Слайд 3


Браузери
Описание слайда:
Браузери

Слайд 4


Середовище розробки
Описание слайда:
Середовище розробки

Слайд 5


HTML-документ Всю інформацію нашого сайту ми зберігаємо в текстовому документі: де index – назва документу, html – розширення файлу
Описание слайда:
HTML-документ Всю інформацію нашого сайту ми зберігаємо в текстовому документі: де index – назва документу, html – розширення файлу

Слайд 6


Загальна структура сторінки Все те, що ми будем писати у html-файлі, буде зчитувати браузер, ми повинні оголосити який далі буде тип файлу. Тому першим елементом буде завжди <!DOCTYPE HTML> Окрім того, що ми оголосили браузеру, який в нас буде тип інформації у файлі, ми повинні показати йому, в якому діапазоні все це буде відбуватись. Тому далі в нас буде йти подвійний тег: <html></html> Після того, як ми оголосили тип інформації у нашому файлі, показали межі, в яких будемо працювати, наша наступна частина структури html-файлу буде нагадувати людину. В ній буде голова - <head></head> і тіло - <body></body>. <head></head> <head></head> - область яка не відображається безпосередньо на сторінці. Вона призначена для браузера, як область в якій будуть вказані команди для кращої обробки данних. <body></body> <body></body> - тег в якому буде писатись наш основний код. Для зручності теги які лежать між іншими тегами робляться з відступом Tab. Це дає змогу краще бачити код, його початок і кінець та ієрархію. Якщо ж ми подивимось на теги <head> I <body>, то побачимо, що вони лежать на одному рівні. Це пов’язано з тим, що вони між собою рівнозначні і до того ж лежать у тегу <html>
Описание слайда:
Загальна структура сторінки Все те, що ми будем писати у html-файлі, буде зчитувати браузер, ми повинні оголосити який далі буде тип файлу. Тому першим елементом буде завжди <!DOCTYPE HTML> Окрім того, що ми оголосили браузеру, який в нас буде тип інформації у файлі, ми повинні показати йому, в якому діапазоні все це буде відбуватись. Тому далі в нас буде йти подвійний тег: <html></html> Після того, як ми оголосили тип інформації у нашому файлі, показали межі, в яких будемо працювати, наша наступна частина структури html-файлу буде нагадувати людину. В ній буде голова - <head></head> і тіло - <body></body>. <head></head> <head></head> - область яка не відображається безпосередньо на сторінці. Вона призначена для браузера, як область в якій будуть вказані команди для кращої обробки данних. <body></body> <body></body> - тег в якому буде писатись наш основний код. Для зручності теги які лежать між іншими тегами робляться з відступом Tab. Це дає змогу краще бачити код, його початок і кінець та ієрархію. Якщо ж ми подивимось на теги <head> I <body>, то побачимо, що вони лежать на одному рівні. Це пов’язано з тим, що вони між собою рівнозначні і до того ж лежать у тегу <html>

Слайд 7


Зразок HTML-документу <!DOCTYPE html> <html> <head> <title>Моя перша сторінка</title> </head> <body> <h1>Мій перший заголовок</h1> <p>Мій перший параграф</p> </body> </html>
Описание слайда:
Зразок HTML-документу <!DOCTYPE html> <html> <head> <title>Моя перша сторінка</title> </head> <body> <h1>Мій перший заголовок</h1> <p>Мій перший параграф</p> </body> </html>

Слайд 8


HTML-теги Тег – це команда, яка буде оброблятись нашим браузером і відтворюватись у доступному для нас вигляді. Не має значення яким регістром писати теги. <tagname>Вміст тегу</tagname> Теги бувають одинарні (пустими) і подвійні. Одинарні теги часто використовуються для «команд системи» (далі ми зустрінемось з ними) , але вони використовуються і для оформлення нашого html-файлу. Приклад подвійного тегу: <h1>Заголовок 1-го рівня</h1> Приклад одинарного (пустого) тегу: <br>
Описание слайда:
HTML-теги Тег – це команда, яка буде оброблятись нашим браузером і відтворюватись у доступному для нас вигляді. Не має значення яким регістром писати теги. <tagname>Вміст тегу</tagname> Теги бувають одинарні (пустими) і подвійні. Одинарні теги часто використовуються для «команд системи» (далі ми зустрінемось з ними) , але вони використовуються і для оформлення нашого html-файлу. Приклад подвійного тегу: <h1>Заголовок 1-го рівня</h1> Приклад одинарного (пустого) тегу: <br>

Слайд 9


Синтаксис тегу
Описание слайда:
Синтаксис тегу

Слайд 10


Приклади декількох тегів <h1></h1> - заголовок <p></p> - параграф <i></i> - курсив <b></b> - жирність <sub></sub> - нижній індекс тексту <sup ></sup> - ступінь <a></a> - посилання <del></del> - закреслення <ins></ins> - підкреслення <br/> - новий рядок <hr/> - лінія <img src=” ”> - картинка <blockquote></blockquote> - виділення цитат
Описание слайда:
Приклади декількох тегів <h1></h1> - заголовок <p></p> - параграф <i></i> - курсив <b></b> - жирність <sub></sub> - нижній індекс тексту <sup ></sup> - ступінь <a></a> - посилання <del></del> - закреслення <ins></ins> - підкреслення <br/> - новий рядок <hr/> - лінія <img src=” ”> - картинка <blockquote></blockquote> - виділення цитат

Слайд 11


Додаткові джерела інформації: https://webref.ru/ https://webref.ru/html/!doctype https://webref.ru/html/!-- https://webref.ru/html/a https://webref.ru/html/b https://webref.ru/html/blockquote https://webref.ru/html/br https://webref.ru/html/del https://webref.ru/html/h1 https://webref.ru/html/img https://webref.ru/html/ins https://webref.ru/html/ol https://webref.ru/html/ul https://webref.ru/html/li https://webref.ru/html/small https://webref.ru/html/sub https://webref.ru/html/sup або https://webref.ru/ https://www.w3schools.com/tags/default.asp
Описание слайда:
Додаткові джерела інформації: https://webref.ru/ https://webref.ru/html/!doctype https://webref.ru/html/!-- https://webref.ru/html/a https://webref.ru/html/b https://webref.ru/html/blockquote https://webref.ru/html/br https://webref.ru/html/del https://webref.ru/html/h1 https://webref.ru/html/img https://webref.ru/html/ins https://webref.ru/html/ol https://webref.ru/html/ul https://webref.ru/html/li https://webref.ru/html/small https://webref.ru/html/sub https://webref.ru/html/sup або https://webref.ru/ https://www.w3schools.com/tags/default.asp

Слайд 12


Домашнє завдання: Розробити HTML сторінку з будь-яким змістом в якій використайте як мінімум 15 різних тегів
Описание слайда:
Домашнє завдання: Розробити HTML сторінку з будь-яким змістом в якій використайте як мінімум 15 різних тегів

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию