Структура HTML документа
ЧТООО???
Так же мы создаем структуру и в HTML
На прошлом уроке мы с помощью тегов пытались сделать малую разметку: заголовок, параграф, абзац и т.д.
То сегодня мы изучим и рассмотрим с вами структуру HTML документа.
То сегодня мы изучим и рассмотрим с вами структуру HTML документа.
ГЛАВНАЯ - КАТАЛОГ - ЖЕНСКОЕ - ОБУВЬ
Например у нас есть многостраничный сайт: изначально мы на главной, далее мы заходим в каталог (который так же вложен в этот сайт), потом мы переходим в раздел "обувь" ( новый встроенный раздел в нашем на сайте). И таким образом мы погружаемся в сайт все глубже.
Где два этих элемента являются дочерними главного элемента.
Это как папка внутри папки.
Они являются одинаковыми относительно друг друга.
При этом каждый из них может содержать разное (картинки, параграфы, простой текст и т.д.
Это как папка внутри папки.
Они являются одинаковыми относительно друг друга.
При этом каждый из них может содержать разное (картинки, параграфы, простой текст и т.д.
И так же мы переходим в папки на компьютере, у нас так же есть путь, по которому мы прошли.
Два основных тега страницы:
Давайте в боди вставим картинку:
<img src="https://storage.theoryandpractice.ru/tnp/uploads/image_block/000/052/014/image/base_d9dd9b626f.jpg" alt="котик"/>
<img src="https://storage.theoryandpractice.ru/tnp/uploads/image_block/000/052/014/image/base_d9dd9b626f.jpg" alt="котик"/>
комментарий никак не влияет не разметку и выделяется цветом. таким образом мы можем скрывать части кода, если по каким-то причинам пока не хотим его удалять.
Просто надо его закомментировать.
Просто надо его закомментировать.
В первую очеред чтобы обозначить браузеру что перед ним, мы прописываем
<!DOCTYPE html> - определяет тип документа
Так же мы можем добавить комментарий, в первую очередь для себя, чтобы потом вспомнить какая часть и за что отвечает:
<!-- Главное описание страницы --> - комментарий
<!DOCTYPE html> - определяет тип документа
Так же мы можем добавить комментарий, в первую очередь для себя, чтобы потом вспомнить какая часть и за что отвечает:
<!-- Главное описание страницы --> - комментарий
Из чего состоит структура?
Следующий этап после <!DOCTYPE html> мы добавляем тег
<html></html> - Открывает начало документа. Конечно же он парный и внутри него располагается все остальное.
<html></html> - Открывает начало документа. Конечно же он парный и внутри него располагается все остальное.
Здесь мы открывает тег <img
Далее у нас идет src= это путь картинки в кавычках.
Далее alt= это название картинки "котик"
Далее у нас идет src= это путь картинки в кавычках.
Далее alt= это название картинки "котик"
<head></head> - голова сайта (головная часть) - здесь содержится вся техническая часть, которая важна браузеру. Она будет не видна пользователю. Она нужна для поисковых систем, для браузера и для сайта в целом.
- <body></body> - тело страницы, где расположены основная часть документа. То, что мы хотим видеть на сайте: текст, картинки, ссылки и прочие элементы сайта. Их может быть несколько (несколько страниц сайта), которые связаны между собой ссылками.
Два основных тега страницы:
<head></head> - голова сайта (головная часть) - здесь содержится вся техническая часть, которая важна браузеру. Она будет не видна пользователю. Она нужна для поисковых систем, для браузера и для сайта в целом.
- <body></body> - тело страницы, где расположены основная часть документа. То, что мы хотим видеть на сайте: текст, картинки, ссылки и прочие элементы сайта. Их может быть несколько (несколько страниц сайта), которые связаны между собой ссылками.
Чтобы стилизовать какой-либо элемент, мы можем задать свойство для этого элемента с помощью:
- css class - стили будут применятся к элементу с выбранным классом;
- тега - стили применяются ко всем тегам на странице
- атрибутом
- по id
<html>
<head>
<style>
p {
color: green;
/ / задаём цвет для содержимого тега < p / >
}
</style>
</head>
<body>
<p>Текст</p>
</body>
</html>
<head>
<style>
p {
color: green;
/ / задаём цвет для содержимого тега < p / >
}
</style>
</head>
<body>
<p>Текст</p>
</body>
</html>
СSS и как его добавляют?
СМОТРИ КАКОЙ КРУТОЙ КОТ
