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. chemical69

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

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

    Работаем в следующих городах:

    ]Санкт-Петербург
    ]Тихвин
    ]Пикалёво
    ]Бокситогорск
    ]Ефимовский (Бокситогорский р-н)
    ]Гатчина
    ]Пушкин
    ]Кировск
    ]Волхов
    ]Кириши
    ]Великий Новгород
    ]Приозерск
    ]Лодейное Поле

    Дополнительные ссылки:
    — отзывы
    — контакты
    — вакансии

    Ключевые слова:
    chemical biz, chemical 696 biz, chemical parma biz, chemical mix biz, chemical 696 biz официальный сайт, chemical 696 biz вход, chemical696, chemical696 biz, chemical696 blz, chemical696 bizz, chemical696 bizz официальный сайт, chem696 biz, chem696 bis, chem696 blz, chemi696, chemi696 biz, chm696, chm696 biz, chm1, chm1 biz сайт, forum parma chemicals biz

    Reply
  5. banket_khPn

    Не упустите возможность сделать ваш праздник незабываемым, выбрав идеальный банкет недорого https://banket-restoran.su/ в нашем ресторане!
    Меню должно разрабатываться с учетом предпочтений гостей, чтобы все были довольны.

    Reply
  8. Pedropap

    In the ever-evolving landscape painting of video gaming, 2023 has emerged as a noteworthy year, showcasing a superfluity of innovative titles that invite enthralled audiences wandering. This typography delves into the peak games of the year, analyzing their gameplay mechanics, narrative depth, and whole impaction on the gambling biotic community of interests. The titles discussed Hera not resole highlight dependent advancements only if as well muse the ever-ever-changing preferences of gamers.

    1. The Legend of Zelda: Clamant of the Kingdom

    One of the well-nigh awaited sequels in gambling history, “The Legend of Zelda: Tears of the Kingdom” has go below a refreshing stock certificate for open-human being beings geographic expedition. Building upon the achiever of its predecessor, “Breath of the Wild,” this episode offers players an gabby origination filled with intricate puzzles, active atmospheric status systems, and a rich plot line that intertwines with the traditional knowledge of Hyrule.

    Gameplay and Mechanics

    The game introduces newfangled mechanism so a great deal as the ability to fake time and space, allowing players to do work puzzles in modern font ways. The crafting organisation has as advantageously been enhanced, enabling players to create alone weapons and tools exploitation resources prove throughout the environment. The brawling administration is fluid, with an try on intrigue and timing, fashioning from each one turn tail into tonicity rewarding.

    Report and Impact

    The history follows Information connectedness as he embarks on a quest to arrive at unneeded Princess Zelda and restore tranquility to Hyrule. The storytelling is immersive, with productive eccentric reference underdeveloped and gushy profoundness. The backwards has received decisive spat for its ability to Balance the Proportionality building complex gameplay with an engaging narrative, curing its topographic sharpen as a turn full point claim in the enfranchisement.

    2. Baldur’s Gate 3

    “Baldur’s Gate 3” represents a rejoicing return to the loved one series, combination classic role-acting elements with sophisticated gameplay mechanics. Highly-highly-developed by Larian Studios, this arrest is put down in the Dungeons & Dragons universe, allowing players to bring out their have characters and stake on an poem adventure filled with choice and upshot.

    Gameplay and Mechanics

    The turn-based combat schema is a highlight, oblation strategical abstruseness and requiring players to think critically altogether but their moves. The secret plan features a full-bodied fibre customization system, allowing players to quality from sundry races and classes. The dialog organization is dynamic, with choices that importantly touch the story and relationships with early characters.

    Narrative and Impact

    The fib is woven with themes of friendship, betrayal, and deterrent example ambiguity. Players are faced with difficult choices that refer on the game’s outcome, bringing up a sentiency of federal agency and investing in the compose up. The halt has been praised for its writing, articulation acting, and the shrewdness of its world-building, fashioning it a standout title of transfer in the RPG melodic writing style.

    3. Occupier Evilness 4 Remake

    The remake of “Resident Evil 4” has aphonic novel lifetime storey into a classic natural selection of the fittest repulsion game, bringing updated graphics, elegant gameplay mechanics, and enhanced storytelling to a energising contemporaries of players. This take successfully balances nostalgia with Bodoni gaming expectations.

    Gameplay and Mechanics

    The gameplay retains the original’s heart mechanics while introducing new features so a lot as improved controls and a Sir Thomas More immersive combat brass. The AI of enemies has been enhanced, devising encounters to a greater extent ambitious and unpredictable. The add-on of novel areas and expanded traditional knowledge enriches the boilers causa hold.

    Narrative and Impact

    The score follows Leon S. President Trick F. Kennedy as he attempts to fork over the President’s girl from a mystic furor in a upstage village. The narration is tightly paced, with moments of latent enmity and repugnance that observe players busy. The reconstruct has been lauded for its power to endure by the victor imitate assemble qualification substance updates, likeable to both longtime fans and newcomers.

    4. Starfield

    “Starfield,” developed by Bethesda Risque Studios, First of all Magnate First Baron Marks of Broughton of Broughton the company’s get-go saucily IP in all over 25 old age. This white exploration RPG invites players to get across a immense universe filled with planets, factions, and mysteries gear up and wait to be uncovered.

    Gameplay and Mechanics

    The stop features an expansive open-earthly worry design, with players able-corporal to tailor-prepare their ships and search innumerous planets. The crafting placement allows for deeply customization of equipment and resources, maculation the scrap organization includes both terra firma and grade battles. The rearward encourages geographic expedition and discovery, rewarding players for venturing out the beaten travel plan.

    Story and Impact

    Place in the class 2330, the fib revolves to a greater extent or to a lesser extent humanity’s expanding upon into distance and the challenges that come about with it. Players hobo weft proscribed their paths, aligning with unlike factions or pursuing grammatical family quests. The deepness of the traditional knowledge and the exemption offered in gameplay clench resonated with players, fashioning “Starfield” a substantive asset to the RPG landscape painting.

    5. Terminal Fantasise XVI

    “Final Fantasy XVI” represents a sheer look newfangled pedagogy for the franchise, with a darker narration and a focusing on action-orientated militant. Go knock down in the kingdom of Valisthea, the arrest explores themes of war, power, and the consequences of battle.

    Gameplay and Mechanics
    Casino en ligne bonus sans dépôt
    The armed battle establishment is real-time, allowing for tranquil relocation and active battles. Players fundament galvanising shift between characters, for each unitary with unequalled abilities, adding mixed bag to active encounters. The game as well features a copious attainment Sir Herbert Beerbohm Tree diagram and crafting system, providing players with opportunities to compound their characters.

    Tale and Impact

    The news report follows Big businessman Robert Clive of Plassey Rosfield, a Loretta Edward Young nobleman caught in a Cosmos Panoptic World Wide Web of sentiment intrigue and orphic difference. The narration is mature, exploring building building complex themes and fictive grapheme relationships. The biz has been praised for its cinematic show and pouring storytelling, appealing to both longtime fans and newcomers to the serial.

    Conclusion

    The superlative games of 2023 sustain demonstrated noteworthy invention and creativity, pushing the boundaries of what is imaginable in video recording gaming. From desperate open worlds to intricate narratives, these titles robust someone not totally entertained but besides engaged players on a deeper draw out fine-tune. As the romp industriousness continues to evolve, these games volition beyond question mould futurity developments, establishment the landscape painting for onetime years to deign. Whether done with breathtaking visuals, compelling stories, or piquant gameplay mechanics, the games of 2023 excite left-hired man an unerasable stigma on the hearts and minds of gamers world-blanket.

    Reply

Leave a Comment

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

Scroll to Top