Знакомство с веб-разработкой
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
12 questions
Food Web
Presentation
•
9th - 12th Grade
10 questions
Operators in Python
Presentation
•
9th - 12th Grade
12 questions
Graphing Linear Inequalities Review
Presentation
•
9th - 12th Grade
15 questions
Domain 1 - Lesson 4: Configure Updates
Presentation
•
9th - 12th Grade
10 questions
CS2 Conditionals
Presentation
•
9th - 12th Grade
10 questions
Искусственный интеллект
Presentation
•
University
13 questions
Гарні новини — де їх знайти та як упізнати?
Presentation
•
9th - 12th Grade
13 questions
TUGAS PELATIHAN TEKKOMDIK SMA SEMIN
Presentation
•
9th - 12th Grade
Popular Resources on Wayground
6 questions
Secondary Safety Quiz
Presentation
•
9th - 12th Grade
10 questions
MyPath Diagnostic Overview
Presentation
•
6th - 8th Grade
20 questions
Lab Safety Quiz
Quiz
•
6th Grade
21 questions
Continents and Oceans
Quiz
•
6th Grade
20 questions
Adding and Subtracting Decimals
Quiz
•
5th Grade
20 questions
Parts of Speech
Quiz
•
5th Grade
16 questions
Subject & Predicate
Quiz
•
5th Grade
21 questions
Lab Safety
Quiz
•
10th Grade
Discover more resources for Computers
20 questions
Early Computing
Quiz
•
7th - 12th Grade
20 questions
Module 1 Topic 1 Vocabulary
Quiz
•
9th - 12th Grade
10 questions
Exploring Computer Hardware and Software Components
Interactive video
•
6th - 10th Grade
14 questions
Introduction to Digital Citizenship
Quiz
•
9th Grade
39 questions
Safety Review
Quiz
•
9th - 12th Grade
20 questions
Digital Citizenship
Quiz
•
8th - 12th Grade
25 questions
OSHA and Lab Safety
Quiz
•
9th Grade
22 questions
Electronic Computing
Quiz
•
8th - 12th Grade