Scribd
Upload
14 views

Level 2

The document discusses HTML structural tags and their usage. It describes tags like <html>, <head>, <title>, <body> that define the overall structure of an HTML document. It also covers other tags like <h1>-<h6> for headings, <p> for paragraphs, <br> for line breaks and <!> for comments.

Uploaded by

Raji Meena
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
14 views

Level 2

The document discusses HTML structural tags and their usage. It describes tags like <html>, <head>, <title>, <body> that define the overall structure of an HTML document. It also covers other tags like <h1>-<h6> for headings, <p> for paragraphs, <br> for line breaks and <!> for comments.

Uploaded by

Raji Meena
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/ 36

HTML-STRUCTURAL TAGS

Name : N.RAJEE MEENA


(Reg No: 20515118)
Course : B.Ed II Year
Dept : Computer Science
Level 1 : Computer Applications
Topic : HTML-Structural Tags
Class : XI
Introduction
• HTML is a special markup language used to
create web pages.

• This language tells the browsers, how to display


the text, images, animations and other contents
of a hypertext document on the screen.

• It is a markup or page layout and hyperlink


specification language.

• It describes the structure of a document.


Writing HTML Document
• HTML is a markup language.

• The tags are coded by HTML commands or keywords that indicate how
web browser should format and display the content.

• HTML is made up of tags and its attributes,

• Tags are known as elements of HTML.

• Attributes are used to improve the appearance of an HTML document.

• All HTML tags should be specified within angle brackets (< >).
Ex:<HTML> is a tag.
HTML Document Structure
• HTML tags have an opening an closing tag
surrounding the text.

• Opening tag preceded by <>


• Closing tag preceded by </>
• Every web document has two sections. Heading
section & Body section.

• Heading section- Title of a web page in title bar


or tab heading in browser.
Syntax:<title>….</title>

• Body section – Display the main content on the


browser window. Syntax: <body>…..</body>
Internet Explorer with a Web page
Structural Tags of HTML-
<html>,<head>,<title>and <body>
HTML Writing Tools

• To start HTML, there is no need of web server,


web hosting or even internet connection.

• To create and testing a HTML document, web


page need an application (Text editor) to write
HTML code and a browser to view them.

• The text editor(Notepad for windows or getit


for Linux) is a good way to learn HTML coding.
Creating a web page
• Step 1: Open a text editor Windows 7 : Start All Programs Accessories
Notepad

• Step 2: In the appearing Note pad / Text Editor, type the HTML document.

• Step 3: Save the file as HTML

• Click File Save (or) Press Ctrl + S


• Save As dialog box appears.

• In “file name” text box, type a file name with .htm or .html
extension.
• Select “All files” from “Save as type” list box.

• Click “Save” button.


Viewing Webpage in a browser
• Step 1: Open a browser (Internet
Explorer/Mozilla Firefox or any)

• Step 2: Click File Open File (or) Press Ctrl + O

• Step 3: From the “Open” dialog box, browse the


folder in which the HTML document is saved.
Choose the file name and click “Open” button.
Now your web page is displayed in the browser.
Viewing Source file
• Source file is an HTML document, type in text editor (Notepad or getit).

• We can view the original source file in the browser.

• The steps to be followed to view a source file:

• Right click on the browser.

• Select View Page Source (Firefox and Chroma)/ View Source (Internet Explorer) or Press
Ctrl + U (all browser)
• Source file will be displayed.

• In Internet Explorer, View Source is also used to open source file.


Edit and Reload the Source file
• Source file can be edit through the text editor.
• To edit the source file, open the source file with a text editor.
• When you edit a source file, no need to close browser in which displaying the
HTML document.
• The following steps are to be followed to open a source file.
• Go to the folder in which your source files are located.
• According to the browser, the source file icon is displayed.
• Right click on the source file to edit.
• From the pop-up menu, select Open with Notepad.
• Source file will be opened in text editor.
• Make the changes and save the file using File Save or Ctrl + S
Reload / Refresh the changes

• After modify and save the source file, minimize your source file.

• Go to the browser.

• Click Refresh (Internet Explorer)/Reload Current page (Firefox)/ Reload this page
(Chrome) icons on the address bar.

• Press Ctrl + R or F5 will be used to to refresh/ reload the modifications.


HTML Attributes
• Attributes are special words used inside a tag to
specify additional information to a tag.

• Attributes should be placed within the opening tag.

• Most of the tags support specialized attributes and


there are few elements that can be used with any
tag.

• Global elements are common to all HTML


elements.
Attributes of <html> tag

• The <html> tag is used to specify the beginning and closing of an HTML
document.

• This tag doesn’t affect the appearance of the document.

• It is used to make browsers and other

programs, known that this is an HTML document.

• HTML has two attributes, dir and lang to specify the text direction and language
setting respectively.
Attributes of <html> tag Ltr (Align left-
to-right)

dir

Rtr (Align right-


Attributes to-left)
of <html>
tag

Predefined
lang code language
English-en
Attributes of <body> tag
Background colour:bgcolor=color
• All the browsers display the text on white background.
• Tag to change background colour:
<body bgcolor = color_name/color_code>
• Colors in HTML are represented as six digit hexadecimal values.
• The six digit hexadecimal value is the combinations of three, two digit number
sequence represent a color.
• First two digits represent Red, next two digits for Green and last two digits for
Blue (RGB) in the range of 00 – FF
• For example,
FF0000 is bright red, 000000 is black and FFFFFF is white.
Background colour:bgcolor=color
HTML code to change the background colour
Program for changing the background color
Body text colour: text = color

• The default text color of body section


is “black”, it is often called as
automatic color.

• Text attribute within body tag is used


to change the text colour.

• Tag to change body text color: <body


text = color_name /color_code>
Background image: background=image
• Insert an image as background,
the text will be on top of the
image.

• Background can be a texture,


bitmap or a photo.

• Tag to apply an image as


background:

<body background =
“image_name_with_extension”>
Setting Margins: margin=value
• The margin refers the blank area
from left or top edge of the browser
window.
• There is no default margin setting in
any browser.
• Tag to specify the left and top
margin:
• <body leftmargin = value
topmargin = value>
• The Value is referred as pixels (72
pixels to an inch)
Headings
• Headings are used to include titles to
sections of a web page.
• HTML has six levels of headings viz. <h1>
to <h6>. h indicates the level of heading.
• Header tags are display the body text as
bolder and larger in size according to its
level.
• The syntax of heading tags:
<h…> Heading text </h…>
Attribute of Headings tag
• Align is an attribute to set right, center
and justify alignment to headings. Left is
the default alignment.

• Tag is to specify the alignment to


headings: <h# align = value>

• Where # is the level number, value may


be Right, Center or Justify. Justify
alignment only used for paragraphs.
Line Breaks and Paragraphs without breaks
• Browser applications are having
some special rules for displaying
text.

• They do not recognize returns, tabs


or even more than one space
between words.

• Create an HTML document with


multiple lines of text, browser will
display it as a single line.
Line Breaks and Paragraphs with breaks
• The <br> tag is used for line
break.

• The <br> is an empty tag, does


not have close tag and attribute.

• It should be placed at the end


of a line.
Paragraphs

• In HTML, paragraphs are created using the <p> tag.

• The content what you type between <p> and </p> is identified as a paragraph
and display as a paragraph by the browser.

• The contents specified between <p> and </p> considered as paragraph.

• Each paragraph displayed separately


Program for Paragraphs
Changing Paragraph alignment
• HTML have four paragraph alignments i.e., Left, Right, Center and Justify.
• The text that you type between <p> and </p> is aligned to left.
• To change the alignment of a paragraph align attribute can be used with <p> tag.
• Tag to specify the alignment to paragraphs:
• <p align = alignment>
• Alignment can either be Right, Center or Justify. Left is the default alignment.
Changing Paragraph alignment
Comments

• Comments are used to describe the page or provide some kind of indication of
the status of the page. The tag <!> is used to create comments.

• Comments never show up onscreen. Comments can be placed anywhere in HTML


document.

• The general form of comments:

<! comments >


Comments
Container and Empty Elements
• The HTML elements (Tags) can be classified as two types –
(1) Container elements (2) Empty elements.
• Container Elements:
The tags which are required opening and closing is known as container
elements or tags. For example: <html>, <body>, <title>, <p> etc.,
• Empty Elements:
The tags which are required only opening tag is known as empty elements or
tags. For example: <br>

You might also like