Wdf 222chp iii vi

Subject Name
Web Design and Fundamentals

Code

Credit Hours

WDF222
By
Balaganesh

Subject Name

Code

Credit Hours

HTML
• HTML stands for Hypertext Markup Language, and it
is the most widely used language to write Web Pages.
As its name suggests, HTML is a markup language.
• 
Hypertext refers to the way in which Web pages
(HTML documents) are linked together. When you
click a link in a Web page, you are using hypertext.
• 
Markup Language describes how HTML works. With
a markup language, you simply "mark up" a text
document with tags that tell a Web browser how to
structure it to display.
2/5/2014

Balaganesh -Lincoln University

2

Subject Name

Code

Credit Hours

HTML Basic Structure

<HTML>
<HEAD>
<TITLE> Qi’s web! </TITLE>
</HEAD>

<BODY>
<H1> Hello World </H1>
<! Rest of page goes here. This is a comment. >
</BODY>
</HTML>

3

Subject Name

Code

Credit Hours

The basic structure for all HTML documents is simple and should include
the following minimum elements or tags:

<html> - The main container for HTML pages

<head> - The container for page header information

<title> - The title of the page

<body> - The main body of the page

2/5/2014


4

Subject Name

Code

Credit Hours

BODY Element
<BODY attributename="attributevalue">
• Deprecated attributes (but still used)
– BACKGROUND=“Sunset.jpg” (can be tiled)
– BGCOLOR=color
– TEXT=color
– LINK=color (unvisited links)
– VLINK=color (visited links)
– ALINK=color (when selected)

5

Subject Name

Code

Credit Hours

Generic Attributes

Attribute Options

2/5/2014

Function


6

Subject Name

Code

Headings

Credit Hours

<H1 ...> text </H1> -- largest of the six
<H2 ...> text </H2>
<H3 ...> text </H3>
<H4 ...> text </H4>
<H5 ...> text </H5>
<H6 ...> text </H6> -- smallest of the six
ALIGN="position" --left (default), center or right

7

Subject Name

Code

Headings

Credit Hours

<HTML>
<HEAD>
<TITLE>Document Headings</TITLE>
</HEAD>
<BODY>
Samples of the six heading types:
<H1>Level-1 (H1)</H1>
<H2 ALIGN="center">Level-2 (H2)</H2>
<H3><U>Level-3 (H3)</U></H3>
<H4 ALIGN="right">Level-4 (H4)</H4>
<H5>Level-5 (H5)</H5>
<H6>Level-6 (H6)</H6>
</BODY>
</HTML>
8

Subject Name

Code

Credit Hours

<P> Paragraph
•
•
•
•
•
•

<P> defines a paragraph
Add ALIGN="position" (left, center, right)
Multiple <P>'s do not create blank lines
Use <BR> for blank line
Fully-specified text uses <P> and </P>
But </P> is optional
9

Subject Name

Code

<BODY>
<P>Here is some text </P>
<P ALIGN="center"> Centered text </P>
<P><P><P>
<P ALIGN="right"> Right-justified text
<! Note: no closing /P tag is not a problem>
</BODY>

Credit Hours

10

Subject Name

Code

Credit Hours

Colors
• Values for BGCOLOR and COLOR
– many are predefined (red, blue, green, ...)
– all colors can be specified as a six character
hexadecimal value: RRGGBB
– FF0000 – red
– 888888 – gray
– 004400 – dark green
– FFFF00 – yellow
11

Subject Name

Code

Fonts

Credit Hours

<FONT COLOR="red" SIZE="2" FACE="Times Roman">
This is the text of line one </FONT>
<FONT COLOR="green" SIZE="4" FACE="Arial">
Line two contains this text </FONT>
<FONT COLOR="blue" SIZE="6" FACE="Courier"
The third line has this additional text </FONT>

Note: <FONT> is now deprecated in favor of CSS.

12

Subject Name

Code

Credit Hours

Ordered (Numbered) Lists

<OL TYPE="1">
<LI> Item one </LI>
<LI> Item two </LI>
<OL TYPE="I" >
<LI> Sublist item one </LI>
<LI> Sublist item two </LI>
<OL TYPE="i">
<LI> Sub-sublist item one </LI>
<LI> Sub-sublist item two </LI>
</OL>
</OL>
</OL>

13

Subject Name

Code

Credit Hours

Unordered (Bulleted) Lists

<UL TYPE="disc">
<LI> One </LI>
<LI> Two </LI>
<UL TYPE="circle">
<LI> Three </LI>
<LI> Four </LI>
<UL TYPE="square">
<LI> Five </LI>
<LI> Six </LI>
</UL>
</UL>
</UL>

14

Subject Name

Code

Credit Hours

Physical Character Styles

<H1>Physical Character Styles</H1>
<B>Bold</B><BR>
<I>Italic</I><BR>
<TT>Teletype (Monospaced)</TT><BR>
<U>Underlined</U><BR>
Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR>
Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR>
<SMALL>Smaller</SMALL><BR>
<BIG>Bigger</BIG><BR>
<STRIKE>Strike Through</STRIKE><BR>
<B><I>Bold Italic</I></B><BR>
<BIG><TT>Big Monospaced</TT></BIG><BR>
<SMALL><I>Small Italic</I></SMALL><BR>
<FONT COLOR="GRAY">Gray</FONT><BR>
<DEL>Delete</DEL><BR>
<INS>Insert</INS><BR>
15

Subject Name

Code
Logical
Character
Styles

Credit Hours

<H1>Logical Character Styles</H1>
<EM>Emphasized</EM><BR>
<STRONG>Strongly Emphasized</STRONG><BR>
<CODE>Code</CODE><BR>
<SAMP>Sample Output</SAMP><BR>
<KBD>Keyboard Text</KBD><BR>
<DFN>Definition</DFN><BR>
<VAR>Variable</VAR><BR>
<CITE>Citation</CITE><BR>
<EM><CODE>Emphasized Code</CODE></EM><BR>
<FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR>
<ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM>
16

Subject Name

Code

Credit Hours

<A> Anchors (HyperLinks)

Link to an absolute URL:
If you get spam, contact <A HREF="htttp:www.microsoft.com">
Microsoft </A> to report the problem.
Link to a relative URL:
See these <A HREF="#references"> references </A>
concerning our fine products.

Link to a section within a URL:
Amazon provided a <A HREF="www.amazon.com/#reference">
reference for our company. </A>

17

Subject Name

Code

Naming a Section

Credit Hours

<H2> <A NAME="#references"> Our References </A> </H2>
Example

18

Subject Name

Code

Hyperlinks

Credit Hours

<BODY>
<H3>Welcome to <A HREF="http://www.cs.virginia.edu">
<STRONG>Computer Science</STRONG></A>
at the <A HREF="www.virginia.edu">University of Virginia.</A>
</H3>
</BODY>

19

Subject Name

Code

Credit Hours

Images
• SRC is required
• WIDTH, HEIGHT may be in units of pixels or
percentage of page or frame
– WIDTH="357"
– HEIGHT="50%"

• Images scale to fit the space allowed
20

Subject Name

Code

Credit Hours

Images
Align=position

Image/Text Placement

Left

Image on left edge; text flows to right of image

Right

Image on right edge; text flows to left

Top

Image is left; words align with top of image

Bottom

Image is left; words align with bottom of image

Middle

Words align with middle of image
21

Subject Name

Code

Credit Hours

Images
<BODY>
<img src="dolphin.jpg" align="left" width="150" height="150" alt="dolphin
jump!">
This is a very cute dolphin on the left!<br>
You can see text wrap around it<br>
</BODY>
</HTML>

22

Subject Name

Code

ALIGN="left"

Credit Hours

23

Subject Name

Code

ALIGN="right"

Credit Hours

24

Subject Name

Code

ALIGN=“bottom"

Credit Hours

25

Subject Name

Code

Tables

Credit Hours

<TABLE> table tag
<CAPTION> optional table title
<TR>
table row
<TH>
table column header
<TD>
table data element

26

Subject Name

Code

Tables

Credit Hours

<TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH>
<TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>
</TABLE>

27

Subject Name

Code

Credit Hours

<TABLE> Element Attributes
• ALIGN=position -- left, center, right for table
• BORDER=number -- width in pixels of border (including any cell
spacing, default 0)
• CELLSPACING=number -- spacing in pixels between cells, default
about 3
• CELLPADDING=number -- space in pixels between cell border and
table element, default about 1
• WIDTH=number[%]-- width in pixels or percentage of page/frame
width

28

Subject Name

Code

Credit Hours

• cellspacing=10

• cellpadding=10

29

Subject Name

Code

Credit Hours

<TABLE> Element Attributes
BGCOLOR=color -- background color of table, also valid
for <TR>, <TH>, and <TD>
RULES=value -- which internal lines are shown; values are
none, rows, cols, and all (default)
EX:

<TABLE COLS=“40%, *,*”>
<TABLE ROWS=“*,*”>

30

Subject Name

Code

Credit Hours

<TR> Table Row Attributes

Valid for the table row:
ALIGN -- left, center, right
VALIGN -- top, middle, bottom
BGCOLOR -- background color

<TABLE ALIGN="center" WIDTH="300" HEIGHT="200">
<TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD>
<TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD>
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD>
</TABLE>
31

Subject Name

Code

Credit Hours

<TD> Table Cell Attributes

Valid for the table cell:
colspan -- how many columns this cell occupies
rowspan – how many rows this cell occupies
<TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1">
<TR>
<TD colspan="1" rowspan="2">a</TD>
<TD colspan="1" rowspan="1">b</TD>
</TR>
<TR>
<TD colspan="1" rowspan="1">c</TD>
</TR>
</TABLE>
32

Subject Name

Code

Credit Hours

Frames
• Frames help control navigation and display
• <FRAME> attributes include
– FRAMEBORDER – yes or 1 for borders
– FRAMESPACING – width of border
– BORDERCOLOR – color
– SRC – location of HTML to display in frame
– NAME – destination for TARGET attribute
33

Subject Name

Code

Credit Hours

Frames
– MARGINWIDTH – left/right margins
– MARGINHEIGHT – top/bottom margins
– SCROLLING – yes or 1 adds scroll bar
– NORESIZE – yes or 1 disables resizing

34

Subject Name

Code

Frames

Credit Hours

<FRAMESET ROWS="75%,25%">
<FRAMESET COLS="*,*,*">
<FRAME SRC="http://www.virginia.edu">
</FRAMESET>
<FRAMESET COLS="*,*">
</FRAMESET>
</FRAMESET>
35

Subject Name

Code

Credit Hours

Frames
<FRAMESET ROWS="25%,75%"
<FRAMESET COLS="*,*,*">
</FRAMESET>
<FRAMESET COLS="*,*">
</FRAMESET>
</FRAMESET>
36

Subject Name

Code

Credit Hours

Frames
<FRAMESET ROWS="*,*">
<FRAMESET COLS="15%, 2*, *">
<FRAME SRC="http://www.cs.virginia.edu/">
</FRAMESET>
<FRAMESET COLS="40%, *">
</FRAMESET>
</FRAMESET>
37

Subject Name

Code

Credit Hours

Sample Code for Frames

Framesample.html
<frameset cols="25%,*">
<frame src="file:///C:/Users/BAGA/Desktop/menu.html">
<frame src="file:///C:/Users/BAGA/Desktop/menu.html"
name=main>
</frameset>

Menu.HTML
<html>
<head></head>
<Body>
<H1> Menu</H1>
<a href="file:///C:/Users/BAGA/Desktop/first.html" target=main>First</a><br>
<a
href="file:///C:/Users/BAGA/Documents/first1.html"target=main>Second</a>
</Body>
</html>

Subject Name

Cascading Style Sheets

Code

Credit Hours

CSS

CSS information can be provided from various sources. CSS style
information can be in a separate document or it can be embedded into
an HTML document. Multiple style sheets can be imported. Different
styles can be applied depending on the output device being used; for
example, the screen version can be quite different from the printed
version, so that authors can tailor the presentation appropriately for
each medium.

Subject Name

Code

Credit Hours

Sample Code for CSS

CSS2.css
h1 {color:blue;}
p {color:blue;}
Hr {color:blue;size:7;}
h2{color:yellow;}

any.HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href=“css2.css">
</head>
<body>
<hr>
<h1>A heading</h1>
<h2> H2 heading</h2>
<h3> This is H3 heading</h3>
<hr>
<p>A paragraph kjehqw kjehk kjhdqw kkejd kjb jhdg.</p>
</body>

Subject Name

Code

Credit Hours

Type of web pages
• A static web page is a page that is always the
same on the web server unless someone changes
the HTML code and uploads that page to the
server. The end user will always see the same
thing.
A dynamic page is a page that uses some kind of
server side scripting language such as PHP or ASP.
The page is dynamically created on the fly by the
server based on user actions. This kind of page is
mostly used in database driven sites such as
online stores, forums and/or membership sites.
2/5/2014


41

Subject Name

Code

Credit Hours

• Forms are a characteristic of the HTML
standard that let authors collect information
provided by the visitors. These forms can be
useful to collect personal information, contact
information, preferences, opinions, or any
kind of user input the author may need
• Using forms tag can manage Dynamic web
pages

Subject Name

Code

Credit Hours

• <html>
•
<head><title>My first web site
</title></head>
•
<body bgcolor= "olive" text= white>
• <form name="myform"
action="http://www.mydomain.com/myformhandler.cgi"
method="POST">
• <input type="text" size="25" value="Enter your name here!">
• Enter Password : <input type="password" size="25">
•

Subject Name

•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

Code

<input type ="checkbox" name="option1" value="Male"> Male<br>
<input type ="checkbox" name="option2" value="FeMale">FeMale<br>
<input type="radio" name="group1" value="A level"> A level<br>
<input type="radio" name="group1" value="B level" checked> B level<br>
<select>
<option>India</option>
<option>Malaysia</option>
<option>England</option>
</select>
<textarea cols="40" rows="5" name="myname">
Please enter ur address
</textarea>
<input type="submit" value="Submit">
</form>
</body>
</html>

Credit Hours

Subject Name

Code

Credit Hours

Type of web pages
• A static web page is a page that is always the
same on the web server unless someone changes
the HTML code and uploads that page to the
server. The end user will always see the same
thing.
A dynamic page is a page that uses some kind of
server side scripting language such as PHP or ASP.
The page is dynamically created on the fly by the
server based on user actions. This kind of page is
mostly used in database driven sites such as
online stores, forums and/or membership sites.
2/5/2014


45

Wdf 222chp iii vi

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Wdf 222chp iii vi

Ähnlich wie Wdf 222chp iii vi (20)

Mehr von Bala Ganesh

Mehr von Bala Ganesh (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Wdf 222chp iii vi