Знакомство с веб-разработкой

Presentation

•

Computers

•

9th - 12th Grade

•

Practice Problem

•

Hard

Максим Хлебус

Used 53+ times

FREE Resource

8 Slides • 8 Questions

Знакомство с

веб-разработкой

Multiple Choice

Что такое HTML?

Это веб-сайт в интернете

Это язык гипертекстовой разметки

Это браузер

Это язык программирования сайтов

(от англ. Hypertext Markup Language ) это язык разметки гипертекста, разработанным британским ученным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах.

HTML

Язык Разметки Гипертекста

Совокупность текстов, ссылок, картинок, таблиц, которые взаимосвязаны.

Совокупность тегов, с помощью которых можно определить место на веб-странице для картинки, текста, таблицы и др.

Набор тегов, с помощью которых осуществляется разметка в HTML.

Multiple Choice

Однако начало истории HTML относится к 1969 году, когда Чарльз Гольдфарб, работающий в компании IBM, создал прототип языка для разметки технической документации. Как впоследствии назвали этот язык?

TML

GML

IBM-Text

USA-Text

В 1986 году ему присвоили международный стандарт — SGML (Standard Generalized Markup Language — стандартный обобщённый язык разметки).

GML

Этот обобщенный метаязык предназначен для построения систем логической, структурной разметки любых разновидностей текстов.

Multiple Choice

На картинке представлен "скелет" HTML. Как вы думаете, что находится внутри <HEAD> и </HEAD>?

Начало и конец HTML документа

Заголовок документа

Голова HTML документа

Тело документа

<HTML> и </HTML> - это начало и конец HTML документа.
<HEAD> и </HEAD> - голова HTML документа. В голову документа вставляют различные служебные теги (мета теги).
<title> и </title> - заголовок документа. Это один из служебных тегов, который размещается в голове HTML документа между <HEAD> и </HEAD>.
<BODY> и </BODY> - тело документа. В теле документа находится все, что мы хотим видеть на веб-странице: текст, картинки, таблицы, аудио, видео и т. д.

Multiple Choice

А как вообще называются эти связки, например

<HEAD> и </HEAD> или <BODY> и </BODY>?

Одиночные теги

Одиночные гипертексты

Парные теги

Парные гипертексты

В парные теги можно вкладывать другие теги. Например, как в списках:

Теги бывают парными и одиночными.
Парные теги могут содержать текст и другие теги.
У парных тегов, в отличие от одиночных, есть вторая половинка — закрывающий тег:

В закрывающей части парных тегов перед именем ставится символ / («слэш»).

<h1>Текст заголовка</h1>

<ul>

<li>Элемент списка 1</li>

<li>Элемент списка 2</li>

</ul>

Не все теги можно вкладывать в другие теги, например, тег <h1> нельзя вкладывать в <p>.

Multiple Choice

У вложенных тегов всегда нужно следить за правильным порядком закрытия. Выберите правильный вариант кода.

<ul><li>Элемент списка</ul></li>

<ul><li>Элемент списка<li><ul>

<ul><li>Элемент списка<ul><li>

<ul><li>Элемент списка</li></ul>

Multiple Choice

Что из себя представляет тег <p>?

Текстовый абзац

Текст заголовка

Текст курсивом

Текст жирным шрифтом

Существуют не только парные, но и одиночные теги. Например, тег <img> позволяет добавить картинку в разметку.
Сам по себе <img> не имеет смысла. Чтобы этот тег был действительно полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src:

У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:

<тег атрибут1="значение1" атрибут2="значение2">

Multiple Choice

За что отвечают тут дополнительные атрибуты в теге <img>?

Задается скорость скачивания картинки

Задаются размеры картинки

Задается место, где будет располагаться картинка на сайте

Ничего не задается

Multiple Choice

С HTML понятно. А что же такое CSS?

Стандартизированный язык разметки документов для просмотра веб-страниц в браузере

Это язык, с помощью которого описывается внешний вид документа HTML

Скриптовый язык программирования

Мультипарадигменный язык программирования

CSS расшифровывается как «Cascading Style Sheets», то есть «каскадные таблицы стилей».
Язык CSS отвечает за внешний вид страницы.
Каждому тегу в HTML соответствует так называемый селектор CSS.

p {

color: red;

}

Например, к тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет.

Переходим к практической части нашего урока

Ссылка на ресурс, по которому будем практиковаться: https://code.mu/ru/markup/book/prime/html/page-structure/
Ссылка находится в сетевой папке, ЭЛ-314 или ЭЛ-214, далее заходите в папку своего класса с подгруппой, там находите папочку ОБМЕН, там будет документ с ссылкой на нужный нам ресурс.
Как создать html-документ:
1. Нажать правую кнопку мыши на рабочем столе -> Создать -> Текстовый документ
2. В Текстовом документе нажать Файл -> Сохранить как -> Выбрать Рабочий стол
  -> Тип файла выбрать "Все файлы (*.*)" -> Имя файла дать по примеру "Иванов Иван.html" -> Кодировку поставить UTF-8 -> Нажать Сохранить.
3. Не закрывайте этот документ, в нем вы будете практиковаться и смотреть как выглядит ваш сайтик в браузере:)

Знакомство с

веб-разработкой

Show answer

Auto Play

Slide 1 / 16

SLIDE

Similar Resources on Wayground

11 questions

Formatarea textului - pagini web

Lesson

•

9th - 12th Grade

14 questions

Balancing Chemical Equations Review

Lesson

•

9th - 12th Grade

14 questions

Percent Yield

Lesson

•

9th - 12th Grade

10 questions

3.3 Quadratic Formula

Lesson

•

9th - 11th Grade

14 questions

2.5 Piecewise Functions

Lesson

•

9th - 12th Grade

11 questions

Balancing, Conservation and Reaction Types Review

Lesson

•

9th - 12th Grade

14 questions

History of Education in America

Lesson

•

9th - 12th Grade

13 questions

Types of Chemical Reactions

Lesson

•

9th - 12th Grade

Popular Resources on Wayground

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

29 questions

Alg. 1 Section 5.1 Coordinate Plane

Quiz

•

9th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

11 questions

FOREST Effective communication

Lesson

•

20 questions

Main Idea and Details

Quiz

•

5th Grade

20 questions

Context Clues

Quiz

•

6th Grade

Discover more resources for Computers

15 questions

Digital Safety Scenarios

Quiz

•

10th Grade

10 questions

Exploring Cybersecurity Techniques and Threats

Interactive video

•

6th - 10th Grade