Scribd
Upload
50 views

HTML Comp

HTML is used to create web pages. It uses tags to define text formatting, images, links, and other page elements. Some key tags include <b> for bold text, <i> for italics, <img> for images, and <a> for links. Well-formed HTML pages have a basic structure with <html>, <head>, <title>, and <body> tags. Forms can be created using tags like <input> for text boxes and buttons, and <textarea> for multi-line text.

Uploaded by

Laiba Zaidi
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
50 views

HTML Comp

HTML is used to create web pages. It uses tags to define text formatting, images, links, and other page elements. Some key tags include <b> for bold text, <i> for italics, <img> for images, and <a> for links. Well-formed HTML pages have a basic structure with <html>, <head>, <title>, and <body> tags. Forms can be created using tags like <input> for text boxes and buttons, and <textarea> for multi-line text.

Uploaded by

Laiba Zaidi
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 46

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 and 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

 All Web pages share <HTML>


<HEAD>
a common structure
<TITLE> Example </TITLE>
 All Web pages
</HEAD>
should contain a pair <BODY>
of <HTML>, This is where you would include
<HEAD>, <TITLE>, the text and images on your Web
page.
and <BODY> tags
</BODY>
</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; Oftentimes, what


you see is NOT what you get
 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
 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 6
 In this case, the 1 corresponds to the largest size heading while
the 6 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
 To define the size of the text, type <BASEFONT SIZE=n>
Example

<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and images on
your Web page.
</BODY>
</HTML>
Attribute Value Description
behavior scroll Defines the type of scrolling.
slide
alternate

bgcolor rgb(x,x,x) Deprecated − Defines the direction


#xxxxxx of scrolling the content.
colorname

direction up Defines the direction of scrolling the


down content.
left
right

loop number Specifies how many times to loop.


The default value is INFINITE,
which means that the marquee loops
endlessly.

scrolldelay seconds Defines how long to delay between


each jump.

scrollamount number Defines how how far to jump.


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=“satellite.jpg” ALT = “Picture of satellite”>
Links

 A link lets you move from one page to another, play movies
and sound, send email, download files, and more….
 A link has three parts: a destination, a label, and a target
 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>
Using Links to Send Email

 To create a link to an email address, type <A


HREF=“mailto:email_address”> Label</A>
 For example, to create a link to send email to myself, I would
type: <A HREF=“mailto:
[email protected]”>email Aamir Hussain</A>
Image Links

 <HTML>
 <Head><Title>Image links</Title></Head>
 <BODY>
 Click here
 <a href="D:\T Table.png">
 <img src="C:\Users\aamir\Documents\Scanned
Documents\welcome scan.jpg" height=100 width=100>
 </a>
 </BODY>
 </HTML>
Ordered Lists

 Ordered lists are a list of Here’s how it would


numbered items. look on the 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=x attribute allows you to change the 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 Here’s how it would


of bulleted items look on the 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=shape 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
Forms
 What are forms?
• An HTML form is an area of the document that allows users to enter information
into fields.
• A form may be used to collect personal information, opinions in polls, user
preferences and other kinds of information.
Forms

 There are two basic components of a Web form: the shell, the
part that the user fills out, and the script which processes the
information
 HTML tags are used to create the form shell. Using HTML
you can create text boxes, radio buttons, checkboxes, drop-
down menus, and more...
Example: Form
Text Box

Drop-down Menu
Radio Buttons
Checkboxes

Text Area

Reset Button
Submit
The Form Shell

 A form shell has three important parts:


 the <FORM> tag, which includes the address of the script which
will process the form
 the form elements, like text boxes and radio buttons
 the submit button which triggers the script to send the entered
information to the server
Creating the Shell

 To create a form shell, type <FORM METHOD=POST


ACTION=“script_url”> where “script_url” is the address of
the script
 Create the form elements
 End with a closing </FORM> tag
Creating Text Boxes

 To create a text box, type <INPUT TYPE=“text”


NAME=“name” VALUE=“value” SIZE=n
MAXLENGTH=n>
 The NAME, VALUE, SIZE, and MAXLENGTH attributes are
optional
Text Box Attributes
 The NAME attribute is used to identify the text box to the processing script
 The VALUE attribute is used to specify the text that will initially appear in the
text box
 The SIZE attribute is used to define the size of the box in characters
 The MAXLENGTH attribute is used to define the maximum number of
characters that can be typed in the box
Example: Text Box

First Name: <INPUT TYPE="text"  Here’s how it would


NAME="FirstName"
VALUE="First Name" SIZE=20> look on the Web:
<BR><BR>

Last Name: <INPUT TYPE="text"


NAME="LastName"
VALUE="Last Name" SIZE=20>
<BR><BR>
Creating Larger Text Areas

 To create larger text areas, type <TEXTAREA


NAME=“name” ROWS=n1 COLS=n2 WRAP> Default Text
</TEXTAREA>, where n1 is the height of the text box in rows
and n2 is the width of the text box in characters
 The WRAP attribute causes the cursor to move automatically
to the next line as the user types
Example: Text Area

<B>Comments?</B>
<BR>
<TEXTAREA NAME="Comments"
ROWS=10 COLS=50 WRAP>
</TEXTAREA>
Creating Radio Buttons

 To create a radio button, type <INPUT TYPE=“radio”


NAME=“name” VALUE=“data”>Label, where “data” is the
text that will be sent to the server if the button is checked and
“Label” is the text that identifies the button to the user
Example: Radio Buttons

<B> Size: </B>


<INPUT TYPE="radio" NAME="Size"
VALUE="Large">Large
<INPUT TYPE="radio" NAME="Size"
VALUE="Medium">Medium
<INPUT TYPE="radio" NAME="Size"
VALUE="Small">Small
Creating Checkboxes

 To create a checkbox, type <INPUT TYPE=“checkbox”


NAME=“name” VALUE=“value”>Label
 If you give a group of radio buttons or checkboxes the same
name, the user will only be able to select one button or box at a
time
Example: Checkboxes

<B> Color: </B>


<INPUT TYPE="checkbox" NAME="Color"
VALUE="Red">Red
<INPUT TYPE="checkbox" NAME="Color"

VALUE="Navy">Navy
<INPUT TYPE="checkbox"
NAME="Color"
VALUE="Black">Black
Creating Drop-down Menus

 To create a drop-down menu, type <SELECT NAME=“name”


SIZE=n MULTIPLE>
 Then type <OPTION VALUE= “value”>Label
 In this case the SIZE attribute specifies the height of the menu
in lines and MULTIPLE allows users to select more than one
menu option
Example: Drop-down Menu

<B>WHICH IS FAVOURITE FRUIT:</B>


<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>
Creating a Submit Button

 To create a submit button, type <INPUT TYPE=“submit”>


 If you would like the button to say something other than
submit, use the VALUE attribute
 For example, <INPUT TYPE=“submit” VALUE=“Buy
Now!”> would create a button that says “Buy Now!”
Creating a Reset Button

 To create a reset button, type <INPUT TYPE=“reset”>


 The VALUE attribute can be used in the same way to change
the text that appears on the button

You might also like