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.

3,126 thoughts on “HTML Tutorial For Beginners: Create Your First Website Today”

  1. vivodzapojkrasnoyarsktog

    Если вы столкнулись с трудностями зависимости‚ важно помнить‚ что наркологическая помощь нужна. На ресурсе vivod-iz-zapoya-krasnoyarsk018.ru вы найдете информацию о помощи при зависимости и реабилитации алкоголиков. Неотложная помощь и поддержка семьи играют важную роль в восстановлении после зависимости. Мы готовы предложить консультации анонимно у нарколога и программы детоксикации. Психотерапия и программы восстановления помогут бороться с последствиями зависимости и снизить риск рецидивов. Обратитесь за медицинской помощью‚ чтобы начать путь к здоровью.

    Reply
  3. alkogolizmkrasnoyarsktog

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

    Reply
  6. vivodzapojkrasnoyarsktog

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

    Reply
  9. DanieleCat

    AI Marketing Automation is changing the way companies handle online marketing through automating routine processes and improving efficiency. With automation powered by artificial intelligence, marketers can schedule posts, analyze performance, and improving outcomes without manual intervention. It helps businesses reduce workload with steady brand messaging across multiple channels. Applying AI-driven solutions, brands can prioritize engagement and building relationships rather than operational bottlenecks. In the end, AI automation makes campaigns smarter and scalable for long-term success.
    Artificial Intelligence marketing strategies are critical for companies aiming to stay competitive in today’s online market. They use advanced AI technologies, predictive analytics, with smart workflows to deliver personalized experiences to customers. By examining audience data, AI enables brands to design ads that appeal to niche groups. Using AI-based approaches allows instant optimization through analytics, to boost profitability. Brands that embrace AI first secure a competitive edge in building long-term loyalty.
    Beginner guide to AI marketing gives practical advice for companies starting with AI in their campaigns. It teaches how AI improves efficiency, interpret insights, boost audience reach for optimal performance. First-time adopters understand the role of AI into existing workflows without disrupting current processes. The guide also highlights common challenges with practical fixes, helping businesses launch smoothly. With a beginner guide to AI marketing, companies can embrace innovation and achieve measurable success.
    Automation platforms for marketers are essential for digital success, delivering tools to optimize processes. They support companies in lead nurturing and campaign tracking without manual work. Advanced platforms integrate AI capabilities, enabling predictive insights and personalized recommendations. Selecting the best automation software supports efficient operations among stakeholders and consistent brand messaging. With ongoing innovation, these tools continue to enhance efficiency and boosting ROI for companies big and small.
    Personalization at scale is a key advantage of artificial intelligence, allowing brands to tailor messages for thousands of customers simultaneously. By leveraging predictive analytics marketing, businesses can anticipate consumer needs and deliver relevant content in advance. This approach improves engagement, boosts conversion rates, while building trust. Integrating mass customization with AI-powered predictions makes marketing efforts forward-thinking and highly targeted. In the end, businesses can foster strong engagement with their market and securing future profitability.

    Facebook
    Instagram
    Reddit
    LinkedIN

    Reply
  10. narkologiyakrasnoyarsktog

    Анонимная наркологическая помощь — это значимый этап для пациентов с проблемами зависимости. На сайте vivod-iz-zapoya-krasnoyarsk016.ru можно получить сведения о лечении зависимостей, реабилитации и ресурсах. Конфиденциальное лечение позволяет пациентам находить решение без опасений осуждения.Помощь нарколога включают выведение токсинов, психологическую поддержку и кризисную интервенцию. Реабилитационные программы часто включает группы поддержки, что усиливает процесс восстановления. Профилактика зависимости также играет значимую роль, обеспечивая долгосрочный успех. Консультации помогут разобраться в проблемах и разработать стратегии выхода. Помощь для людей с зависимостями доступна и доступна, даже если они сомневаются в возможности помощи.

    Reply

Leave a Comment

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

Scroll to Top