Шпаргалка по HTML: как реализовать таблицы, ссылки и многое другое

Шпаргалка по HTML Программирование и разработка

HTML означает язык гипертекстовой разметки. Это стандартный язык разметки для создания веб-страниц. Он используется вместе с такими технологиями, как каскадные таблицы стилей (CSS) и JavaScript в современной веб-разработке.

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

Базовый состав страницы

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

Пустым элементам не нужны открывающие и закрывающие теги, так как между ними нет содержимого.

В целях стилизации элементы HTML можно разделить на элементы уровня блока и элементы встроенного уровня. Элементы уровня блока вызывают разрыв строки, занимают место и складываются по странице. Однако встроенные элементы занимают место только по мере необходимости.

Ниже приведен HTML-код, описывающий очень простую веб-страницу.

<!DOCTYPE html>
<html lang=»en»>
  <head>
   <!— This is a comment in HTML —>
   <!— Elements that contain information about the webpage including the title and links to external resources go here —>
   <meta charset=»UTF-8″>
   <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
   <title>Document</title>
  </head>
  <body>
    <!— Elements that will be displayed go here  —>
  </body>
</html>

Декларация определяет, что этот документ представляет собой документ HTML5. Существуеттег на корневом уровне, и он состоит из двух основных элементов:иэлементов.

Общие элементы HTML

Ниже мы обсудим наиболее распространенные элементы HTML для создания структуры и организации текста.

Заголовки

Теги заголовков представляют все уровни заголовков в HTML. Она имеет шесть уровней , <h1>через <h6>, с <h1>обозначив наиболее важными с наибольшим размером и начертанием.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

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

Абзацы

<p>Тег создает пункт. Разрывы строк и пробелы обычно игнорируются, когда абзацы отображаются в браузере.

<p>Hello, your Educative password has been reset.
       Please log in to resume learning!
</p>

Элемент разделения контента

<div>Тег представляет собой деление или раздел в HTML — документе, он служит в качестве контейнера , который может быть использован для содержания группы , чтобы они могли быть легко стиль.

Читайте также:  Как использовать указатели в C?

Этот стиль может быть выполнен встроенным или с помощью CSS, ссылающегося на их атрибуты class или id.

<div>some content!!!</div>

Разрывы строк

<br />Тег является хорошим примером пустого элемента, он используется для обеспечения разрыва строки внутри <p>тега. Он может быть записан как самозакрывающийся тег <br />или просто открывающий тег <br>.

<p>Hello,<br /> your Educative password has been reset.<br />Please login to resume learning!</p>

Форматирование текста

Все элементы HTML для форматирования текстов являются элементами встроенного уровня. Некоторые теги, используемые для форматирования текста в HTML, включают следующее.

Strong text

<strong>This text is bold and important.</strong>

Этот текст жирный и важный

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

Emphasized Text

<em>This text is italicized for emphasis.</em>

Этот текст выделен курсивом для акцента.

Вы также можете использовать <i>тег.

Small Text

<em>This text is italicized for emphasis.</em>

Эти слова меньше, чем другие.

Large Text

<big> These words are larger than </big> the others.

Эти слова крупнее других.

Highlighted Text

<mark> This text is highlighted.</mark>

Этот текст выделен.

Strikethrough Text

<strike>This is an example of strikethrough text</strike>

Это пример зачеркнутого текста

Underlined Text

<u>This sentence is underlined.</u>

Это предложение подчеркнуто.

Superscript and Subscript Text

An equation with superscript text: X<sup>2</sup>

Уравнение с надстрочным текстом: X 2.

Мы также можем обозначать химическое соединение с помощью тега нижнего индекса:

CO<sub>2</sub>

CO2

Span tag

Span tag can be used to <span style="color:red">style</span> section of a text.

Тег Span можно использовать для стилизации раздела текста.

Тег HTML определяет гиперссылку для навигации. Это элемент встроенного уровня. hrefАтрибут содержит URL, который будет осуществлять навигацию.

This is <a href="url">a link</a>

Атрибут target используется для указания местоположения, в котором будет отображаться документ / URL. Некоторые из возможных вариантов:

_blank: открывает связанный документ в новом окне или вкладке браузера

<a href="https://bestprogrammer.ru//blog" target="_blank">link</a> 

_self: открывает ссылку в том же фрейме

<a href="https://bestprogrammer.ru/" target="_self">link </a>

_parent: открывает связанный документ в родительском фрейме

<a href="https://bestprogrammer.ru//learn" target="_parent">link </a> 

_top: открывает документ во всем окне

<a href="https://bestprogrammer.ru//blog" target="_top">link </a>
<a href="mailto:email@example.com">Send email</a>

<a href="tel:0123492">Call 0123492</a>

Media Elements

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

Читайте также:  Интересные проекты Python для начинающих

Video

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

<video width=»300″ height=»240″ controls>
  <source src=»url» type=»video/mp4″>
  <source src=»alternate-url» type=»video/ogg»>
</video>

Audio

<audio controls>
  <source src=»url» type=»audio/ogg»>
  <source src=»alternate-url» type=»audio/mpeg»>
</audio>

Image

<img src=»path/to/image» alt=»alternate text» width=»480px» height=»360px»>

Lists

Есть несколько видов списков, которые мы можем создавать с помощью HTML.

Упорядоченный список

<ol> определяет упорядоченный список. По умолчанию он пронумерован. Формат нумерации можно изменить с помощью атрибута type.

  1. Вода
  2. Чай
  3. Молоко

Неупорядоченный список

<ul> определяет неупорядоченный список. Пункты списка будут выделены.

  • Рис
  • Овощи
  • Масло

Тип и начальные атрибуты

type Атрибут присутствует в обеих упорядоченных и неупорядоченных списках и используется в изменении нумерации и пули стиля. В startатрибут определяет, какой номер / буква / римская цифра первый элемент в упорядоченном списке должны начать свой отсчет с.

<!— Unordered List bullet types —>
<ul type=»square»>
<ul type=»disc»>
<ul type=»circle»>
<!— Ordered List numbering styles —>
<ol type=»1″> <!— Default-Case Numerals —>
<ol type=»A»> <!— Upper-Case Letters —>
<ol type=»a»> <!— Lower-Case Letters —>
<ol type=»I»> <!— Upper-Case Numerals —>
<ol type=»i»> <!— Lower-Case Numerals —>
<ol type=»1″ start=»3″> <!— numbering starts from 3 —>
<ol type=»A» start=»5″> <!— Letters starts with E —>

Таблицы и формы

Сказки очень часто используются в HTML для организации текста и чисел. Давайте узнаем, как создавать таблицы и добавлять отступы.

Базовая структура таблицы

<table>
  <tr>
  <!— <th> represent a table heading, <tr> defines a table row —>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
  <!— <td> element holds table data—>
    <td>Bill Jones</td>
    <td>54</td>
    <td>Nashville</td>
  </tr>
   <tr>
    <td>Sura Keyser</td>
    <td>45</td>
    <td>Berlin</td>
  </tr>
   <tr>
    <td>Sarah Hernandez</td>
    <td>60</td>
    <td>Mexico City</td>
  </tr>
</table>

Атрибуты Cellpadding и Cellspacing

Cellpadding и Cellspacing — это <table>атрибуты, используемые для регулировки количества пустого пространства в ячейках таблицы.

<table cellspacing=»5″ cellpadding=»5″>
  <!—cellspacing attribute defines space between table cells—>
  <!— cellpadding represents the distance between cell borders and the content within a cell —>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Bill Jones</td>
    <td>54</td>
    <td>Nashville</td>
  </tr>
   <tr>
    <td>Sura Keyser</td>
    <td>45</td>
    <td>Berlin</td>
  </tr>
   <tr>
    <td>Sarah Hernandez</td>
    <td>60</td>
    <td>Mexico City</td>
  </tr>
</table>

Forms

HTML-форма используется для сбора пользовательского ввода.

<form action=»path/to/register» method=»POST»>
        <input type=»text»>
       <input type=»email» placeholder=»example@email.com»>
       <input type=»number»>
       <input type=»date»>
       <input type=»checkbox»>
       <textarea name=»» id=»» cols=»30″ rows=»10″></textarea>
       <!—Radio buttons allow selection of only one option —>
       <input type=»radio» id=»apples» name=»favourite-fruit» value=»apples»>
       <label for=»apples»>Apples</label><br>
       <input type=»radio» id=»oranges» name=»favourite-fruit» value=»oranges»>
       <label for=»oranges»>Oranges</label><br>
       <input type=»radio» id=»other» name=»favourite-fruit» value=»other»>
       <label for=»other»>Other</label>
       <button type=»submit»>Submit Form</button>
</form>
Оцените статью
bestprogrammer.ru
Добавить комментарий