17 простых примеров HTML-кода, которые можно выучить за 10 минут

Несмотря на то, что современные веб-сайты обычно создаются с удобными интерфейсами, полезно знать некоторые основы HTML. Если вы знаете следующие 17 примеров тегов HTML (и несколько дополнительных), вы сможете создать базовую веб-страницу с нуля или настроить код, созданный таким приложением, как WordPress.

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

Содержание
  1. 1.
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6. После того, как вы закроете раздел заголовка, вы перейдете к телу. Вы открываете его с помощью тега и закрываете с помощью тега . Это идет в самом конце вашего файла, непосредственно перед тегом . Все содержимое вашей веб-страницы помещается между этими тегами. Это так просто, как кажется:
    Все, что вы хотите, отображается на вашей странице.
    7. Тег определяет заголовок первого уровня на вашей странице. Обычно это будет заголовок, и в идеале он должен быть только по одному на каждой странице. определяет заголовки второго уровня, такие как заголовки разделов, подзаголовки третьего уровня и т. д., вплоть до . Например, названия тегов в этой статье являются заголовками второго уровня.

    Большой и важный заголовок


    Немного менее большой заголовок


    Sub -Header

    Результат: Как видите, они становятся меньше на каждом уровне. 8. Тег абзаца начинает новый абзац. Обычно при этом вставляются два разрыва строки. Посмотрите, например, на разрыв между предыдущей и этой строкой. Вот что будет делать тег .

    Ваш первый абзац.


    Ваш второй абзац.

    Результат: Ваш первый абзац. Ваш второй абзац. Вы также можете использовать стили CSS в тегах абзацев, например тот, который изменяет размер текста:

    на 20% больше текста

    Результат: 20% крупный текст Чтобы узнать, как использовать CSS для стилизации текста, ознакомьтесь с этими руководствами по HTML и CSS. 9. Тег разрыва строки вставляет одинарный разрыв строки:

    Первая строка.

    Вторая строка (близкая к первой).

    Результат: Первая строка. Вторая строка (близкая к первой). Аналогичным образом работает тег . Таким образом на вашей странице будет нарисована горизонтальная линия, что удобно для разделения частей текста. 10. Этот тег определяет важный текст. В общем, значит, будет жирным. Однако можно использовать CSS для другого отображения текста. Однако вы можете безопасно использовать для выделения текста жирным шрифтом. Очень важные вещи, которые вы хотите сказать. Результат: Вы хотите сказать очень важные вещи. Если вы знакомы с тегом для жирный текст, вы все равно можете его использовать. Нет никакой гарантии, что он продолжит работать в будущих версиях HTML, но пока он работает. 11. Подобно и , и связаны. Тег определяет выделенный текст, что обычно означает, что он будет выделен курсивом. Опять же, существует вероятность того, что CSS будет по-другому отображать выделенный текст. выделенная линия. Результат: Выделенная строка. Тег по-прежнему работает, но, опять же, возможно, что в будущем он станет устаревшим. версии HTML. 12. Тег , или якорь, позволяет создавать ссылки. Простая ссылка выглядит так:
    Перейти к MakeUseOf на новой вкладке Результат: Перейдите к MakeUseOf в новой вкладке Атрибут «title» создает всплывающую подсказку. Наведите указатель мыши на ссылку ниже, чтобы увидеть, как это работает: Наведите указатель мыши на это, чтобы увидеть всплывающую подсказку Результат: Наведите указатель мыши на это, чтобы см. всплывающую подсказку 13. Если вы хотите встроить изображение на свою страницу, вам нужно использовать тег изображения. Обычно вы используете его вместе с атрибутом «src». Здесь указывается источник изображения, например: Результат: Доступны и другие атрибуты, такие как «высота», «ширина» и «alt». Вот как это может выглядеть: названиевашегоизображения Как и следовало ожидать, атрибуты «высота» и «ширина» устанавливают высоту и ширину изображения. В общем, рекомендуется установить только один из них, чтобы изображение масштабировалось правильно. Если вы используете оба, вы можете получить растянутое или сжатое изображение. Тег «alt» сообщает браузеру, какой текст отображать, если изображение не может быть отображено, и его рекомендуется включать в любое изображение. Если у кого-то особенно медленное соединение или старый браузер, они все равно могут понять, что должно быть на вашей странице. 14. Тег упорядоченного списка позволяет создать упорядоченный список. В общем, это означает, что вы получите нумерованный список. Каждому элементу в списке нужен тег элемента списка ( ), поэтому ваш список будет выглядеть так:

    1. Первое

    2. Второе

    3. Третье

    Результат: Первое. Вторая вещь Третья вещь В HTML5 вы можете использовать , чтобы изменить порядок число. И вы можете установить начальное значение с помощью атрибута start. Атрибут «type» позволяет указать браузеру, какой тип символа использовать для элементов списка. Его можно установить на «1», «A,» «a», «I» или «i», установив отображение списка с указанным символом следующим образом:
    15. Неупорядоченный список намного проще, чем его упорядоченный аналог. Это просто маркированный список.

    • Первый элемент

    • Второй элемент

    • Третий элемент

    Результат: Первый элемент Второй элемент Третий элемент Неупорядоченные списки также имеют «тип» атрибуты, и вы можете установить его на «диск», «круг» или «квадрат». 16. Хотя использование таблиц для форматирования не одобряется, во многих случаях вы захотите использовать строки и столбцы для сегментации информации на странице. Чтобы таблица заработала, необходимо несколько тегов. Вот пример HTML-кода:










    Строка 2, столбец 2

    1-й столбец 2-й столбец
    Строка 1, столбец 1 Строка 1, столбец 2
    Строка 2, столбец 1
    и теги определяют начало и конец таблицы. Тег содержит все содержимое таблицы. Каждая строка таблицы заключена в тег . Каждая ячейка в каждой строке заключена в теги для заголовков столбцов или теги для данных столбца. Вам понадобится один из них для каждого столбца в каждой строке. Результат: 1-й столбец 2-й столбец Строка 1, столбец 1 Строка 1, столбец 2 Строка 2, столбец 1 Строка 2, столбец 2 17. Когда вы цитируете другой веб-сайт или человека и хотите выделить цитату отдельно от остальной части документа, используйте цитату тег. Все, что вам нужно сделать, это заключить цитату в открывающие и закрывающие теги цитат:
    Интернет, каким я его представлял, мы еще не видели. Будущее по-прежнему намного больше, чем прошлое.
    Результат: Интернет, каким я его представлял, мы еще не видели. Будущее по-прежнему намного больше, чем прошлое. Точное используемое форматирование может зависеть от используемого вами браузера или CSS вашего сайта. Но тег остался прежним. Go Forth и HTML With Эти 17 примеров HTML (и их количество) вы должны уметь создать простой веб-сайт. Чтобы увидеть, как их все соединить, вы можете загрузить наш образец HTML-страницы. Откройте его в браузере, чтобы увидеть, как все это работает, или в текстовом редакторе, чтобы увидеть, как именно работает код. Чтобы получить больше уроков по HTML, попробуйте эти приложения для микрообучения для программирования.
  7. 7.
  8. определяет заголовок первого уровня на вашей странице. Обычно это будет заголовок, и в идеале он должен быть только по одному на каждой странице.
  9. определяет заголовки второго уровня, такие как заголовки разделов, подзаголовки третьего уровня и т. д., вплоть до . Например, названия тегов в этой статье являются заголовками второго уровня.

    Большой и важный заголовок


    Немного менее большой заголовок


    Sub -Header

  10. подзаголовки третьего уровня и т. д., вплоть до . Например, названия тегов в этой статье являются заголовками второго уровня.

    Большой и важный заголовок


    Немного менее большой заголовок


    Sub -Header

  11. 8.
  12. 9.
  13. 10.
  14. 11.
  15. 12.
  16. 13.
  17. 14.
  18. 15.
  19. 16.
  20. 17.
  21. Go Forth и HTML

1.

Вам понадобится этот тег в начало каждого создаваемого HTML-документа. Это гарантирует, что браузер знает, что он читает HTML, и что он ожидает HTML5, последней версии.

Хотя на самом деле это не HTML-тег, его все же полезно знать.

2.

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

3.

Тег

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

Для базовых страниц тег

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

4.

Этот тег устанавливает заголовок вашей страницы. Все, что вам нужно сделать, это поместить свой заголовок в тег и закрыть его, вот так (я также включил теги заголовков):

  
Мой веб-сайт

Это имя будет отображаться в качестве заголовка вкладки, когда она открывается в браузер.

5.

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

  • description — базовое описание твоя страница.
  • ключевые слова — выбор ключевых слов, применимых к вашей странице.
  • author — Автор вашей страницы.
  • viewport — тег для обеспечения того, чтобы ваша страница хорошо выглядела на всех устройствах.

Вот пример, который может относиться к этой странице:

    


Тег «viewport» всегда должен иметь содержимое «width = device-width, initial-scale = 1.0», чтобы ваша страница хорошо отображалась на мобильных и настольных устройствах.

6.

После того, как вы закроете раздел заголовка, вы перейдете к телу. Вы открываете его с помощью тега

и закрываете с помощью тега . Это идет в самом конце вашего файла, непосредственно перед тегом .

Все содержимое вашей веб-страницы помещается между этими тегами. Это так просто, как кажется:

  
Все, что вы хотите, отображается на вашей странице.

7.

Тег

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

определяет заголовки второго уровня, такие как заголовки разделов,

подзаголовки третьего уровня и т. д., вплоть до

. Например, названия тегов в этой статье являются заголовками второго уровня.
 

Большой и важный заголовок


Немного менее большой заголовок


Sub -Header

Результат:

Как видите, они становятся меньше на каждом уровне.

8.

Тег абзаца начинает новый абзац. Обычно при этом вставляются два разрыва строки.

Посмотрите, например, на разрыв между предыдущей и этой строкой. Вот что будет делать тег

.

 

Ваш первый абзац.


Ваш второй абзац.

Результат:

Ваш первый абзац.

Ваш второй абзац.

Вы также можете использовать стили CSS в тегах абзацев, например тот, который изменяет размер текста:

  

на 20% больше текста

Результат:

20% крупный текст

Чтобы узнать, как использовать CSS для стилизации текста, ознакомьтесь с этими руководствами по HTML и CSS.

9.

Тег разрыва строки вставляет одинарный разрыв строки:

 

Первая строка.

Вторая строка (близкая к первой).

Результат:

Первая строка.

Вторая строка (близкая к первой).

Аналогичным образом работает тег


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

10.

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

Однако вы можете безопасно использовать для выделения текста жирным шрифтом.

  Очень важные вещи, которые вы хотите сказать.   

Результат:

Вы хотите сказать очень важные вещи.

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

11.

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

  выделенная линия.   

Результат:

Выделенная строка.

Тег по-прежнему работает, но, опять же, возможно, что в будущем он станет устаревшим. версии HTML.

12.

Тег , или якорь, позволяет создавать ссылки. Простая ссылка выглядит так:

   Перейти к MakeUseOf на новой вкладке   

Результат:

Перейдите к MakeUseOf в новой вкладке

Атрибут «title» создает всплывающую подсказку. Наведите указатель мыши на ссылку ниже, чтобы увидеть, как это работает:

   Наведите указатель мыши на это, чтобы увидеть всплывающую подсказку   

Результат:

Наведите указатель мыши на это, чтобы см. всплывающую подсказку

13.

Если вы хотите встроить изображение на свою страницу, вам нужно использовать тег изображения. Обычно вы используете его вместе с атрибутом «src». Здесь указывается источник изображения, например:

    

Результат:

Доступны и другие атрибуты, такие как «высота», «ширина» и «alt». Вот как это может выглядеть:

  названиевашегоизображения  

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

Тег «alt» сообщает браузеру, какой текст отображать, если изображение не может быть отображено, и его рекомендуется включать в любое изображение. Если у кого-то особенно медленное соединение или старый браузер, они все равно могут понять, что должно быть на вашей странице.

14.

Тег упорядоченного списка позволяет создать упорядоченный список. В общем, это означает, что вы получите нумерованный список. Каждому элементу в списке нужен тег элемента списка (

  • ), поэтому ваш список будет выглядеть так:
      

    1. Первое

    2. Второе

    3. Третье

    Результат:

    1. Первое.
    2. Вторая вещь
    3. Третья вещь

    В HTML5 вы можете использовать

      , чтобы изменить порядок число. И вы можете установить начальное значение с помощью атрибута start.

      Атрибут «type» позволяет указать браузеру, какой тип символа использовать для элементов списка. Его можно установить на «1», «A,» «a», «I» или «i», установив отображение списка с указанным символом следующим образом:

        

      15.

      Неупорядоченный список намного проще, чем его упорядоченный аналог. Это просто маркированный список.


      • Первый элемент

      • Второй элемент

      • Третий элемент

      Результат:

    • Первый элемент
    • Второй элемент
    • Третий элемент

    Неупорядоченные списки также имеют «тип» атрибуты, и вы можете установить его на «диск», «круг» или «квадрат».

    16.

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












    Строка 2, столбец 2

    1-й столбец 2-й столбец
    Строка 1, столбец 1 Строка 1, столбец 2
    Строка 2, столбец 1

    и

    теги определяют начало и конец таблицы. Тег

    содержит все содержимое таблицы.

    Каждая строка таблицы заключена в тег

    . Каждая ячейка в каждой строке заключена в теги для заголовков столбцов или теги для данных столбца. Вам понадобится один из них для каждого столбца в каждой строке.

    Результат:

    1-й столбец 2-й столбец
    Строка 1, столбец 1 Строка 1, столбец 2
    Строка 2, столбец 1 Строка 2, столбец 2

    17.

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

     
    Интернет, каким я его представлял, мы еще не видели. Будущее по-прежнему намного больше, чем прошлое.

    Результат:

    Интернет, каким я его представлял, мы еще не видели. Будущее по-прежнему намного больше, чем прошлое.

    Точное используемое форматирование может зависеть от используемого вами браузера или CSS вашего сайта. Но тег остался прежним.

    Go Forth и HTML

    With Эти 17 примеров HTML (и их количество) вы должны уметь создать простой веб-сайт. Чтобы увидеть, как их все соединить, вы можете загрузить наш образец HTML-страницы. Откройте его в браузере, чтобы увидеть, как все это работает, или в текстовом редакторе, чтобы увидеть, как именно работает код.

    Чтобы получить больше уроков по HTML, попробуйте эти приложения для микрообучения для программирования.

  • Оцените статью
    oilgasindustry.ru
    Добавить комментарий