Tag: how to write html code

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 Elements

Please Share On:

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

Some Examples:

Start TagContentEnd Tag
<h1>This is heading 1 content</h1>
<title>This is a title content</title>
<p>This is a paragraph content</p>
<br/>nonenone

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.

home.html

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:

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial