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

Знакомство с

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

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:

​<img src="keks.png">

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

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

Multiple Choice

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

<img src="keks.png" width="200" height="100">

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

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

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

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

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. Не закрывайте этот документ, в нем вы будете практиковаться и смотреть как выглядит ваш сайтик в браузере:)