HTML.pptx

HTML: AN INTRODUCTION
STRUCTURE AND RELATED TERMS

HTML
• FULL FORM : HYPERTEXT MARKUP LANGUAGE.
• IT IS USED TO WEB PAGES OR DOCUMENTS.
• WWW: WORLD WIDE WEB

WEB PAGE
• A WEB PAGE IS A DOCUMENT THAT IS WRITTEN IN HYPERTEXT MARKUP
LANGUAGE.
• IT CONTAINS TEXT, GRAPHICS AND HYPERLINKS TO OTHER WEB PAGES.
• IT IS ACCESSIBLE THROUGH THE INTERNET BY USING A BROWSER.
• MULTIPLE WEB PAGES TOGETHER CONSTITUTE THE WORLD WIDE WEB.
• URL: UNIFORM RESOURCE LOCATOR

• IT CAN BE STATIC AND DYNAMIC.
• STATIC: SAME CONTENT EVERY TIME THEY ARE VIEWED.
• DYNAMIC: DIFFERENT CONTENT EACH TIME WHEN ACCESSED.

WEBSITE
• It is a set of linked web pages of related information on the internet.
• The information may be related to a particular subject, published by a single
person or an organisation.
• You can move from one page to another on a website through hyperlinks.

WEB BROWSER
• It is a software application to access the internet.
• It allows users to view resources that are stored on a server.
• It interprets text and commands of a web page and converts them to a form
that the user can understand.
• It can show text, audios, videos, animation, etc.

• A web browser helps in the following ways:
• It contacts the web server and sends a request for information.
• It receives information and displays the content on the user’s computer screen.
• E.G.: Microsoft edge, google chrome, safari.

FEATURES OF HTML
• It is one of the markup languages used for designing web pages.
• HTML elements form the building blocks of all websites.
• It is not case sensitive. It means that html doesn’t distinguish uppercase and
lowercase letters.
• It helps to create structured documents which include headings, paragraphs
etc.
• It doesn’t need any instructions that needs to be passed during its execution.

TERMS USED IN HTML
1. TAG:
• They are the keywords used in an HTML document.
• They are marked by angle braces(< and >) to write instructions and define how
the content will be displayed by the web browsers.
• E.G.: <HTML>, <HEAD>.

2. ELEMENT
• It is the content written within the a start or opening tag and end or closing tag.
• <P> ; P is the element.
• E.G.: <TITLE> LEARNING WEBPAGE. </TITLE>
OPENING TAG CLOSING TAG

3. ATTRIBUTE
• It refers to providing additional information which can be added to a tag.
• They appear inside the opening tag and the specific information or values
within quotation marks.
• E.g.: <BODY BGCOLOR=“BLUE”>
// This code will give background color blue to the body section.

STRUCTURE
<HTML>
<HEAD>
<TITLE> THIS IS THE TITLE SECTION. </TITLE>
</HEAD>
<BODY>
// THIS SECTION CONTAINS THE BODY OF THE WEB PAGE.
</BODY>
</HTML>

CONTAINER AND EMPTY TAGS IN HTML
• Html uses pre-defined tags in a document which are understood by the web
browsers to display the content.
• Two categories of html tags are:
1. Container tags
2. Empty tags

• When the opening and closing tags are used in pairs in an html document,
they are known as container tags.
• They are also known as on tag and off tag respectively.
• On tag(<element name>) and off tag(</element name>).
• Eg.:
<HTML>
…
</HTML>

• The tags which do not require a closing tag in an html document are called
empty tags.
• It has only an ON tag in the document.
• E.G.:
<BR>,<HR>

STARTING AN HTML DOCUMENT
• To work in html, your computer system should have:
1. A text processor
2. A web browser
• To create an html document on notepad:
• Step1: Click start followed by clicking “notepad” from the pop up menu.
• Step2: An untitled notepad will appear on the screen. You can start writing an
html document code by using tags.

SAVING AN HTML DOCUMENT
• Step1: Click file from the file menu.
• Step2: Select ‘Save as’ from the drop-down list.
• Step3: Enter the file name with extension ‘HTML’.
• Step4: Click the ‘Save’ option.

VIEWING AN HTML DOCUMENT
• Step1: Locate the file where you have saved the file. Select the file and right-
click on it.
• Step2: Select ‘open with’ followed by clicking ‘Microsoft edge’.

OPENING AN HTML FILE
• Step1: Select your html file and right-click on it.
• Step2: Select ‘open with and click on ‘Notepad’.

PARAGRAPH TAG (<P>)
• It is a container tag.
• The opening tag <p> is added at the beginning of a paragraph and the closing tag </p> at
the end of a paragraph.
• A single line is inserted before and after the enclosed paragraph.
• E.G.:
<P> This is an example to show that paragraph tag is used to insert lines. Check this code.</P>
<P> HELLO WORLD!</P>
<P> My Name Is Sofia.</P>

LINE BREAKS(<BR>)
• TO INSERT A BLANK LINE IN THE WEBPAGE.
• IT IS AN EMPTY TAG.
• EG:
• <P> HELLO…<BR> HOW ARE YOU? <BR> ARE YOU COMFORTABLE? </P>
OUTPUT: HELLO…
HOW ARE YOU?
ARE YOU COMFORTABLE?

HEADING TAG(H1-H6)
• HTML ALLOWS YOU TO HIGHLIGHT HEADINGS IN A WEB PAGE BY USING THE
HEADING TAGS.
• THEY ARE CONTAINER TAGS.
• THEY INCLUDE SIX DIFFERENT LEVELS OF HEADINGS WHICH VARY FROM <H1>
TO <H6>.
• H1 - LARGEST HEADING
• H6 - SMALLEST HEADING

• SYNTAX: <HEADING TAG>STRING OF TEXT FOR HEADING</HEADING TAG>
<H1>HELLO…</H1>
<H2>HELLO…</H2>
<H3>HELLO…</H3>
<H4>HELLO…</H4>
<H5>HELLO</H5>
<H6>HELLO</H6>
OUTPUT:
HELLO…
HELLO…
HELLO…
HELLO…
HELLO…
HELLO…

CENTER TAG(<CENTER>)
• IT IS USED TO ALIGN THE TEXT HORIZONTALLY TO THE CENTER OF THE PAGE IN
AN HTML DOCUMENT.
• IT IS A CONTAINER TAG MEANS THE CONTENT IS WRITTEN BETWEEN THE
OPENING AND CLOSING TAGS.
• SYNTAX: <CENTER TAG> STRING OF TEXT</CENTER TAG>
• E.G.: <CENTER><H3>HELLO WORLD!</H3></CENTER>

BOLD, ITALICS AND UNDERLINE TAGS
• HTML ALLOWS TO USE THE FEATURES- BOLD, ITALICS OR UNDERLINE AND
CHANGE TEXT STYLE OF A DOCUMENT.
• THESE ARE CONTAINER TAGS.
• SYNTAX: TO DISPLAY THE TEXT IN BOLD: <b>STRING OF TEXT</b>
TO DISPLAY THE TEXT IN ITALICS: <i>STRING OF TEXT</i>
TO UNDERLINE THE TEXT: <u>STRING OF TEXT</ u >

SUPERSCRIPT(<SUP>) AND SUBSCRIPT(<SUB>)
TAGS
• THE SUPERSCRIPT TAGS ARE USED TO REPRESENT SOME TEXT/NUMBER ABOVE
NORMAL LINE.
• THE SUBSCRIPT TAGS ARE USED TO REPRESENT THE TEXT/NUMBER BELOW THE
LINE.
• EG: (A+B)² : (A+B)<SUP>2</SUP>
H₂SO₄ : H<SUB>2</SUB>SO<SUB>4</SUB>

BACKGROUND AND TEXT COLOUR
ATTRIBUTES
• YOU CAN CHANGE THE APPEARANCE OF THE DOCUMENT BY CHANGING THE
BACKGROUND AS WELL AS THE TEXT COLOUR.
• SYNTAX: <BODY BGCOLOR=“COLOR NAME”>
// BGCOLOR, TEXT ARE ATTRIBUTES AND COLOR NAME IS THE VALUE OF THE
ATTRIBUTE.
• <BODY BGCOLOR=“COLOR NAME” TEXT=“COLOR NAME”>

ATTRIBUTES OF FONT TAG
<FONT> TAG IS USED TO CHANGE THE APPEARANCE OF TEXTS USING THEIR
ATTRIBUTES.
1. FONT FACE ATTRIBUTE: IT SPECIFIES THE TYPE OF FONT TO BE USED IN AN HTML
DOCUMENT.
SYNTAX: <FONT FACE=“NAME OF THE FONT”> E.G.: <FONT FACE=“ARIAL”>
2. FONT SIZE ATTRIBUTE: IT SPECIFIES THE FONT SIZE WHICH VARIES FROM 1 TO 7.
DEFAULT FONT SIZE OF TEXT IN THE BODY IS 3. E.G.: <FONT SIZE=“6”>
3. FONT COLOR ATTRIBUTE: IT SPECIFIES THE TEXT COLOUR IN AN HTML DOCUMENT.
E.G.: <FONT COLOR=“RED”>

ALIGNMENT ATTRIBUTE
• HTML PROVIDES THE FACILITY TO ALIGN THE TEXT.
• SYNTAX:<PALIGN=“ALIGNMENT”>
• 4 DIFFERENT WAYS OF ALIGNING TEXT ARE:
1. LEFT
2. RIGHT
3. CENTER
4. JUSTIFY

• SYNTAX: <PALIGN=“ALIGNMENT”>
1. LEFT ALIGNMENT : <P ALIGN = “LEFT”>
2. RIGHT ALIGNMENT : <P ALIGN = “RIGHT”>
3. CENTER ALIGNMENT : <P ALIGN = “CENTER”>
4. JUSTIFY : <P ALIGN = “JUSTIFY”>

HTML.pptx

Recommended

Recommended

More Related Content

Similar to HTML.pptx

Similar to HTML.pptx (20)

Recently uploaded

Recently uploaded (20)

HTML.pptx