Scribd
Upload
18 views14 pages

HTML

The document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages that include text and graphics. It covers the basic structure of an HTML document, key features, essential tags, and attributes, as well as rules for writing HTML. Additionally, it lists various HTML elements and their functions, including block and text-level elements, and provides a reference for HTML colors.

Uploaded by

pragyathakur.gns
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
18 views14 pages

HTML

The document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages that include text and graphics. It covers the basic structure of an HTML document, key features, essential tags, and attributes, as well as rules for writing HTML. Additionally, it lists various HTML elements and their functions, including block and text-level elements, and provides a reference for HTML colors.

Uploaded by

pragyathakur.gns
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/ 14

INTRODUCTION TO HTML

- PRAGYA THAKUR
HTML
o HTML stand for Hyper Text Markup Language
o It allows you to create web pages that contains both text &
graphics.
o HTML describes the structure of a web page.
o HTML consists of series of elements.
o These elements tell the browser how to display the content.
Hypertext:
A text with a special feature of linking to the other documents or web
Markup pages.
A markup language that uses tags to markup a text
Language:
documents.
These tags instruct the browser how to display the text.
Features of HTML
 HTML is used to create web pages or complete websites.

 HTML enables you to design web pages along with the Text

and multimedia.

 HTML is a platform independent language.

 HTML is not case sensitive.

 HTML is a language that can be easily understood and

modified.
Two basic tools that are
required to work with HTML
documents
It is used to create and saved web pages.
HTML
1 Editor
Types: 1- Text Editor (Notepad, Word pad)
2- WYSIWYG (Google web designer, Dreamweaver)

The purpose of a web browser (Chrome, Edge, Firefox,


Web
2
Safari) is to read HTML documents and display them
Browser correctly.
A browser does not display the HTML tags, but uses
them to determine how to display the document
Basic Structure of an HTML
Document
<html>

<head>
<title>Page title</title>
</head>

<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
Tags , Elements & Attributes
Tags are the building blocks of a web page.
They have elements that define how the information on a web
Tags page is formatted or displayed.
Each tag in HTML begins with ‘<‘ sign and end with ‘>’ sign.

An HTML element consists of an ON tag, the content and an OFF tag.


Elements Type: 1. Container Elements: <html> …. </html> , <b> ….. </b>
2. Empty Elements: Only ON tag… <br>

An attribute is the property that provides additional information about


an HTML element.
It enhances the functionality of a tag.
Attribute An Attribute is always specified inside the opening tag.
Attribute consists of two parts – A Name & Value.
Example: Bgcolor attribute of the body tag.
Rules of writing HTML
1. Tag and attribute names are not case sensitive, so <head>, and <HEAD> have the
same meaning. However, using lower case is recommended.
2. Container tags should always be closed because an unclosed tag can lead to undesired
result.
3. Values given to the attributes should be enclosed within the “ ” .
4. Attribute values can be case sensitive.
5. When the tags are embedded that is, when you start a tag within another tag,
you need to close the inner tag before closing the outer tag.
Example: <head> <title> hello </head> </title> (incorrect )
<head> <title> hello </title> </head> (correct )
6. Tag names should not contain spaces.
For example, writing <body> as <b ody> is incorrect.
Basic HTML tags
1. The HTML tag: The HTML document starts with the HTML Example –
<html>
tag and ends with the HTML tag .
<head>
2. The head tag: The head tag is the HTML document header <title>
…
it lies just below the HTML tag.
</title>
3. The title tag: The title tag is to be used within the head tag. </head>
<body>
It contains the title of the document
<a href="https://
4. The body tag: The body tag contains the contents of your www.youtube.com/
@Pragya07">YouTube
document that gets displayed on the web page in your browser
Link</a>
window. <img src=“./
pic1.png" alt=“Computer“
In the body tag you can use number of the formatting elements
width="500" height="600"
images heading list and hypertext links to enhance the >
appearance of a web page.
</body>
</html>
There are two basic categories of HTML elements used in the Body tag

These elements take up the full width available and by


default begin on a new line.
1. Block Level Elements
These elements include tags like <p>, heading <h1>,
<h2> etc.

These elements are used to mark up the bits of the text.


They do not start on a new line and only take up as much
2. Text Level Elements
width as necessary.
These include tags, like, bold <b>, italic <i> etc.
Attributes of the body tag
1. BG color: This attribute is used to change the <html>
background color of the web page. <head>
<title>
Example: <body bgcolor = “red”> Tags & Attributes
2. Top margin: The top margin attribute is used to set </title>
the top margin of the web page. <body
It accepts values in pixels and displays the text away bgcolor="yellowgreen"
topmargin="30"
from the top edge of the web page by the specified leftmargin="50“ >
value.
Cascading Style Sheets
3. Left margin: The left margin attribute is used to set (CSS) is a style sheet language
the left margin of a web page, just like top margin, it also used for describing the
presentation of a document
accepts any value in pixels. written in a markup language.
The value accordingly keeps the text away from the left
</body>
page of a page. </html>
BASIC HTML
TAGS
1. <html> ... </html> : To Create/start HTML Document.
2. <head> … </head> : Contains important information about web page.
3. <title> … </title> : Contains the title of the document.
4. <body> … </body> : Contains the content of your document, that gets
displayed on the web page.
ATTRIBUTES of BODY tag: bgcolor, topmargin, leftmargin…
5. The <h1> to <h6> Tags : These are heading tags that are used to define
different heading levels in an HTML document.
<h1> … </h1> , <h2> … </h2> , <h3> … </h3> ,
<h4> … </h4> , <h5> … </h5> , <h6> … </h6>
6. <p> … </p> : It marks a block of text as a paragraph.
7. <b> … </b> : It makes the text Bold.
8. <i> … </i> : It makes the text Italic.
9. <u> … </u> : It is used to underline the text.
10. <sub> … </sub> : To add a subscript text (below the baseline)
11. <sup … </sup> : To add a superscript text (above the baseline)
12. <center> … </center> : Align the text to the center of the page or any
table cell.
13. <font> … </font> : It is used to beautifying the text and displaying in
presentable manner.

HyperATTRIBUTES
Link Tag: <a>of FONT tag: : size,
… </a> face,
Defines color (Colour
a hyper link. Name or
Hexadecimal
Example:Value)
<a href=“https://www.youtube.com/@pragya07”> Youtube
14.</a>
Link <br> : This tag splits the line and displays the text on a new line.

Image Tag: <img> : To embed an image in a web page (Empty Element).


Example: <img src=“./img_name.jpg” alt=“Alternate_Text” width=“500”
HTML COLOURS (140 colors sorted by HEX Value)

AliceBlue : #F0F8FF AntiqueWhite : #FAEBD7 Aqua : #00FFFFAquamarine : #7FFFD4


Azure : #F0FFFF Beige : #F5F5DC Bisque : #FFE4C4 Black : #000000
BlanchedAlmond : #FFEBCD Blue : #0000FF BlueViolet :#8A2BE2 Brown : #
A52A2A
BurlyWood : #DEB887 CadetBlue : #5F9EA0 Chartreuse : #7FFF00
Chocolate : #D2691E
Coral : #FF7F50 CornflowerBlue : #6495ED Cornsilk : #FFF8DC Crimson : #
DC143C
Cyan : #00FFFF DarkBlue : #00008B DarkCyan : #008B8B DarkGoldenRod
: #B8860B
DarkGray: #A9A9A9 DarkGrey:#A9A9A9 DarkGreen:#006400 DarkKhaki:#BDB76B
DarkMagenta:#8B008B DarkOliveGreen:#556B2F DarkOrange:#FF8C00
DarkOrchid:#9932CC
DarkRed:#8B0000 DarkSalmon:#E9967A DarkSeaGreen:#8FBC8F DarkSlateBlue:
#483D8B
DarkSlateGray:#2F4F4F DarkSlateGrey:#2F4F4F DarkTurquoise:#00CED1
DarkViolet:#9400D3
DeepPink:#FF1493 DeepSkyBlue:#00BFFF DimGray:#696969
LemonChiffon:#FFFACD LightBlue:#ADD8E6 LightCoral:#F08080 LightCyan:
#E0FFFF lightGoldenRodYellow:#FAFAD2
LightGray:#D3D3D3 LightGrey:#D3D3D3 LightGreen:#90EE90 LightPink:
#FFB6C1 LightSalmon:#FFA07A
LightSeaGreen : #20B2AA LightSkyBlue : #87CEFA LightSlateGray : #778899
LightSlateGrey: #778899
LightSteelBlue : #B0C4DE LightYellow : #FFFFE0 Lime : #00FF00 LimeGreen
: #32CD32 Linen:#FAF0E6
Magenta: #FF00FF Maroon:#800000 MediumAquaMarine : #66CDAA
MediumBlue : #0000CD
MediumOrchid : #BA55D3
MediumPurple : #9370DB MediumSeaGreen : #3CB371 MediumSlateBlue:
#7B68EE
MediumSpringGreen : #00FA9A MediumTurquoise : #48D1CC
MediumVioletRed:#C71585
MidnightBlue:#191970 MintCream : #F5FFFA MistyRose : #FFE4E1
Moccasin : #FFE4B5 NavajoWhite: #FFDEAD Navy : #000080
OldLace:#FDF5E6 Olive: #808000 OliveDrab:#6B8E23 Orange:#FFA500
OrangeRed:#FF4500
Orchid:#DA70D6 PaleGoldenRod:#EEE8AA PaleGreen:#98FB98
PaleTurquoise:#AFEEEE
PaleVioletRed:#DB7093 PapayaWhip:#FFEFD5 PeachPuff:#FFDAB9 Peru:
#CD853F

You might also like