Проектування та верстка веб-сторінок
Presentation
•
Computers
•
10th Grade
•
Practice Problem
•
Medium
Марія Цимбал
Used 7+ times
FREE Resource
19 Slides • 13 Questions
1
Проектування та
верстка веб-сторінок
By Марія Цимбал
2
Multiple Choice
Веб-дизайнер опікується...
який вигляд матиме сайт
написанням коду, який відобразить браузер
просуванням сайту
захистом сайту від хакерів
3
Multiple Choice
Веб-розробник опікується...
який вигляд матиме сайт
написанням коду, який відобразить браузер у вигляді, як запропонував веб-дизайнер
просуванням сайту
захистом сайту від хакерів
4
Існує лише 2 напрямки для створення сайтів:
ручний та автоматизований
5
Автоматизоване створення сайтів - використовуються вже написані програмістами системи керування вмістом сайту (CMS)
Такі ресурсі важко (хоча і можливо) підлаштувати під свої конкретні потреби, які базово не передбачені, та дані сайти частіше піддаються хакерським атакам через свою відкритість коду.
6
Під час ручної розробки сайтів потрібно володіти мовами програмування
Мінімальний набір це:
7
Перший інструмент веб-розробника:
редактор коду
8
Розглянемо найпоширені редактори коду
9
Безкоштовний редактор від Microsoft, один з найпопулярніших, має відкритий вихідний код, властивості можна легко розширити
visual studio code
10
редактор тільки для Windows, програма дуже швидка, має багато інструментів для
розширення та персоналізації можливостей
Notepad++
11
Має безкоштовну та преміум версії.
Програма легка та швидка в роботі. Надає автодоповнення, підсвічування синтаксису, виділення синтаксичних помилок, можна додавати плагіни.
Sublime text 3
Ми будемо працювати з цим редактором.
12
Для розуміння процесу створення сайту необхідне опанування мови розмітки гіпертексту
13
Multiple Choice
Як називаються спец. програми для обробки HTML документів
браузери
редактори коду
середовища програмування
редактори презентацій
14
Multiple Choice
Гіпертекст - це
Текст, який ми вводимо в пошуковий рядок
браузера
Текст, написаний курсивом
Текст, який ми записуємо в зошиті
Ел. документ, що містить зв'язки з іншими ел. документами (зв'язки = гіперпосилання)
15
Бо за допомогою її лише можна вміло оформити та розташувати текст, зображення, таблиці. Та з обчисленням, змінними, циклами працювати неможливо.
HTML не є мовою програмування!!!
16
HTML-документи містяться у файлах з розширенням .htm або .html
17
Програмна частина будується на основі тегів
18
Різновиди тегів
19
...тобто можуть бути записані як великими, так і маленькими літерами
Теги не чутливі до регістра
20
Сторінка завжди починається з відкриваючого тегу <html> та закінчується тегом </html> і складається з двох обов'язкових блоків:
голови (head) і тіла (body), які записуються послідовно.
21
22
23
24
Multiple Choice
html- це
мова програмування
мова гіпертекстової розмітки
назва веб-сайту програмістів
текстовий документ
25
Multiple Choice
Файли з гіпертекстовою розміткою мають розширення
.docx
.css
.html
.jjk
26
Fill in the Blanks
Type answer...
27
Multiple Select
Обери парні теги
<h1></h1>
<hr>
<!-- -->
<html></html>
<br>
28
Multiple Select
Обери непарні теги
<meta>
<link>
<a> </a>
<img>
<body> </body>
29
Multiple Choice
Теги - регістрозалежні
так
ні
30
Multiple Choice
Сторінка html завжди починається з тегу ...
<body>
<head>
</html>
<html>
31
Multiple Choice
Сторінка html завжди закінчується тегом...
</html>
<html>
</head>
<p>
32
Multiple Choice
Сторінка має два обов'язкові блоки
h,p
html,css
head, body
<></>
Проектування та
верстка веб-сторінок
By Марія Цимбал
Show answer
Auto Play
Slide 1 / 32
SLIDE
Similar Resources on Wayground
23 questions
Down in the Deep
Presentation
•
10th Grade
27 questions
Conditional Structures in Arduino
Presentation
•
10th Grade
25 questions
1.3 Internet, DNS, Hosting and The Cloud
Presentation
•
10th Grade
24 questions
Email Etiquette
Presentation
•
10th Grade
24 questions
MAIL MERGE
Presentation
•
10th Grade
27 questions
Інформаційнф системи. Інформаційнф технології
Presentation
•
10th Grade
23 questions
Python Strings and Character Encoding
Presentation
•
10th Grade
22 questions
Dimensional Analysis
Presentation
•
10th Grade
Popular Resources on Wayground
11 questions
Hallway & Bathroom Expectations
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Assessment 2
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
12 questions
2026 TAP Technology in the Classroom
Presentation
•
Professional Development
15 questions
HCS SCI 05 Summer School Assessment 2 Review
Quiz
•
5th Grade
15 questions
HCS SCI 04 Summer School Review 2
Quiz
•
4th Grade
59 questions
Geometry Unit 3 Review
Quiz
•
9th - 12th Grade
14 questions
FAST ELA READING SMAPLE TEST MATERIALS
Passage
•
3rd Grade