Start Your Web development journey with Html and Css

The course is designed for beginers with complete resources. Complete your basics and fundamental with our resources. feel free to message or mail to us foe feedback and improvement.

HTML Tutorial For Beginners In Hindi (With Notes)

Chapter – 0 (Introduction)

HTML – Hyper Text Markup Language

Html is the language of the web. It is used to create websites.

We use HTML tags to define the look and feel of a website.

With an understanding of these tags and How to put them together, we can create beautiful

websites easily!

Then why CSS and JavaScript

HTML is used for defining the layout of a page – A barebone page structure.
CSS is used to add styling to that barebone page created using HTML.
JavaScript (JS) is used to program logic for the page layout. E.g. what happens when a user hovers on a text when to hide or show elements etc?

A Beautiful analogy

HTML = Card body (only metal)

CSS = Car paint, design, etc.

JavaScript = Car engine + Interior logic

Installing VS Code

We can use any text editor of our choice. Here, I am using VS Code because it is lightweight, open-source & from Microsoft.

Go to google, search for VS Code, download and install it.

Note:

You can write HTML even in Notepad. Text editors like VS Code just makes things easier.

We can use any text editor of our choice. Here, I am using VS Code because it is lightweight, open-source & from Microsoft.

Go to google, search for VS Code, download and install it.

Note:

You can write HTML even in Notepad. Text editors like VS Code just makes things easier.

Chapter – 1 (Creating our first website)

//1233

We start to build a website by creating a file named index.html, is a special filename that is presented when the website root address is typed.

A Basic HTML Page

  <!Doctype html> - Specifies this is an html5 document
                   lt;html>   <!--root of an HTML page -->
	
	                <head>   <!--Contains page metadata-->
	
	                   <title> code Editz  </title>   title <!--Contains title -->
	
	                 </head>                                           
	
	                 <body>   <!-- Main body of the page (rendered by browser) -->
	
	                 <h1> This is a heading  </h1>     <!--heading tag -->
	
	                 <p> My paragraph  </p>    <!-- paragraph tag -->
	
	                </body>   <!--closing body tag-->
	
	                </html>    <!--closing html tag ->

"A tag is like a container for either content or other HTML tags."

Important Notes:

Head & body tags are children of HTML tag.
HTML is the parent of Head and Body tags.
Most of the HTML elements have opening & closing tag with content in between opening and closing tags.
Some HTML tags have no content. These are called Empty elements. For example,
tag
We can either use .htm or .html extension to save our html code.
You can use the “Inspect Element” or “View Page Source” option from chrome to look into a website’s HTML code.

HTML element = Start tag + Content + End tag

Comments in HTML

Comments in HTML are used to mark text which should not be parsed. They can help during documentation of the source code.

<!-- HTML Comment -->

Case Sensitivity

HTML is a case insensitive language.

 <H1> and <h1>

are the same.

Chapter – 2 (Basic HTML Tags)

We can add elements inside the body tag to define the page layout.

HTML Element

Everything from starting to the ending tag

                 <body>    - Opening tag

			-Content-

			</body>   - Closing tag

HTML Attributes

Used to add more information corresponding to an HTML tag.
Example: <a href=”/”> Code Editz </a>
<a> = anchor tag
href is the attribute of above element
We can either use single or double quotes in attributes.

The Heading Tag

Heading tag is used to mark heading in HTML. From h1 to h6, we have tags for the most important to the least important heading.

            <h1> Most important heading </h1> 


            <h2> Another heading H2 </h2> 


            <h3> Another heading H3 </h3> 


            <h4> Another heading H4 </h4> 


            <h5> Another heading H5 </h5> 


            <h6> Least important heading </h6>

Notes:

We should not use HTML headings to make text thick or bold.

The Paragraph Tag

Paragraph tags are used to add paragraphs to an HTML page.
<p> This is a paragraph </p>

The Anchor Tag

The Anchor tag is used to add links to existing content inside an HTML page.
<a href=” ”> Click Me </a>

Bold, italic and underline Tags

We can use bold, italic and underline tags to highlight the text as follows:


            <b> This is bold </b>


            <i> This is italic </i>


            <u> This is underline </u>

br Tag

The <br> tag is used to create line breaks in an HTML document.

hr Tag

<hr> tag in HTML is used to create a horizontal ruler often used to separate the content.

Subscript and Superscript

We can add subscript and superscripts in HTML as follows:
<sub> this </sub> is subscript
<sup> this </sup> is superscript

pre Tag

HTML always ignores extra spaces and newlines. In order to display a piece of text as it is, we use pre tag
<pre>
This is written
Using pre
Tag
</pre>

Note: Above text will get rendered as it is.

Chapter – 3 (Creating a page layout)

When we use the right tag in right place, it results in a better page layout, better indexing by search engines, and better user experience.
We use the following tag to get the job done

                    <header> #It contains nav tag (Navigation bar) 


            <main>


            <footer>


            Above tags are used for website layout 
 




            Inside the main tag we insert the following tags 


            <main> > #The main opening tag 



            <sectio> #A page section 



            <articl> #A self-contained content 



            <aside> #Content aside from the content (e.g. Ads etc.) 



            </main> #the main closing tag

Creating a page like this is not necessary but it creates a readable and structured layout. Also, they are useful for SEO.

Link attributes

<a href=”/contact”> Contact Us </a> 


            #above tag will allow the contact page to open in same tab 





            <a href=”/contact” target=’_blank’> Contact Us <a> 


            #above tag will open contact page in new tab

We can put any content inside an anchor tag (images, headings, etc. are all allowed)

If the page is inside a directory, we need to make sure that we link to the correct page. [Same applies to img tag as well]

We can add links to images like this
<a href=”/about”><img src=”a.jpg” width=”120”></a>
[Height of image will be set automatically

The Div tag

<div> tag is often used as a container for other elements.
div is a block-level element. [Always takes full width]

The span tag

<span> is an inline container. [Takes as much width as necessary]

Chapter – 4 (Lists, Tables & Forms)

Lists

Lists are used to display content which represents a list

Unordered list

Used to list unordered items

<ul>
<li> Home </li>
<li> About </li>
.
.
</ul>

Ordered list

Used to list ordered items

<ol>
<li> Phone </li>
<li> PC </li>
<li> Laptop </li>
</ol>

Tables

The <table> tag is used to define tables in HTML.
It is used to format & display tabular data.
tr tag: used to display table row
td tag: used to display table data
th tag: used in place of table data for displaying table headers
We can define as many table rows as we want.

To add a caption to the table, we use <caption> tag inside the table.
thead tag: used to wrap table head (caption & tr with th)
tbody tag: used to wrap the table body

Colspan attribute

This attribute is used to create cells spanning multiple columns.
<th colspan=”3”> Harry [Spans 3 columns]

HTML forms

An HTML form is used to collect input from the user.
form tag is used for the same
<form>
-Element of the form-
</form>
There are different form elements for different kinds of user input.

input element: Can be of type text, checkbox, radio, button and submit. We also have a ‘file’ type
textarea element: Defines a multi-line text input. Cols and rows attributes can be used to size the textarea.
select element: Defines a drop down list

Note: You don’t have to remember all the tags, you will automatically memorize them with practice.

Embedding Videos

Video tag is used to play videos in HTML

<video src=”harry.mp4”> Error </video>

Attributes for video

We can use:

Width: To adjust width of a video (Height automatically adjusts)
We can use autoplay/loop to autoplay or loop the video.

Chapter – 5 (SEO)

We will focus only on HTML standpoint of SEO. We will not be looking into keyword building and content optimization aspect of SEO

Types of SEO

On page SEO [Can be done by HTML developers]
Off page SEO

HTML SEO

HTML developers can implement SEO using the following techniques:

Set the title very nice & to the point
Set the meta description
Set a nice URL Slug
Set the meta keyword tag
Set the meta author tag
Set a favicon
Compress images & other resources
Remove unused HTML/CSS & JS files + Compress them
Add alt text to images

You can refer to Techi Support videos for better understanding

Introduction to CSS

CSS Tutorial- Introduction To CSS

So finally, after completing HTML, we are moving towards the exciting part, i.e. CSS.
CSS stands for Cascading Style Sheets and is used to design the website to make it look attractive.
Let us first understand, what is CSS?

CSS gives style to raw HTML
It stands for Cascading Style Sheets
CSS is used to give style to our web pages
CSS is used to make websites responsive
CSS takes the responsibility of design in your websites

CSS includes all the things which can be used to design the raw HTML from colouring the
background and texts, to adjust the borders, give padding, etc. Moreover, CSS helps in
making websites responsive. Responsive means that the site will behave accordingly to
the different screen sizes. For example, if you open a website on a desktop and then on
your mobile, you will find the difference between their displays. All the components in
a navigation bar will move into a hamburger icon if you open the website on mobile.

We can add styles in the HTML part itself, but I would rather recommend making a new CSS
file and then attach it to the HTML part. It is so because it is a professional practice
when different developers are working on a single website to keep the skeleton of a
website in one file and the styling in another file.

Role of CSS

CSS is a style sheet language that is used to handle the presentation of the web page
containing HTML.

It makes our websites beautiful and modern looking.

Rest things to be updated timely

You can refer to Techi Support videos for better understanding