How To Become a Master in HTML in Just [7 days]

By / July 10, 2023
how to become master in html

In this article, you’ll learn about HTML overview and its power to build awesome page plus comprehensive guide to make you master in HTML in a just 7 days.

It is quite easy to learn HTML , so even if you’re a beginner and want to master in HTML in few days, then you’re going to make it possible.

Just read the article till the end, and start making notes.

1) Introduction to html

HTML is markup language which is used to build webpage. it is the core of world wide web and supported in all the browser.

it contains series of tags or element enclosed in with open and closed angle brackets (< , >), that define the different parts of your page.

HTML also allows you to add attributes to elements, which specify how the elements should behave. To create a website ,webpage needs to be created using html language.

You can use any text editor to write your html code, if you’re beginner you can start with sublime and notepad++ text editor.

Basic terms in HTML you must know:

1)Tag: Tag or element used to define structure and formatting of your html document. Every html tag is opened and closed except few of them. opened tag is closed using ” / “.

Example of opening and closing tag:

<div> <!-- opening tag-->


</div><!-- closing tag-->

html tag like <br> , <hr> doesn’t require to be closed.

there are two types of element in html:

  1. Block level element: block level element always starts with new line.
  2. Inline element: Inline element continuous in the same line

Example of block and inline level elements

<div> <!-- block element-->

<span> <!-- inline element-->

2) Structure of HTML

HTML document has its own structure that gives meaning to the webpage content. every time you create new document, this structure needs to be followed.

Example of html structure:

<!DOCTYPE html>
<html>
<head>
  <title>html Page Title-</title>
</head>
<body>
  
  <!-- Content that displayed in a browser-->
  
</body>
</html>
  1. <!DOCTYPE html>: This declaration determines which HTML version is used. In our case, it is indicating HTML5.
  2. <html>: html tag represents the root of an HTML page. All other elements must be added within this element.
  3. <head>: This element describe the small description about your document which is also called as metadata of document, for example the page title, included stylesheets, scripts, and other meta details.
  4. <title>: This element display the title of the page web page. you can see it in the browser’s title bar or tab.
  5. <body>: This element is the main area for your webpage content that are visible in the browser such as image,text,links etc. in this body tag ,you’ll add different tag to build your first page.

3)Text Formatting Elements in HTML

Text formatting means, giving style to the text so that it enhance appearance of content, there are various text formatting options available, some of them are listed below

1)Bold Text: making text bold using <strong> or <b> tag.

<strong>This text is bold</strong>
<b>This text is also bold</b>

2)Italic Text: Making text italic using <i> tag.

<em>This text is italicized</em>
<i>This text is also italicized</i>

3)Underline Text: Use the <u> tag to underline text.

<u>This text is underlined</u>

4)strikethrough Text: Make strikethrough text using the <s> or <strike> tag to create 

<s>This text has a strikethrough</s>
<strike>This text also has a strikethrough</strike>

5)Subscript and SuperScript Text: Use the <sub> tag for subscript and the <sup> tag for superscript.

H<sub>2</sub>O
x<sup>2</sup>

6)Text Color: Use the CSS color property to provide the color of the text.

<span style="color: red;">This text color is red</span>
<span style="color: #00ff00;">This text color is green</span>

7)FontSize: CSS font-size property to adjust the size of the text, it is specified in the px (pixel),em (em units) or % (percentage). 

<span style="font-size: 20px;">text has a font size of 20 pixels</span>
<span style="font-size: 1.2em;"> text has a font size of 1.2 times the parent's font size</span>

8)Heading: Adding different types of heading to the document from <h1> (largest) to <h6> (smallest).

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

You can combine multiple techniques and use CSS styles to achieve more complex formatting effects.

4)Adding Comment in HTML

If you want web browser to skip or ignore the specific html code then you can use comment feature.

Comment opened with ” <!– ” and closed with ” –> “. Comment can a single line or multiline comment.

Example of putting comment in html:

<!-- This is a single-line comment -->

<!--
This is a multi-line comment.
It can span multiple lines.
-->

Link helps to navigate to the same page, different page and other website. In html you can create hyperlink using anchor <a> tag.

<a href="https://www.example.com">Click here</a>

In the above example, the href attribute specifies the URL or destination , in this case is “www.example.com”. When a user clicks on the link, it will redirect the user to the specified URL.

There are different attributes which you can use in hyperlink such as “target=_blank”, it will open the link in new tab instead of the same tab.

<a href="https://www.example.com" target="_blank" title="Visit Example.com">Click here</a>

You can also create the navigation in the same page itself using id attribute and #. There can be a requirement of redirecting the user to the specific section of the same page.

That you can do easily with a single attribute. Here is the example:

6.Working with image and media elements

To make website more interactive and informative images are important , image in html can be created using <img> tag followed by its attribute.

<img src="image.jpg" alt="Description of the image" width="400" height="300">

The alt attribute provides alternative text for the image. By any chance if image not loaded or not found then this text provide the context. And it also helpful for SEO optimization.

Additionally, you can add other attributes to customize the image, such as width and height of the image in pixels.

Audio elements in html

To add audio to your HTML document, you can use the <audio> tag respectively. this is required when you’re adding audio files in your website.

Here’s an example of how to use audio tag

<audio src="audio.mp3" controls>
  Your browser does not support the audio element.
</audio>

In the above example, the src attribute specifies the location of the audio file (audio.mp3). it can be your url or local filepath .

It has controls attribute that provides the default audio controls such as play/pause, volume control etc.

Video elements in html

Like audio tag ,<video> tag is used to embed a video in your HTML page. The src attribute specifies the location of the video file (video.mp4).

The controls attribute enables the default video controls such as play,pause, seek bar, etc. 

<video src="video.mp4" controls>
  Your browser does not support the video element.
</video>

7.Learning Table in HTML

If you want to represent data in the tabular(rows and column) format then you can use <table> tag in html document. It is possible to build a site with table.

Here’s an example of how to create a basic table structure:

<table>

<caption>Monthly Sales</caption>
<thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>

</tbody>
</table>

Description of tags related to table in html:

  1. Table: this tag used to create table
  2. Caption: to create the title of table
  3. thead: represent the table header
  4. tbody: represent table main content
  5. tr: used to create new row in table
  6. th: used to create table heading
  7. td: to represent the table data (cell)

Merging rows and column of table in html

If you want to merge rows or columns in your HTML table then you can use the rowspan and colspan attributes.

The value of these attributes will be number of rows and number of column.

Simple example of how to merge cells in a table:

<table>
  <tr>
    <th colspan="2">Header 1 and Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td rowspan="2">Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
  </tr>
</table>

8.Ordered and Unordered List in HTML

To represent the data in the ordered and unordered, you can use <ol> and <ul> tag.

1)Unordered List: The unordered list is represented using <ul> tag and list item is represented by the <li> tag. You can use different attributes to style the list.Here’s an example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

2)Ordered List: The ordered list is achieved by the <ol> tag. Similar to the unordered list, each list item is represented by the <li> tag. you can attribute to the <ol> tag to style list like numbering, alphabetical order. 

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

FAQ About How to Master in HTML in just 7 days

How to master in HTML?

The best way to become master in html is learn HTML chapter by chapter along with its implementation.Once you learned the HTML you can pickup small project and improve html skills.

How long will it take to master HTML?

Curious to learn HTML, then hardly you’ll will take 7 days to master in html, but learning html is not enough ,you should also know CSS.

Best Offline editor for HTML

If you’re looking for offline editor for HTML and CSS then you can install popular editor like sublime and notepad++.

Posts for You !