Scribd
Upload
12 views

Basics of HTML

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to annotate text and define headings, paragraphs, lists, and other elements. Common HTML elements include headings, paragraphs, links, images, and tables.

Uploaded by

shubhamchavhan0143
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

Basics of HTML

HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to annotate text and define headings, paragraphs, lists, and other elements. Common HTML elements include headings, paragraphs, links, images, and tables.

Uploaded by

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

 HTML stands for HyperText Markup Language.

It is used to design web


pages using a markup language.
 HTML is a combination of Hypertext and Markup language.
 Hypertext defines the link between web pages.
 A markup language is used to define the text document within the tag
which defines the structure of web pages.
 This language is used to annotate (make notes for the computer) text so
that a machine can understand it and manipulate text accordingly.
 Most markup languages (e.g. HTML) are human-readable.
 The language uses tags to define what manipulation has to be done on
the text.

Elements and Tags:


 HTML uses predefined tags and elements which tell the browser how to
properly display the content.
 Remember to include closing tags.
 If omitted, the browser applies the effect of the opening tag until the
end of the page

HTML page structure:


 The basic structure of an HTML page is laid out below.
 It contains the essential building-block elements (i.e. doctype
declaration, HTML, head, title, and body elements) upon which all web
pages are created.
<html>: This is called the HTML root element. All other elements are
contained within it.
<head>: The head tag contains the “behind the scenes” elements for a
webpage. Elements within the head aren’t visible on the front-end of a
webpage. HTML elements used inside the <head> element include:
 <style>-This html tag allows us to insert styling into our webpages
and make them appealing to look at with the help of CSS.
 <title>-The title is what is displayed on the top of your browser
when you visit a website and contains the title of the webpage that
you are viewing.
 <script>-This tag is used to add functionality in the website with the
help of JavaScript.
 <body>: The body tag is used to enclose all the visible content of a
webpage. In other words, the body content is what the browser will
show on the front-end.
 An HTML document can be created using any text editor. Save the text
file using .html or .htm. Once saved as an HTML document, the file can
be opened as a webpage in the browser.

Example 1--
<html>
<head>

<title>Demo Web Page</title>


</head>
<body>
<h1>Welcome</h1>

<p>Welcome to HTML</p>

</body>
</html>

Features of HTML:
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
Why learn HTML?
 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
 Helps in developing fundamentals about web programming.
 Boost professional career.
Advantages:
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages:
 HTML can only create static web pages. For dynamic web pages,
other languages have to be used.
 A large amount of code has to be written to create a simple web
page.
 The security feature is not good.

HTML Headings:
These tags help us to give headings to the content of a webpage.
These tags are mainly written inside the body tag. HTML provides us with six
heading tags from <h1> to <h6>.
Every tag displays the heading in a different style and font size.
Most HTML heading tag that we use :-
 Heading 1
 Heading 2
 Heading 3
Example 2-
<html>

<head>
<title>GeeksforGeeks</title>
</head>

<body>
<h1>Hello String</h1>
<h2>Hello Welcome</h2>
<h3>Hello welcome</h3>
</body>

HTML Headings

HTML Paragraph:
These tags help us to write paragraph statements on a webpage.
They start with the <p> tag and ends with </p>.

HTML Break: – These tags are used for inserting a single line type break.
It does not have any closing tag.
In HTML the break tag is written as <br>.

HTML Horizontal Line:


The <hr> tag is used to break the page into various parts, creating horizontal
margins with help of a horizontal line running from the left to right-hand side
of the page.
This is also an empty tag and doesn’t take any additional statements.

Example 3—
<html>

<head>
<title>Welcome </title>
</head>

<body>
<h1>Hello World</h1>
<p> A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr/>
</body>

HTML Images:
The image tag is used to insert an image into our web page.

The source of the image to be inserted is put inside the <img


src=”source_of_image“> tag.
Image can be inserted in the image tag in two formats: –
 If the image is in the same folder, then we can just write the name
of the image and the format as the path.
 If the image is in another folder, then we do need to mention the
path of the image and the image name as well as the format of the
image.

Example 4--
<html>

<head>
<title>Welcome</title>
</head>

<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-
low_res.png">
</body>

</html>

HTML Tables
 Table is an arrangement of data in rows and columns, or possibly in a
more complex structure.
 Tables are widely used in communication, research, and data analysis.
 Tables are useful for various tasks such as presenting text information
and numerical data.
 It can be used to compare two or more items in the tabular form
layout. Tables are used to create databases.

Example 5—
<html>
<head>

<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}

th,
td {
padding: 20px;
}

</style>

</head>
<body>
<table>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Markus Zusak</td>
<td>Historical Fiction</td>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Holly Black</td>
<td>Fantasy</td>
</tr>
<tr>
<td>The Silent Patient</td>
<td> Alex Michaelides</td>
<td>Psychological Fiction</td>
</tr>
</table>
</body>

</html>

You might also like