If you are finding out, how to start learning to code and preparing yourself to become a programmer. Then, here is the best way to get started. Start practicing from scratch, with no idea of how you can make website.

I would like to recommend you one thing. Before learning HTML, CSS and JavaScript or any other programming language. You should have an idea about what type of Web application you are going to create in reality.

HTML Tutorial for free

Are you motivated to develop another Social Networking Web Application?

The best advice i would like to give is:

Be true to yourself, Start learning without even thinking much about what you are going to create in future, and rather be an expert into small things first.

Start with actions and develop a habit of practicing every day new concepts in programming.

Lets Get Started then, HTML tutorial

HTML Elements

An HTML element usually consists of a start tag and an end tag, with the content inserted in between:

<tagname>Content goes here...</tagname> 

For eg. Paragraph Tag like this:

 <p>My first paragraph.</p> 

Each Elements Explained in details:

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content
  • The <h1> element defines a large heading
  • The <p> element defines a paragraph

1. HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading.

<h6> defines the least important heading.

2. HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

<p>This is a paragraph.</p><br>
<p>This is another paragraph.</p>

3. HTML Links: anchor tag

Anchor Tag: HTML links are defined with the <a> tag.

Hypertext Reference: The link’s destination is specified in the href attribute. 

Attributes are used to provide additional information about HTML elements.

 <a href="http://solvprog.com">This is a link</a>   

4. HTML Images

For displaying images on the webpage: HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes.

 <img src="http://solvprog.com/wp-content/uploads/2020/01/JavaScript-logo-768x768.png" alt="solvprog.com" width="104" height="142">   

5. HTML Buttons

HTML buttons are defined with the <button> tag.

   <button>Click me</button>  

6. HTML Lists

HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags (list items).



7. Empty HTML Elements

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break).

 <p>This is a <br> paragraph with a line break.</p> 

HTML Is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

At Solvprog we always recommend to use lowercase tags.


8. HTML Attributes

  • All HTML elements can have attributes
  • Attributes provide additional information about an element
  • It must be placed inside the start tag
  • Attributes: name/value pairs like name=”value”
  1. The href Attribute
  2. The src Attribute
  3. The width and height Attributes
  4. The alt Attribute
  5. The HTML Style Attribute

9. HTML Text Formatting Elements

<b>Defines bold text
<em>Defines emphasized text 
<i>Defines italic text
<small>Defines smaller text
<strong>Defines important text
<sub>Defines subscripted text
<sup>Defines superscripted text
<ins>Defines inserted text
<del>Defines deleted text
<mark>Defines marked/highlighted text

10. HTML Quotation and Citation Elements

1. HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.

Browsers usually insert quotation marks around the <q> element.

 <p>It's great way to start: <q>learning code for yourself.</q></p> 

2. HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

 <p>Here is a quote solvprog website:</p><br><blockquote cite="http://solvprog.com"><br>
 For almost a year i tried to build a brand.<br>I have been practicing my skills and sharing with you,<br> how amazing it is to become self aware about this new technology.<br>produce more content in the market to spread love.<br></blockquote> 

3. HTML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym.

  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in   1948.</p>  

4. HTML <address> for Contact Information

The HTML <address> element defines contact information (author/owner) of a document or an article.

The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.

 <address><br>Written by Sagar Kalyan.<br> <br>Visit us at:<br><br>Solvprog.com<br><br>
Karnal, Haryana (132001) <br><br>India<br></address> 

5. HTML <cite> for Work Title

The HTML <cite> element defines the title of a work.

Browsers usually display <cite> elements in italic.

  <p><cite>How to win friends and influence people </cite> by Dale Carnegie. Written for success life journey.</p>  

11. HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->   

12. Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

<table style="width:100%">

HTML Elements, Block level elements in HTML:

Read about them, and practice as much as possible in your text editor. There are lot more stuffs, needs to be learned. I would recommend you to learn from W3shools.com, they have provided you tutorial step by step and it’s easy to learn.

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Inline elements in HTML:

There is lot more to learn and do lot of practicing while learning.

@Enjoy while coding. This is the real success. 🙂

Leave a Reply

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