HTML is the standard markup language for creating Web pages.

What is HTML ?

• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

Example Explained

• The declaration defines that this document is an HTML5 document
• The < html> element is the root element of an HTML page
• The < head> element contains meta information about the HTML page
• The < title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
• The < body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The < h1> element defines a large heading
• The < p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

EDITORS

A simple text editor is all you need to learn HTML.

Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac) or Sublime text or Visual Studio code.

Step 1: Open the text Editor

Step 2: Write Some HTML

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" or "index.html" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open").

HTML Basics

All HTML documents must start with a document type declaration: .

The HTML document itself begins with < html> and ends with .

The visible part of the HTML document is between < body> and .

The declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).
The declaration is not case sensitive.
The declaration for HTML5 is:

HTML Heading

HTML headings are defined with the < h1> to < h6> tags. < h1> defines the most important heading. < h6> defines the least important heading:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Links

HTML links are defined with the a tag:

The link's destination is specified in the href attribute.

How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.

Comments in HTML :

Document Type

A TAG

Download File

It is a Link

To display a picture, it is better to use the < img> tag.
To display HTML, it is better to use the < iframe> tag.
To display video or audio, it is better to use the < video> and < audio> tags.

The < embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.

This paragraph will go left-to-right.

This paragraph will go right-to-left.

BDO stands for Bi-Directional Override. The < bdo> tag is used to override the current text direction

The < blockquote> tag specifies a section that is quoted from another source.

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Autofocus Button

Disabled Button

The form attribute specifies the form the button belongs to.
The value of this attribute must be equal to the id attribute of a < form> element in the same document.

The formaction attribute specifies where to send the form-data when a form is submitted.
The formaction attribute is only used for buttons with type="submit".

The formenctype attribute specifies how form-data should be encoded before sending it to a server.
The formenctype attribute is only used for buttons with type="submit".

Button Type

The < canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
The < canvas> tag is transparent, and is only a container for graphics, you must use a script to actually draw the graphics.
Any text inside the < canvas> element will be displayed in browsers with JavaScript disabled and in browsers that do not support < canvas>.

Caption Tag

The < caption> tag defines a table caption.
The < caption> tag must be inserted immediately after the < table> tag.

Table

The < cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

The Scream by Edward Munch. Painted in 1893.

this is red paragraph

Style

The Mark Tag

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

pre Tag

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

The HTML < pre> element defines preformatted text.
The text inside a < pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

the Quotation Tag

Abbrevation Tag

COLOURS

RGB and RGBA

An RGB color value represents RED, GREEN, and BLUE light sources.
An RGBA color value is an extension of RGB with an Alpha channel (opacity).

rgb(255, 0, 0) : RED
rgb(0, 255, 0) : GREEN
rgb(0, 0, 255) : BLUE
rgb(0, 0, 0) : BLACK
rgb(255, 255, 255) : WHITE

An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

HEX

n HTML, a color can be specified using a hexadecimal value(0 - F) in the form:
#rrggbb
#000000 : BLack
#ffffff : White

HSL and HSLA

HSL stands for hue, saturation, and lightness.
HSLA color values are an extension of HSL with an Alpha channel (opacity).

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage value, 0% is black, and 100% is white.

Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

HTML Links - Create Bookmarks

Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with the bookmark.

Images

With HTML image maps, you can create clickable areas on an image.
The HTML < map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more < area> tags.

The only difference from other images is that you must add a usemap attribute
The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

The < map> element is used to create an image map, and is linked to the image by using the required name attribute

Then, add the clickable areas.
A clickable area is defined using an < area> element.
You must define the shape of the clickable area, and you can choose one of these values:

rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region

Shape="rect"

Shape="circle"

Shape="poly"

Image Maps The HTML

Background Images

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property

background-image: url('img_girl.jpg');

To avoid the background image from repeating itself, set the background-repeat property to no-repeat.
background-repeat: no-repeat;

If you want the background image to cover the entire element, you can set the background-size property to cover.
Also, to make sure the entire element is always covered, set the background-attachment property to fixed
background-attachment: fixed;
background-size: cover;

If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%
background-size: 100% 100%;

Resize the Window

By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

Collapsed Borders
To let the borders collapse into one border, add the CSS border-collapse property.
Cell padding specifies the space between the cell content and its borders.

Left-align Headings

Add Border Spacing

Note: If the table has collapsed borders, border-spacing has no effect.

Cell that Spans Many Columns

Description Lists

The < dl> tag defines the description list, the < dt> tag defines the term (name), and the < dd> tag describes each term

Coffee

- black hot drink

Milk

- white cold drink

UnOrdered Lists

• Home
• News
• Contact
• About

Ordered Lists

1. Coffee
2. Tea
3. Milk

1. Coffee
2. Tea
3. Milk

1. Coffee
2. Tea
3. Milk

1. Coffee
2. Tea
3. Milk

1. Coffee
2. Tea
3. Milk

50. Coffee
51. Tea
52. Milk

50. Coffee
51. Tea
52. Milk

Block Level Elements

A block-level element always starts on a new line.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
A block level element has a top and a bottom margin, whereas an inline element does not.

Inline Elements

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

The < div> Element

The < div> element is often used as a container for other HTML elements.
The < div> element has no required attributes, but style, class and id are common.

The < span> Element

The < span> element is an inline container used to mark up a part of a text, or a part of a document.
The < span> element has no required attributes, but style, class and id are common.

My mother has black eyes and my father has dark green eyes.

To define multiple classes, separate the class names with a space, e.g. < div class="city main">. The element will be styled according to all the classes specified.

London

Paris

Tokyo

Different Elements Can Share Same Class

Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.
JavaScript can access elements with a specific class name with the getElementsByClassName() method:

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

iframe Tag

An HTML iframe is used to display a web page within a web page.

• The HTML < iframe> tag specifies an inline frame
• The src attribute defines the URL of the page to embed
• Always include a title attribute (for screen readers)
• The height and width attributes specifies the size of the iframe
• Use border:none; to remove the border around the iframe

The text size can be set with a "vw" unit, which means the "viewport width".

Responsive Text

Resize the browser window to see how the text size scales.

Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

HTML Computer Code Elements

Some programming code:

kbd Element

The HTML < kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.

Save the document by pressing Ctrl + S

samp for Program output

The HTML < samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.

File not found.
Press F1 to continue

x = 5;
y = 6;
z = x + y;

var Element

The HTML < var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in Italic .

The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.

details Tag

The < details> tag specifies additional details that the user can open and close on demand.
The < details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.
Any sort of content can be put inside the < details> tag.

Tip: The < summary> tag is used in conjuction with

The Time Element

Open from 10:00 to 21:00 every weekday.

A commonly used entity in HTML is the non-breaking space: & nbsp;

H  I

Hypen ‑

less than  < <

Greater than  > >

Ampersand  & &

double quotation mark  " "

single quotation mark(apostrophe)  ' '

Cent  ¢ ¢
Pound  £ £
Yen  ¥ ¥
Euro  € €
Copyright  © ©
registered trademark  ® ®
Trademark  ™ ™

Combining Diacritical Marks

A diacritical mark is a "glyph" added to a letter.
Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.
Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.

à á â ã Ò Ó Ô Õ

Mathematical Symbols

∀ ‑ FOR ALL
∂ ‑ Partial Differential
∃ ‑ There Exists
∅ ‑ Empty Set
∇ ‑ Nabla
∈ ‑ Element of
∉ ‑ Not An Element Of
∋ ‑ Contains a Number
∏ ‑ N-ARY Product
∑ ‑ N-ARY Summation

Emojis

⌚ WATCH
⌛ Loading
⏰ ALARM
☕ HOT Coffee
⚡ STROM
⚽ FOOTBALL
❌ WRONG
❔ Question Mark
⭐ STAR
🌹 ROSE
🌻 SUNFLOWER
🍅 Tomato
🍆 Brinjal
🍌 Banana
🍎 Apple
🍓 Strawberry
🍕 PIZZA
😀 Smiley

😀😁😂😄😅
😆😇😉😊😋
😎😒😡😭😱
😴😷🙏🤑🤒
🤕🤘🤙🤚🤝
🤟🤣🤦🤭🤮

Skin Tone For Emojis

☝ No skin tone
☝🏿 Dark
☝🏾 Medium Dark
☝🏽 Medium
☝🏼 Medium Light
☝🏻 Light

Character Set ASCII
0 - 9 = 48 - 57
A - Z = 65 - 90
a - z = 97 - 122

The < label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.
The < label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the < label> element, it toggles the radio button/checkbox.

Action Attribute
The action attribute defines the action to be performed when the form is submitted.
action Specifies where to send the form-data when a form is submitted
Usually, the form data is sent to a file on the server when the user clicks on the submit button.
< form action="/action_page.php">
< /form>

The target attribute specifies where to display the response that is received after submitting the form.
The default value is _self

The method attribute specifies the HTTP method to be used when submitting the form data.
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").
The default HTTP method when submitting form data is GET.

Notes on GET:
Appends the form data to the URL, in name/value pairs
NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
The length of a URL is limited (2048 characters)
Useful for form submissions where a user wants to bookmark the result
GET is good for non-secure data, like query strings in Google

Notes on POST:
Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL)
POST has no size limitations, and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked

The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

Then, try to set autocomplete to "off".

The accept-charset attribute specifies the character encodings that are to be used for the form submission.

< form action="/action_page.php" accept-charset="utf-8">

select tag

The < select> element defines a drop-down list

INPUT ATTRIBUTES

The input value attribute specifies an initial value for an input field:

The input readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified

The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.
The value of a disabled input field will not be sent when submitting the form!

The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.

The input maxlength attribute specifies the maximum number of characters allowed in an input field.

The input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.

The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.
The multiple attribute works with the following input types: email, and file.

The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.
The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

The input placeholder attribute specifies a short hint that describes the expected value of an input field.
The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

The input required attribute specifies that an input field must be filled out before submitting the form.

The input step attribute specifies the legal number intervals for an input field.
This attribute can be used together with the max and min attributes to create a range of legal values.
The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

The input autofocus attribute specifies that an input field should automatically get focus when the page loads.

The input height and width attributes specify the height and width of an < input type="image"> element.

The form attribute specifies the form an input element belongs to.

The "Last name" field below is outside the form element, but still part of the form.

The input formaction attribute specifies the URL of the file that will process the input when the form is submitted.

< form action="/action_page.php">

The input formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The novalidate attribute prevents forms from running their validation logic when the form is submitted. In other words, it always lets the form submission process go through regardless of what the results of validation logic would normally.

CANVAS GRAPHICS

The HTML < canvas> element is used to draw graphics on a web page.
The < canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

Canvas is Empty

moveTo(x,y) - defines the starting point of the line
lineTo(x,y) - defines the ending point of the line

beginPath() - begins a path
arc(x,y,r,startangle,endangle) - creates an arc/curve.
To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI.
The x and y parameters define the x- and y-coordinates of the center of the circle.
The r parameter defines the radius of the circle.

The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is black.
The fillRect(x,y,width,height) method draws a rectangle, filled with the fill style, on the canvas:

font - defines the font properties for the text
fillText(text,x,y) - draws "filled" text on the canvas
strokeText(text,x,y) - draws text on the canvas (no fill)

createLinearGradient(x,y,x1,y1) - creates a linear gradient
createRadialGradient(x,y,r,x1,y1,r1) - creates a radial/circular gradient

Once we have a gradient object, we must add two or more color stops.
The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).

SVG Graphics

SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation

Video Tag

The < video> tag is used to embed video content in a document, such as a movie clip or other video streams.
The < video> tag contains one or more < source> tags with different video sources. The browser will choose the first source it supports.
The text between the < video> and tags will only be displayed in browsers that do not support the < video> element.

Audio Tag

The < audio> tag is used to embed sound content in a document, such as music or other audio streams.
The < audio> tag contains one or more < source> tags with different audio sources. The browser will choose the first source it supports.
The text between the < audio> and tags will only be displayed in browsers that do not support the < audio> element.

Inserting youtube video

Base Tag

The < base> tag specifies the base URL and/or target for all relative URLs in a document.
The < base> tag must have either an href or a target attribute present, or both.
There can only be one single < base> element in a document, and it must be inside the < head> element.

The < blockquote> tag specifies a section that is quoted from another source.

The < cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

The < embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.

A < footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents

The < meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

Anna's score:

Peter's score:

Linda's score:

The < noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.

The < param> tag is used to define parameters for an