Знакомство с веб-разработкой
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
10 questions
Bài 12: THUẬT TOÁN, CHƯƠNG TRÌNH MÁY TÍNH
Presentation
•
KG - University
13 questions
Piecewise Functions
Presentation
•
9th - 11th Grade
15 questions
EL PRETERITO - MINI LESSON
Presentation
•
9th - 12th Grade
11 questions
Protein Synthesis
Presentation
•
9th - 12th Grade
13 questions
OzariaCH2:Capstone
Presentation
•
9th - 11th Grade
13 questions
-AR Preterite verbs
Presentation
•
9th - 12th Grade
12 questions
Tananyag_HTML_alapjai_<>
Presentation
•
9th - 12th Grade
10 questions
Triangle Inequality Theorem
Presentation
•
10th - 12th Grade
Popular Resources on Wayground
24 questions
PBIS-HGMS Day 10
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Review 3
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
15 questions
HCS SCI 05 Summer School Assessment 3 Review
Quiz
•
5th Grade
35 questions
Lufkin Road Middle School Student Handbook & Policies Assessment
Quiz
•
7th Grade
18 questions
Geo 11.3 Area of Circles and Sectors
Quiz
•
9th - 11th Grade