Scribd
Upload
28 views

Intro HTML

HTML is used to create web pages. It uses tags enclosed in angle brackets to define text formatting, images, links, and other page elements. Common tags include <p> for paragraphs, <b> for bold text, <img> for images, and <a> for links. Forms can be created using tags like <input> for text boxes and buttons to collect user input for processing by scripts.

Uploaded by

mamata
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
28 views

Intro HTML

HTML is used to create web pages. It uses tags enclosed in angle brackets to define text formatting, images, links, and other page elements. Common tags include <p> for paragraphs, <b> for bold text, <img> for images, and <a> for links. Forms can be created using tags like <input> for text boxes and buttons to collect user input for processing by scripts.

Uploaded by

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

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 a  <HTML>
<HEAD>
common structure <TITLE> Example </TITLE>
• All Web pages should  </HEAD>
<BODY>
contain a pair of        This is where you would include 
<HTML>, <HEAD>,  the text and images on your Web 
page.
<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; 
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 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
The Infamous Blink Tag
• It is possible to make text blink using the 
<BLINK> … </BLINK> tag
• However, it is best to use this feature at most 
sparingly or not at all; What seems like a 
good idea to a Web designer can become 
very annoying to a Web user
• The <BLINK> tag is not supported by 
Internet Explorer
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>
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>
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
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    Here’s how it would 
of 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    Here’s how it would 
list 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"  look on the Web:
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
Adding a Border
• The BORDER=n attribute allows you to 
add a border n pixels thick around the table
• To make a solid border color, use the 
BORDERCOLOR=“color” attribute
• To make a shaded colored border, use 
BODERCOLORDARK=“color” and 
BORDERCOLORLIGHT=“color”
Creating Simple Table
<TABLE BORDER=10> • Here’s how it would 
<TR>
look on the Web:
<TD>One</TD>
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
Adjusting the Width
• When a Web browser displays a table, it 
often adds extra space. To eliminate this 
space use the WIDTH =n attribute in the 
<TABLE> and <TD> tags
• Keep in mind ­ a cell cannot be smaller than 
its contents, and if you make a table wider 
than the browser window, users will not be 
able to see parts of it.
Centering a Table
• There are two ways to center a table
–  Type <TABLE ALIGN=CENTER> 
– Enclose the <TABLE> tags in opening and 
closing <CENTER> tags
Wrapping Text around a Table
• It is possible to wrap text around a table. This 
technique is often used to keep images and 
captions together within an article.
• To wrap text around a table, type <TABLE 
ALIGN = LEFT> to align the table to the left 
while the text flows to the right.
• Create the table using the <TR>, <TD>, and 
</TABLE> tags as you normally would
Adding Space around a Table
• To add space around a table, use the 
HSPACE=n and VSPACE=n attributes in 
the <TABLE> tag
• Example:
  <TABLE HSPACE=20 VSPACE=20>
Spanning Cells Across Columns 
• It is often necessary to span one cell across 
many columns. For example, you would use 
this technique to span a headline across the 
columns of a newspaper article. 
• To span a cell across many columns, type 
<TD COLSPAN=n>, where n is the number 
of columns to be spanned
Spanning Cells Across Rows
• To span a cell across many rows, type <TD 
ROWSPAN=n>, where n is the number of 
rows
Aligning Cell Content
• By default, a cell’s content are aligned horizontally 
to the left and and vertically in the middle.
• Use VALIGN=direction to change the vertical 
alignment, where “direction” is top, middle, 
bottom, or baseline 
• Use ALIGN=direction to change the horizontal 
alignment where “direction” is left, center, or right
Controlling Cell Spacing
• Cell spacing is the space between cells 
while cell padding is the space around the 
contents of a cell
• To control both types of spacing, use the 
CELLSPACING =n and 
CELLPADDING=n attributes in the 
<TABLE> tag
Nesting Tables 
• Create the inner table 
• Create the outer table and determine which cell of 
the outer table will hold the inner table
• Test both tables separately to make sure they work
• Copy the inner table into the cell of the outer table
• Don’t nest too many tables. If you find yourself 
doing that, find an easier way to lay out your Web 
page
Changing a Cell’s Color
• To change a cell’s color, add the 
BGCOLOR=“color” attribute to the <TD> 
tag
• Example:
  <TD BGCOLOR=“blue”>
Dividing Your Table into 
Column Groups
• You can divide your table into two kinds of 
column groups: structural and non­structural. 
• Structural column groups control where 
dividing lines are drawn; Non­structural 
groups do not
• Both let you format an entire column of cells 
at once
 
Column Groups  
• To create structural column groups, type 
<COLGROUP SPAN=n> after the <TABLE> tag, 
where n is the number of columns in the group
• To create non­structural column groups, type 
<COL SPAN=n>, where n is the number of 
columns in the group 
Dividing Table into Horizontal 
Sections
• You can also create a horizontal section 
consisting of one or more rows. This allows 
you to format the rows all at once
•  To create a horizontal section, type 
<THEAD>, <TBODY>, or <TFOOT> 
before the first <TR> tag of the section
• Netscape does not support these tags
Controlling Line Breaks
• Unless you specify otherwise a browser will 
divide the lines in a cell as it sees fit.
• The NOWRAP attribute placed within the 
<TD> tag forces the browser to keep all the 
text in a cell on one line
• Example:
– <TD NOWRAP>Washington, D.C.
Parting Words….
• If you can imagine a way to lay out your 
page, chances are it is possible using 
HTML
• When in doubt, use an HTML reference

You might also like