Раздел «Информационные объекты» в спецификации НЦТ

Веб-проектирование

Главное по теме

HTML - язык разметки веб-страниц, состоит из тегов в угловых скобках. Большинство тегов парные: открывающий и закрывающий (со слэшем).
Структура страницы: тег html, внутри head (название страницы в title, подключение стилей, кодировка) и body (всё, что видно на странице).
Заголовки h1-h6: h1 самый крупный и важный. Абзац p, перенос строки br, ссылка a с атрибутом href, картинка img с атрибутами src и alt.
Списки: ul (маркированный), ol (нумерованный), элементы списка li. Таблица: table, строки tr, ячейки td, заголовочные ячейки th.
Атрибут задаёт свойства тега и пишется внутри открывающего: a href='адрес', img src='файл'.
CSS отвечает за оформление: color (цвет текста), background-color (фон), font-size (размер), margin (внешний отступ), padding (внутренний), border (рамка).
CSS-правило: селектор, а за ним в фигурных скобках пары «свойство: значение;». Подключают стили тремя способами: внешний файл, тег style, атрибут style.
JavaScript добавляет странице поведение (реакцию на нажатия, проверку формы), HTML задаёт структуру, CSS внешний вид.
Хороший сайт удобен: понятная навигация, читаемый и контрастный текст, адаптивность под телефон, быстрая загрузка, единый стиль.

Задания с разбором

1.Что покажет браузер для кода <h1>Привет</h1>?

1Тег <h1> задаёт заголовок самого высокого уровня.
2Внутри тега лежит текст «Привет».

Ответ: крупный заголовок «Привет»

2.Что делает код <a href="https://school.kz">Школа</a>?

1Тег <a> создаёт ссылку.
2Адрес сайта записан в атрибуте href.
3Текст между тегами «Школа» это то, что видит и нажимает пользователь.

Ответ: ссылка с текстом «Школа», ведущая на school.kz

3.Какая запись верна: <b><i>Да</b></i> или <b><i>Да</i></b>?

1Теги вкладываются как матрёшки: открыли <b>, потом <i>.
2Закрывать нужно в обратном порядке: сначала </i>, потом </b>.
3Первая запись закрывает теги в перепутанном порядке, это ошибка.

Ответ: <b><i>Да</i></b>

Где теряют баллы

Веб-проектирование: HTML, теги, адреса
Ловушка: Тег ссылки путают с тегом картинки; атрибут href с src.
Как решать: <a href="..."> ссылка, <img src="..."> картинка, <p> абзац, <h1> заголовок, <table> таблица. CSS отвечает за оформление, HTML за структуру.

Объяснение простыми словами

Представь, что ты строишь дом. Сначала каркас: стены, окна, двери. Потом отделка: цвет стен, мебель. Потом электрика, чтобы свет включался от выключателя. Веб-страница строится так же, и для каждого этапа свой язык. HTML задаёт каркас, CSS отвечает за отделку, JavaScript за поведение. На ЕНТ чаще всего проверяют именно HTML и основы CSS, поэтому давай разберём, как они устроены.

HTML состоит из тегов. Тег - это команда, написанная в угловых скобках, которая говорит браузеру, что показать. Большинство тегов парные: есть открывающий тег и закрывающий, у которого перед названием стоит косая черта. Например, абзац записывается так: открывающий тег p, текст абзаца, закрывающий тег с косой чертой и буквой p. Некоторые теги одиночные и не имеют закрывающей части, например перенос строки br и картинка img. Дополнительные настройки тега называются атрибутами и пишутся внутри открывающего тега в виде имя и значение в кавычках.

Дальше в Biik: продолжение объяснения, видеоразбор и проверка из 8 заданий по этой теме.

Доучи тему до конца в Biik

План на каждый день, видеоразборы, проверка из 8 заданий после каждой темы, пробник ЕНТ раз в месяц и ИИ-репетитор, который отвечает на вопросы. 3 дня бесплатно, без карты.

Начать бесплатно Пройти диагностику

Диагностика покажет, сколько баллов тебе не хватает до гранта и где именно. 30 заданий после короткой бесплатной регистрации.

Термины

HTML: Язык гипертекстовой разметки, описывающий структуру веб-страницы.
Тег: Команда разметки в угловых скобках, например тег p для абзаца.
Атрибут: Дополнительный параметр тега, например href у ссылки.
Парный тег: Тег, у которого есть открывающая и закрывающая часть.
head и body: Разделы страницы: служебная информация и видимое содержимое.
title: Тег с названием страницы, которое показывается на вкладке браузера.
h1-h6: Теги заголовков от самого важного и крупного к самому мелкому.
p: Парный тег, которым записывают абзац текста.
a и href: Тег гиперссылки и атрибут с адресом, куда она ведёт.
img, src, alt: Тег изображения, адрес файла и альтернативный текст.
ul, ol, li: Маркированный список, нумерованный список и элемент списка.
table, tr, td, th: Таблица, строка, ячейка и заголовочная ячейка.
div и span: Универсальные контейнеры: блочный и строчный, нужны для группировки и оформления.
CSS: Язык стилей, отвечающий за внешний вид страницы.
Селектор: Часть CSS-правила, указывающая, к каким элементам оно применяется.
margin и padding: Внешний отступ вокруг элемента и внутренний отступ от рамки до содержимого.
JavaScript: Язык программирования, делающий страницу интерактивной.
Браузер: Программа, которая загружает страницы и показывает их пользователю.
Гиперссылка: Элемент страницы, при нажатии на который открывается другая страница или ресурс.
Хостинг: Услуга размещения сайта на сервере, который всегда подключён к интернету.
Адаптивный дизайн: Страница подстраивается под размер экрана телефона, планшета или компьютера.
Навигация: Меню и ссылки, помогающие перемещаться по сайту.
Форма: Часть страницы с полями для ввода данных, которые отправляются на сервер.

Все темы: Информатика