HTML Notes

HTML Introduction

What is HTML?

HTML is an acronym for Hyper Text Markup Language.
HTML is a Markup Language not a programming Language.
HMTL is used for designing the structure of the websites
HTML defines only the skeleton/structure of the website.
HTML containes pre-defined tags means that one cannot describe their own tags.
HTML defines that how the data should be displayed on the website.
HTML contains a list of elements for defining page structure like form, heading and many more.

Features of HTML

It is platform independent language.
HTML is not a case sensisitve language.
HMTL is a Markup Language.
It can also work with CSS and JavaScript.
HTML containes elements as well as their attributes..
HTML can also works with offline servers.
HTML is also an interpreted language..

History of HTML

HTML was first originated by Computer science professor Tim Berners-Lee of CERN.
Berners-Lee wrote the first version of HTML in 1993.
1993: HTML 1.0 supported basic text and image control elements.
1995: HTML 2.0, The World Wide Web Consortium, or W3 for short, was also established in October 1994.
1997: HTML 3.2 also implemented support for CSS.
1999: HTML 4.01 extended support for CSS.
2014: HTML 5 "designed to do virtually anything you want to do online without having to download browser plugins or other software".

HTML Editors

1.What are HTML Editors?

HTML Editors are the tools on which we write or practice html code.
HTML uses editors like Notepad, Visual Studio Code and many more.
HMTL Editors helps us to develop the websites and makes it easier for us.
Editors like VS Code makes work much more easier than using Notepad.

ATOM

NOTEPAD

VS CODE

/SUBLIME TEXT

2.Which Browsers for HTML?

You can use any browser for accessing HTML content. HTML tag doesn't appears on browser.
Some commonly used browsers are:

NOTE: You can download Live Server Extension for rendering HTML content on web server.

HTML Working

Analogy of HTML

HTML: HTML in a website is just like the human skeleton in a human body. Basically, it defines the structure of a website by it's pre-defined tags, through them the content can be displayed over the website.

CSS: All the veins and flesh above the skeleton of the human body is like the we putting styles and colours to the HTML content .

How does HTML renders?

HTML renders on webpage through the browser. HTML firstly coded in a Editor then it will process the code and display it on browser window.

HTML Editor

BROWSER

OUTPUT

1. HTML CODE:

Here the HTML code is the code with pre-defined tags. The HTML file will be saved in .htm and .html extension .

2. BROWSER

• Browser used for rendering the HTML content which we want to display.

• Browser requires a server to read the HTML document. It doesn't read HTML document directly.

• Browser can be CHROME, MOZILLA FIREFOx, BRAVE etc.

• Browser does PARSING and RENDERING.

• In PARSING, the raw data is converted into the Document Object Model Tree and then browser starts RENDERING.

RENDERED PAGE:

RENDERED PAGE is the page through which the content which we want from HTML Page will be displayed.

HTML STRUCTURE

• Structure of the HTML Page

<!DOCTYPE html>, <html>, <head>, <title>, <body> are the basic tags used for define any HTML Document. Tags contains the data which should be displayed on the browser. These tags are closing tags that means their closing tags are mandatory.

All the tags in the document are described below :-

<!DOCTYPE html>: This tag is used to declare the version of the HTML . This tag represents the HTML 5 version of the HTML.
<html>: This is a mandatory tag for coding any HTML document. As we can call it the root of the document.
<head>: It is the tag which contains the meta data and the title of the document.
<title>: The title tag displays the name of the document in the title bar of the browser.
<body>: Body tag contains the content which will display on the browser.

HTML TAGS

Types of HTML Tags

Closing Tags:

The tags in which the closing of tags is mandatory, as they will not work if not closed.
For Example: <html> </html>

Unclosing Tags:

The tags which do not requires any closing tag.
For Example: <br> and <hr>

Meta Tags:

Meta Tags are the tags which are used for display the meta data i.e; data of data.
For Example:
<meta name="description" content="Web Development tutorial">
<meta name="keywords" content="HTML, CSS, JavaScript">

Text Tags:

These are the tags which are used for displaying text over the browser.
For Example:
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

Link Tags:

The tags which are used for linking colors, pages or any section to that page.
It is represented by <a> tag.

List Tags:

List tags are the tags which are used to display the data in the form of list. Tags like <ul>, <ol>, <li>, <dl>, <dt>, <dr> are used to define any list.

Image and Object Tags:

Tags which are used to display images and objects in the page.
<img> used for displaying the images in the page.
It has attributes like src and alt.

Table Tags:

Table Tags are used to display the data into tabular form.
<table>, <td> etc. tags are used for making table in HTML.

Form Tags:

Form tag is the tag which is used to define a form. <form> tag is used to make a form . Form has different type attributes like submit, text, radio etc.

HTML Attributes

ATTRIBUTES

• Attributes are the special properties for the elements.
• They provide additional information about an element.
• The syntax of attribute is name=”value”.
• NAME is the property used to set for an element.
• VALUE used to set the value for the property of that element.

The SRC Attribute

The SRC attribute is used for specifying the path of an image in img tag. It represents the source of the file which will be embedded in the image tag.

For Example: <img src="image_name.jpg">

There are two types of URLs in src attribute ::
1. ABSOLUTE URL:
• It is the URL which is provided in the form of "https://www.istockphoto.com/search/2/image?phrase=india" which is linked to any external website page.
• That external page maybe under any copyright which will seem illegal to use without permission.
• This will be a complete address starting with http:// or https:// . It is not good to use Absolute URL because the address may get changed of that image .
2. RELATIVE URL:
• It is the URL which belongs to the same page or website.
• It do not starts with https , just started with a slash or without slash if it belongs to the current page.
• Their URLs do not contains the domain name .

The HREF Attribute

The HREF attribute is used in <a> tag for specifying the link to another go to page.

For Example: <a href="https://www.cheentee.com/"> cheentee Blogs </a>

The ALT Attribute

The alt attribute is used with <img> tag , as it indicates the alternate name we provided for the image if image is not get displayed on screen due to any reason.

For Example: <img src="image_name.jpg" alt="This is image">

The width and height Attribute

The width and height attribute is used with <img> tag, for setting width and height of an image.
It is good to use only height for a image to be in original aspet ratio because width may strech the image sometimes.

For Example: <img src="image_name.jpg" height="100px" width="100px">

The style Attribute

Style attribute is used inside an element for define internal styling. It is also known as the form of Internal CSS.
<style> is used inside the element for applying styles.

For Example: <img src="image_name.jpg" style="height:100px width:100px">

The lang Attribute

Lang attribute is used inside the <html> tag for defining the language that will display on the web browser.

For Example: <!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

The title Attribute

The title attribute is used to define the title.
The value of the title will be shown on hovering the mouse tip.

For example:<p title="Title is here">This is a title.</p>

HTML Paragraphs

Paragraph Tag

• The Paragraphs in HTML are written in <p> tag .
• Paragraphs have display block which means they will start from a new line everytime written.
• It can be nested with other tags like h, ul etc..
• There should be no space between opening and closing of p tag.
• It is used to write sentences, paragraphs in a HTML Document.
• Browser automatically add some space(margin) after and before a paragraph.
• To remove this margin use "clear=all".

For Example: <p> This is paragraph tag. <p>

How Paragraph Tag display content ?

• There is no effect of adding more spaces between words in the code of HTML because browser automatically removes all the spaces. It will display whole content in a single line , when the whole space got filled then it will move to next line .

For Example: <p> This
is our paragraph
which gives all the information about
the paragraph tag. </p>

IMPORTANT:

They both will give the same output , as whole sentence will display in a single line and all the extra spaces will also removed by the browser. For breaking lines you should use break tag and for adding pre tag which we will discuss here further.

HTML Headings

Heading Tags

Headings are the titles or subtitles that are used for displaying on the browser. There are six types of heading tags available in HTML :

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Example: <h1>This is h1 heading.</h1>
<h2>This is h2 heading.</h2>
<h3>This is h3 heading.</h3>
<h4>This is h4 heading.</h4>
<h5>This is h5 heading.</h5>
<h6>This is h6 heading.</h6>

Headings fron h1 to h6 is in the decreasing order of font size and importance. It is suggested that there should be only one h1 in the HTML code but there can be multiple h2, h3, h4, h5, h6.

HTML Formatting

What is Formatting?

Text Formatting means to diaplay the text in a special form or any specific style.
HTML uses following elements for Text Formatting :-

<b> - It is used for bold text.
<strong> - It is used for important text.
<i> - It is used for Italic text.
<em> - It is used for emphasize text.
<small> - It is used for small text.
<mark> - It is used for mark text.
<sub> - It is used for subscript text.
<sup> - It is used for superscript text.
<ins> - It is used for inserted text.
<del> - It is used for deleted text.

HTML <b> and <strong> Tags

The difference between these two tags are that strong has more importance than b .
The content inside these element is displayed with extra weight.

<Bold Tag> will display bold text with no importance.

Example: <b>This is bold element.</b>

<Strong Tag> will display bold text with extra importance.

Example: <strong>This is strong element.</strong>

HTML <i> and <em> Tag

The difference between these two tags are that em has less importance than i , but it can be combined with other tag like <br> Tag.

<Italic Tag> will display Italic text with texts like paraphrase from another Language.

Example: <i>This is Italic element.</i>

<Emphasize Tag> will display Italic text with extra importance.

Example: <em>This is emphasize element.</em>

HTML <small> Tag

<small Tag> is used to display the text in small font size than regular font size.

Example : <small> This is small Text.</small>

HTML <mark> Tag

<mark Tag> is used to display the text which will be highlighted or marked.

Example : <mark> This is highlighted Text.</mark>

HTML <sub> Tag

<sub Tag> is the subscript tag which usually appears below the normal line of a word as like in chemical formulas.

Example : <p>This is <sub>subscript</sub> Text.</p>

HTML <sup> Tag

<sup Tag> is the superscript tag which usually appears below the normal line of a word as like in chemical formulas.

Example : <p>This is <sup>subscript</sup> Text.</p>

HTML <ins> Tag

<ins Tag> is the tag which usually display the text in it with an underline.

Example : <p>This is <ins>inserted</ins> Text.</p>

HTML <del> Tag

<del Tag> usually display the text in it with a line through the text.

Example : <p>This is <del>subscript</del> Text.</p>

HTML CSS

CASCADING STYLE SHEET

CSS is used to design the layout of web pages.
CSS have some specific rules. It can control multiple web pages at once.
CSS usually linked with the html page by three ways:-

• Inline CSS
• External CSS
• Internal CSS

INLINE CSS

Inline CSS is when the css rules are written inside the html tag.
Style attribute is used to write all styles inside the opening tag of html element.
Inline CSS always prioritize over other CSS.

Example : <p style= " color: blue; font-size: 12px;"> I'm a 12 pixel blue Text. </p>

EXTERNAL CSS

External CSS is written into a separate file with the extension of .css.
This CSS file linked through the <link> tag inside the head part of the html document.
It have the least priority over all forms of CSS.

For Example: <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"; href="style.css"; >
</head>
<body>
...
</body>
</html>

INTERNAL CSS

Internal CSS is written using style tag inside the head element.
Style Tag is a closing tag.
Internal CSS have less priority than Inline CSS but greater than External CSS.

For Example: <!DOCTYPE html>
<html>
<head>
   <style>
       .container{
          Background:"red;"
          font-size: 11px;
}    </style>
</head>
<body>
...
</body>
</html>

HTML Links

HYPERLINKS

A link is defined into an "achor tag" and it is represented by <a>.
Links make you able to jump over other documents upon clicking them.
A Link can be a image , text , or any other HMTL Document.

SYNTAX: <a href="www.cheentee.com"> Click Here! </a>

In the above example, a link get created means when "Click Here!" will be clicked then it will jump on the page "www.cheentee.com"

By default :

Unvisited Link: Underline with blue colour.
Visited Link: Underline with purple colour.
Active Link: Underline with red colour.

Attributes of LINKS

The HREF Attribute

The "href" attribute is used to link the other web pages or other document to any text,image or other elements.

SYNTAX: <a href="www.cheentee.com"> Click Here!</a>

The TARGET Attribute

The "Target" attribute is used to specify that where the linked document will appear.
The Target attribute can have following specific values :

_blank: Opens the document in a new tab.
_self: Opens the document in a same/existing tab.
_parent: Opens the document in a parent frame.
_top: Opens the document in the full body of window.

SYNTAX: <a href="www.cheentee.com"> target="_blank"> Click Here!</a>

Image as a Link

An image can be used inside anchor tag for using image as a link.

SYNTAX: <a href="www.cheentee.com"> target="_blank"><img src="/assests/pic.png"></a>

HTML IMAGES

IMG TAG

Img tag is used to display images over the web pages.
It usually enhace the visuals of a website.

SYNTAX: <img src="/assests/photos/hiimage" alt= HelloImage>

Images are not technically inserted into the web page , they are just linked with the web pages.
The <img> tag have two attributes:

src
alt

The SRC Attribute

This attribute is used to specify the location of the image or the source of the image. It contains Relative URL or Absolute URL.

SYNTAX: <img src="/assests/photos/hiimage">

The ALT Attribute

This attribute is used to specify the name of the image which will display when picture not gey displayed due to any reason.

SYNTAX: <img src="/assests/photos/hiimage" alt= HelloImage>

Sizing Images

Images can be resized by using height and width attributes of styling.
It is good to use only height for a image to be in original aspect ratio because width may strech the image sometimes.

For Example: <img src="image_name.jpg" height="100px" width="100px">

Background Images

Background Images can be inserted by using style attribute.
Background-image property is used to display the image by providing the url of the image.

SYNTAX: style{

background-image: url(/assests/photos/cheentee);

}

HTML META TAGS

EXAMPLE: <meta charset = "UTF-8">
<meta name = "description" content = "Web Development ">
<meta name = "keywords" content = "HTML, CSS, JS">
<meta name = "author" content = "Charlie Anderson">
<meta name = "viewport" content = "width=devide-width, initial-scale=1.0">

Meta data means data about data.
Meta tags are always lies inside the head tag of the html document.
These tags do not displayed by the browser.
Meta tags are only for the machine understanding.

Meta Description Tag

Meta Description Tag is used to describe the page means what information does the page contains.
For Example, here the page contains the information about the Web Development.
<meta name = "description" content = "Web Development">

Meta Keywords

Meta keywords are the different possible words which can be typed during searching the website.
For example,
<meta name = "keywords" content = "HTML, CSS, JS">

Meta Author

Defines the author of the page.
For example,
<meta name = "author" content = "Charlie Anderson">

Meta Viewport

It make sure that your website looks good in all devices.

HTML Title Tag

<TITLE> Tag

<title> tag is used to display the title of the page which usually renders in the browser's tab.

For Example: <!DOCTYPE html>
<html>
<head>
<title> A title tag tutorial. </title>
</head>
<body>
...
</body>
</html>

Title Tag usually describes the meaning of the page content that indicates that what information is lying inside the Page.
Title is most important when it comes to the SEO.

HTML Favicon

Favicon is a logo which usually appears before the title of any web page.

How to add a favicon on page?

For Example: <link rel="shortcut-icon" href="favicon.png" type="image/x-icon">

The favicon of the page will appear on the left side of the title in the browser box.

Favicon usually linked through link tag in the head element after title tag.