Scribd
Upload
33 views

Intro HTML

HTML is the code that defines the structure and layout of web pages. It uses tags like <p> and <img> to mark up text, images, and other content. A basic HTML page includes <html>, <head>, <title>, and <body> tags. Within the <body> are tags that determine the formatting of text, addition of images, creation of links to other pages, and insertion of tables, lists, and forms. Common text formatting tags include <b> for bold, <i> for italics, and <u> for underline. Images are added with <img> tags along with attributes for the image source and size. Links are made using <a> tags and the href attribute

Uploaded by

Irshad Shaikh
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
33 views

Intro HTML

HTML is the code that defines the structure and layout of web pages. It uses tags like <p> and <img> to mark up text, images, and other content. A basic HTML page includes <html>, <head>, <title>, and <body> tags. Within the <body> are tags that determine the formatting of text, addition of images, creation of links to other pages, and insertion of tables, lists, and forms. Common text formatting tags include <b> for bold, <i> for italics, and <u> for underline. Images are added with <img> tags along with attributes for the image source and size. Links are made using <a> tags and the href attribute

Uploaded by

Irshad Shaikh
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 36

WHAT IS HTML?

• HTML, otherwise known as Hyper Text 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
STRUCTURE OF A WEB PAGE

• All Web pages share a <HTML>


common structure <HEAD>

• All Web pages should contain <TITLE> Example </TITLE>


a pair of <HTML>, <HEAD>, </HEAD>
<TITLE>, and <BODY> tags <BODY>
This is where you would include
the text and images on your Web
page.
</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 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>
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
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>
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 Katie Dunn</A>
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=“anchor name”>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

<A NAME="chap2">Chapter 2 </A> Anchor


ORDERED LISTS

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


numbered items. 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>
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
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 look on the Web:
NAME="FirstName"
VALUE="First Name" SIZE=20>
<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
TABLES

• Tables can be used to display rows and columns of data,


create multi-column text, captions for images, and sidebars
• The <TABLE> tag is used to create a table; the <TR> tag
defines the beginning of a row while the <TD> tag defines
the beginning of a cell
CREATING SIMPLE TABLE

<TABLE BORDER=10> • Here’s how it would look


<TR> on the Web:
<TD>One</TD>
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
THANK YOU

You might also like