HTML Basics Examples - The Clever Developer

bySoumava •
1

 HTML- Basics

What is HTML?

>> HTML (HyperText Markup Language) Which is employed to write down Webpages. It is a programming language that was invented by Tim-Berners-Lee within the year 1993. Learning HTML is sort of a piece of cake. You just have to write the part of the Webpage like the Title, or the Navigation bar, and to write the parts there are special types of codes available in HTML called Tags. Tags are codes that define a particular part of a webpage like a tag defines the text that is to be shown on the title bar of a browser.

Learn HTML


A simple HTML document

<!DOCtype html>
       <html>
       <head>
       <title>Welcome</title>
       </head>
       <body>
       <h1>Welcome to my website</h>
       <p>This is a para</p>
       </body>
       </html>

The - <!DOCtype html> - tag defines that this document is an HTML5 document these types of tags are called as "comments"

The - <html> - tag is the main tag of an HTML5 document.

The - <head> - tag contains meta info about the website.

The - <title> - tag specifies a title for the webpage.

The - <body> - tag is a container for all visible content like text, pics, vids etc.

The - <h1> -  tag specifies a large heading.

The - <p> - tag specifies a paragraph.

Html-Links

Here you will learn how to add links to your Webpage.

CODE-
 <!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML links:</p>

<a href="https://soumavawebtech.blogspot.com">This is a link</a>

</body>
</html> 

The above red color code is the line of code used to add links to HTML. You just have to type the link in the quotes and then you have to type the text that is to be displayed as a link and then just RUN it!

NOW see the OUTPUT!!!

If you want to use an Img as a link then follow these steps.

<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image below is a link..</p>

<a href="https://soumavawebtech.blogspot.com"><img src="demo.png" alt="HTML tutorial" style="width:42px;height:42px;"></a>

</body>
</html>

Just put the code of the image inside the Link element and give the link of the site in the href attribute.

If you want to link to an email address then follow these steps.

<!DOCTYPE html>
<html>
<body>

<h2>Link to an Email Address</h2>

<p>To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href attribute:</p>

<p><a href="mailto:hello@world.com">Send a email</a></p>

</body>
</html>

To link to an email address just use the mailto: function in the href attribute and then type the email address. 

 HTML - Css

In this part of the article, I will introduce technology or language which is used to style or design an HTML website. It is called CSS or Cascading Style Sheet. As I have written before Html is used to write a website and to design an HTML website, CSS is used to design the HTML website.

CSS can be used as 3 different types. they are

1. Inline CSS

2. Internal CSS

3. External CSS

Inline CSS - The style attribute is used to write Inline CSS. 

Internal CSS - The style element is used to write Internal CSS.

External CSS - The link element is used to link a CSS file with an HTML file. The CSS code is written in the linked CSS file.

You can learn more about CSS here - W3schools  Full CSS course - W3schools CSS

Tags:

1 Comments

Please Select Embedded Mode To Show The Comment System.*

Previous Post Next Post