Rate this post

Table of content
1. HTML Introduction
2. HTML Version
3. HTML Headings
4. HTML Paragraphs
5. HTML Links
6. HTML Image
7. HTML Buttons
8. HTML Attributes
9. HTML Headings
10. HTML Paragraph
11. HTML Styles
12. HTML Text formatting
13. HTML colors
14. HTML Colors value
15. HTML Lists
16. HTML iframes

HTML Introduction

What is HTML?

First of all, understand what is HTML?

HTML Stands for “Hyper Text Markup Language”. HTML is a markup language used to create web pages and web-based apps. When a web page is opened by a web browser, it receives a document from its web server as HTML, which is converted into a web browser multimedia web page.

It can also use CSS and JavaScript, which makes it even more useful. It can show or use any program written in JavaScript in web pages and CSS can also decide its appearance and size. The World Wide Web Consortium (W3C), which maintains the standard of HTML and CSS, is encouraging the use of CSS since 1997.

HTML Markup.

There are many essential things in the HTML markup, in which the tags (and their properties) are the main. Tags are mostly in groups of two. Such as <h1> and </ h1> header tags. In this, the first one is called an open tag and the second one is a closed tag. These are open tags initially, and then there are no text or other tags, and in the end, there is a tag closing the tag.

There are always open and closed tags not always open. There are several tags that are written in the form of just a tag and its properties are written in it. A similar tag is also <img>. Such tags do not have open and closed tags. They are used only by typing its properties in a tag. An example of a general HTML markup is given below.

Example of Simple HTML Document:

<!DOCTYPE html>
<html>
<head>
<title>This is a Title</title>
</head>
<body>
<h1>This is First Heading</h1>
<p>This is first paragraph.</p>
</body>
</html>

Example Explained:

The <!DOCTYPE html> defines this documents to be HTML5.
Everything coming between <html> and </ html>shows a web page.
The part between <body> and </ body> appears on the page itself.
The <h1> element defines a first heading.
The <p> element defines a paragraph.

HTML Tags:

HTML tag normally write in pairs like <h1> and </h1>

Here <h1> tag is start tag, while </h1> is end tag.

The end tag is written like the start tag, but difference is only that we insert forward salahbefore the tag name.

How to show HTML in Web Browser?

You can use any web browser to show your HTML code. First write HTML code in Notepad or Notepad++ or in HTML editor. Here I will show how to write HTML code in Notepad and show on Web browser.

Step 1: First write HTML code in your Notepad.

Step 2: Save this HTML code with extension name (.html) .

Step 3: Now open this save file in any browse which do you have.

HTML Version

HTML Versions

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

Since the early days of the Web, there have been many versions of HTML.

HTML Editors

Write HTML Using Notepad

You can write HTML by using professional HTML editors as well as notepad or notepad++ but here I am showing simple way to write. So, I will use Notepad for write HTML.

Step 1: Open notepad.

Step 2: Write some HTML code on your notepad or copy below code and paste on your notepad.

<!DOCTYPE html>
<html>
<head>
<title>This is a Title</title>
</head>
<body>
<h1>This is First Heading</h1>
<p>This is first paragraph.</p>
</body>
</html>

Step 3: Save the HTML Pages

Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file “anyname.html” and select Save as type All Files.

Step 4: View HTML page on your web browser.

HTML Basic examples

HTML Documents:

The HTML documents must start with a document type declaration- <!DOCTYPE html>
The HTML documents start with <head> and ends with </head>
This visible part of the HTML document written between <body> and </body>

Example of HTML Documents:

<!DOCTYPE html>
<html>
<head>
<title>This is a Title</title>
</head>
<body>
<h1>This is First Heading</h1>
<p>This is first paragraph.</p>
</body>
</html>

HTML Headings

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

Example of HTML heading

<h1>First Heading</h1>

<h2>Second Heading</h2>

<h3>Third Heading</h3>

<h4>Fourth Heading</h4>

<h5>Fifth Heading</h5>

<h6>Sixth Heading</h6>

HTML Paragraphs

HTML paragraphs are defined with <p> tag. <p> is start tag and </p> is end tag.

Example of HTML paragraphs

<p> This is first paragraph</p>
<p> This is another paragraph</p>. So, you can write many paragraphs like that.

HTML Links.

HTML link are defined with <a> tag.

Example of HTML Link

<a href=”https://www.everythingingoogle.com”> This is a link </a>

Here, the link destination is specified with href attribute. Attribute are used to provide additional information about HTML elements.

HTML Image

HTML Image are defined with <img> tag.
The source file (src), alternative text (alt), width and height are provides as attributes.

Example of HTML Image.
<img src=”image.jpg” alt=”everythingingoogle.com” width=”100” height=”50”>

HTML Buttons

HTML Button defined with <button> tag.

Example of HTML Button

<button> Click Here </button>

HTML Lists

HTML lists are defined with <ul> (unordered or bullet list) or <ol> (ordered or numbered list) tags, followed by <li> tag (list items).

Example of HTML Lists

<ul>
  <li>Blogger</li>
  <li>WordPress</li>
  <li>YouTube</li>
</ul>

HTML Elements

The HTML element usually consist of a start tag and end tag, with the element content inserted in between start tag and end tag. Let’s understand in the below figure.

Empty HTML Elements

HTML elements with no content called empty HTML element.

Here, <br> is an empty element without closing tag i.e. no need to write end tad </br>.

<br> tag defines a line break.

Example of Empty HTML elements

<p> Hello friend <br> Welcome to everything in google </p>

HTML Attributes

HTML attributes provides additional information about HTML elements. Attributes always specified in the start tag and its usually come in name/value pairs like- name=”value”

Href Attribute

HTML link are defined with <a> tag and link address is specified in the href attributes

Example: <a href=”https://www.everythingingoogle.com”> This is a link </a>

Src Attribute

HTML Image are defined with <img> tag and the source of image is specified with src attributes.
Example: <img src=”image.jpg” >

The width and height Attribute

You can use width and height attributes in HTML Image for give particular size of image.

Example: <img src=”image.jpg” width=”100” height=”50”>

The alt Attribute

The alt attribute to be used for alternative text when an image cannot be displayed.

Example: <img src=”image.jpg” alt=”everythingingoogle logo” >

The Style Attribute

The style attribute is used for styling an element like colour, font, font size etc.

Example: <p style=”color:red”> Hello friend Welcome to everything in google </p>

The lang Attribute

Language of the document can be declared in the <html> tag. The language is declared with the lang attribute.

Example:

<!DOCTYPE html>
<html lang=”en-US”>
<body>
…
</body>
</html>

HTML Headings

When you are writing any post then heading is very important thing because search engine uses the heading to index the structure and content of your web pages.

Headings are defined with <h1> to <h6> tags. Where <h1> heading defined the most important heading and <h6> heading defined less important heading.

Heading looks like that

Example of HTML Heading

<h1>First Heading</h1>
<h2>Second Heading</h2>
<h3>Third Heading</h3>
<h4>Fourth Heading</h4>
<h5>Fifth Heading</h5>
<h6>Sixth Heading</h6>

Bigger Heading

Each HTML heading has a default size. You can specify the size of any heading as per your choice. For specify the size you need to use style attribute using the CSS font-size property.

Example of bigger heading

<h1 style=”font-size:100px;”>First Heading</h1>

HTML Horizontal

If you want to separate content by using horizontal line then you can use <hr> tag for display horizontal line between two content.

Example of HTML horizontal

<h1>This is First Heading</h1>

<hr>

<h2> This is second heading</h2>

<hr>

<h3> This is third heading</h3>

<hr>

<h4> This is fourth heading</h4>

HTML Paragraph

HTML Paragraph is defined with <p> tag. Where <p> tag is start tag and </p> tag is end tag and between the tag you can write your content.

Example of HTML Paragraph

<p> This is first paragraph </p>
<p> This is second paragraph </p>

NOTE: Don’t forget end tag

When you are writing any paragraph and you didn’t put end tag </p> then HTML will show errors.

HTML Poem problem

If you want to write a poem in HTML and you used <p> and </p> tag then your poem will show in a line.

Example:
<p>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</p>

So, you can use <pre> tag for write a poem
Example

<pre>

Twinkle, twinkle, little star,

How I wonder what you are!

Up above the world so high,

Like a diamond in the sky.

</pre>

HTML Styles

HTML Style attribute

With the help of <style> attribute you can style your content like, color, font size, font, etc.

HTML Text color

The color property defines the text color for an HTML element.

Example:

<h1 style=”color:blue;”>Everything in google</h1>
<p style=”color:red;”>Welcome to everything in google</p>

HTML Background color

The background color property defined the background color of HTML element. If you want to change background color then you need to use this property in <body> tag.

Example of HTML background color

<body style=”background-color:pink;”>
<h1>Google</h1>
<p>Google translate.</p>
</body>

HTML Fonts

The font-family property defined the font to be used in HTML element

Example

<h1 style=”font-family:verdana;”>Google</h1>
<p style=”font-family:courier;”>Google image.</p>

HTML Text size

The font-size property defined the font to be used in HTML element. With the help of font-size property you can give the size of content as per your choice.

Example of HTML text size

<h1 style=”font-size:200%;”>Welcome to google</h1>
<p style=”font-size:150%;”>Search anything in google</p>

HTML Text Alignment

The text-align property defined the horizontal text alignment for HTML element.

Example of HTML text alignment

<h1 style=”text-align:center;”>HTML Tutorial</h1>
<p style=”text-align:center;”>How to write HTML</p>

HTML Text formatting

Formatting elements are used to display special type of text, like bold or italic text. Below I giving some formatting text which you can used in HTML text.

<b> – Used for Bold text.
<strong> – Used for important text.
<i> – used for italic text.
<em> – Used for emphasized text.
<mark> – Used for marked text.
<small> – Used for small text.
<del> – Used for deleted text.
<ins> – Used for inserted text.
<sub> – Used for subscript text.
<sup> – Used for superscript text.

HTML <b> and <strong> elements

Both elements are used for bold a text.

Example: <b> This is bold text</b>

<strong> This is strong text </strong>

HTML <i> and <em> elements.

<i> element used for Italic text while <em> element used for emphasized text. Below in the picture you can see the difference between <i> and <em> elements.

Example:

<i> This text is italic</i> <br>
<em> This is emphasized text </em> <br>
<p> this is normal text </p>

HTML <mark> and <del> elements.

HTML <mark> element used for marked or highlighted important thing in the sentence and <del> element used for delete or removed the text.

Example:

<p> Google is a <mark> search </mark> engine </p>. Here, I marked search as an important text.
<p> At the age of 15 I like <del>milk </del> but now I like water </P>. Here I used milk as a removed text.

HTML <sub> and <sup> elements.

The HTML <sub> element used for _subscripted text. While the HTML <sup> element used for ^{superscripted} text

Example:

<!DOCTYPE html>

<html>

<head>

<title>Heading</title>

</head>

<body>

<p>This is <sub>subscripted</sub> text.</p>

<p>This is <sup>superscripted</sup> text.</p>

</body>

</html>

HTML colors

HTML colors are specified by using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Color name

In HTML, a color can be specified by using color name:

Example:

<!DOCTYPE html>
<html>
<body>
<h1 style=”background-color:Tomato;”>Tomato</h1>
<h1 style=”background-color:Orange;”>Orange</h1>
<h1 style=”background-color:DodgerBlue;”>DodgerBlue</h1>
<h1 style=”background-color:MediumSeaGreen;”>MediumSeaGreen</h1>
<h1 style=”background-color:Gray;”>Gray</h1>
<h1 style=”background-color:SlateBlue;”>SlateBlue</h1>
<h1 style=”background-color:Violet;”>Violet</h1>
<h1 style=”background-color:LightGray;”>LightGray</h1>
</body>
</html>

HTML Background color

You can set background color with the help of HTML color element.

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style=”background-color:DodgerBlue;”>how to goole translate</h1>

<p style=”background-color:Tomato;”>Google Translate can help you with that. And it’s not just single web pages, either. You can browse an entire website in the chosen language, and even change.</p>

</body>

</html>

HTML Text color

HTML text color used to color text as per your choice.

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style=”color:Tomato;”>java scripting</h1>

<p style=”color:DodgerBlue;”>Javascript is a computer programming language. It is a scripting language and is mainly used to create webpages in the client side.</p>

<p style=”color:MediumSeaGreen;”>Javascript provides programming facility for HTML designers.

JavaScript lets you insert dynamic text into HTML pages.</p>

</body>

</html>

HTML Border color

With the help of HTML border color you can set color of border.

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style=”border:2px solid Tomato;”>google maps</h1>

<h1 style=”border:2px solid DodgerBlue;”>google maps used for direction of ant route</h1>

<h1 style=”border:2px solid Violet;”>google search engine</h1>

</body>

</html>

HTML Colors value

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Let’s take an example of color name “Tomato”:

<!DOCTYPE html>
<html>
<body>

<p>color name is “Tomato”:</p>

<p>Same color name “Tomato”, but 50% transparent:</p>
<h1 style=”background-color:rgba(255, 99, 71, 0.5);”>rgba(255, 99, 71, 0.5)</h1>
<h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>hsla(9, 100%, 64%, 0.5)</h1>

</body>

</html>

RGB Value

In HTML, a color can be specified as an RGB value, by using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).
To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

HEX Value

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

HSL Value

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

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, 0% is black, 50% is neither light or dark, 100% is white

Example:

RGBA Value

RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.

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):

Example:

HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

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

Example:

HTML Lists

Unordered HTML List: An unordered HTML list start with <ul> tag and each list of items start with <li> tag. The list item will be marked with bullets (small black circle) by default. After the end you must need used of end tags which is </ul> and after each item list </li>

Example:

<!DOCTYPE html>

<html>

<body>

<h2>An unordered HTML list</h2>

<ul>

<li>Blogger</li>

<li>Wordpress</li>

<li>YouTube</li>

</ul>

</body>

</html>

Download 140 Standard HTML Color Name :- Click Here

Different list of HTML lists

The CSS list-style-type property is used to defined the style of the list item marker:

List-style-type property

Value	Description
disc	Sets the item list to a bullet
circle	Sets the item list to a circle
Square	Set the item list to a square
none	The item list will not be marked

write

HTML iframes

An iframe is used to display a web page within a web page. In other word we can sat that an iframe HTML element is used to insert content from another source, such as an advertisement, into a web page.

Iframe HTML tag.

The HTML tag of iframe is defined as <iframe> tag.

Example of iframe tag:

<iframe src=”URL”></iframe>

The src attribute specifies the URL (i.e. web address) of the inline frame page.

Set iframe height and width

Use height and width attribute to specifies the size ofiframe. The attribute value is specified in pixels by default, but we can also use in percentage (80%).

Example of iframe with height and width:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes with height and width</h2>
<p>You can use the height and width attributes to specify the size of the iframe</p>
<iframe src=”https://www.everythingingoogle.com” height=”200″ width=”500“></iframe>
</body>
</html>

When run this HTML then they will show like that

Note: you can use height and width attributes in pixels <iframe src=”https://www.everythingingoogle.com” height=”200px” width=”500px”></iframe> instead of percentage.

Iframe – remove the border.

By default, when we create an iframe then a border around it, but you can remove this border by using style attribute.

Example:

<!DOCTYPE html>

<html>
<body>
<h2>HTML Iframe remove border</h2>
<p>You can use the style property to remove border from iframe</p>
<iframe src=”https://www.everythingingoogle.com” height=”200″ width=”500″ style=”border:none“></iframe>
</body>
</html>

HTML iframe- target for a link

An iframe can be used for a target a link.

The target attribute of the link must refer to the name attribute of the iframe.

Example:

<!DOCTYPE html>

<html>
<body>
<h2>HTML Iframes target for a Link</h2>
<iframe src=”iframe.html” name=”iframe“></iframe>
<p><a href=”https://www.everythingingoogle.com” target=”iframe”>everythingingoogle</a></p>
</body>
</html>

HTML5 Tutorial

HTML Introduction

HTML Version

HTML Versions

HTML Editors

HTML Headings

HTML Paragraphs

HTML Links.

HTML Image

HTML Buttons

HTML Lists

HTML Elements

HTML Attributes

HTML Headings

HTML Paragraph

HTML Styles

HTML Text formatting

HTML colors

HTML Colors value

HTML Lists

List-style-type property

HTML iframes

Leave a Comment Cancel reply

EIG INFO BLOG

Categorys

Site Links