Дочерние и родительские элементы

Урок 2

Мы выяснили с вами, что весь сайт состоит из тегов. Каждый тег имеет свое предназначение и содержимое. Теперь, нам следует узнать про дополнительные элементы тегов — атрибуты.

Атрибуты HTML-тегов

Теги могут иметь атрибуты. Атрибут — это дополнительное свойство тега. Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример — тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки, без этого атрибута браузер просто не сможет загрузить её.

В общем случае тег записывается следующим образом:

<имя-тега атрибут1="значение1" атрибут2="значение2" ...>

Атрибутов может быть несколько, вот примеры:

<imgsrc="img.jpg"><aclass="external" href="https://e-a-s-y.ru">...</a>

Мета теги

Узнав, что теги могут содержать атрибуты и то, что в некоторых случаях они очень важны, мы сейчас начнем наполнять наш тег <head>.Кто помнит для чего он нужен?

И так, из чего же состоит тег <head>.

Заголовок страницы мы уже знаем, но повторим для запоминания.

Заголовок страницы — это тот текст, который отображается в левом верхнем углу браузера, а также во вкладках.

Чтобы задать заголовок страницы, нужно использовать тег <title>. Например, вот так:

<head><title>Заголовок сайта</title></head>

КодировкаHTML страницы нужна для того, чтобы веб-браузер мог правильно отображать текст на странице. Если браузер неправильно «угадает» кодировку, то вместо текста будут отображаться иероглифы.

Чтобы сообщить браузеру кодировку HTML-страницы, необходимо использовать мета тег:

Самая распространённая кодировка — utf-8. Рекомендуется использовать её во всех своих проектах:

Описание содержания страницы (краткое)—Один из полезных для поисковых систем мета-тег. Он задаётся так:

<metaname="description" content="краткое описание ">

В атрибуте content должно быть краткое содержание или аннотация страницы. Оно часто используется поисковиками при отображении результатов поиска.

Ключевые слова— это описание ключевых слов страницы. Задаётся он так:

В атрибуте content через запятую перечисляются самые важные слова из содержания страницы. Раньше этот тег был очень важен для поисковиков. Каково положение дел сейчас — большой секрет Яндекса и Гугла, но пренебрегать им не стоит.

Поток документа

Разобравшись со скрытным разделом нашего сайта и с его настройками, мы подошли к очень важному разделу WEBверстки — потоку документа.

Порядок отображения элементов на странице называется потоком документа. Любой элемент, который находится в потоке, занимает на странице свою собственную площадь. Чем выше элемент в коде, тем выше он отображается на странице. Стандартное отображение элементов с верху вниз и с лево на право.

Блочные и строчные элементы на странице

Элементы (теги) HTML страницы делятся на блочные и строчные.

Блочные элементыпредназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания разметки страницы (сетки).

Блочные элементы можно представить, как прямоугольные области на странице. Они имеют следующие особенности:

1. До и после блочного элемента существует перенос строки (то есть он всегда один находится на новой строке).

2. Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.

3. Занимают всё доступное пространство по горизонтали.

К блочным элементам относятся такие теги как: <p>, <h1> и другие.

Еще один важный блочный тег — это тег <div>, который обозначает просто «блок» или «прямоугольный контейнер». Этот тег обычно используется для создания разметки страницы (сетки).

Строчные элементынеобходимы для оформления текста на уровне небольших фраз и отдельных слов.

Строчные элементы располагаются друг за другом в одной строке, при необходимости (если не хватает места) строка переносится. Особенности строчных элементов:

1. До и после строчного элемента отсутствуют переносы строки.

2. Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS стилей нельзя.

3. Можно задавать только горизонтальные отступы.

К строчным элементам относятся такие теги как: <a>, <strong>, <em> и другие.

Дочерние и родительские элементы

А сейчас давайте подумаем, а можно ли писать один тег внутри другого, и не будет ли это ошибкой?

Элементы можно вкладывать друг в друга. Такие элементы называются вложенные (дочерние) по отношению к родителю.

Практика

Узнав очень многое про теги, давайте познакомимся с ними на практике, и создадим нашу первую HTML страницу.

<!DOCTYPEhtml>

<metacharset="UTF-8">

<metaname="description" content="Существуютразныевидытегов">

<metaname="keywords" content="теги,виды,код">

</head>

<h1>Видытегов</h1>

<p>Каждый <b>HTML — тег</b> имеет свой смысл и назначение. Часть тегов служебные и их никогда не видно на странице. Другие теги используются для форматирования текста и их влияние весьма заметно. <i>Например, если обернуть текст в тег <b>h1</b>, то он станет крупнее и вокруг него появятся отступы, так как <b>h1</b>— это заголовок.</i><ahref="https://webref.ru">Смотреть справочник</a></p>

</div>

</body>

</html>

HTML Теги
Тег	Описание
<!DOCTYPE html>	<!DOCTYPE> указывает тип документа. Это необходимо, чтобы браузер понимал, как надо интерпретировать текущую веб-страницу. Последняя версия — HTML5
<html> … </html>	Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>.
<head> … </head>	Тег <head> хранит в себе элементы, которые помогают браузеру в работе с данными. Содержимое тега <head> не отображается на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.
<body> … </body>	Элемент <body> предназначен для хранения информации, aкоторую необходимо выводить на WEB странице (текст, изображения, теги, скрипты JavaScript и т.д.)
<div> ... </div>	Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
<img src="">	Тег <img> предназначен для отображения на веб-странице изображений. Адрес файла с картинкой задаётся через атрибут src.
<ahref="">…</a>	Тег <a> очень важный элемент HTML и предназначен для создания ссылок.
<h1> ... </h1> … <h6> ... </h6>	Тег <h1> представляет собой наиболее важный заголовок первого уровня. HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
<p> ... </p>	Определяет текстовый абзац.
<b> ... </b>	Устанавливает жирное начертание шрифта.
<i> ... </i>	Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
<em> … </em>	Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
<strong> … </strong>	Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
<br>	Тег <br> устанавливает перевод строки там, где этот тег находится.
<span> … </span>	Универсальный строчный элемент <span> предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей. Например, внутри абзаца (<p>) можно изменить цвет и размер первого слова, если его выделить с помощью элемента <span> и задать для него желаемый стиль.
<!-- … -->	Тег добавляет комментарий в код документа. Текст комментария не отображается на странице.
HTML Атрибуты
Атрибут	Описание
<img src="…">	src="…" — Путь к графическому файлу.
<ahref="…"></a>	href="…" — Задает адрес документа, на который следует перейти.
<pstyle="…"></p>	style =”” — Задает стиль элементу с помощью правил CSS.

Создав нашу первую страницу и посмотрев на нее можно сказать, что она скучная и требует небольшого оформления. С оформлением нам помогут CSS стили и атрибут style.

Атрибут style

Атрибут style применяется для определения стиля элемента с помощью правил CSS.

style="правила описания стилей"В качестве значений указываются стилевые правила: вначале следует имя стилевого свойства, затем через двоеточие его значение. Стилевые свойства разделяются между собой точкой с запятой.

<p style="color: red; font-size: 24px">Крупный, красныйтекст<p>

<pstyle="font-size: 14px">Обычныйабзацстекстом, у которого размер шрифта равен 14 пикселям</p>

Стилевые свойства и значения

Давайте приступим к украшению нашей страницы.

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<metaname="description" content="Существуютразныевидытегов">

<metaname="keywords" content="теги,виды,код">

</head>

<body>

<div>

<h1 style="color:red;text-align:center;font-family:sans-serif;">Видытегов</h1>

<p>Каждый<bstyle="background-color:yellow;">HTML — тег</b>имеетсвойсмыслиназначение. Часть тегов <span style="font-style:italic; font-size:30px;">служебные</span> и их никогда не видно на странице. Другие теги используются для форматирования текста и их влияние весьма заметно. <i style="font-weight:bold;">Например, если обернуть текст в тег <b>h1</b>, то он станет крупнее и вокруг него появятся отступы, так как <b>h1</b> — это заголовок.</i><ahref="https://webref.ru">Смотреть справочник</a></p>

<imgsrc="cat.png">

</div>

</body>

</html>

CSS свойства
Название	Описание
font-family	Устанавливает семейство шрифта. Список шрифтов может включать одно или несколько названий, разделенных запятой. Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что, хотя бы один из них будет обнаружен на компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif (шрифты с засечками), sans-serif (шрифты без засечек или гротески) и т.д.
font-weight	Устанавливает насыщенность (толщину) шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.
font-style	Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа. Normal — Обычное начертание текста. Italic — Курсивное начертание. Oblique — Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив — это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо. Inherit — Наследует значение родителя.
text-align	Определяет горизонтальное выравнивание текста в пределах элемента.
color	Определяет цвет текста элемента. Для задания цветов могут использоваться числа в шестнадцатеричном коде.
background-color	Определяет цвет фона элемента.

Домашняя работа

1. Создать отдельный HTML документ

2. Вставить текст из файла самостоятельная работа

Что такое HTML и CSS?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей — это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка — HTML и CSS независимы друг от друга и должны таковыми и оставаться. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

3. Оформить код следуя следующим правилам:

· Фразу «Что такое HTMLи CSS» обернуть в тег h1 и выровнять по центру .

· Все слова «HTML» и «CSS» сделать жирными.

· Все слова в скобках сделать курсивными.

· У фразы «Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.» сделать фон желтого цвета.

· Вставить любую картинку.

Beyourself

Дата добавления: 2018-04-15; просмотров: 1745; Мы поможем в написании вашей работы!

Поделиться с друзьями:

Мы поможем в написании ваших работ!