Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

HTML

Uploaded by

alishbasaboor005
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML

Uploaded by

alishbasaboor005
Copyright
© © All Rights Reserved
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