Академия: Вторая неделя курса Learn HTML & CSS

Продолжаю участвовать в проекте Академия со второй частью курса Learn HTML & CSS

В первой части мы узнали о минимально необходимом HTML коде для создания структуры веб-страницы. Мы добавили объявление html, заголовок и тело страницы, но по-прежнему не добавили никакого контента, который смог бы отобразить веб-браузер. В данной части курса мы узнаем как использовать некоторые из наиболее распространенных элементов HTML, отвечающих за добавление и форматирование контента веб-страницы.

Структура второй части курса представлена на диаграмме ниже:

Заголовки.

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

В HTML используется аналогичная схема. В нём есть шесть разных видов заголовков, отличающихся по размеру. Ниже приведен список элементов заголовка, доступных в HTML. Они расположены от самых больших до самых маленьких.

<H1> - используется для основных рубрик, 
все остальные меньшие заголовки используются для подзаголовков.
<H2>
<H3>
<H4>
<H5>
<H6>

В примере ниже используется самый большой заголовок из доступных.
<h1>BREAKING NEWS</h1>

Абзац

Заголовки используются в основном для выделения одного или нескольких слов. Если же мы хотим добавить на страницу больший объём текста, его лучше всего выделить, используя тег абзаца <p>. Однако, необходимо помнить, что очень большое количество текста в рамках одного абзаца перегружает веб-страницу. Пользователь с трудом воспринимает такой контент. Лучше всего сделать несколько абзацев с небольшим количеством текста, чем один, содержащий весь текст.
Пример абзаца:

<p> Река Нил - самая длинная река в мире. Её длина более 6 850 километров (приблизительно 4 260 миль). Нил протекает через одиннадцать стран, включая Танзанию, Уганду, Руанду, Бурунди, Конго-Киншасу, Кению, Эфиопию, Эритрею, Южный Судан, Судан и Египет. </p>

Списки.

Определённые виды контента удобнее отображать в виде списка.
В HTML можно использовать ненумерованный список для перечисления объектов, когда нет необходимости в присвоении им порядкового номера. Вероятно, вы использовали такие списки и в жизни, например, при составлении списка покупок.

Для создания ненумерованного списка в HTML используется тег <ul>, однако, сам по себе он не задаёт никакого форматирования. Для того, чтобы создать элементы списка с маркерами, необходимо каждый элемент заключить в тег <li>

Пример:

<ul>
  <li>картошка</li>
  <li>морковка</li>
  <li>хлеб</li>
</ul>

• картошка
• морковка
• хлеб

Однако, в некоторых случаях элементы списка бывает необходимо пронумеровать. Для этой цели в HTML используется тег <OL>, определяющий упорядоченный список. И, аналогично, каждый элемент списка должен быть заключён в тег <li>

Пример:

<ol>
  <li>первый</li>
  <li>второй</li>
  <li>третий</li>
</ol>

1. первый
2. второй
3. третий

Ссылки

Немаловажным элементом контента веб-страницы являются ссылки на другие веб-страницы. Их можно добавить, используя тег <a>. Текст ссылки располагается между открывающим и закрывающим тегом.

Однако, в этом случае одних тегов будет недостаточно. Где разместить саму ссылку на веб-страницу? Для этой цели используется аттрибут href. Аттрибуты (или свойства) предоставляют дополнительную информацию о html элементе и располагаются внутри открывающего тэга.

Аттрибут состоит из 2х частей: Имя=”значение”. Для элемента ссылки имя аттрибута – href, а значение – адрес ссылки.
Пример:
<a href="https://www.wikipedia.org/"> Это ссылка на Википедию </a>
Это ссылка на Википедию

Таким образом, html-элементы с аттрибутами формируются по следующей схеме (на примере ссылки):

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

Наверное, вы замечали, что после нажатия на ссылку некоторые страницы открываются в новой вкладке или новом окне браузера? Если да, то знайте, что за это отвечает ещё один аттрибут тега <a>, который называется target.

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

Для того, чтобы ссылка открывалась в новом окне, данному аттрибуту нужно присвоить значение "_blank". Теперь полная ссылка на Википедию будет выглядеть следующим образом:
<a href=https://www.wikipedia.org/ target="_blank"> Это ссылка на Википедию </a>

Изображения

Все элементы, которые мы изучили до сих пор, полностью состоят из текста. Что делать, если вы хотите добавить на свою страницу изображение? Для этой цели используется элемент img. img является самозакрывающимся тегом, поэтому ему не нужен второй (закрывающий) тег для работы. Ссылка на изображение, которое мы хотим добавить, задаётся с помощью аттрибута src. Обратите внимание, что его использование аналогично использованию аттрибута href при создании ссылки в элементе <a>

Например, код:

выводит картинку:

Опытные веб-разработчики при создании сайта принимают во внимание то, что их сайт могут просматривать люди с нарушением зрения или с медленным интернетом. HTML помогает поддерживать таких пользователей с помощью атрибута alt. Атрибут alt применяется непосредственно к элементу img. Значение alt должно быть описанием изображения.

Аттрибут alt выполняет следующие задачи:

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

Однако, если изображение на веб-странице не передает какую-либо значимую информацию пользователю, атрибут alt не должен использоваться.

Изображения как ссылки

Вероятно, вы посещали веб-сайты где ссылки были представлены не в виде текста, а были изображениями или каким-либо другим контентом. HTML позволяет превратить практически любой элемент в ссылку. Для этого необходимо «обернуть» элемент в тег <a>. К примеру:

Просто и эффективно!

Форматирование кода

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

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

Например, следующий код трудно читать и понимать:

<HTML> <HEAD> </HEAD>
<Body> <h1> Здравствуйте! </H1> <p> Это абзац! </Body>
</Html>

А если его разбить на строки, всё станет легко понятно:

<html> 
  <head> 
    <title>My Web Page</title> 
  </head> 
  <body> 
    <h1>Hello!</h1> 
    <p>This is a paragraph!</p> 
  </body> 
</html>

Разрыв строки

Мы увидели, что изменение интервала между кодом в файле HTML не влияет на позиционирование элементов в браузере. Если вы хотите изменить интервал в браузере, вы можете использовать HTML элемент разрыва строки: <br/>. Это самозакрывающийся тег. Вы можете использовать его в любом месте вашего HTML-кода, и в браузере будет отображаться разрыв строки.

Можно ли сравнить тебя с летним днем? <br /> Ты прекраснее и спокойнее

Код в приведенном выше примере приведет к следующему результату:

Можно ли сравнить тебя с летним днем?
Ты прекраснее и спокойнее

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

Разрывы строк упрощают чтение кода, увеличивая (или уменьшая) расстояние между строками кода. Для того, чтобы упростить чтение структуры кода, веб-разработчики также часто используют отступы.

Стандарты стиля HTML

За поддержание стандартов стиля HTML отвечает консорциум World Wide Web (W3C). На момент написания статьи W3C рекомендует писать два пробела перед строкой кода HTML для элементов, вложенных в другие элементы.

<UL>
  <Li> Скрипка </ li>
  <Li> Viola </ li>
  <Li> Cello </ li>
  <Li> Bass </ li>
<UL>

В приведенном выше примере элементы списка имеют отступы с двумя пробелами. Пробелы добавляются с помощью клавиши пробела на клавиатуре. Если ваш текстовый редактор настроен правильно, клавиша «TAB» не должна использоваться для отступов.

Добавление комментариев

HTML-файлы также позволяют добавлять комментарии к вашему коду.
Комментарии начинаются с символов <! - и заканчиваются символами ->. Любые символы между ними будут рассматриваться как комментарий.
<! - Это комментарий, который браузер не отображает. ->

Включение комментариев в ваш код полезно по многим причинам:

Они помогают вам (и другим) понять ваш код, если вы решите посмотреть его позже.
А также, они позволяют вам экспериментировать с новым кодом без необходимости удаления старого.

<! - Любимые секции фильмов ->
<P> Ниже приведен список моих любимых фильмов: </ p>

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

<! - <a href = "#" target = "_ blank> Codecademy </a> ->

В приведенном выше примере действующий элемент HTML (элемент ссылки) был «закомментирован». Эта практика полезна, когда вы хотите поэкспериментировать с новым кодом окончательно не удаляя старый.

Заключение

На этом заканчивается вторая часть курса изучения HTML и CSS. В этом блоке мы узнали, как добавить контент на веб-страницу, используя некоторые из наиболее распространенных HTML тегов.

Мы научились:

• Добавлять заголовки разных размеров с помощью различных элементов заголовков: от <h1> до <h6>.
• Создавать неупорядоченные списки с помощью элемента <ul>, и задавать элементы списка с помощью тега<li>.
• Создавать упорядоченные списки с помощью элемента <ol>, и добавлять элементы списка с помощью элемента <li>.
• Мы научились добавлять ссылки на свою веб-страницу с помощью элемента <a> - не забывайте атрибут href!
• Добавлять изображения с помощью элемента img - не забывайте атрибут src!
• Узнали что изображения помогают пользователям с ослабленным зрением, когда элементы img содержат атрибут alt.
• Узнали что можно превратить любой элемент в ссылку, обернув ее тегом <a>.
• Узнали что пустое пространство в файле HTML не влияет на позиционирование элементов в браузере.
• Научились добавлять разрыв строки при помощи тега <br/>
• Узнали о принятых стандартах стиля HTML
• Научились добавлять комментарии к своему коду

В конце данной части курса предлагалось самостоятельно потренироваться в использовании тегов и создать свою веб-страницу. Вот что получилось у меня:

---

Что для меня было наиболее интересным и впечатляющим в данной неделе курса?

На этой неделе я научился использовать основные html теги и сделал свою первую форматированную веб-страницу с контентом! Конечно, это только начало, но уже немало. К тому же, эти знания могут пригодиться при использование html редактора на сайте Голоса.