Что такое HTML?
HTML (HyperText Markup Language) - язык для разметки гипертекста, он является набором правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. HTML появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.
Взгляните внимательно на страницу, на которой вы сейчас находитесь. Вся она вне зависимости от внешнего вида описана с помощью HTML. Это хорошо показывает, что какой бы сложной ни была страница, вся суть остается неизменной на протяжении более 20 лет.
Слово «язык» в HTML стоит воспринимать как правила. Сам по себе HTML только размечает данные, но никак с ними не взаимодействует и визуально с ними ничего не делает. Всю работу по выводу текстовых данных и разметки берет на себя браузер.
Веб-браузер (браузер) - это приложение для доступа к веб-сайтам в сети Интернет. Когда пользователь запрашивает веб-страницу с определенного веб-сайта, браузер извлекает файлы с сервера, а затем отображает страницу на экране пользователя.
Список популярных браузеров: Mozilla Firefox, Google Chrome, Opera, Microsoft Edge, Safari и т.д.
Что такое HTML-Тег?
Теги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт. Все теги имеют одинаковый формат: они начинаются знаком «<» и заканчиваются знаком «>». Обычно имеются два тега - открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем имеется слэш «/». Всё содержимое, помещённое между открывающим и закрывающим тегами, является содержимым тега. Но, как говорится, из каждого правила есть исключения, и в HTML также имеются теги, которые являются и открывающими, и закрывающими. Эти теги не содержат текста, а являются метками, например, перенос строки выглядит так: <br />. Большинству браузеров безразлично, в каком регистре введены буквы тегов: <HTML>, <html> или <HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать теги в нижнем регистре.
Структура HTML страницы
Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо. Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст. Во-первых необходимо сообщить браузеру, что вы будете "говорить" с ним на языке HTML. Это делается тегом <html> (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить тег <html>. Как Вы помните <html> это открывающий тег, который должен иметь и закрывающий тег после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тег </html> на пару строк ниже и вводите весь текст документа между <html> и </html>. Следующее, что необходимо, это "head" (голова или «шапка»), которая содержит служебную информацию о вашем документе, и "body" (тело), содержимое самого документа. Поскольку HTML логичен, head (<head> и </head>) находятся выше body (<body> и </body>). Давайте скажем пару слов о том, как собственно создать веб-страницу на практике. Все очень просто, для этого понадобится любой текстовый редактор (например, Блокнот).
Примечание:
- главную страницу сайта принято называть index (index.html, index.php,index.js).
Все, что будет отображаться на создаваемой веб-странице, должно быть размещено внутри открывающего и закрывающего <body>. Внутри <head> размещается служебная информация, которая может понадобиться браузеру для правильной интерпретации кода документа. Эта служебная информация внутри <head> не будет видна на веб-странице.
Базовый шаблон HTML документа открытый в текстовом редакторе:
<html>
<head>
<title> Заголовок документа </title>
</head>
<body>
Здесь находится тело документа.
</body>
</html>Как выглядит шаблон HTML документа, если открыть с помощью браузера:
Примечание:
- как правильно сохранять текстовый документ в формате html подробно описано в практической работе 1 «Создание простейшего HTML-документа».
Что такое HTML-атрибуты?
Теги это метки, указывающие браузеру, как нужно представлять ваш web-сайт. (Например, <br /> информирует браузер, что нужно сделать перевод строки). В некоторых Тегах вы можете вводить дополнительную информацию. Такая дополнительная информация называется «атрибут». Атрибуты всегда записываются внутри тега, после них следует знак равенства и детали атрибута, заключённые в двойные кавычки.
Рассмотрим как использовать атрибуты на примере тега <p>.
Абзацы
Тег <p> определяет параграф или текстовый абзац. Для перевода строки внутри абзаца используется тег <br />.
Текстовые абзацы и параграфы заключаются в открывающий <p> и закрывающий </p> теги. Если закрывающего тега нет, то считается, что конец абзаца совпадает с началом следующего блочного элемента.
Выравнивание текста внутри абзаца осуществляется с помощью атрибута «align». Доступные значения:
- left - выравнивание по левому краю;
- center - выравнивание по центру;
- right - выравнивание по правому краю;
- justify - выравнивание по ширине.
Пример использование тега <p> и атрибута «align»:
<html> <head> <title> Абзацы </title> </head> <body> <p align="justify"> Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. </p> <p align="left"> Упорядоченный контент делает чтение более лёгким и приятным.</p> </body> </html>
Как выглядит в браузере:
Вложенные Теги
Как вы заметили в разделе структура HTML-страницы, между открывающим и закрывающим тегами могут быть и другие теги. Такие теги называются вложенные. А тег, внутри которого они вложены, называется родитель.
Пример использование вложенных тегов <b> (выделение жирным) и <i> (выделение курсивом):
<html>
<head>
<title> Вложенные теги </title>
</head>
<body>
<b><i>Это жирный курсив</i></b>
</body>
</html>
Как выглядит в браузере:
Это жирный курсив
Выписать в тетрадь
- Что такое HTML и теги.
- Базовый шаблон HTML документа открытый в текстовом редакторе.
- Обязательные теги:
- <html></html> - является контейнером, который заключает в себе всё содержимое веб-страницы, включая элементы <head> и <body>.;
- <head></head> - (от англ. head — голова) элемент-контейнер для метаданных HTML-документа. Содержимое <head> не отображается напрямую на веб-странице, за исключением элемента <title>, он задаёт заголовок окна веб-страницы;
- <title></title> - (от англ. title — заголовок) определяет заголовок документа.
- <body></body> - (от англ. body - тело) предназначен для хранения содержимого веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>.
- Для чего нужны теги: <p>, <b> и <i>?
Авторkandid