Complete HTML tutorial for beginners.

Leave a Comment / HTML
Complete HTML tutorial for beginners

Hey guys! So we are here to start a new journey and add something more valuable to our life. We will be learning all about HTML and how it turns out to be one of the most required tools.

So tighten your seat belts and let’s start the journey.

About HTML :-

HTML stands for Hypertext Markup Language. It’s the backbone of the websites that we scroll through every day. To make HTML alive we give a touch of CSS and JS. JS decides the behavior of our website. HTML element tells the browser how we want our text to be displayed on the browser window. HTML is a markup language which means that we can change the font, style, color, size, etc. according to our wish.

HTML files are saved with the extension .html or .htm and yeah they both won’t make any difference.

You can run your HTML code using the following web browsers:-

  • Chrome
  • Internet Explorer
  • Safari
  • Firefox
  • Edge

HTML Text Editor :-

  • Notepad 
  • Atom 
  • Vs Code 
  • Sublime 
  • Bracket 

If you are new to coding and starting a fresh then I would personally recommend you vs code. 

HTML Structure :-

<!DOCTYPE html> 

<html > 

<head> 

              <title>Document</title> 

</head> 

<body> 

       ………     

</body> 

</html> 

HTML Elements :-

The HTML element is one that contains the opening and closing tags with some content placed between them and it’s not always necessary that a tag will have a closing tag also and these types of tags are called empty tags. 

For ex- <br> <hr> are all empty tags. 

How to run HTML code :-

Start>> programs>> accessories>> Notepad>> write code>> save>> open with web browser. 

and if you are on vs code and save ur file and u can directly run through a live server. 

HTML Comments :-

Comments in HTML are those sentences that are not displayed on the output screen when the program is executed. Its enclosed in <!–       –> way. 

HTML Tags :-

Now we finally came to the most important topic i.e tags. The HTML tag is one which decides that how our webpage is going to look. 

So now let’s have a look at all the important tags. 

< p > Tag :-

Output :-

This is a sample for understanding paragraph tag in HTML presented by pkthsource.

< a > Tag :-

Anchor tag is used to create hyperlinks in the document. 

Output :-

Google

< html > Tag :-

This tag marks the beginning of the HTML document.

< head > Tag :-

This tag contains all the links required. 

< h1 > Tag :-

Provides heading to the documents. 

All the tags like <h1>,<h2>,<h3>,<h4>,<h5>,<h6> provides heading of different size. Like <h1> provides the largest heading and <h6> provides the smallest.

Output :-

i am a heading

i am a heading

i am a heading

i am a heading

i am a heading
i am a heading

< b > Tag :-

This tag is used to make the text bold. 

Output :-

Hey! I am a bold text

< i > Tag :-

Makes the text italic.

Output :-

Hey! I am an italic text 

< div > Tag :-

Points out to the particular section of the document.

< br > Tag :-

This tag is used to create a line break.

Output :-

Hey! i am a bold text 
 
 
Hey! i am a bold text 

< footer > Tag :-

Used to give footer at the end of the document.

< header > Tag :-

Used to give header in document. 

And don’t get confused between head tag and header tag. They both are different. 

< body > Tag :-

Contains all the main content of the webpage. 

< iframe > Tag :-

Defines inline frame.

< img > Tag :-

Defines an image in the document. 

< label > Tag :-

Used to give some text before <input> tag.

Output :-

search here

< q > Tag :-

Used to add quotes on text.

Output :-

“i am a quoted text” 

< col > Tag :-

To specify column properties for each column within an <colgroup> element. 

< dd > Tag :-

Defines a description in the description list.

< em > Tag :-

Used to emphasize a text.

Output :-

this is a emphasised text

< dt > Tag :-

Specify a term in the description list.

< fieldset > Tag :-

It’s used to group various elements together.

< main > Tag :-

Defines the main content of the document.

< textarea > Tag :-

Provides text area for writing content.

Output :-

< nav > Tag :-

Used to create negation bar. 

< form > Tag :-

This tag is used to define the section of the form in the document.

Output :-

        

LOGIN

        

Name:

< option > Tag :-

Determine option in the dropdown menu. 

< strong > Tag :-

Mark text as important by making it bold. 

Output :-

I am a strong text

< style > Tag :-

It contains all the styling that we see on our web page. 

< sub > Tag :-

Used to make the text as a subscript.

Output :-

A+B2=A2+B2+2AB

< sup > Tag :-

Makes text as superscript.

Output :-

H2SO4

< video > Tag :-

Defines video in the document. 

< source > Tag :-

It is used to define multimedia sources.

< track > Tag :-

Defines text track for media elements.

< abbr > Tag :-

Used to give abbreviations or acronyms. 

< var > Tag :-

Defines a variable.

< button > Tag :-

Defines a button that could be clicked.

Output :-

< output > Tag :-

Defines the result of the calculation. 

< legend > Tag :-

Its used to give caption to the legend tag.

< area > Tag :-

Provides area under the image.

< tbody > Tag :-

Defines the body of the table.

< section > Tag :-

Defines section in a document.

< meta > Tag :-

Used to define metadata about HTML documents. 

< script > Tag :-

It is used to define javascript or client-side script. 

Attributes:-

Attributes are the extra information given inside a tag. 

Action :-

It’s the attribute of, <form> tag. Specifies the location where the data will be sent when the form is submitted.

Alt :-

It’s the attribute of <img>, <area>, <input> tag. This specifies the alternate text when the original one fails to load.

Autoplay :-

It’s the attribute of <audio>, <video>. Specifies that the audio/video will start playing as available.

Color :-

It specifies the color of the element. Attribute of <body> tag.

Colspan :-

It’s the attribute of <td> and <th> tag. Specifies the number of columns a table cell should span.

Data :-

An attribute of <object> tag specifies the URL of the source.

Datetime :-

Attribute of <del> <ins> <time>. Used to specify date and time.

Disabled :-

Attribute of <button> <fieldset> <input> <optgroup> <option> <select> <textarea>. Specifies that particular elements should be disabled.

Download :-

Attribute of <a> and <area> tag. Tells that the target link will b downloaded on click.

Hearder :-

Attribute of <td> and <th>.Defines header cells.

Href :-

Attribute of <a> <area> <base> <link> tag. Define the link source.

Max :-

Attribute of <input> <meter> <progress>. Used to define the maximum value.

Media :-

It’s the attribute of <a> <area> <source > <style> <link> tag. Specifies the media device the linked document is optimized for.

Min :-

Attribute of <input> <meter> <progress>. Used to define the minimum value.

Onload :-

It’s the attribute <body> <iframe> <img> <input> <link> <script> <style>.  Script to be done when the page lodes.

Tables in HTML:-

 Tables in Html are used to store data in the form of rows and columns which makes it more readable. And don’t forget to give the border I table otherwise you will not get the table structure. 

Table Elements:-

<table> Tag :-

Marks the beginning of a table.

<tr> Tag :-

Defines table row.

<td> Tag :-

Defines table data.

<tfoot> Tag :-

Provides footer content in the table. 

<thead> Tag :-

Used to group table contents.

<caption> Tag :-

Used to give information on the top of the table.

Basic Structure:-

Forms in HTML:-

Html forms are also like our real-life forms which are designed to collect information about a person.

Basic Structure of form:-

Output :-

        

LOGIN

        

Name:



        

Password:

        

        

Date:

        

        

Form Elements:-

  • <textarea> 
  • <lable> 
  • <input> 
  • <fieldset> 
  • <button> 
  • <output> 
  • <datalist> 
  • <option> 

<label> Tag:-

Its used to provide text before the input tag.

Radio Buttons:-

It allows the user to select one or limited number of choices.

Check Boxes:-

Allows the user to select one or more options.

Submit Button:-

Defines a botton which is used to send data at a remote server.

Action Attribute:-

It defines the task to be performed on form submission.

Target Attribute:-

Target attribute species where to display the data when form is submitted. 

Lists in HTML:-

List allow to group the different items together.

There are two types of list: 

  • Ordered 
  • Unordered 

<li> Tag:-

Stands for list item. Used while making list.

<ol> Tag:-

Used to create ordered list.

<ul> Tag:-

Its  used to create unordered list.

Unordered list:-

The unordered list starts with <ul> tag.

Output :-

            
  • laptop
    •         
  • phone
    •         
  • ipad
    •         
  • tablet
    •         
  • dj
    •     

Unordered list:-

The unordered list starts with <ul> tag.

Output :-

            
  1. laptop
    2.         
  2. phone
    3.         
  3. ipad
    4.         
  4. tablet
    5.         
  5. dj
    6.     

So finally our html tour ends up here .Hope the journey is ending with the same enthusiasm as it started. Through all what we learned you will be able to design beautiful web pages of your choice. 

Leave a Comment

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