qqc: Знакомство с HTML [1753096]


Серию статей о программировании я хотела бы начать с изучения HTML. Здесь, на Голосе, он для обычных пользователей полезнее всего. HTML расшифровывается как HyperText Markup Language, то есть язык разметки гипертекста. Это стандартный язык разметки документов в Интернете.

Обычно для создания веб-страницы используют языки HTML, который отвечает за структуру и содержание страницы, и CSS, отвечающий за внешний вид страницы.

HTML - довольно простой язык разметки. Код состоит из специальных элементов, называемых дескрипторами, которые заключаются в угловые скобки. Их также называют тегами. Большинство тегов используются парами, например:

<p>В данном случае первый тег p открывает показывает начало параграфа, а второй /p - конец.</p>

Первые посты в Голосе я оформляла с помощью Markdown. Это облегченный язык разметки, созданный для более удобной правки текста. Он действительно проще, но однажды он меня подвел, не знаю уж с чем это было связано, но пост отображался после публикации как попало. Пришлось срочно все редактировать и переводить на HTML. Теперь все свои посты я оформляю сразу на HTML. А сегодня я расскажу о нескольких тегах, которые мне помогают, без которых я никуда.

Заголовки


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

Заголовок первого уровня


<h1>Заголовок первого уровня</h1>

Заголовок второго уровня


<h2>Заголовок второго уровня</h2>

Заголовок третьего уровня


<h3>Заголовок третьего уровня</h3>

Заголовок четвертого уровня


<h4>Заголовок четвертого уровня</h4>
Заголовок пятого уровня

<h5>Заголовок пятого уровня</h5>
Заголовок шестого уровня

<h6>Заголовок шестого уровня</h6>

Начертание


Теги b и strong устанавливают для текста, находящегося между ними, жирное начертание.

<b>Жирный текст</b>

<strong>Еще один жирный текст</strong>

А теги i и em определяют курсив для текста.

<i>Курсивный текст.</i>

<em>И еще один курсив.</em>

Здесь стоит отметить, что в Голосе тег i не работает.

Изображения

Для отображения картинки на странице используется тег<img>

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

<img src="Ссылка на изображение" alt="альтернативный текст">

Ссылки

И последний на сегодня, тег <a>. Для создания ссылки необходима информация о том, что будет являться ссылкой и адрес, на который следует сделать ссылку.


<a href="URL">текст ссылки</a>

Таким образом, содержимое тега a - ссылка, а значение атрибута href - адрес, куда будет совершен переход по ссылке.

Ссылкой можно сделать и изображение, как например, я рассказывала в посте о навигации. В HTML это делается следующим образом:
<a href="URL"><img src="Ссылка на изображение" alt="альтернативный текст"></a>


Думаю, для первого раза достаточно. И надеюсь, что у меня получилось понятно объяснить, что такое теги и как их использовать. Попробуйте попрактиковаться на своих следующих постах.

Жду в комментариях и чате ваши отзывы, пожелания и замечания.














-----

Оригинал поста создан 18-12-2016 10:20:27 UTC

-----

1751535 Рассылка email из таблиц Google одним кликом
1751975 [В сетях появился трейлер (ЧЕЛОВЕК ПАУК ВОЗРАШЕНИЕ ДОМОЙ)](/@karatel/v-setyakh-poyavilsya-treiler-chelovek-pauk-vozrashenie-domoi)
1752540 Ежедневный отчет – 2017.12.17
1752647 Как рай стал адом №2.
1752884 Занимаетесь Фитнесом? По Вам и не скажешь…
1752986 Пробник в Голосе!
1753096 Знакомство с HTML
1753949 Якутия. Царство вечной мерзлоты.
1754418 [[update] Добавил суммарный показатель силы голоса и сохранение пароля](/@xtar/update-dobavil-summarnyi-pokazatel-sily-golosa-i-sokhranenie-parolya)
1755191 ❄ Тема недели – Зимний вечер
1756210 [Достопримечательности, часть 1. Красные и белые дюны (Вьетнам)!](/@celebr1ty/dostoprimechatelnosti-chast-1-krasnye-i-belye-dyuny-vetnam)
1756560 Запуск проекта Автоголос: автоматическое управление голосами с помощью бота-куратора
1756761 Обзор лучших бизнес-книг часть #1.
1757765 Бесплатная раздача ключей Steam _ игра ASTRONEER. Кейс №2, зарабатываем на golos io
1757819 Нам на вопрос простой не отыскать ответа...


Прежде чем писать комментарий прочитайте О ПРОЕКТЕ
Поддержите проект донатом!


Comments 0