What is HTML?
·
- HTML is a computer standard Markup language, which is used for creating web pages or web applications.
- HTML stands for Hypertext Markup Language, where Hypertext refers to link two web pages, and Markup is a computer language which is used to apply layout and formatting for a page.
- A web browser receives an HTML document from the server and converts it into a webpage.
Following is a simple example for HTML page which gives an idea about how HTML page looks:
<!DOCTYPE html>
<html>
<head>
<title>This is title</title>
</head>
<body>
<h1>This is a web-page</h1>
<p>This is First paragraph</p>
</body>
</html>
In above example we have used tags, and elements which are building blocks of HTML. Such as <head>, <body>, <h1>, and <p> we will understand about these tags later in this HTML introduction.
Output
When you will save this code using .html or .html and execute on your browser it will result in like
Brief History of HTML
HTML was firstly created by physicist Tim Berners-Lee in 1991. The first version of HTML was HTML 1.0 in the market in which HTML tags were proposed. After that, there was a continuous development in HTML language and many other versions came such as HTML 2.0, HTML 3.2, HTML 4.01, and the latest version is HTML5.
HTML text editors
As till now we understood about what is HTML but to write any code we need some editors, so to write an HTML code there are also various types of editors are available, but if you are a beginner so you can use windows NOTEPAD by which you can start to learn HTML. The other HTML editors are Notepad++, Sublime Text, Vim, Bluefish Editor, etc.
Building blocks of HTML
HTML is a Markup language which is made up of tags, attributes, and elements. These are the building blocks of an HTML language. Following is the description of these building blocks:
Tag: An HTML tag is used to apply to it. It is written between <and > brackets and these tags come with open tags <tag> and closed tag </tag> (except some tags).
Attribute: An HTML attribute is used to provide extra information for an element. The attribute is always applied with start tag <tag>, which contains name and value fields.
Element: Elements are the individual component of an HTML document. An element consists of start tag, end tag, and content between tags such as <p>content </p> so it is a paragraph element.
HTML tags
HTML tags are used to give meaning to content written between it or tags defines how the browser should display that content on a webpage. These tags are only responsible to make distinctions between normal text and HTML text for a browser.
HTML tags can have a start tag<tag>, and amend tag </tag>. End tag should always have a slash (/).
Note: Some tags do not have an end tag, those are called unclosed tags such as <br> and <hr> tags.
Example:
<h2> This is Second level heading </h2>
Following is a list for widely used HTML tags with description:
Tag Name
|
Description
|
<!DOCTYPE >
|
It specifies the version of HTML to the browser.
|
<h1>, <h2>, <h3>,<h4>,<h5>, <h6>
|
These tags are heading tags which are used to apply headings for a webpage, and these heading are having levels from <h1> to <h6>
|
<p>
|
This is a paragraph tag which is used to apply a paragraph for a webpage. This tag always starts with a new line.
|
<strong>
|
This tag is used to make a content bold. It shows content is important.
|
<kbd>
|
This is called as a keyboard tag, which defines a keyboard input.
|
<a>
|
This is called an anchor tag which is used to create a link.
|
<b>
|
This tag also make a content bold but it does not add any semantics to that content.
|
<html>
|
This is root tag of HTML document. It contains all other tags in it.
|
<body>
|
This is used to specify the body of HTML document, and content written between <body> tags are visible to the browser.
|
<head>
|
This tag specifies the head of HTML document which contains metadata and various other tags such as <title>, <style>,<link>, etc.
|
<div>
|
This tag is used to create a division section on a webpage.
|
<form>
|
This tag is used to create a form to take user input.
|
<img>
|
This tag is used to apply the image on a webpage.
|
<style>
|
This tag is used to apply CSS for an HTML document.
|
<span>
|
This tag does not apply any visual change to the content by itself, but it can provide style to an inline element.
|
<list>
|
This tag is used to create a list for an HTML document.
|
HTML attribute:
HTML attributes are Special words which control the behavior of an element, and always apply with the start tag. Attributes can change the default functionality of an element or provide some extra functionality to it.
HTML attribute always comes with name and value pair.
Syntax:
<tag attribute =”value”> content</tag>
Example:
<p style="color: blue ">It will change the color of content to blue</p>
Following is the list of some mostly used attributes:
Attribute name
|
Elements
|
Description
|
accept
|
<form>,
<input> |
This attribute specify which type of files will be accepted.
|
action
|
<form>
|
It specifies that where to process form after submission.
|
alt
|
<area>, <img>, <input>
|
It gives an alternate text if original elements is not able to display.
|
class
|
Global attribute
|
It specifies the class name for that element.
|
height
|
<iframe>, <img>, <input>, <canvas>, <object>, <video> , <embed>
|
It specifies the height of an element.
|
href
|
<a>, <area>, <base>, <link>
|
It defines the URL of page which need to be link.
|
style
|
Global attribute
|
It is used to add the style for an element.
|
title
|
Global attribute
|
It works as tooltip for an element.
|
src
|
<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>
|
It gives the file path or URL of the media file.
|
HTML Example using attributes, and tags
<!DOCTYPE html>
<html>
<head>
<title>First Web-page</title>
<style>
div{
text-align: center;
color: red;
}
</style>
</head>
<body style="background-color: #98f5ff">
<h2 style="text-align: center; color: blue;">Example of Tags and Attributes</h2>
<p>My first paragraph. It contains division elements</p>
<div style="background-color:#ff7f50">This is first division</div>
<div style="background-color:#e6e6fa">This is second division</div>
<div style="background-color:#c1ffc1">This is third division</div>
<p>My Second paragraph. It contains image element</p>
<img src="bird.jpg" height="200px" width="200px" style="padding-left: 300px">
</body>
</html>
Output:
Background position bottom center
ReplyDeletehtml web design codings for webmasters