Материалы для открытого урока "Основы HTML"

ДОКЛАД ПО ТЕМЕ «ОСНОВЫ HTML»

Слайд №1

*своими словами расскажи о том, о чём будет доклад, направление доклада и что в конечном итоге они узнают*

Слайд №2

HTML – это язык гипертекста. Этот текст интерпретирует браузер и на основе полученной информации формирует структуру страницы.

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

За визуальное оформление, проще говоря, за параметры строительных кирпичиков отвечает технология CSS – каскадные таблицы стилей. Они отвечают за визуальное оформление и отображение страниц.

Слайд №3

На данном слайде вы можете увидеть шаблонную структуру HTML-документа, внутрь входит некоторый набор тегов и атрибутов. Давайте по каждому из них коротко пройдёмся.

Слайд №4

Доктайп. В прошлом, когда HTML был молод (около 1991/1992 годах), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, чтобы все работало правильно.

Элемент . Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.

Слайд №5

Элемент . Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.

Слайд №6

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

Слайд №7

Метатег. На самом деле подобных тегов в HTML много и по своей сути они нужны для того, чтобы браузеры правильнее отображали страницу, в поисковой строке выдавалась конкретная информация, которую вы вписали в тег. Также метатеги используются поисковыми роботами, который индексируют страницы. Это позволяет повысить выдачу страницы в поиске.

Элемент . Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.

Можно подвести короткий итог. Всё это необходимо для того, чтобы браузер корректно отображал вашу страницу. Подобного рода структуру – это обязательно содержимое каждой веб-страницы в Интернет. Однако мы рассмотрели только каркас, а что по наполнению?

Наполнение может быть самым разным – всё зависит по большей части от вашей фантазии.

Первично, что необходимо сделать перед формированием собственного блока на странице, определить, какой тег использовать для этого. По умолчанию семантика HTML подразумевают, что некоторые блоки выполняют как логическое, так и функциональное назначение.

Слайд №8

К примеру, есть тег p, который предназначен для отображения абзацев текста.

Слайд №9

А тег a предназначен для формирования текстовых ссылок или якорей, которые позволяют выполнять навигацию как по самому сайту или странице, так и перенаправлять на сторонние ресурсы.

Слайд №10

Если Вы обратили внимание, то на предыдущем слайде можно было увидеть, что в теге a присутствовала дополнительная запись, – это атрибут. Атрибуты предназначены для указания дополнительной информации, добавления функциональности или для реализации базовых возможностей некоторого тега.

Слайд №11

Рассмотрим типовую проблему, связанную с полями ввода в форме, будь то авторизации или регистрации.

У нас есть тег input, выступающий в роли поля ввода. Если сама HTML-вёрстка не предусматривает дополнительной информации, связанной с этим полем, то пользователю будет довольно-таки сложно сориентироваться, что ему необходимо ввести. Непонятно, какие данные от него требуют.

Слайд №12

Поэтому, чтобы не создавать дополнительный элемент внутри самой вёрстки, можно воспользоваться атрибутом «placeholder». Данный атрибут внутри поля отобразит тот текст, который выступает в качестве свойства. Это позволяет оптимизировать в некоторой степени вёрстку за счёт избавления от дополнительных тегов, которые реализуют в общем-то ту же логику, что и атрибут поля ввода.

Слайд №13

Также Вы могли заметить, что теги могут быть как открытыми, так и закрытыми. Разница между ними в том, что некоторые имеют открывающий и закрывающий теги (закрытые), а некоторые – открываются, но не закрываются (открытые).

*здесь можешь конкретно указать на тег div и тег input, которые представлены на слайде. Тег div имеет и открывающую, и закрывающую часть, а input – не имеет*