8_клас_Поняття про мову гіпертекстової розмітки
Presentation
•
Computers
•
8th Grade
•
Practice Problem
•
Medium
Наталія Володимирівна Вінокурова
Used 4+ times
FREE Resource
16 Slides • 8 Questions
1
Поняття про мову гіпертекстової розмітки
By Наталія Володимирівна Вінокурова
2
HTML (мова гіпертекстової розмітки) —
це код, який використовується для структурування і відображення веб-сторінки та її контенту.
3
Multiple Choice
Що таке HTML?
Мова гіпертекстової розмітки документів для інтернету
Додаткова інформація, що записується біля відкривального тегу
Команда, що записується в кутових дужках < > для виконання браузером
Мова програмування, яка використовується для створення сайтів
4
Створювати вебсторінки мовою HTML можна двома способами:
за допомогою спеціального редактора HTML, у якому є заготовки та фрагменти готового коду
писати безпосередньо на HTML
5
Мова HTML існує в декількох варіантах і продовжує розвиватися, але її конструкції, найімовірніше, будуть використовуватися і надалі.
Вивчаючи й пізнаючи HTML детальніше, створюючи документ на початку вивчення HTML і розширюючи його, наскільки це можливо, ми маємо змогу створювати документи, які можуть бути переглянуті багатьма браузерами, — як зараз, так і в майбутньому.
6
Типовий простий вебдокумент складається з:
текстових блоків (абзаців, списків, таблиць)
малюнків невеликих розмірів
горизонтальних розмежувальних ліній
гіперпосилань
7
Основою мови HTML є дескриптори — команди, що вказують на правила, за якими форматуються документи. Команди мови HTML називають тегами.
8
Отже, крім текстових даних, вебсторінка містить невидимий для користувача HTML-код, тобто набір тегів. Під час відкриття вебсторінки браузер використовує цей набір для відображення її елементів у заданому порядку.
9
Назва кожного тегу — це одна або декілька літер, взятих у кутові дужки (< та >), яким відповідають певні англійські слова, що пояснюють їх призначення.
Наприклад, назва тегу <BODY> виникла від англійського слова body — тіло, головна частина, а сам тег використовується для створення вмісту вебсторінки.
10
Multiple Choice
Що таке тег?
Мова гіпертекстової розмітки документів для інтернету
Додаткова інформація, що записується біля відкривального тегу
Команда, що записується в кутових дужках < > для виконання браузером
Мова програмування, яка використовується для створення сайтів
11
Тег записують так:
12
Пару тегів (відкриваючий і закриваючий) називають контейнером.
Закриваючий тег відрізняється від відкриваючого лише тим, що в коді перед його іменем ставиться символ:
/
Більшість тегів є парними, однак існують й одинарні.
13
Один тег може мати кілька параметрів — атрибутів. Наприклад,
<Тег параметр_1= значення_1 параметр_2 = значення_2 > текст, що відображається на сторінці </Тег>
Закриваючий тег не містить жодних параметрів. На відміну від нього, у відкриваючому тегу вказуються всі необхідні параметри.
14
Multiple Choice
Що таке атрибут?
Мова гіпертекстової розмітки документів для інтернету
Додаткова інформація, що записується біля відкривального тегу
Команда, що записується в кутових дужках < > для виконання браузером
Мова програмування, яка використовується для створення сайтів
15
Правила запису параметрів: після назви тегу після пропуску зазначається ім’я параметра наприклад,
Далі вказується знак «=» й у лапках записується значення параметра,
За необхідності далі вказують інші параметри через пропуск. Після останнього параметра записується символ:
>
16
Теги можуть бути вкладеними, тобто один контейнер може перебувати всередині іншого, у такому разі загальний запис виглядатиме так:
Для підготовки найпростішого HTML-файлу можна використати текстовий редактор Блокнот, після написання коду в якому слід задати файлу ім’я та вказати розширення — html.
17
Multiple Select
Що є атрибутами у наведеному HTML-коді?
</html>
bgcolor = "green"
<body>
text = "white"
18
Multiple Select
Які теги є парними?
<br>
<u>
<н>
<b>
19
HTML-документа можна вставляти маркований і нумерований списки. Для цього використовуються відповідні теги:
Маркований список
Нумерований список
20
Fill in the Blanks
Type answer...
21
Програма мовою HTML має таку структуру:
22
Fill in the Blanks
Type answer...
23
На відображення документа в браузері не впливають символи кінця рядка, які отримують натискуванням клавіші Enter або Shift+ Enter, а також пропуски. Для перенесення тексту на новий рядок використовують одинарний тег <BR>.
Для створення абзаців використовують парний тег:
При використанні тегу <Р> спочатку вставляється порожній рядок, далі текст виводиться з початку нового рядка. Якщо вжито тег , то порожній рядок не вставляється.
24
Fill in the Blanks
Type answer...
Поняття про мову гіпертекстової розмітки
By Наталія Володимирівна Вінокурова
Show answer
Auto Play
Slide 1 / 24
SLIDE
Similar Resources on Wayground
19 questions
8 sinf veb sayt
Presentation
•
8th Grade
20 questions
Basic Python Review Lesson
Presentation
•
9th Grade
18 questions
Teknologi Informasi dan Komunikasi
Presentation
•
8th Grade
18 questions
Линейный алгоритм
Presentation
•
8th Grade
19 questions
Active and Passive Voice
Presentation
•
7th - 8th Grade
16 questions
Balancing Chemical Equations
Presentation
•
8th Grade
20 questions
MS DOS
Presentation
•
8th Grade
18 questions
Transformations Lesson
Presentation
•
8th Grade
Popular Resources on Wayground
20 questions
"What is the question asking??" Grades 3-5
Quiz
•
1st - 5th Grade
20 questions
“What is the question asking??” Grades 6-8
Quiz
•
6th - 8th Grade
10 questions
Fire Safety Quiz
Quiz
•
12th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
34 questions
STAAR Review 6th - 8th grade Reading Part 1
Quiz
•
6th - 8th Grade
20 questions
“What is the question asking??” English I-II
Quiz
•
9th - 12th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
47 questions
8th Grade Reading STAAR Ultimate Review!
Quiz
•
8th Grade
Discover more resources for Computers
20 questions
“What is the question asking??” Grades 6-8
Quiz
•
6th - 8th Grade
34 questions
STAAR Review 6th - 8th grade Reading Part 1
Quiz
•
6th - 8th Grade
47 questions
8th Grade Reading STAAR Ultimate Review!
Quiz
•
8th Grade
44 questions
8th Grade Social Studies - Staar Review 2021
Quiz
•
8th Grade
20 questions
8th Grade Science STAAR Review
Quiz
•
8th Grade
8 questions
Amoeba Sister Asexual vs Sexual Reproduction
Interactive video
•
8th Grade
15 questions
Pythagorean Theorem Word Problems Quizizz
Quiz
•
8th Grade
29 questions
8th Grade Social Studies STAAR Review Part 2
Quiz
•
8th Grade