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

Chapter 2 Introduction To HTML

HTML is the markup language used to structure and present content on the World Wide Web. It uses tags to define headings, paragraphs, lists, and other elements. Tags are keywords surrounded by angle brackets that appear in pairs to indicate the start and end of an element. HTML documents have a basic structure including <html>, <head>, and <body> tags. CSS can be used to style and lay out HTML elements.

Uploaded by

Nishigandha Patil
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
988 views

Chapter 2 Introduction To HTML

HTML is the markup language used to structure and present content on the World Wide Web. It uses tags to define headings, paragraphs, lists, and other elements. Tags are keywords surrounded by angle brackets that appear in pairs to indicate the start and end of an element. HTML documents have a basic structure including <html>, <head>, and <body> tags. CSS can be used to style and lay out HTML elements.

Uploaded by

Nishigandha Patil
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 84

Chapter 2

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
HTML (Hypertext MarkUP Language)

 HTML is the lingua franca for publishing hypertext on


the World Wide Web
 Define tags <html><body> <head>….etc
 Allow to embed other scripting languages to manipulate
design layout, text and graphics
 Platform independent
 Current version is 4.x and in February W3C released the
first draft of a test suite 4.01
 For more info: http://www.w3.org/MarkUp/

4
HTML (Hypertext Markup Language)

 Example HTML code:


<HTML>
<head>
<title>Hello World</title>
</head>
<body bgcolor = “#000000”>
<font color = “#ffffff ”>
<H1>Hello World</H1>
</font>
</body>
</HTML>

5
HTML (Hypertext Markup Language)

6
HTML (Hypertext Markup Language)

 Common features
 Tables
 Frame
 Form
 Image map
 Character Set
 Meta tags
 Images, Hyperlink, etc…

7
HTML (Hypertext Markup Language)

 File Extensions:
HTML, HTM
 Recent recommendation of W3C is XHTML 1.0 combines
the strength of HTML 4 with the power of XML.
 XHTML 1.0 is the first major change to HTML since
HTML 4.0 was released in 1997
 More info: http://www.w3.org/TR/xhtml1/

8
CSS (Cascading Style Sheet)

 Simple mechanism for adding style to web page


 Code be embedded into the HTML file
 HTML tag:
<style type=“text/css”>CODE</style>
 Also be in a separate file FILENAME.css
 HTML tag:
<link rel=“stylesheet” href=“scs.css” type=“text/css”>
 Style types mainly include:
• Font
• Color
• Spacing

9
CSS (Cascading Style Sheet)

 Controls format:
 Font, color, spacing
 Alignment
 User override of styles
 Aural CSS (non sighted user and voice-browser)
 Layers
 Layout
 User Interface

10
CSS (Cascading Style Sheet)

 Client’s browser dependable


 Example code:

p,h1,h2 {
margin-top:0px;
margin-bottom:100px;padding:20px 40px 0px 40px;
}
 More info:
http://www.w3.org/Style/CSS/
http://www.w3schools.com/css/css_intro.asp

11
CSS (Cascading Style Sheet)

<HTML>
<head>
<title>Hello World</title>
<style type=“text/css”>
p,h1,h2 {
margin-top:0px;
margin-bottom:100px;padding:40px 40px 0px 40px;
}
</style>
</head>
<body bgcolor = “#000000”>
<font color = “#ffffff ”>
<h1>Hello World<h1>
</font>
</body>
</HTML>

12
CSS (Cascading Style Sheet)

13
HTML without CSS

14
HTML Tags

 HTML tags are used to mark-up HTML elements


 Surrounded by angle brackets < and >
 HTML tags normally come in pairs, like <tagname> (start
tag) and </tagname> (end tag)
 The text between the start and end tags is the element
content
 Not case-sensitive
 Follow the latest web standards:
 Use lowercase tags

15
Tag Attributes

 Tags can have attributes that provide additional


information to an HTML element
 Attributes always come in name/value pairs like:
name=“value”
 Attributes are always specified in the start tag
 Attribute values should always be enclosed in quotes. Double
quotes are most common.
 Also case-insensitive: however, lowercase is recommended
 <tagname a1=“v1” a2=“v2”></tagname>
 For example, <table border=“0”> is a start tag that defines a
table that has no borders

16
HTML Document Structure

 Entire document enclosed within <html> and </html> tags


 Two subparts:
 Head
 Enclosed within <head> and </head>
 Within the head, more tags can be used to specify title of the
page, meta-information, etc.
 Body
 Enclosed within <body> and </body>
 Within the body, content is to be displayed
 Other tags can be embedded in the body

17
We’ll Study…

 HTML Basics (http://www.w3schools.com/html/html_intro.asp):


 HTML Elements
 HTML Headings
 HTML Paragraphs
 HTML Formatting
 HTML Styles
 HTML Images
 HTML Tables
 HTML Lists
 HTML Forms
 HTML Colors
18
More Basic Examples

 Using basic tags: http://www.csupomona.edu/~ftang/www/courses/CS299-


S09/examples/ex1.html
 Text formatting: http://www.csupomona.edu/~ftang/www/courses/CS299-
S09/examples/ex2.html
 HTML links: http://www.csupomona.edu/~ftang/www/courses/CS299-
S09/examples/ex3.html

19
HTML Layout

 One common way is to use HTML tables to format the layout of an


HTML page
 The trick is to use a table without borders, and maybe a little extra cell-
padding

 Other tips:
 Keep screen resolution in mind
 Use color to define spaces
 Align your images
 Balance the graphics and text on a page
 Think about text width – scan length 7 – 11 words
 Centering text is inadvisable
 Here is the link: http://webdesign.about.com/od/layout/a/aa062104.htm

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


common structure <HEAD>
<TITLE> Example </TITLE>
 All Web pages should </HEAD>
contain a pair of <HTML>, <BODY>
<HEAD>, <TITLE>, and This is where you would include
<BODY> tags 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

 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:
ktdunn@mit.edu”>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> Ancho


r
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>
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 look


of bulleted items 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 Button
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  Here’s how it would look
TYPE="text" 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"
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 look
<TR> 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
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
HTML Frames

 HTML frames are a means of having several browser


windows open within a single larger window
 Each HTML document is called a frame
 Disadvantages:
 Must keep track of more HTML documents
 Difficult to print the entire page

 Example of using frame


 http://www.csupomona.edu/~ftang/www/courses/CS299-S09/examples/frame.html

 http://www.w3schools.com/html/html_frames.asp

84

You might also like