Введение в HTML
При серфинге в Интернете большинство веб-сайтов, которые вы видите, являются результатом визуализации кода HTML и CSS. HTML означает язык разметки гипертекста и используется для описания структуры веб-страницы. В этом посте мы обсудим, как начать создавать простую веб-страницу с использованием HTML.
Давайте начнем!
В HTML структура и семантика указываются с помощью тегов (также называемых элементами). Элементы структурной разметки включают заголовок, абзац, полужирный шрифт, курсив, разрыв строки, элементы нижнего и верхнего индекса. Начнем с обсуждения тега заголовка.
Заголовки
В терминале используйте текстовый редактор для создания файла «.html». Я использую текстовый редактор VI:
vi my_website.html
Затем давайте создадим несколько заголовков в нашем файле. Чтобы создать заголовок, вы используете открывающий тег ‹h1›, за которым следует текст, который вы хотите разместить в своем заголовке, и закрывающий тег ‹/h1›. Давайте создадим заголовок для нашего веб-сайта, который будет блогом для новых релизов инди-рок-альбомов:
<html>
<h1>New Indie Rock Music</h1>
</html>
Затем сохраните и закройте файл. Теперь в браузере откройте только что сохраненный файл. Вы должны увидеть страницу с указанным заголовком:
Также следует отметить, что вы можете включить много заголовков, указав номер заголовка в теге. Это приводит к уменьшению размера заголовков:
<html> <h1>New Indie Rock Music</h1> <h2>New Indie Rock Music</h2> <h3>New Indie Rock Music</h3> </html>
Теперь давайте удалим теги заголовка ‹h2› и ‹h3› и добавим тег заголовка ‹title› ‹/title›, который будет отображаться на вкладке в браузере. Давайте также добавим два тега заголовка в наше тело:
<html>
<header>
<title>New Indie Rock Music</title>
</header>
<body>
<h1>New Indie Rock Music</h1>
<h2>The New Abnormal, The Strokes</p>
<body>
</html>
Под вторым заголовком мы можем добавить теги абзацев ‹p› ‹/p›, дающие наше мнение об альбоме:
<html>
<header>
<title>New Indie Rock Music</title>
</header>
<body>
<h1>New Indie Rock Music</h1>
<h2>The New Abnormal, The Strokes</h2>
<p>This album is full of passion, commitment and creativity. It has great music.</p>
<body>
</html>
Мы также можем использовать полужирные и курсивные теги, чтобы выделить части текста. Давайте сделаем слово «полный» в нашем абзаце жирным, используя ‹b› full ‹/b›, а слово «отличный» курсивом, используя ‹i› great ‹/i›:
<html>
<header>
<title>New Indie Rock Music</title>
</header>
<body>
<h1>New Indie Rock Music</h1>
<h2>The New Abnormal, The Strokes</h2>
<p>This album is <b>full</b> of passion, commitment and creativity. It has <i>great</i> music.<</p>
<body>
</html>
Мы также можем добавлять нижние и верхние индексы. Предположим, мы хотели добавить сноску к нашему сообщению в блоге. Чтобы добавить подстрочный индекс к нашей первой сноске, мы используем ‹sup› ‹a href="#section1› [1] ‹/a› ‹/sup›.
<html>
<header>
<title>New Indie Rock Music</title>
</header>
<body>
<h1>New Indie Rock Music</h1>
<h2>The New Abnormal, The Strokes</h2>
<p>This album is <b>full</b> of passion, commitment and creativity. It has <i>great</i> music.<sub><a href="#section1">[1]</a></sub></p>
<body>
<p>[1] I don't use the word <i>great</i> lightly </p>
</html>
Мы также можем использовать надстрочный индекс ‹sup› ‹a href="#section1› [1] ‹/a› ‹/sup› для нашей сноски:
<html>
<header>
<title>New Indie Rock Music</title>
</header>
<body>
<h1>New Indie Rock Music</h1>
<h2>The New Abnormal, The Strokes</h2>
<p>This album is <b>full</b> of passion, commitment and creativity. It has <i>great</i> music.<sup><a href="#section1">[1]</a></sup></p>
<body>
<p>[1] I don't use the word <i>great</i> lightly </p>
</html>
Кроме того, вы можете использовать разрыв строки и горизонтальные линейки для разделения частей текста. Чтобы разорвать линию, мы используем ‹br /›. Давайте добавим разрыв строки между двумя предложениями в нашем абзаце:
<html>
<header>
<title>New Indie Rock Music</title>
</header>
<body>
<h1>New Indie Rock Music</h1>
<h2>The New Abnormal, The Strokes</h2>
<p>This album is <b>full</b> of passion, commitment and creativity. <br /> It has <i>great</i> music.<sub><a href="#section1">[1]</a></sub></p>
<body>
<p>[1] I don't use the word <i>great</i> lightly </p>
</html>
Затем давайте добавим горизонтальную линейку, используя ‹hr /›, для разделения абзаца и заголовка:
<html>
<header>
<title>New Indie Rock Music</title>
</header>
<body>
<h1>New Indie Rock Music</h1>
<h2>The New Abnormal, The Strokes</h2>
<hr />
<p>This album is <b>full</b> of passion, commitment and creativity. <br /> It has <i>great</i> music.<sub><a href="#section1">[1]</a></sub></p>
<body>
<p>[1] I don't use the word <i>great</i> lightly </p>
</html>
Наконец, давайте добавим еще один пост на наш сайт. Это будет для альбома Tame Impala's The Slow Rush:
<html>
<header>
<title>New Indie Rock Music</title>
</header>
<body>
<h1>New Indie Rock Music</h1>
<h2>The New Abnormal, The Strokes</h2>
<hr />
<p>This album is <b>full</b> of passion, commitment and creativity. <br /> It has <i>great</i> music.<sub><a href="#section1">[1]</a></sub></p>
<h2>The Slow Rush, Tame Impala</h2>
<hr />
<p>This album is <b>amazing</b>! <br />I love psychedelic pop. <sub><a href="#section2">[2]</a></sub></p>
<body>
<p>[1] I don't use the word <i>great</i> lightly </p>
<p>[2] Not referring to hallucinogenic soda</p>
</html>
Я остановлюсь здесь, но вы можете попробовать это сами. Я рекомендую вам изучить другие теги, такие как цитирование ссылок, добавление списков и добавление адресов.
ВЫВОДЫ
Подводя итог, в этом посте мы обсудили, как начать создание базового веб-сайта с использованием HTML. Мы обсудили, как указать структурную и семантическую разметку, включая теги заголовка, заголовка, тела и абзаца. Мы также обсудили, как выделить шрифт курсивом, сделать шрифт жирным, добавить сноски, добавить разрывы строк и добавить горизонтальные линии. Я надеюсь, вы нашли этот пост полезным / интересным. Код из этого поста доступен на GitHub. Спасибо за чтение!
