HTML Tutorial For Beginners: Create Your First Website Today

By /

HTML stands for Hypertext Markup Language. HTML was originally based on the Standard Generalized Markup Language (SGML), a much larger, more complicated document-processing system. To write HTML pages, you won’t need to know much about SGML. Whether you want to create a basic webpage or a sophisticated website, you must first understand HTML.

Who Invented HTML?

Physicist Tim Berners-Lee invented HTML in 1991. He created it to organize and distribute documents online.

boAt Airdopes

boAt Airdopes 141 Power  Performance Pure Sound!

Check Price

HTML Boilerplate (Basic Structure)

All HTML documents follow to a typical layout called a boilerplate:

Explanation

  • <!DOCTYPE html> : It specifies this is an HTML5 document.
  • <html lang="en"> : This is the root element of an HTML page, with the language specified.
  • <head> : It contains metadata like CSS styles, titles etc.
  • <meta charset="UTF-8"> : It ensures the correct display of the characters you use on your website.
  • <title> : It defines the title of the page.
  • <body> : Contains the content of the webpage.

Sorry, I mistakenly wrote “c” at the end of the closing </html> tag in the above video. Please ignore this.

HTML Headings

There are six heading tags :

html-heading-element

Explanation:

  • <h1> is the most important heading.
  • <h6> is the least important heading.
  • Headings are used by search engines to understand page layout.

Caution

Don’t use headings to display text in boldface type or to make certain parts of your page stand out more. Even though the result may appear as intend, it will not properly represent the structure of your page in the markup. This comes into play for search engines, accessibility, and some browsers.

Paragraph and Line Break

Paragraphs are created using the <p> tag and <br> tag for line breaks.

Example:

paragraph-code-snap
output-of-paragraph-tag-new

How to Comment in HTML

You can put comments into HTML pages to describe the page itself or to provide some kind of indication of the status of the page. Some source code control programs store the page status in comments, for example. Text in comments is ignored when the HTML file is parsed; comments never show up onscreen- that’s why they’re comments. Comments look like the following:

<!-- This is a comment -->

How to Add an Image in HTML

After you have an image, you can include it on your web page. Inline images are placed in HTML documents using the <img> tag. This tag, like the <hr> and <br> tags, has no closing tag in HTML.

<img src="image.jpg" alt="A sample image" width="500" height="300">

Explanation

  • src : Indicates the location of the image file.
  • alt : Provides alternative text for accessibility.
  • width & height : Specifies the measurements of the image.

Creating Links

<a> Developers use this tag to create a hyperlink. Example:

<a href="https://www.bitramind.com">Visit My Blogging Website BitraMind Everyday👨🏾‍💻</a>

Explanation

When you create links using <a>, the link has two parts: the href attribute in the opening <a> tag, and the text between the opening and closing tags that serves as a hot spot for the link. This link tells the browser to load the website “bitramind.com“.

Horizontal Line

The <hr> tag creates a horizontal line to divide content. Example:

<p>First section</p>
<hr>
<p>Second section</p>

How to Create a Table in HTML

All the components of a table are placed within a <table>…..</table> element. Here’s the simple code example that produces the table.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Arpan</td>
        <td>23</td>
    </tr>
    <tr>
        <td>Tony</td>
        <td>60</td>
    </tr>
    <tr>
        <td>Riya</td>
        <td>29</td>
    </tr>
</table>
html table

This is the output of the above code. Notice that the table starts with a <table> tag and its attributes and ends with a </table> tag.

Explanation

  • <table> : Creates a table.
  • <tr> : Defines a row.
  • <th> : Defines a table header.
  • <td> : Defines a table cell.

Creating Lists

There exist two kinds of lists: ordered and unordered.

Ordered List (<ol>)

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
ordered-list

Ordered lists are surrounded by the <ol>….</ol> tags (ol stands for ordered list), and each item within the list is included in the <li>….</li> (list item) tag. When the browser displays an ordered list, it numbers and indents each of the elements sequentially. You don’t have to number the items yourself, and if you add or delete items, the browser automatically renumbers them when the page loads next time.

Ordered lists are good for steps to follow or instructions to the readers or when you want to rank the items in a list.

Unordered List (<ul>)

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>
unordered list

People often refer to unordered lists as bulleted lists. Each element in the list has the same marker instead of a number. The markup to create an unordered list looks just like an ordered list except that the list is created by using <ul>….</ul> tags rather than ol. The elements of the list are placed within <li> tags, just as with ordered lists.

Browsers have standardized on using a solid bullet to mark each item in an unordered list by default.

9-brand-sastras
9 Brand Shaastras: The Power of Branding!
Check Price

Conclusion

This guide explained the fundamentals of HTML, featuring its structure, headings, images, tables, lists, comments, and hyperlinks. By learning these components, you can begin creating your own web pages. Continue to practice and experiment with HTML to enhance your abilities!

Don’t forget to comment on how you liked this HTML tutorial.

5,777 thoughts on “HTML Tutorial For Beginners: Create Your First Website Today”

  1. rutor forum

    Rutor — известный форум darknet-пространства России с давней историей, анонимной регистрацией и сервисом для защиты транзакций посредством Rutor.Rutor: Один из ключевых проектов русскоязычного даркнета

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

    Главные аспекты функционирования Rutor
    Данная система обеспечивает доступ к значительным объемам данных и файлов, гарантируя при этом повышенную анонимность и защиту пользователей. Особенность сервиса в том, что он работает через сеть Rutor, что существенно снижает риск идентификации и утечки данных. С течением времени площадка превратилась в важный архив событий и истории русскоязычного даркнета.

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

    – Сохранение анонимности
    – Гарантия безопасности сделок
    – Открытый доступ к специализированному контенту
    – Защищённость коммуникаций

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

    Reply
  2. onyxstormepubNon

    There is no safety in the skies anymore. The aerial combat scenes are written with a kinetic energy that makes your heart race. The Onyx Storm epub captures this energy perfectly on the digital page. Violet and Xaden must navigate trust issues while fighting a war they are losing. It is a compelling narrative of love and war. The ebook is the perfect solution for readers who want to save shelf space but still experience the epic scale of the story. https://onyxstormepub.ru/ Onyx Storm Download Epub

    Reply
  8. rutor даркнет форум

    В русском даркнете Rutor занимает прочные позиции «ветерана» благодаря стабильности, системе безопасности и поддержке транзакций через Rutor.Rutor: Ветеран русскоязычного даркнета

    https rutor info зеркало считается одним из наиболее популярных и старых ресурсов в рунет-даркнете, который прочно закрепился в инфраструктуре анонимных площадок. Данный сервис специализируется на доступе к широчайшему ассортименту софта, файлов, новостей и разнообразных материалов, охватывающих вопросы взлома и защиты.

    Особенности работы системы Rutor
    Система курирует доступ к огромному количеству информации и файлов, сохраняя дополнительную конфиденциальность и анонимность своих пользователей. Главное преимущество платформы — интеграция с сетью Rutor, что значительно уменьшает вероятность раскрытия личности и потери конфиденциальной информации. С течением времени площадка превратилась в важный архив событий и истории русскоязычного даркнета.

    Rutor продолжает работать и предоставлять стабильный доступ к ресурсам, удовлетворяя потребности как новичков, так и опытных пользователей даркнета. Каждый из разделов сайта — магазин, новостные ленты или руководства по взлому — образуют отдельную звено в масштабном сообществе, где главными ценностями выступают конфиденциальность и защита анонимности.
    Будущее платформы: вызовы и обещания
    Ясно, что будущая деятельность Rutor потребует решения новых рисков, внедрения свежих подходов к безопасности и средств обхода ограничений. Пользователи обязаны понимать, что ни одна анонимная платформа не может дать абсолютную защиту.
    Сервис остается местом, где можно получать дополнительную информацию, обсуждать вопросы безопасности, следить за новостями и инновациями в области даркнета. Технический прогресс, рост числа участников и новые функциональные решения превращают Rutor в ключевой узел русскоязычного интернет-сообщества.

    – Анонимность
    – Гарантия безопасности сделок
    – Возможность получения эксклюзивных данных
    – Конфиденциальность общения

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

    Reply
  9. xanatharsguidetoevNon

    Navigating the complex rules of 5th Edition becomes much easier with the clarifications provided in this volume. Xanathar’s Guide to Everything revisits core concepts like falling, sleeping in armor, and tool proficiencies, giving them much-needed depth. If you have been searching for a Xanathar’s Guide to Everything PDF to settle table disputes, our articles outline the official rulings found in the book. We clarify the confusing aspects of the game so you can focus on the story rather than arguing over mechanics. Make your game run smoother with these essential rule updates and clarifications. https://xanatharsguidetoeverythingpdf.ru/ Xanathar’s Guide To Everything Pdf Purchase

    Reply
  10. kingofwrathpdfNon

    There is a darkness in Dante that appeals to readers who like their heroes with an edge. He is not a boy scout. He is a man who makes difficult choices. If you are looking for a King of Wrath PDF, you are looking for that complexity. It makes his softness toward Vivian even more precious. https://kingofwrathpdf.ru/ King Of Wrath Series Epub

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top