INTRODUCTION TO
HTML
HTML is short for Hyper Text Markup Language.
Webpages are written in HTML - a simple scripting
language.
Hypertext is simply a piece of text that works as a link.
Markup Language is a way of writing layout
information within documents.
INTRODUCTION TO HTML
• When a browser opens an HTML file, the browser will
look for HTML codes in the text and use them to
change the layout, insert images, or create links to
other pages. The markup tells the Web browser how
to display a Web page's words and images for the
user. Each individual markup code is referred to as an
element but these elements are popularly known as
Tags.
UNDERSTAND TAGS AND THEIR
ATTRIBUTES IN HTML
• Tags
• Basic HTML code manipulates a plain text document to apply style and reference. It does so by
applying 'tags'. HTML tags are keywords (tag names) surrounded by angle brackets'<' and'>', like
<html>. HTML tags normally come in pairs like <html> and </html>. The first tag in a pair is the
start tag (opening tag) and the second tag is the end tag (closing tag). The end tag is written like a
start tag, with a forwarded slash before the tag name.
• There are two types of tags:
• Container tag: In HTML, tags that include both the start tag and end tag, are called container tag.
They contain the text between the opening and closing tags.
• For example,< body> text being formatted or defined </body>
• Empty tag: In HTML, tags that have only opening tag are called empty tag. There is no closing tag.
These tags do not acts on blocks of text.
• For example, <hr> and <br>.
UNDERSTAND TAGS AND THEIR
ATTRIBUTES IN HTML
• Attributes
• The attributes within the tag are extra bits of information. For
example, at some point you may want to give your page body a
background image or colour or perhaps some margin in any of the
side. All these things can be done using attributes.
• Attributes are always written in the opening tag. Attribute values
should always be enclosed within double quotes ("...").Different
attributes in the same tag are separated by a space.
• For example, <body background="nature.jpg">Usingthe
attributes</body>
STRUCTURE OF HTML DOCUMENT
STRUCTURE OF HTML
DOCUMENT
• <HTML></HTML> simply indicates the use of HTML code. They'll
show in every webpage, usually at start and end, and embrace
practically all the other codes.
• <HEAD></HEAD> mark the 'administrative building'. These will
encapsule the title, and enable certain scripts.
• <BODY></BODY> is located below the HEAD tags, and makes up most
of the document. All the information you'd like to include in your web
page i.e. the text, images, links, etc.
GETTING STARTED WITH HTML PROGRAMMING
• To write an HTML program to design a web page, open the Notepad program,
type the program code and save the program file with '.html' or '.htm' extension.
• You can create a web page using a text editor by the following steps:
• Click on 'Start' button'All Programs'A' ccessories•'Notepad'.
• The Notepad window appears. Type the HTML code (see figure 2 a).
• Click on 'File' menu•save As' option.
• The 'Save As' dialog box appears.
• Now, type the file name followed by an extension .htm or .htlm and save the file.
• To view the output, double- click on the file icon.
• Note: File will be opened in the default web browser.
GETTING STARTED WITH HTML
PROGRAMMING
BODY <body>tag
• The <body> tag defines the document's body. Various mark-up elements are allowed within the
body to indicate headings, paragraphs, lists, hypertext links, etc.
• syntax: <body> </body>
• Attributes of Body tags are,
• Background: This attribute is used to apply a picture as a background on the web page.
• Syntax: <body background="Logo.jpg"> </body>
• Bgcolor: This attribute is used to change the background colour of web page.
• Syntax:<body bgcolor="#99BBCC"> </body>
• Text: This attribute is used to change the colour of whole text of the web page. You can specify the
colour values as RGB (Red, Green, Blue) value pairs in hexadecimal notation (e.g, White would be
"#FFFFFF").
• Syntax: <bodytext="#FFFFOO"></body>
• Leftmargin: This attribute is used to leave blank area in the left side.
• Syntax: <body leftmargin="SO"> </body>
• Topmargin: This attribute is used to leave blank area from the top edge of the document.
• Syntax: <bodytopmargin="60"></body>
BODY <body>tag
BODY <body>tag
Heading tag <h1>……..<h6>
• Heading elements implement six levels of document headings, <hl> is
the most important and <h6> is the least. A heading element briefly
describes the topic of the section it introduces. Heading information
may be used by user agents, for example, to construct a table of
contents for a document automatically.
•
Use the Hl, H2,...H6 tags as indicators of section headings and
subheadings within a document, not just as formatting elements.
• Many experts recommend reserving Hl for the page title, H2 for major
headings and H3 for major sub headings.
Heading tag <h1>……..<h6>
• Attributes of Heading tag
• Align: This attribute specifies the alignment of a
heading (figure 4a and 4b). It's possible values
are left, center, right and justify.
• Syntax: <hl align="left"> </hl>
Heading tag <h1>……..</hn>
HR (Horizontal Rule) tag <hr>
• <hr> tag is used for creating a horizontal line in web page. It is used to separate content (or
define a change) in web page (figure Sa and Sb).
• Attributes ofHorizontal Rule tag
• Align: This attribute specifies the alignment of a horizontal rule. It's possible values are left,
center and right.
• Syntax: <hr align="center">
• Noshade: This attribute removes the usual shading effect that most browsers display. It's
possible value is noshade.
• Syntax: <hr noshade="noshade">
• Size: This attribute specifies the height of the horizontal rule in pixels or%.
• Syntax: <hr size="10"> or<hrsize="10%">
• Width: This attribute specifies the width of the horizontal rule in pixels or%.
• Syntax: <hrwidth="200"> or <hrwidth="100%">
• Color: This attribute is used to change the colour of the horizontal rule. It's values can either
be in hexadecimal values or in colour names.
• Syntax: <hr color="red">
HR (Horizontal Rule) tag <hr>
HR (Horizontal Rule) tag <hr>
BR (Break line) tag <br>
• <br> tag inserts a single line break It is useful for writing a poem or an
address, where the division of lines is significant (figure 6a and 6b).
• Syntax: <body>...... ABC Co. Pvt Ltd <br>NewDelhi <br> </body>
BR (Break line) tag <hr>
COMMENT IN HTML
• The comment tag is used to insert comments in
the source code. Comments are not displayed in
the browsers (figure 7a and 7b). You can use
comments to explain your code, which can help
you when you edit the source code at a later
date.
• Syntax:<!-- This is commented out-->
COMMENT IN HTML
CENTER tag <center>
• The <center> tag is used to put object into the center of the web
page.
• Syntax: <center> </center>.
