Знакомство с веб-разработкой
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
Programming Constructs & Techniques Part 2
Presentation
•
10th - 12th Grade
12 questions
Classification vs. Clustering
Presentation
•
9th Grade - University
12 questions
AFQ table
Presentation
•
9th - 12th Grade
8 questions
Tananyag_HTML_táblázatok
Presentation
•
9th - 12th Grade
13 questions
Plural forms of nouns in German
Presentation
•
9th - 12th Grade
10 questions
Я у кіберпросторі
Presentation
•
9th - 12th Grade
13 questions
PÁGINAS WEB CULTURA DIGITAL 2
Presentation
•
9th - 12th Grade
13 questions
Mastering SUMIF & SUMIFS Functions
Presentation
•
9th - 12th Grade
Popular Resources on Wayground
5 questions
A Home on the Shore
Quiz
•
3rd Grade
28 questions
US History Regents Review
Quiz
•
11th Grade
6 questions
A Horse Tale
Quiz
•
3rd Grade
20 questions
Math Review
Quiz
•
3rd Grade
10 questions
Juneteenth History and Significance
Interactive video
•
5th - 8th Grade
20 questions
Dividing Fractions
Quiz
•
5th Grade
55 questions
A Long Walk to Water Final Review
Quiz
•
6th - 8th Grade
10 questions
Equation Word Problems
Quiz
•
7th Grade
Discover more resources for Computers
28 questions
US History Regents Review
Quiz
•
11th Grade
20 questions
Insurance
Quiz
•
9th - 12th Grade
10 questions
Juneteenth: History and Significance
Interactive video
•
7th - 12th Grade
10 questions
7.3-7.4 Quiz
Quiz
•
11th Grade
20 questions
Summer Geometry QUIZ (Week 2)
Quiz
•
9th Grade
6 questions
Mayan Mathematics part 1
Presentation
•
9th - 12th Grade
25 questions
Biology Regents Review
Quiz
•
9th Grade
40 questions
Flags of the World
Quiz
•
KG - Professional Dev...