🗊Презентация Введення в HTML

Нажмите для полного просмотра!
Введення в HTML, слайд №1Введення в HTML, слайд №2Введення в HTML, слайд №3Введення в HTML, слайд №4Введення в HTML, слайд №5Введення в HTML, слайд №6Введення в HTML, слайд №7Введення в HTML, слайд №8Введення в HTML, слайд №9Введення в HTML, слайд №10Введення в HTML, слайд №11

Вы можете ознакомиться и скачать презентацию на тему Введення в HTML. Доклад-сообщение содержит 11 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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


Слайд 1


Введення в HTML, слайд №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



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