Академия: Курс Сodecademy - Learn HTML & CSS - HTML Content
Курс Сodecademy - "Learn HTML & CSS" состоит из 9 частей. В данной статье мы с вами познакомимся со второй его частью, а именно - HTML Content. Если вам уже знакомы основы HTML, то можете смело продолжить обучение. В противном случае, советую изучить первую часть программы. Ее неплохо раскрыл мой соучастник проекта "Академия" @manavendra в своей статье "Академия: Learn HTML & CSS. Конспект первой недели курса".
Visible Content (Видимый контент)
Headings (Заголовки)
<h1>...</h1><h2>...</h2><h3>...</h3><h4>...</h4><h5>...</h5><h6>...</h6> Тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным.
<h1>BREAKING NEWS</h1>Paragraphs (Абзацы)
Заголовки применяются для выделения одного или нескольких слов. Чтобы выделить больший объем текста применяется тег абзаца - <p>...</p>.
<p>The Nile River is the longest river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles). It flows through eleven countries, including Tanzania, Uganda, Rwanda, Burundi, Congo-Kinshasa, Kenya, Ethiopia, Eritrea, South Sudan, Sudan, and Egypt.</p>
Lists (Списки)
Unordered Lists (Неупорядоченные или маркированные списки)
Чтобы создать неупорядоченный (маркированный) список с помощью HTML, нам необходимо использовать тег <ul>...</ul>. При этом каждый элемент списка должен начинаться с тега <li>...</li>.
<ul>
<li>Limes</li>
<li>Tortillas</li>
<li>Chicken</li>
</ul>
- Limes
- Tortillas
- Chicken
Ordered Lists (Упорядоченные или нумерованные списки)
Для создания упорядоченного (нумерованного) списка в HTML применяется тег <ol>...</ol>, где, по аналогии с маркированным списком, каждый новый элемент начинается с тега <li>...</li>.
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
- Russia
- United States
- Canada
Links (Ссылки)
Одним из самых используемых элементов контента веб-страницы являются ссылки. Они добавляются при помощи тега <а href="URL-адрес">...</а>, где href является его атрибутом и задает адрес документа, на который следует перейти. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход.
Пример отображения ссылки на портал www.wikipedia.org.
<а href="https://www.wikipedia.org/">This Is A Link To Wikipedia</а>
Примечание. При чтении технической документации вы можете встретить термин гиперссылка, которой по значению ни чем не отличается от обычной ссылки.
More Link Attributes (Дополнительные атрибуты ссылок)
По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <а>. Чтобы ссылка открывалась в новом окне или вкладке браузера, для атрибута target требуется значение _blank.
Теперь ссылка на портал www.wikipedia.org будет выглядеть следующим образом.
<а href="https://www.wikipedia.org/" target="_blank">This Is A Link To Wikipedia</а>
Images (Изображения)
Все элементы, о которых мы узнали до сих пор (заголовки, абзацы, списки и ссылки), имеют одну общую черту: они полностью состоят из текста! Что же делать, если мы хотим добавить на веб-страницу изображения?
Элемент < i m g > предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG и является самозакрывающимся тегом. Адрес файла с картинкой задаётся через атрибут srс.
Тег пишется без пробелов
<i m g srс="URL-адрес изображения" />
Примечание. Обратите внимание, что использование атрибута srс аналогично использованию атрибута href при создании ссылки в теге <а>. Только в нашем случае значение srс должно быть URL-адресом изображения, а не ссылки. Также обратите внимание, что конец тега < i m g > имеет косую черту /. Это необходимое условие для самозакрывающегося тега.
Атрибут изображения Alt
Атрибут alt устанавливает альтернативный текст для изображения, который позволяет получить дополнительную о нем информацию.
Применяется в основном для людей имеющих нарушенное зрение. Такие люди часто просматривают информацию при помощи специального программного обеспечения для чтения с экрана, которое считывает описание изображения вслух.
Также атрибут alt применяется, если у посетителя сайта медленная скорость интернета и у него в браузере отключена функция загрузки изображений. При этом пользователь может навести курсор мыши на область, предназначенную для отображения изображения и прочитать краткое о нем описание.
Linking At Will (Изображения в виде ссылок)
Для того, чтобы кликая на изображение мы переходили по нужной нам ссылке, нам необходимо тег < i m g > добавить внутрь (обернуть) тега ссылки <а>.
<а href="URL-адрес" target="_blank"><i m g srс="URL-адрес изображения" alt="информация об изображении"/></а>
Правила написания легко читаемого кода
White Space (Свободное или пустое пространство)
Например, если нам необходимо увеличить пространство между абзацем и изображением на веб-странице, то мы не сможем этого сделать, просто добавив больше интервала между этими элементами в index.html. Это связано с тем, что браузер игнорирует пробелы, присутствующие в файлах HTML.
С другой стороны, использование пробелов и отступов при написании кода очень важно, т. к. он становится легко читаемым и последовательным.
Например, следующий код трудно читать и понимать:
<html><head></head>
<body><h1>Hello!</h1><p>This is a paragraph!</body>
</html>
Тот же код с использованием пробелов и отступов читается намного легче:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello!</h1>
<p>This is a paragraph!</p>
</body>
</html>
Line Breaks (Разрывы строк)
Если нам необходимо изменить позиционирование элементов веб-страницы в браузере, то мы можем применить самозакрывающийся (одиночный) тег <br>.
Тег <br> устанавливает разрыв (перевод) строки в том месте, где этот тег находится.
Shall I compare thee to a summer's day?<br />Thou art more lovely and more temperate
Код в приведенном выше примере даст нам следующий результат:
Shall I compare thee to a summer's day?
Thou art more lovely and more temperate
Примечание. Тег разрыва строк <br> не является стандартным способом управления позиционированием элементов в HTML, но все равно применяется довольно часто.
Indentation (Отступление)
В попытке стандартизировать веб-технологии W3C создает спецификации, которые называются рекомендациями.
На момент написания статьи W3C рекомендует использовать два пробела перед тегами, вложенными в другие элементы кода HTML.
Comments (Комментарии)
HTML также позволяет добавлять комментарии к нашему коду. Комментарии начинаются с <! и заканчиваются на >.
Тег добавляет комментарий в код документа, при этом текст комментария не отображается на странице.
<! - Это комментарий, который браузер не будет отображать. - >
Включение комментариев в наш код полезно по нескольким причинам:
- Они помогают нам понять наш код, если вдруг мы решили вернуться к нему через большой промежуток времени.
- Они позволяют нам экспериментировать с новым кодом без необходимости удаления старого.
<! - Favorite Films Section - >
<p>The following is a list of my favorite films:</p>
В приведенном выше примере комментарий используется для обозначения определенного раздела веб-страницы.
<! - <а href="#" target="_blank">Codecademy</а> - >
В приведенном выше примере часть кода была «закомментирована». Эта практика полезна, когда мы хотим поэкспериментировать с новым кодом без необходимости удаления старого.
Review: Common Elements (Делаем выводы)
Всех нас можно поздравить с завершением второй части курса Сodecademy - "Learn HTML & CSS", а именно HTML Content. В этой части мы узнали, как добавить контент на веб-страницу, используя некоторые из наиболее распространенных тегов.
Давайте посмотрим чему мы научились и что нового мы для себя узнали:
1. Научились добавлять заголовки разных размеров с помощью тегов <h1>,...,<h6>.
2. Узнали, что параграфы добавляются при помощи тега <p>...</p>.
3. Узнали, что неупорядоченные списки создаются с помощью тега <ul>...</ul>, а элементы списка добавляются с помощью тега <li>...</li>.
4. Узнали, что упорядоченные списки создаются с помощью тега <ol>...</ol>, а элементы списка добавляются с помощью тега <li>...</li>.
5. Научились добавлять ссылки на веб-страницу с помощью тега <а href="URL">...</а>.
6. Научились добавлять изображения с помощью тега <i m g srс="URL-адрес изображения" />.
7. Узнали зачем применяется атрибут изображения alt внутри тега < i m g > и как он помогает людям с нарушенным зрением.
8. Узнали, что можно тег < i m g > добавить внутрь (обернуть) тега ссылки <а>, превратив тем самым изображение в ссылку.
9. Узнали, что свободное (пустое) пространство в файле HTML не влияет на позиционирование элементов в браузере.
10. Узнали, что W3C рекомендует использовать два пробела перед тегами, вложенными в другие элементы кода HTML.
11. Научились добавлять и применять комментарии в коде.
Что для меня было наиболее интересным в данной части курса?
Я и ранее был знаком с основами HTML, поэтому пройдя данную часть курса я лишь закрепил свои знания в этой области. Приоритетной целью для меня было информационное оформление данной статьи для всех новичков, желающих постичь азы HTML/CSS и надеюсь у меня это получилось. Всем успехов и удачи в обучении!