Introduction to HTML
HTML stands for HyperText Markup language where hyper defines the link between multiple web pages and markup defines structure of the pages using tags.
- It is used to design the layout of a web page.
HTML contains multiple Tages and Attributes which are used to design a web page.
Let's look at the basic format of an html file
<html>
<head>
<!--here we define title, styles, meta data etc for the web page-->
</head>
<body>
<!--Inside body we define the actual content of the web page, this content will be shown on the web page-->
</body>
</html>
Note: <html> tag is the root element of HTML document.
Consider the following example:
<!DOCTYPE html>
<head>
<title>Think Design And Create</title>
</head>
<body>
<h1>Think Design And Create</h1>
<p>Here you'll learn to create a web page</p>
</body>
</html>
Note: !DOCTYPE defines the version of markup language written on current page.
HTML consist of multiple tags and attributes
What are Tags ?
There are mainly two types of tags defined:
1. Block Level Tags
2. Inline Tags
Note: Self closing Tags: These tags do not have a closing tag.
For Example: <img />, <br>, <hr> etc.
Let us understand each one with an example:
1. Block Level Tags
A block level tag always starts on a new line and it takes up the full width available for the page.
For Example: <div>, <p>, <ul>, <section> etc.
2. Inline Tags:
These elements do not start on a new line like block level tags.
For Example: <span>, <b>, <input> etc.
What are attributes ?
Attribute in html is used to provide additional information about the elements, it also modifies the HTML element.
<tag attribute-name= "value">...</tag>
Note: Attributes are always applied on the start tag of html.
For Example:
<p style="color:red" >Hello World</p>
Here style is an attribute and "color:red" is its value.
Similarly there are multiple attributes are defined for each tag, some of the examples are:
<img src="./background.jpg" alt="alternative text">
<a href="about.html">About Us</a>
Note: Save the html file as filename.html to render the page on a web browser. Here .html is an extension for html documents.
Continue Learning: html Elements
Comments
Post a Comment