Introduction To Web Design and Applications: Lecture 4 A

Introduction to Web Design
and Applications
APT 1040
LECTURE 4 A
By Bernard Ondiek
[email protected]
Intro to Web Design and Apllication 1

LISTS
 ORDERED
 UNORDERED

HTML – Fundamentals
Lists
Unordered
Ordered listlist
II. apples
 apples
III.bananas
 bananas
IV.grapes
 grapes
V. strawberries
 strawberries

Ordered list
Ordered list
<ol type=‘i’ start=‘2’>

<li>apples</li>
<li>bananas</li>
<li>grapes</li>
<li>strawberries</li>
</ol>
LAB1: Ordered Lists
<html>
<head>
<title>orderd lists</title>
</head>
<body bgcolor=“lavender”>
<H1><center>ordered list</center></H1>
<ol type=‘i’ start=‘2’>
<li>apples</li>
<li>bananas</li>
<li>grapes</li>
</ol>
</body>
</html>
Now…..
Tweek the webpage to display
 1,2,3
 A,B,C
 I, II,III
 a,b,c

Unordered list
Unordered list
<ul>
<li>apples</li>
<li>bananas</li>
<li>grapes</li>
</ul>

LAB2: unordered List
<html>
<head>
<title>unorderd lists</title>
</head>
<body bgcolor=“lavender”>
<H1><center>ordered list</center></H1>
<Ul type=‘*’>
<li>apples</li>
<li>bananas</li>
<li>grapes</li>
</Ul>
</body>
</html>

Question
 What is displayed??
Try
 Circle
 Disc
 Square

Test your skills…………….
CITIES IN AFRICA
1.KENYA
• NAIROBI
• MOMBASA
• KISUMU
2. NIGERIA
 PORT HARCOURT
 ABUJA
 LAGOS
3.TANZANIA
o ARUSHA
o DAR
o DODOMA
4. UGANDA
A. KAMPALA
B. ENTEBBE
C. MBARARA

Tables
<TABLE BORDER=“1”>
<TR>
<TH>Student</TH>
<TH>Grade</TH>
</TR>
<TR>
<TD>Tom</TD>
<TD>B+</TD>
</TR>
<TR>
<TD>Sue</TD>
<TD>A-</TD>
</TR>
</TABLE>
Tables

Tables
 BORDER=value
 ALIGN=left|right|center
 CELLSPACING=value
 CELLPADDING=value
 WIDTH=value|percent

Tables
<TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6” CELLSPACING=“2”
ALIGN="RIGHT">
<CAPTION ALIGN="bottom">Class Grades</CAPTION>
<TR>
<TH>Student</TH>
<TH>Grade</TH>
</TR>
<TR>
<TD>Tom</TD>
<TD>B+</TD>
</TR>
<TR>
<TD>Sue</TD>
<TD>A-</TD>
</TR>
</TABLE>
Tables
Student Grade
Tom B-
Sue A+
Class
Grades
Intro to Web Design and Apllication

15
Table structures
<TABLE>...</TABLE> The Table delimiter.
<TR ...>...</TR> Used to specify number of

rows in a table.
<TD ...>...</TD> Specifies table data cells.
<TH ...>...</TH> Table Header cell.
<CAPTION Specifies the table Caption.

...>...</CAPTION>
16
Tables
rowspan and colspan

17
HTML Comments
 Comments are usually added with the purpose of

making the source code easier to understand.
 It may help other developer (or you in the future when
you edit the source code) to understand what you were
trying to do with the HTML. Comments are significant to
programmers but typically ignored by browsers.

HTML Comments
 An HTML comment begins with ,

See the example next slide:

<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center">
<TR>
<TD colspan=2 align='center'>
<font color="red"><b>Student Grades</b></font>
</TD>
</TR>
<TR>
<TD><b>Student</b></TD>
<TD><b>Grade</b></TD>
</TR>
<TR>
<TD>Tom</TD>
<TD rowspan=2>A</TD>
</TR>
<TR>
<TD>Sue</TD>
</TR>
</TABLE> 20
Student Grades
Student Grade
Tom
A
Sue

21
Screen Compatibility
1280 x 1024
1024 x 768
800 x 600
640 x 480

Tables
 Tables are frequently used to layout the basic web page design.
1280

64 23
Frames
 Basic Frames
 Floating Frames (inline frames)
 Picture in picture
 Frames let you divide a screen into windows with each

window viewing a different web page.

Basic Frames
Banner
Menu Content
Footer

25
Basic Frames
Basic tags
 <frameset> ..</frameset>
 <frame />
 <noframes> .. </noframes>
Basic attributes
 cols = “values”
 rows = “values”
 name = “frame_name”
 src = “frame_source(url)”
 target = “frame_name”

Basic Frames
Banner
Menu Content
Footer

27
Basic Frames
<frameset rows=“80,*,80”>
<frame src=“banner.html” />
<frameset cols = “25%,75%” >
<frame src=“menu.html” />
<frame src=“content.html” />
</frameset>
<frame src=“footer.html” />
</frameset>

Basic Frames
<frameset rows=“80,*,80”>
<frame src=“banner.html” />
<frameset cols = “25%,75%” >
<frame src=“menu.html” />
<frame src=“content.html” />
</frameset>
<frame src=“footer.html” />
<noframes>
<body>
Welcome to my page.
<A HREF="noframes.htm">Continue</A>
to the frame-free version.
</body>
</noframes>
</frameset>
Basic Frames
FRAMESET attributes
 FRAMEBORDER="yes|no"|0
 BORDER=pixels
 BORDERCOLOR="#hexcolor|colorname"
< frameset rows="80,*,80" border=2

bordercolor=“red" >
..
..
</frameset>
Basic Frames
Individual FRAME attributes
 SCROLLING="yes|no|auto"
 NORESIZE
 MARGINWIDTH=pixels
 MARGINHEIGHT="pixels"
 BORDERCOLOR="color"
 FRAMESPACING="pixels"
 FRAMEBORDER="yes|no"|0
NAME=“frame_name”
Intro to Web Design and Apllication 31
Floating Frames
 Floating frames allow you to create a frame within the

boundaries of a page
Basic Floating
Frames Frames
Floating Frames
<IFRAME attributes ></IFRAME>
Attributes
 SRC=URL
 HEIGHT=pixels|percent,
 WIDTH=pixels|percent
 HSPACE=pixels
 VSPACE=pixels
 ALIGN=left|right
 FRAMEBORDER=0
Floating Frames
<IFRAME
NAME=“frame_name”
ALIGN="right"
HSPACE=“40”
VSPACE=“40”
WIDTH="75%"
HEIGHT=“150”
FRAMEBORDER=0
SRC=http://www.mysite/mypage.htm >
</IFRAME>
Hypertext links
<a href=“page.html” target=“blank” >Click this link

</a>
 Creates new window for the page
<a href=“page.html” target=“parent” >Click this link

</a>
 Opens page in the parent frame/wind of this frame/window
<a href=“page.html” target=“top” >Click this link </a>

 Opens page in top most frame/window

DIV and ILAYER
 Allows you create a position-able block of content.
Content
position
ed
within
this
block
DIV
<div attributes> content </div>
attributes
 ID=“name”
 STYLE = “style parameters re: CSS”

DIV
< DIV ID=“fred”
STYLE = “POSITION:absolute|relative;
VISIBILITY:visible:hidden;
Z-INDEX:number;
WIDTH:width in pixels;
HEIGHT:height in pixels;
TOP:pixels from top of page or block;
LEFT:pixels from left edge of page or block;
PADDING:margin in pixels;
other style attributes; “ >
content
</DIV>
DIV
content
content
contentc
content content
content
content

DIV
<div style="position:absolute; left:100px; top:100px;

width:100px; height:100px; background-color:#ffffff;
">

CASCADING STYLE SHEETS (CSS)
 Styles enable you to define a consistent 'look'

for your documents by describing once how
headings, paragraphs, quotes, etc. should be
displayed.
 Style sheet syntax is made up of three parts:
selector {property: value}

selector = element.class
H1 {text-align: center; color: blue}
A {color:green; font-familiy:arial,courier; font-weight:bold;}
td { align:center; background-color:grey; border-color:red;}
div {position:absolute; visibily:hidden; margin:10px }
font {color:navy; font-size:2pt; font-face:trebuchet; }
hr {color:#ff0000; width:80%; align:center; }
table {width:80%; align:center; border:2px; padding:5px; }

H1 {text-align: center; color: blue}

H1.widget {text-align: center; color: red; font-size:80%; }
A {color:green; font-familiy:arial,courier; font-weight:bold;}

A.menu {color:cyan; font-familiy:arial,courier; font-style:italics;}
td { align:center; background-color:grey; border-color:red;}

td.figure { align:right; background-color:white; border-color:black;}
font {color:navy; font-size:2pt; font-face:trebuchet; }

font.fred {color:blue; font-size:2pt; font-face:trebuchet; font-weight:bold; }
element.class {property:value; }
Embedded
<head>
<title> My Page Title </title>
<style TYPE="text/css >

<! - -
element.class { property:value; }
element.class { property:value; }
-->
</style>
</head>
Linked
Styles can be defined in a separate file
<font style=“property:value; “> text </font>

<font class=“fred”> text </font>
mystyles.css
<head>
<LINK REL="stylesheet" HREF="mystyles.css“ TYPE="text/css">
</head>
/* Example style sheet file (note how this comment was created) */
BODY {background: #FFFFD8; margin-top: 20}
A:link {color: #400080; background: #FFFFD8}
H1 {font-weight: bold; text-align: center; color: #006000;

background: #FFFFD8; font-family: Gill Sans, Arial, sans-serif; }
font.caption {font-family: Gill Sans, Arial, sans-serif; font-style:

italic; }
/* End of example style sheet file */

Inline
Styles can be placed within individual

elements
<font style=“color:red; font-face:ariel;” >

Inline > Embedded > Linked
Defining the style of your text

 linked -> font-family:arial,georgia;
 embedded -> color:navy;
 inline -> font-size:2pt;

Using IDs
 IDs enable you to define a unique style which you can apply to a
number of elements.
<STYLE>
<!–
#copyright {font-style:italic; font-size:smaller; }
-->
</STYLE>
<p ID=“copyright”> Any textual content </p>

Images
<img src=“images/pic1.jpg” width=75px,

height=50px />
<img class=“pics” src=“images/pic1.jpg” />
img.pics { width:75px; height:50px; border-

width:3px }

Using Images
 Images take longer to download than text

 The larger the image, the slower the page
 Use optimization software
 Use thumb nail images

Other uses of Images
 Page background (not recommended)

 <body background-image = “url” >
 <body class=“background”>
 body.background { background-image:$url; }
 Table background
 <table background-image=“url”>
 <table class=“background”>
 table.background { backlground-image:url; }
 DIV background
 <div style={ background-image:url; } >
Resources
http://www.w3schools.com/
 HTML Tutorials  XML Tutorials  .NET (dotnet)
Learn HTML Learn XML .NET Microsoft
Learn XHTML Learn XSL .NET ASP
Learn CSS Learn XSLT .NET Mobile
Learn TCP/IP Learn XSL-FO
Learn XPath
Learn XQuery  Multimedia
 Browser Scripting Learn XLink Learn Media
Learn JavaScript Learn XPointer Learn SMIL
Learn DHTML Learn DTD Learn SVG
Learn VBScript Learn Schema Learn Flash
Learn HTML DOM Learn XML DOM
Learn WMLScript Learn XForms  Web Building
Learn SOAP Web Building
 Server Scripting Learn WSDL
Learn RDF Web W3C
Learn SQL Web Browsers
Learn ASP Learn RSS
Learn ADO Learn WAP Web Quality
Learn PHP Web Semantic
Web Careers
Web Hosting
Web Certification
Q&A

Introduction To Web Design and Applications: Lecture 4 A

Uploaded by

Copyright:

Available Formats

Introduction To Web Design and Applications: Lecture 4 A

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To Web Design and Applications: Lecture 4 A

Uploaded by

Copyright:

Available Formats

Introduction to Web Design

Intro to Web Design and Apllication 1

Intro to Web Design and Apllication 2

Intro to Web Design and Apllication 3

<ol type=‘i’ start=‘2’>

Intro to Web Design and Apllication 6

Intro to Web Design and Apllication 7

Intro to Web Design and Apllication 8

Intro to Web Design and Apllication 9

Intro to Web Design and Apllication 10

Intro to Web Design and Apllication 12

Intro to Web Design and Apllication 13

Intro to Web Design and Apllication

<TABLE>...</TABLE> The Table delimiter.

<TR ...>...</TR> Used to specify number of

<TH ...>...</TH> Table Header cell.

<CAPTION Specifies the table Caption.

Intro to Web Design and Apllication

rowspan and colspan

Intro to Web Design and Apllication

 Comments are usually added with the purpose of

Intro to Web Design and Apllication 18

 An HTML comment begins with ,

Intro to Web Design and Apllication 19

Intro to Web Design and Apllication

Intro to Web Design and Apllication 22

Intro to Web Design and Apllication

 Frames let you divide a screen into windows with each

Intro to Web Design and Apllication 24

Intro to Web Design and Apllication

Intro to Web Design and Apllication 26

Intro to Web Design and Apllication

Intro to Web Design and Apllication 28

< frameset rows="80,*,80" border=2

 Floating frames allow you to create a frame within the

<IFRAME attributes ></IFRAME>

<a href=“page.html” target=“blank” >Click this link

<a href=“page.html” target=“parent” >Click this link

<a href=“page.html” target=“top” >Click this link </a>

Intro to Web Design and Apllication 35

 Allows you create a position-able block of content.

<div attributes> content </div>

Intro to Web Design and Apllication 37

Intro to Web Design and Apllication 39

<div style="position:absolute; left:100px; top:100px;

Intro to Web Design and Apllication 40

 Styles enable you to define a consistent 'look'

 Style sheet syntax is made up of three parts:

selector {property: value}

A {color:green; font-familiy:arial,courier; font-weight:bold;}

td { align:center; background-color:grey; border-color:red;}

div {position:absolute; visibily:hidden; margin:10px }

font {color:navy; font-size:2pt; font-face:trebuchet; }

hr {color:#ff0000; width:80%; align:center; }

table {width:80%; align:center; border:2px; padding:5px; }

H1 {text-align: center; color: blue}

A {color:green; font-familiy:arial,courier; font-weight:bold;}

td { align:center; background-color:grey; border-color:red;}

font {color:navy; font-size:2pt; font-face:trebuchet; }