Учебное пособие по HTML для начинающих: создание веб-страницы с нуля с помощью HTML

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

Сегодня мы рассмотрим руководство по HTML для начинающих и шаг за шагом создадим веб-страницу. В большинстве руководств по веб-разработке сразу говорится о CSS и JavaScript, но мы хотим убедиться, что вы хорошо разбираетесь в HTML, прежде чем переходить к следующим шагам.

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

Что такое HTML?

Язык гипертекстовой разметки (HTML) — это язык разметки, который мы используем для создания веб-страниц. Это основа каждого веб-сайта, с которым вы сталкиваетесь в Интернете. Думайте о HTML как о кирпичиках, которые вам нужны для создания чего-либо для Интернета. После того, как мы напишем наш HTML-код, мы можем добавить на страницу другие языки, такие как CSS и JavaScript, чтобы добавить интерактивности, стиля и т. Д.

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

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

Ключевые термины и форматирование HTML

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

Теги и элементы

Элемент является индивидуальным компонентом HTML документа, который представляет семантику этой страницы. Например, titleэлемент переводится в заголовок страницы.

Семантика относится к значению определенного элемента. Синтаксис относится к структуре языка программирования.

Для создания элемента мы используем теги. Думайте об этом как о дескрипторах для каждого фрагмента контента, который вы хотите разместить на своей странице. Большинство тегов говорят сами за себя.

• <p>: используется для описания абзаца
• <img>: добавить изображение
• <h1>: установить заголовок самого большого размера для текста
• <a>: привязка создаст гиперссылку на другие файлы HTML

Чтобы использовать теги, мы помещаем содержимое между открывающим и закрывающим тегами. В закрывающем теге используется косая черта /, а в открывающем теге нет. HTML-теги не чувствительны к регистру, поэтому <P>такие же, как <p>.

<p> This is a paragraph element. </p>

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

HTML

<p><strong>These tags are nested properly.</strong></p>

<p>This tag is not nested.</p>

Атрибуты и гиперссылки

Атрибуты HTML предоставляют дополнительную информацию о наших элементах. Думайте об этом как о свойствах элемента. Атрибуты помещаются в открывающий тег, используют =знак и заключают значение атрибута в кавычки » «.

<tagName attribute_name=»attribute_value»></tagName>

Атрибуты могут делать с нашими элементами всевозможные вещи, такие как вставлять изображения, добавлять цвет, объявлять язык страницы или добавлять заголовок. Например, мы можем добавить цвет к нашему тексту, используя следующий формат.

• HTML

<tagName attribute_name="attribute_value"></tagName>

Примечание. Вы можете добавить цвет, используя шестнадцатеричные цветовые коды (для определенных цветов) или одно из 140 названий цветов текста, встроенных в HTML.

Одно из наиболее распространенных применений атрибута — гиперссылка. Мы можем соединить любую HTML-страницу с другой HTML-страницей с помощью тега привязки. hrefАтрибут создаст соединение между двумя узлами.

   <h1 style=»color:green»>Hello, World!</h1>

Заголовки и списки

Заголовки — это то, как мы указываем разницу между основным заголовком и подзаголовками. В стандарте HTML есть шесть текстовых элементов заголовков с соответствующими названиями h1(от самого большого) до h6(самого маленького).

Примечание. Заголовки используются для семантического представления текста. Это отличается от указания размера шрифта. Мы используем CSS для изменения размера шрифта.

HTML

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

Если мы хотим перечислить элементы в виде маркированного или нумерованного списка, мы используем <li>тег. Мы можем создать неупорядоченный список (маркированный) или упорядоченный (пронумерованный).

• Неупорядоченные списки начинаются с <ul>тега и вложенных <li>тегов для обучающего элемента.
• Упорядоченные списки начинаются с <ol>тега и вложенных <li>тегов для обучающего элемента.

HTML

<h1>Grocery Items</h1>

<ul>

    <li>Eggs</li>

    <li>Apples</li>

    <li>Carrots</li>

    <li>Noddles</li>

Неупорядоченный список с тегом <ul>

HTML

<h1>Shopping Instructions</h1>

<ol>

    <li>Go to the store.</li>

    <li>Locate eggs, apples, carrots, and noodles.</li>

    <li>Go to checkout counter.</li>

    <li>Scan and purchase items.</li>

Добавить изображения: <img>тег

Мы можем добавлять изображения на нашу веб-страницу с помощью <img>тега. Нам нужно добавить srcатрибут, содержащий путь к файлу этого изображения. Вы также включите altатрибут, который предоставляет альтернативное текстовое описание на случай, если изображение не загрузится.

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

Примечание. Тег изображения не использует закрывающий тег.

HTML

<h1>Waterfall Photography 101</h1>

   <div class=»imgContainer»>

     <img src=»/udata/DErqVR5q0Pv/longexposurewaterfall1.jpg» alt=»Long Exposure Waterfall»>

     <h4 class=»caption»>Learn how to take stunning waterfall pictures!</h4>

Таблицы HTML

Мы можем добавлять таблицы на веб-страницу, переводя данные таблицы в строки и столбцы. Каждая пара строка / столбец будет иметь связанный с ней фрагмент данных, называемый ячейкой таблицы. Итак, как нам создать таблицу в HTML?

Сначала мы объявляем таблицу HTML с помощью <table>тега. Затем мы добавляем строки в нашу таблицу с помощью <tr>тега. Оттуда мы указываем ячейки с <td>тегом.

<table>
    <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

Взгляните на этот пример ниже, но обратите внимание, что таблица совсем не стилизована. Он будет отображать только данные в том виде, в каком они предоставлены. Если мы хотим добавить в таблицу стиль (цвет фона, отступы, границы и т. Д.), Мы должны использовать язык CSS.

HTML

  <table>

     <tr>

       <th>Name</th>

       <th>Date of Birth</th>

       <th>Weight</th>

     </tr>

     <tr>

       <td>Khalid</td>

       <td>12/13/1994</td>

       <td>130</td>

     </tr>

   </table>

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

Теперь, когда мы знаем термины HTML, давайте обсудим основы форматирования. Мы рассмотрим базовый HTML-файл, прежде чем обсуждать каждую часть ниже.

HTML

<DOCTYPE! html>

<html>

  <head>

    <title>A Basic Web Page</title>

  </head>

  <body>

    <h1>First HTML File</h1>

    <p>Congratulations! You’re learning how to create a webpage.</p>

  </body>

</html>

Первая строка <DOCTYPE! html>называется объявлением типа документа. Это указывает браузеру, в какой версии HTML записан файл. Этот файл указывает, что он написан в HTML5.

Во второй строке мы пишем открывающий <html>тег, чтобы указать корневой элемент. Оттуда мы переходим к другим элементам древовидной структуры. Для того, чтобы правильно определить файл HTML, мы должны поместить <head>и <body>элементы в пределах этого корня.

• <head> Элемент содержит вспомогательную информацию о файле. Мы называем это метаданными. <title>Непосредственно под <head>элементом должен быть указан заголовок страницы.
• <body> Элемент содержит основное содержание нашего файла, который будет вынесенным браузером. Может быть только один <body>элемент. Здесь будет существовать большая часть написанного вами HTML-кода.
• body Затем внутри элемента мы переходим к нашему заголовку <h1>и абзацу самого высокого уровня <p>.

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

Как создать свою собственную веб-страницу с помощью HTML

Хорошо, теперь мы знаем основные термины HTML и знаем, как правильно отформатировать HTML-файл. Но как на самом деле сделать веб-страницу? Давайте рассмотрим пошаговое руководство, чтобы узнать, как это делается. Мы создадим простую веб-страницу «Обо мне», которая будет включать в себя следующее:

• Заголовок с вашим именем
• Описание себя в абзаце
• Список ваших навыков
• Гиперссылка на понравившийся сайт (или личный сайт)
• Таблица вашего опыта работы

Загрузите и откройте редактор HTML

Веб-страницы создаются с помощью редакторов HTML. Думайте об этом как о текстовом процессоре, но специально для создания файлов HTML. Существует множество вариантов текстовых редакторов, различающихся по сложности и надежности. Если вы только начинаете, я рекомендую использовать простой текстовый редактор, например TextEdit (Mac), Notepad (ПК) или Atom. Большинство текстовых редакторов можно загрузить бесплатно.

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

Напишите простой HTML-файл

Открыв редактор, создайте новый файл и напишите основную структуру HTML-страницы. Попробуйте сами написать базовую структуру в виджете кода ниже, используя то, что мы узнали выше. Если вы застряли, ответ можно найти ниже. Вы должны включить:

• Объявление типа документа
• Заголовок страницы под названием «Моя HTML-страница: (Ваше имя)».
• Заголовок ( h1) под названием «Обо мне: (Ваше имя)».
• Абзац с 1-2 предложениями о вас
• Правильные закрывающие теги

Гиперссылка на понравившийся вам сайт (или личный сайт)

Теперь давайте добавим ссылку на ваш личный веб-сайт или веб-сайт по вашему выбору. Скопируйте код, который вы написали сверху, и продолжайте добавлять к нему ниже. Попробуйте сами, прежде чем проверять решение. Мы добавим это чуть ниже вашего личного описания. Он должен включать:

• Заголовок страницы, на которую вы ссылаетесь
• URL-адрес для ссылки на этот сайт

Добавьте список своих навыков.

Теперь давайте добавим неупорядоченный список ваших навыков. Скопируйте полученный код из приведенного выше и продолжайте добавлять следующий шаг HTML-кода. Попробуйте сами написать код в виджете кода ниже, используя то, что мы узнали выше. Если вы застряли, ответ можно найти ниже. Вы должны включить:

• Заголовок ( h3) под названием «Мои навыки»
• Маркированный список из 5 навыков
• Правильные закрывающие теги для списка

Добавьте таблицу своего опыта работы.

А теперь давайте добавим таблицу вашего опыта работы. Скопируйте полученный код из приведенного выше и продолжайте добавлять следующий шаг HTML-кода. Попробуйте сами написать код в виджете кода ниже, используя то, что мы узнали выше. Если вы застряли, ответ можно найти ниже. Вы должны включить:

• Заголовки столбцов: работодатель, должность, годы.
• 3 бывших вакансии с заполнением каждого из вышеперечисленных столбцов

Завершите работу и сохраните веб-страницу.

Выполнив все эти шаги, вы захотите сохранить HTML-файл на своем компьютере. Выберите « Файл»> «Сохранить как» в Блокноте или другом текстовом редакторе. Назовите файл your_name.htmlи установите кодировку UTF-8 (предпочтительно для файлов HTML).

После сохранения файла вы можете открыть его в браузере, щелкнув файл правой кнопкой мыши, выбрав « Открыть с помощью» и выбрав свой браузер. Вы увидите свою базовую HTML-страницу!

Заключение

Поздравляю! Вы официально создали простую веб-страницу самостоятельно. Вы на пути к тому, чтобы стать веб-разработчиком. Еще предстоит многому научиться, но HTML — действительно важная ступенька. Следующие шаги в вашем путешествии по веб-разработке:

• Расширенный HTML
• CSS (для добавления стиля)
• JavaScript (для интерактивности)
• Библиотеки и фреймворки (предварительно написанный код)
• Расширенные концепции веб-разработчиков