What is html? Archives

HTML Favicon

Please Share On:

Definition:

A favicon is a small icon displayed next to your page title in your browser. You can use any image you like but the image should be in high contrast for better results.

Favicon image always displays before your web page title. You can see a screenshot below that red highlighted circle mark is a favicon image.

How to add a Favicon image to your webpage?

First of all, save your favicon image to the root directory of your webserver or create a folder in the root directory named “images” and keep your favicon image in that folder. A common name for a favicon image is favicon.ico.

Second, now is the time to link your favicon image to your page. So, add the <link> element to your HTML documents after the <title> element and give a reference to your favicon.ico folder.

See an example below:

<!DOCTYPE html>
<html>
<head>
  <title>Home Page</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a home page</h1>
<p>This is a home page paragraph.</p>

</body>
</html>

Now save your HTML documents and reload your browser. You should be able to see your favicon icon.

Output:

You may be interested in the following topics:

HTML Styles

Please Share On:

The HTML style attribute is used to add styles in an element. For example: color, size, font, and more.
The style attribute is used to specify CSS rules within the tag element.

<p style = "font-family: aerial; color: red; font-size: 20px; font-style: italic;"> Some text... </p>

Syntax:

<tagname style="property:value;">

Here, The property is a CSS property and the value is a CSS value.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Style</title>
  </head>
 
  <body>
     <p style = "color:red; font-size:24px;" > Hello, World! </p>
  </body>
</html>

Output:

3 ways of using CSS in html documents:

External Style Sheet: Define style sheet rules in a seperate .css file and then include that file in your HTML document using <link> tag.
Internal Style Sheet: Define style sheet rules in header section of the HTML document using <style> tag.
Inline Style Sheet: Define style sheet rules directly in the HTML elements using style attribute.

1) External Style Sheet:

In external style sheets, CSS defines as a separate file and saved on a .css extension like “filename.css”. This single .css file will change the look of the entire website. Each page of your website must link to external style sheets using the following code which must insert in the head section.

<head>
<link rel="stylesheet" type="text/css" href="filename.css">
</head>

External style sheets can be written in any text editor. Here is an example of the external style sheets “filename.css” code.

body {
  background-color: blue;
  margin: 10px;
  padding: 5px;
}

.header-title {
  color: black;
  text-align: center;
  text-decoration: underline;
}

2) Internal Style Sheets

Internal Style Sheets may be used to style each single page. It is defined with <style> element inside <head> section of your html page.

<head>
<style>
body {
  background-color: blue;
  margin: 10px;
  padding: 5px;
}

.header-title {
  color: black;
  text-align: center;
  text-decoration: underline;
}
</style>
</head>

3) Inline style sheets

Inline style sheets are used to style a single element.

Suppose you have an HTML page like home.html.

<!DOCTYPE html>
<html>
<head>
  <title>Home Page</tilte>
</head>
<body>
   <h1>This is a heading</h1>
     <p>This is a paragraph.</p>
</body>
</html>

Now define your element using inline style sheets.

<html>
<head>
  <title>Home Page</tilte>
</head>
<body>
   <h1 style="color:red;margin:10px; text-align:center;">This is a heading</h1>
     <p>This is a paragraph.</p>
</body>
</html>

The above code:

<h1 style="color:red;margin:10px; text-align:center;">This is a heading</h1>

is used for the inline style sheet. “This is a heading” is defined with color: red, margin is equal to 10px and text is in the center. The inline style sheets used only in <h1> will not apply in <p>. The content inside the <p> remains the same without any style sheets.

In this way, we can style our webpage layout in 3 different ways.

You may be interested in the following topics:

HTML Paragraph

Please Share On:

As everyone knows that a paragraph always starts with new lines and usually a combination of texts.

HTML <p> element defines a paragraph. It has both opening and closing tag <p> </p>.

Browser automatically add a margin before and after a paragraph.

Syntax:

<p> Some Text... </p>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
     <p> I am a first paragraph. </p>
     <p> I am a second paragraph. </p>
     <p> I am a third paragraph. </p>
  </body>
</html>

Output:

try it yourself

Browser Display:

As already mentioned above, the <p> tag adds a space before and after a paragraph, which is basically a margin added by your browser. The browser will remove extra spaces and lines when the page is displayed.

In the below example, the paragraph has been defined as using extra spaces and lines. Let’s see the browser output.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
    <p> Here, this first paragraph 
      has multiple lines,
      but the browser
      will ignore
      the multiple lines   
    </p>
    
     <p> Here,          this second         paragraph 
      contains          lot of space          in the source code,
      but           the browser
      ignore   spaces 
      to display.   
    </p>
  </body>
</html>

Output:

try it yourself

HTML Horizontal Line:

<hr> tag is used to display a horizontal line.

<hr> tag is an empty tag, which means it doesn’t need a closing tag.

<hr> element is used to separate content in a webpage.

Syntax:

<hr>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
    <h1> Australia </h1>
    <p> Some description about Australia.</p>
    <hr>
    
    <h1> Nepal </h1>
    <p> Some description about Nepal.</p>
    <hr>
    
  </body>
</html>

Output:

try it yourself

HTML Break Line

<br> element is used to break a line.

<br> tag is an empty tag, which means it doesn’t need a closing tag.

You just add a <br> tag whenever you need a line break.

Syntax:

<br>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
    <h1> Line Break Example</h1>
    
    <h3>Paragraph without break tag</h3>
    <p>This is a paragraph which uses a line break html tag element. </p>
    
    <br>
    
    <h3> Paragraph with break tag</h3>
    <p>This is a paragraph <br> which uses a line break <br> html tag element.</p>
    
  </body>
</html>

Output:

try it yourself

HTML <pre> Tag:

So we have learned how paragraph <p> tag ignores all extra lines and spaces before displaying in a browser. But, there is a way to preserve this by using a <pre> tag.
<pre> tag contains an opening and closing tag.

<pre> Some Text... </pre>

It displays a text with extra lines and spaces we use.
The best example to use <pre> tag is on song’s lyrics. which are written into multiple lines.

Syntax:

<pre> 

Some Text... 

</pre>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
    <pre>
      This paragraph has multiple
      lines and it is displayed
      as it is written in the 
      code.
    </pre>
    
    <pre>
      This paragraph      has multiple
      spaces      and it is         displayed
      as it is      written in the 
      code.
    </pre>
    
  </body>
</html>

Output:

try it yourself

You may be interested in the following topics:

HTML Headings

Please Share On:

HTML headings are titles and sub-titles that you use in your web pages.

There are 6 styles of HTML headings tags starting from <h1> to <h6>.

<h1> defines the most important heading. <h1> heading is used for the main titles of the pages.

<h2> heading mostly used for sub-titles.

<h6> defines the least important heading.

Syntax:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Headings</title>
  </head>
 
  <body>
    <p> List of Heading tag starting from &lt; h1 &gt; to &lt; h6 &gt;
    </p>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

  </body>
</html>

Output:

try it yourself

You may be interested in the following topics:

HTML Attributes

Please Share On:

HTML attributes provides the characteristics of HTML elements.
HTML attributes always defines in the HTML opening tag.
HTML attribues has two parts: a name and a value and it’s defines in the following syntax:

<p name = "value"></p>

Here, <p> is a HTML tag.

The name is the property that you want to set. Let’s use an align property in <p> tag. So, you will write like this

<p align ="value"> This is just an example of attribute. </p>

The value is the value of the above property and is always kept inside the quotation mark. The above property has three possible values: left, right and center. Let’s use one of these. Now, your HTML code will look like

<p align ="left"> This is just an example of attribute. </p>

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Align Attribute</title>
  </head>

  <body>
    <h1>HTML Align Attribute</h1>
    <p align = "left" >I am left align.</p>
    <p align = "center" >I am center align.</p>
    <p align = "right" >I am right align.</p>
  </body>
</html>

Output:

try it yourself

Common HTML Attributes

Here, we will see the most used HTML attributes.

Note: Always write the attribute name in lowercase.

href Attribute
src Attribute
alt Attriubute
height and width Attribute
id Attribute
title Attribute
class Attribute
style Attribute
lang Attribute

1) href Attribute:

Syntax:

<a href = "tryityourself.html"> Try it yourself <a>

Here, <a> the tag refers to a hyperlink and href attributes that specify the URL of the link.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>href Attributes</title>
  </head>
 
  <body>
    <h1>href Attributes</h1>
    <p align = "center">Click the below link to see how href attribute works upon clicking on the hyperlink text.</p>
    <p align = "center">
         <a href = "https://www.elsebazaar.com/blog/html-attributes/">Visit Elsebazaar's blog for tutorials.</a>
    </p>
   
  </body>
</html>

Output:

try it yourself

Continue Reading to the next page…

Pages: 12345

HTML Elements

Please Share On:

An HTML element is defined by starting tag, some contents in the middle, and the closing tag.

Some Examples:

Start Tag	Content	End Tag
<h1>	This is heading 1 content	</h1>
<title>	This is a title content	</title>
<p>	This is a paragraph content	</p>
<br/>	none	none

In the above table, you can see that HTML content begins with start and end tag. For example: <h1> … </h1>, <title> … </title>, <p>…</p>. Some HTML elements don’t need closing tag like <br />, <img… />, <hr />. These elements are called void elements.

Nested HTML Elements:

You are allowed to use one HTML element inside another HTML element. An HTML documents contain nested HTML elements.

The below example contains the following elements <html>, <head>, <title>, <body>, <h1>, and <p>.

You can see that the elements are used inside other elements. These are called nested elements. <html> is the root elements.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Heading</title>
  </head>

  <body>
    <h1>Heading</h1>
    <p>First Paragraph.</p>
  </body>
</html>

Try it yourself

Example Described:

An HTML document starts with root element <html>, which has start tag <html> and end tag </html>. Inside the <html> element, there are <head> element and <body> element.

<head>
    <title>My Heading</title>
</head>

<body>
   <h1>Heading</h1>
   <p>First Paragraph.</p>
</body>

Let first go through <head> element . An <head> element consist of another element <title> with its contents and closing tag. Inside the <title> tag, you will write the document title.

<body> element is nested by another two elements <h1> and <p>. <h1> elements is used to write the heading of the document and <p> element is used for the document paragraph.

Output:

You may be interested in the following topics:

What is HTML?

Please Share On:

HTML stands for HyperText Markup Language.

HTML is used for creating web pages and their content.

HTML is very easy to learn.

Syntax:

<!DOCTYPE html>
<html>
  <head>
    <title>My Heading</title>
  </head>

  <body>
    <h1>Heading</h1>
    <p>First Paragraph.</p>
  </body>
</html>

Syntax Description:

All HTML documents must start with a document type declaration: <!DOCTYPE html>. It helps browsers to display web pages correctly and only write once at the top of the html code.
HTML starts with <html> opening tags and ends with </html> ending tags.
Next, there is a head with opening <head> and closing </head> tag. Inside head tag, you write the title of the page with opening <title> and closing </title> title tag.
All body content will be written inside opening <body> and closing </body> body tags.

Where to write html code:

You can write HTML code in any editor software or you can write in notepad.

Search notepad in your Window and start writing code as below image.

How to save html code:

You can save your HTML code with .html or .htm extension together with your filename. For example, home.html or home.htm

To save the above notepad code. Open File -> Save as and give a name with HTML extension.

View Your HTML Page:

Go to the location where you have saved your home.html file and open it into your favorite web browser.

Output of home.html file

Live Editor:

Try our live editor by clicking the below button “Try It Yourself“. You can edit and test the live output.

<!DOCTYPE html>
<html>
  <head>
    <title>My Heading</title>
  </head>

  <body>
    <h1>Heading</h1>
    <p>First Paragraph.</p>
  </body>
</html>

Try it yourself

You may be interested in the following topics:

Definition:

How to add a Favicon image to your webpage?

Output:

Syntax:

Code:

Output:

3 ways of using CSS in html documents:

1) External Style Sheet:

2) Internal Style Sheets

3) Inline style sheets

Syntax:

Code:

Output:

Browser Display:

Code:

Output:

HTML Horizontal Line:

Syntax:

Code:

Output:

HTML Break Line

Syntax:

Code:

Output:

HTML <pre> Tag:

Syntax:

Code:

Output:

Syntax:

Code:

Output:

Example:

Output:

Common HTML Attributes

1) href Attribute:

Syntax:

Code:

Output:

Continue Reading to the next page…

Some Examples:

Nested HTML Elements:

Example:

Example Described:

Output:

Syntax:

Syntax Description:

Where to write html code:

How to save html code:

View Your HTML Page:

Output of home.html file

Live Editor:

Copyright @2023. All Right Reserved.