Знакомство с веб-разработкой
Presentation
•
Computers
•
9th - 12th Grade
•
Practice Problem
•
Hard
Максим Хлебус
Used 53+ times
FREE Resource
8 Slides • 8 Questions
1
Знакомство с
веб-разработкой
2
Multiple Choice
Что такое HTML?
Это веб-сайт в интернете
Это язык гипертекстовой разметки
Это браузер
Это язык программирования сайтов
3
(от англ. Hypertext Markup Language ) это язык разметки гипертекста, разработанным британским ученным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах.
HTML
Язык Разметки Гипертекста
Совокупность текстов, ссылок, картинок, таблиц, которые взаимосвязаны.
Совокупность тегов, с помощью которых можно определить место на веб-странице для картинки, текста, таблицы и др.
Набор тегов, с помощью которых осуществляется разметка в HTML.
4
Multiple Choice
Однако начало истории HTML относится к 1969 году, когда Чарльз Гольдфарб, работающий в компании IBM, создал прототип языка для разметки технической документации. Как впоследствии назвали этот язык?
TML
GML
IBM-Text
USA-Text
5
В 1986 году ему присвоили международный стандарт — SGML (Standard Generalized Markup Language — стандартный обобщённый язык разметки).
GML
Этот обобщенный метаязык предназначен для построения систем логической, структурной разметки любых разновидностей текстов.
6
Multiple Choice
На картинке представлен "скелет" HTML. Как вы думаете, что находится внутри <HEAD> и </HEAD>?
Начало и конец HTML документа
Заголовок документа
Голова HTML документа
Тело документа
7
<HTML> и </HTML> - это начало и конец HTML документа.
<HEAD> и </HEAD> - голова HTML документа. В голову документа вставляют различные служебные теги (мета теги).
<title> и </title> - заголовок документа. Это один из служебных тегов, который размещается в голове HTML документа между <HEAD> и </HEAD>.
<BODY> и </BODY> - тело документа. В теле документа находится все, что мы хотим видеть на веб-странице: текст, картинки, таблицы, аудио, видео и т. д.
8
Multiple Choice
А как вообще называются эти связки, например
<HEAD> и </HEAD> или <BODY> и </BODY>?
Одиночные теги
Одиночные гипертексты
Парные теги
Парные гипертексты
9
В парные теги можно вкладывать другие теги. Например, как в списках:
Теги бывают парными и одиночными.
Парные теги могут содержать текст и другие теги.
У парных тегов, в отличие от одиночных, есть вторая половинка — закрывающий тег:
В закрывающей части парных тегов перед именем ставится символ / («слэш»).
<h1>Текст заголовка</h1>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
</ul>
Не все теги можно вкладывать в другие теги, например, тег <h1> нельзя вкладывать в <p>.
10
Multiple Choice
У вложенных тегов всегда нужно следить за правильным порядком закрытия. Выберите правильный вариант кода.
<ul><li>Элемент списка</ul></li>
<ul><li>Элемент списка<li><ul>
<ul><li>Элемент списка<ul><li>
<ul><li>Элемент списка</li></ul>
11
Multiple Choice
Что из себя представляет тег <p>?
Текстовый абзац
Текст заголовка
Текст курсивом
Текст жирным шрифтом
12
Существуют не только парные, но и одиночные теги. Например, тег <img> позволяет добавить картинку в разметку.
Сам по себе <img> не имеет смысла. Чтобы этот тег был действительно полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src:
<img src="keks.png">
У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:
<тег атрибут1="значение1" атрибут2="значение2">
13
Multiple Choice
За что отвечают тут дополнительные атрибуты в теге <img>?
<img src="keks.png" width="200" height="100">
Задается скорость скачивания картинки
Задаются размеры картинки
Задается место, где будет располагаться картинка на сайте
Ничего не задается
14
Multiple Choice
С HTML понятно. А что же такое CSS?
Стандартизированный язык разметки документов для просмотра веб-страниц в браузере
Это язык, с помощью которого описывается внешний вид документа HTML
Скриптовый язык программирования
Мультипарадигменный язык программирования
15
CSS расшифровывается как «Cascading Style Sheets», то есть «каскадные таблицы стилей».
Язык CSS отвечает за внешний вид страницы.
Каждому тегу в HTML соответствует так называемый селектор CSS.
p {
color: red;
}
Например, к тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет.
16
Переходим к практической части нашего урока
Ссылка на ресурс, по которому будем практиковаться: https://code.mu/ru/markup/book/prime/html/page-structure/
Ссылка находится в сетевой папке, ЭЛ-314 или ЭЛ-214, далее заходите в папку своего класса с подгруппой, там находите папочку ОБМЕН, там будет документ с ссылкой на нужный нам ресурс.
Как создать html-документ:
Нажать правую кнопку мыши на рабочем столе -> Создать -> Текстовый документ
В Текстовом документе нажать Файл -> Сохранить как -> Выбрать Рабочий стол
-> Тип файла выбрать "Все файлы (*.*)" -> Имя файла дать по примеру "Иванов Иван.html" -> Кодировку поставить UTF-8 -> Нажать Сохранить.
Не закрывайте этот документ, в нем вы будете практиковаться и смотреть как выглядит ваш сайтик в браузере:)
Знакомство с
веб-разработкой
Show answer
Auto Play
Slide 1 / 16
SLIDE
Similar Resources on Wayground
9 questions
Алгоритм
Presentation
•
9th - 12th Grade
10 questions
CHAPTER 2 : so that and in order to
Presentation
•
9th - 12th Grade
10 questions
ICT Grade 11 Final Exam Practice
Presentation
•
9th - 12th Grade
12 questions
C++ Operators w\ Variables
Presentation
•
9th - 12th Grade
12 questions
38 JavaScript Wyświetlanie komunikatów
Presentation
•
KG
10 questions
Factoring trinomials a > 1
Presentation
•
9th - 11th Grade
13 questions
Systems of Inequalities
Presentation
•
9th - 11th Grade
Popular Resources on Wayground
15 questions
Grade 3 Simulation Assessment 1
Quiz
•
3rd Grade
22 questions
HCS Grade 4 Simulation Assessment_1 2526sy
Quiz
•
4th Grade
16 questions
Grade 3 Simulation Assessment 2
Quiz
•
3rd Grade
19 questions
HCS Grade 5 Simulation Assessment_1 2526sy
Quiz
•
5th Grade
17 questions
HCS Grade 4 Simulation Assessment_2 2526sy
Quiz
•
4th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
24 questions
HCS Grade 5 Simulation Assessment_2 2526sy
Quiz
•
5th Grade
20 questions
Math Review
Quiz
•
3rd Grade
Discover more resources for Computers
10 questions
Exploring Digital Citizenship Essentials
Interactive video
•
6th - 10th Grade
20 questions
Inventor Terms Exercise #1a
Quiz
•
9th Grade
31 questions
Inventor Vocabulary Review Sheet
Quiz
•
9th Grade
26 questions
Final Exam Review 1
Quiz
•
11th Grade
10 questions
Exploring Cybersecurity Techniques and Threats
Interactive video
•
6th - 10th Grade