HTML → Hyper Text Markup language

HTML is the language of the web. It is used to create websites.
We use HTML tags to define look & feel of a website. With Understanding of these tags and How to put them together, we can create beautiful websites easily.

Then why CSS & JavaScript HTML is used for defining layout of a page – A barebone page structure. CSS is used to radd styling to that barebone page Created using HTML. Java Script in used to program Logic for the page layout eg. What happens when a user have on a text, when to hide or show elements etc.

A wonderful analogy –

Let’s take an example of Car to understand the following things:

HTML = Car body (only metal)
CSS = Car paint, decoration etc.
Java Script = 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 light weight, opensure & from Microsoft.

Go to google, type VS code download and install it.

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

  • Creating our first website

We start building a website by creating index.html is a special filename which is presented when the website rod address iss typed.

A Basic HTML Page

<! Doctype html> Specifies this is an html5 doc
<html>” → root of an HTML page.

<head> → Contains page metadata
<title> ken’s Website </title> → Contains title

<body> → The main body of the page (rendered by the browser)

<h1> This is a heading </h1> heading tag
<P> My paragraph </p> + paragraph tag </body> closing body tag

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

tags HTML → Document Browser → Rendered Page

Imp Notes

  • Head & body tags are children of HTML tag.
  • HTML is the parent of Head & Body tags
  • Most of the HTML elements have opening & closing tag with content in between opening & closing tags.
  • Some HTML tags have no content. These are called Empty elements eg <br>

We can either use htm or html extension.

You can use “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 document the source code.

<!– HTML Comment –>

Case Sensitivity

HTML is a case insensitive language. <H1> and <h1> tags are the same.

Practice Set

1. Inspect your favorite website and change something on the page which is displayed.

2. Go to Source your favorite website and key to view the page and write the exact lines of code.  Does it Clone the website? why?

3. Write any HTML code inside a text file. Does it work if you write it using a notepad ?

Keep visiting IT Free Source for more such educational content.

Leave a Reply

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

Copyright © 2022