Scribd
Upload
51 views22 pages

HTML - Day - 1

HTML is a markup language used to define the structure and layout of web pages. It uses tags to identify elements like headings, paragraphs, links, images, and more. Some key HTML tags discussed in the document are headings (<h1>-<h6>), paragraphs (<p>), links (<a>), and images (<img>). Attributes provide additional information about elements, such as the 'src' attribute specifying the source/path for an image. While HTML uses tags to structure content, it is not considered a programming language as it lacks logic and algorithms.

Uploaded by

Feelings Of Indian Youth
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
51 views22 pages

HTML - Day - 1

HTML is a markup language used to define the structure and layout of web pages. It uses tags to identify elements like headings, paragraphs, links, images, and more. Some key HTML tags discussed in the document are headings (<h1>-<h6>), paragraphs (<p>), links (<a>), and images (<img>). Attributes provide additional information about elements, such as the 'src' attribute specifying the source/path for an image. While HTML uses tags to structure content, it is not considered a programming language as it lacks logic and algorithms.

Uploaded by

Feelings Of Indian Youth
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

HTML – Day 1

What is HTML?

• HTML full form is Hypertext Markup Language. It is a very simple language which is easy to learn. It is the most
basic and important language in website designing and development .
• Prerequisites:
Before proceeding to the HTML or web designing, we here are assuming that you at least have a basic
knowledge of using windows or any other operating system,
And you are familiar with Experience with any HTML editor like Notepad, Notepad++, Edit plus, etc. A good
HTML editor will keep your HTML code clean and in an organized format.
Creation and deletion of folders and files on computer.
Editing and saving the changes in a file.
• To begin web designing, you need only two things: a simple-text editor to write html code and a simple web
browser. Write your code in the editor and save the HTML file with a .html extension and then open it in a
browser to see the output of your HTML code.
Here are the some HTML editors: HTML-Kit, CoffeeCup, Notepad++, Sublime
Is HTML a programming language?

• HTML is called as a markup language that is different from a programming language. Its full form is Hypertext
Markup Language.
• Hypertext: Hypertext means, text with a link embedded in it. If you click on that link, it will open a new
webpage. Apart from text, hypertext may contain HTML tables, HTML lists, HTML forms, HTML images, etc.
• Markup language: Markup language uses tags to define elements within a document. It contains familiar
words like forms, tables, links, titles, etc. Every tag in a markup language has a special meaning of its own and
performs a particular operation.
• So Finally, HTML is not a programming language. A programming language uses logic to produce a result, it use
conditional statements, variables, functions, etc. Whereas HTML is a markup language, that create structures
using tags for the data presentation. There is no logic or algorithm involved.
HTML History

• Tim Berners-Lee developed HTML in late 1990, and he is considered as the Father of HTML.

• In 1996, the World Wide Web Consortium (W3C) became the authority to maintain the HTML specifications.

• It became an international standard (ISO) in 2000.

• Features of HTML
It develops the structure of a webpage. All the blocks and elements present in a website, exist because of
HTML.
Simple human-readable tags represent elements in a webpage. Hence, they are easy to remember.
It is universally supported by all browsers. It is a standard markup language for website development.
HTML 5 can give support in enhancing the experience in gaming arena.
It is easy to learn and implement.
It is platform independent, i.e., it works on all the operating systems.
HTML History

HTML Versions Year


HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
HTML History

• <!DOCTYPE html>
<html lang="en">

<head>
<title> Page Title </title>
</head>
<body>
<h1> This is a Heading </h1>
<p> This is a Paragraph </p>
</body>
</html>
Explanation of HTML tags used in the Above Example

• <!DOCTYPE>- The doctype declaration indicates the document type and version of HTML used on the
webpage. Each version has a different doctype declaration. HTML5 Doctype is used in this example.
• <html>- It is the root tag that describes the whole webpage. It is a paired tag, i.e., it has a closing tag also,
</html>. Everything will be written inside these tags.
• <head>- Head tag contains information about the document like its title, author information, description of the
webpage, and so on. It has different tags to perform these functions. It is also a paired tag.
• <title>- Title tag is used inside <head>, and it specifies the title of the document.

• <body>- The body tag contains all the information which will be displayed on the webpage. If you want
anything to be displayed on the webpage, you have to write it within these tags.
• <h1>- Heading tag is used to define headings. <h1> is the largest heading, followed by <h2>, <h3>, to <h6>.
HTML Tags

• HTML Tags are pre-defined elements in HTML, enclosed within these brackets < > signs. For example: <html>,
<table>, etc. All HTML tags has a particular function associated with them.
EX: <p> Content </p>
• Types of tags:
There are two types of tags in HTML that are used by the Website Designers:
Paired Tags (Opening and Closing Tags)
Unpaired Tags (Singular Tag)

• Paired Tags - Opening and Closing Tags


Paired tags are a set of two tags with the same name. In each Paired tag set, one is an opening tag, and the other one is the
closing tag. The closing tag has a / slash, it means that the tag is closed now.
HTML Tags

List of some paired tags in HTML:

Open Tag Close Tag


<html> </html>
<table> </table>
<form> </form>
<span> </span>
<ul> </ul>
<p> </p>
<head> </head>
<div> </div>
Unpaired Tags - Singular Tags

• Unpaired tags are single tags with no closing tag. These tags are also called Singular Tags. These are also called
non-container tags because they do not contain any content.

Open Tag
<br>
<hr>
<meta>
<input>
HTML Heading Tags - H1 tag to H6 tag

• Heading tag is used to give headings of different sizes in a document. There are six different HTML heading
tags, which gives different heading sizes and are defined by <h1> to <h6> tags. <h1> gives the largest heading
and <h6> gives the smallest one. So <h1> can be used for most important headings and <h6> can be used for a
least important one.
• <!DOCTYPE html>
<html lang="en">
<head>
<title> HTML Heading Tag </title>
</head>
<body>
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
</body>
</html>
HTML p tag - Paragraph tag

The <p> tag is used to define a paragraph in a document. HTML paragraph or HTML <p> tag gives the text inside
it, a paragraph like finishing

<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This is Third Paragraph </p>
</body>
</html>
HTML a tag - Anchor Tag

HTML Hyperlink is defined with the <a> tag (Anchor tag). It is used to give a link to any file, webpage, image etc.

This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of
the link, and a user can click that part to reach to the linked document.

<!DOCTYPE html>
<HTML lang="en">
<head>
<title> HTML Anchor Tag </title>
</head>
<body>
<a target="_blank" href="https://www.google.com"> This is a link </a>
</body>
</html>
HTML img tag - Image Tag

The HTML img tag is used to add image in a document. The 'src' attribute is used to give source(address) of the
image. The height and width of the image can be controlled by the attributes - height="px" and width="px".

<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML Image Tag </title>
</head>
<body>
<img src=“myimage.png" width="400px" height="200px">
</body>
</html>
HTML Tags

Tag name Description


<!-- --> Apply comment in an HTML
document.
<!DOCTYPE> Specify the HTML version

<a> Creates hyperlink.


<abbr> It defines abbreviation.
<acronym> It defines acronym for a word. (Not supported in HTML5)

<address> It is used to define author's contact information.


<applet> It embeds Java applet. (Not supported in HTML5)
<area> It defines the area of an image map.
<article> It specifies an article space in the website.
<aside> It defines aside content from main content.
<audio> It adds audio content in HTML document.

https://en.wikipedia.org/wiki/HTML_element
HTML Attributes

• HTML attribute defines the characterstics of any HTML element. These attributes provide additional
information to the browser about the element like, its size, color, behaviour, etc.
• Some important features about HTML Attributes:
Attributes provide additional information about an element.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value".
Ex.- 'src' in <img> tag OR 'href' in <a> tag,etc..
Lang Attribute

• The 'lang' attribute is declared in the opening <HTML> tag. It gives information to the browser about the main
language used in the html document. Although it is not necessary to use but using it is a good practice.

<!DOCTYPE html>
<HTML lang="en">
<head>
<title> HTML Lang Attribute </title>
</head>
<body>
<p> This page is using English Language. </p>
</body>
</html>
Title Attribute

The Title attribute is used to specify a tooltip. That tooltip could be some important piece of information in text
form. It is often displayed when cursor comes over the element or while the element is loading.

<!DOCTYPE html>
<HTML lang="en">
<head>
<title> The Title Attribute </title>
</head>
<body>
<h3 title= "Hello HTML"> The Example of Title Attribute </h3>
</body>
</html>
Src Attribute

• The src or (source) attribute is used with <img> tag. This attribute allows us to provide the path for the image
to be included on the webpage. it is also used with <audio> tag, <video> tag, <embed> tag, etc. to add the
source path of the file to be included.

<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML Image src Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>
alt Attribute

• The alt attribute specifies an alternative text for an image. If somehow the browser is not able to display an
image, then the alternate text will be displayed, which will give the information about the image. Also, value of
alt attribute can be read by screen readers, which helps visually impaired person to "hear" information about
the image.

<!DOCTYPE html>
<html lang="en">
<head>
<title> HTML Image alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>
style Attribute

• The style attribute is used to specify the inline style of an element, i.e., it defines the CSS styling of element like
color, font, size, shadow etc.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Inline Styles </title>
</head>
<body>
<h4 style="color:green"> This is Green Color </h4>
<h4 style="color:blue"> This is Blue Color </h4>
</body>
</html>
Q&A

Thank You

You might also like