Scribd
Upload
10 views

HTML

Uploaded by

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

HTML

Uploaded by

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

Introduction to HTML

What is HTML?

• HTML, otherwise known as HyperText Markup Language, is


the language used to create Web pages

• Using HTML, you can create a Web page with text, graphics,
sound, and video
Tags

• The essence of HTML programming is tags

• A tag is a keyword enclosed by angle brackets ( Example:


<I> )

• There are opening and closing tags for many but not all tags;
The affected text is between the two tags
More Tags...

• The opening and closing tags use the same command except
the closing tag contains an additional forward slash /

• For example, the expression <B> Warning </B> would cause


the word ‘Warning’ to appear in bold face on a Web page
Nested Tags

• Whenever you have HTML tags within other HTML tags,


you must close the nearest tag first

• Example:
<H1> <I> The Nation </I> </H1>
Structure of a Web Page
<HTML>
• All Web pages share a
<HEAD>
common structure
<TITLE> Example </TITLE>
</HEAD>
<BODY>
• All Web pages should
This is where you would include the text and
contain a pair of <HTML>, images on your Web page.
<HEAD>, <TITLE>, and </BODY>

<BODY> tags </HTML>


The <TITLE> Tag

• Choose the title of your Web page carefully; The title of a


Web page determines its ranking in certain search engines.

• The title will also appear on Favorite lists, History lists, and
Bookmark lists to identify your page
Text Formatting

• Manipulating text in HTML can be tricky.


• For instance, special HTML tags are needed to create
paragraphs, move to the next line, and create headings
Text Formatting Tags

<B> Bold Face </B>


<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
Changing the Font
• The expression <FONT FACE = “fontname”> … </FONT> can
be used to change the font of the enclosed text
• Fontname options : "Times New Roman", "Verdana", "Comic sans MS”,
"WildWest”, "Bedrock“, etc.

• To change the size of text use the expression <FONT SIZE=n> ….


</FONT> where n is a number between 1 and 7
Changing the Font
• To change the color, use <FONT COLOR=red>…. </FONT>; The
color can also be defined using hexadecimal representation (Example:
#ffffff)

• These attributes can be combined to change the font, size, and


color of the text all at once; For example, <FONT SIZE=4
FACE=Courier COLOR=red> …. </FONT>
Headings
• Web pages are typically organized into sections with
headings; To create a heading use the expression
<Hn>….</Hn> where n is a number between 1 and 7

• In this case, the 1 corresponds to the largest size heading


while the 7 corresponds to the smallest size
Aligning Text
• The ALIGN attribute can be inserted in the <P> and <Hn>
tags to right justify, center, or left justify the text

• For example, <H1 ALIGN=CENTER> The New York Times


</H1> would create a centered heading of the largest size
Comment Statements
• Comment statements are notes in the HTML code that explain the
important features of the code.
• The comments do not appear on the Web page itself but are a useful
reference to the author of the page and other programmers
• To create a comment statement use the <!-- …. --> tags
Page Formatting
• To define the background color, use the BGCOLOR attribute
in the <BODY> tag

• To define the text color, use the TEXT attribute in the


<BODY> tag
Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=#0000FF TEXT=#FFFFFF>
This is where you would include the text and images on your Web page.
</BODY>
</HTML>
Inserting Images
• Type <IMG SRC = image.ext>, where image.ext indicates the
location of the image file

• The WIDTH=n and HEIGHT=n attributes can be used to


adjust the size of an image

• The attribute BORDER=n can be used to add a border n


pixels thick around the image
Alternate Text
• Some browsers don’t support images. In this case, the ALT
attribute can be used to create text that appears instead of the
image.
• Example:
<IMG SRC=“abc.jpg” ALT = “Picture of a flower”>
Links
• A link lets you move from one page to another, play movies
and sound, send email, download files, and more….

• To create a link type


<A HREF=page.html> label </A>
Anatomy of a Link
<A HREF=page.html> label </A>

• In the above link, “page.html” is the destination. The


destination specifies the address of the Web page or file the
user will access when he/she clicks on the link.
• The label is the text that will appear underlined or highlighted
on the page
Example: Links
• To create a link to CNN, I would type:
<A HREF=http://www.cnn.com>CNN</A>

• To create a link to MIT, I would type:


<A HREF=http://www.mit.edu>MIT</A>
Changing the Color of Links
• The LINK, VLINK, and ALINK attributes can be inserted in
the <BODY> tag to define the color of a link

• LINK defines the color of links that have not been visited
• VLINK defines the color of links that have already been visited
• ALINK defines the color of a link when a user clicks on it
Anchors
• Anchors enable a user to jump to a specific place on a
Web site

• Two steps are necessary to create an anchor.


• First you must create the anchor itself.
• Then you must create a link to the anchor from another
point in the document.
Anchors
• To create the anchor itself,
type <A NAME=anchorname>label</A> at the point in the
Web page where you want the user to jump to

• To create the link,


type <A HREF= #anchor name>label</A> at the point in the
text where you want the link to appear
Example: Anchor

<A HREF=#chap2>Chapter Two</A><BR>


Link

Anchor
<A NAME=chap2>Chapter 2 </A>
Ordered Lists
• Ordered lists are a list of Here’s how it would look on the
numbered items. Web:
• To create an ordered list, type:
<OL>
<LI> This is step one.
<LI> This is step two.
<LI> This is step three.
</OL>
More Ordered Lists….
• The TYPE=? attribute allows you to change the kind of symbol that
appears in the list.
• A is for capital letters
• a is for lowercase letters
• I is for capital roman numerals
• i is for lowercase roman numerals
Unordered Lists
• An unordered list is a list of Here’s how it would look on the
bulleted items Web:
• To create an unordered list, type:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>
More Unordered Lists...
• The TYPE=? attribute allows you to change the type of bullet that
appears
• circle corresponds to an empty round bullet
• square corresponds to a square bullet
• disc corresponds to a solid round bullet; this is the default value

You might also like