5 основных тем в HTML, которые вы должны знать

HTML составляет основу любого веб-сайта, который вы видите. Будь то tharunshiv.com, google.com или amazon.com. К счастью, для освоения HTML не требуется много времени. В этой статье я перечислю наиболее важные темы HTML, которые помогут вам начать свое знание HTML или пересматривать основные темы.

5 важных тем

1. Основной синтаксис и элементы

Это пример базовой веб-страницы HTML, которая показывает заголовок и строку текста.

<html> 
    <head> 
       <title>My First WebPage</title> 
    </head> 
    
    <body> 
       <h1>Welcome Buddy!</h1> 
           <p>It's fun building websites</p> 
    </body> 
</html>

Итак, HTML написан с использованием вложенных тегов. Он состоит из элементов, обладающих определенными свойствами. Знайте различные существующие элементы, знайте хотя бы несколько наиболее часто используемых тегов. Некоторые из наиболее часто используемых элементов: h1, p, img, form, table, ul, ol, div, span.

2. Класс | идентификатор

Знайте, когда вам нужно использовать класс, а когда использовать идентификатор. Класс используется, когда вам нужно настроить таргетинг на множество элементов. Идентификатор используется, когда вы хотите настроить таргетинг на уникальный элемент. Это означает, что многие элементы могут иметь одно и то же имя класса, но только один элемент должен иметь этот уникальный идентификатор. Классы и идентификаторы используются в следующих ситуациях:

  • Чтобы стилизовать группу элементов
  • Чтобы стилизовать один элемент
  • Чтобы изменить значение элемента
  • Чтобы добавить новый элемент относительно этого элемента и т. д. Перед классом ставится «.» (точка) Перед идентификатором ставится «#»

3. Добавление таблиц стилей

Простая HTML-страница в наши дни скучна по сравнению с уровнем творчества, который демонстрируют сегодня веб-дизайнеры. Итак, чтобы создать что-то красочное, придать ему какой-то дизайн, нам определенно нужно использовать Styling для нашего веб-сайта. Это будет связано с CSS — каскадными таблицами стилей. Существует 3 способа использования CSS для HTML-сайта.

  • Inline: стили записываются внутри тегов.
  • Внутренний: стили написаны на одной HTML-странице.
  • Внешний: стили записываются во внешний файл и используются одной или несколькими HTML-страницами.

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

4. Таблицы в HTML

Вы можете подумать, что таблицы устарели и в настоящее время ими никто не пользуется. Это неправда. Таблицы используются во многих частях веб-сайта, таких как формы, табличное отображение содержимого, удобное выравнивание содержимого. Таблицы можно создавать с использованием исходного тега <table> и стилизовать его самостоятельно или с помощью фреймворков CSS, таких как Bootstrap или Materialize CSS, чтобы легко стилизовать таблицу. Строки таблицы также можно генерировать динамически, комбинируя HTML с JavaScript (новичку это не обязательно).

<table> 
    <tr> 
        <th>S.no</th> 
        <th>Name</th> 
        <th>Age</th> 
        <th>Gender</th> 
    </tr> 
    <tr> 
        <td>1</td> 
        <td>Tharun</td> 
        <td>21</td> 
        <td>Male</td> 
    </tr> 
    <tr> 
        <td>2</td> 
        <td>Shiv</td> 
        <td>26</td> 
        <td>Male</td> 
    </tr> 
    <tr> 
        <td>3</td> 
        <td>Nandi</td> 
        <td>24</td> 
        <td>Male</td> 
    </tr> 
</table>

Приведенный выше код приводит к следующей таблице

5. Метатеги

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

Где я могу узнать это?

У меня есть точное место, где вы можете узнать об этом, задать сомнения, а также получить Сертификат об окончании. Ознакомьтесь с этим курсом от Udemy (Click) Веб-разработка — HTML — Структура любого веб-сайта — ПОЛНАЯ. Первые несколько видео бесплатно на моем канале YouTube. Попробуйте их здесь: Быть ​​профессионалом — YouTube — HTML-плейлист Спасибо, что прочитали!

Первоначально опубликовано на https://www.tharunshiv.com 8 марта 2020 г.