BCA402

HTML DHTML
Code: 
BCA402
Year / Semester: 
4th Semester
Objective: 

This is Introduction to HTML/DHTML, and understanding Programming, with basic and Advanced HTML/DHTML Elements.

Credits: 
3

Introduction
What is the World Wide Web, Goals of WWW, How WWW works?, Web standards, Client Server systems, Web servers, Web clients, Web browser, Web pages, How browser fetches the pages?, How browser displays the pages?, Hyper Text Transfer Protocol (HTTP), Mark Up Languages, Hypertext , Hyper Media,
An Introduction to HTML, History of HTML, HTML Document Format , HTML tags,
HTML Elements.
Top-level Elements
HTML - HTML document
HEAD - Document head
BODY - Document body
FRAMESET - Frameset
Head Elements
BASE - Document base URI
ISINDEX - Input prompt
LINK - Document relationship
META - Metadata
SCRIPT - Client-side script
STYLE - Embedded style sheet
TITLE - Document title
Generic Block-level Elements
ADDRESS - Address
BLOCKQUOTE - Block quotation
CENTER - Centered block
DEL - Deleted text
DIV - Generic block-level container
H1 - Level-one heading
H2 - Level-two heading
H3 - Level-three heading
H4 - Level-four heading
H5 - Level-five heading
H6 - Level-six heading
HR - Horizontal rule
INS - Inserted text
ISINDEX - Input prompt
NOSCRIPT - Alternate script content
P - Paragraph
PRE - Preformatted text
Font Style Elements
B - Bold text
BIG - Large text
I - Italic text
S - Strike-through text
SMALL - Small text
STRIKE - Strike-through text
TT - Teletype text
U - Underlined text
Lists
DIR - Directory list
DL - Definition list
DT - Definition term
DD - Definition description
LI - List item
MENU - Menu list
OL - Ordered list
UL - Unordered list
Tables
TABLE - Table
CAPTION - Table caption
COLGROUP - Table column group
COL - Table column
THEAD - Table head
TFOOT - Table foot
TBODY - Table body
TR - Table row
TD - Table data cell
TH - Table header cell
Frames
FRAMESET - Frameset
FRAME - Frame
NOFRAMES - Frames alternate content
Forms
FORM - Interactive form
BUTTON - Button
FIELDSET - Form control group
LEGEND - Fieldset caption
INPUT - Form input
LABEL - Form field label
SELECT - Option selector
OPTGROUP - Option group
OPTION - Menu option
TEXTAREA - Multi-line text input
Special Inline Elements
A - Anchor
APPLET - Java applet
BASEFONT - Base font change
BDO - BiDi override
BR - Line break
FONT - Font change
IFRAME - Inline frame
IMG - Inline image
MAP - Image map
AREA - Image map region
OBJECT - Object
PARAM - Object parameter
Q - Short quotation
SCRIPT - Client-side script
SPAN - Generic inline container
SUB - Subscript
SUP - Superscript
Phrase Elements
ABBR - Abbreviation
ACRONYM - Acronym
CITE - Citation
CODE - Computer code
DEL - Deleted text
DFN - Defined term
EM - Emphasis
INS - Inserted text
KBD - Text to be input
SAMP - Sample output
STRONG - Strong emphasis
VAR - Variable
Adding Multimedia Components in Web Pages, Adding images, sound and video in web page.
Style Sheets
Introduction to CSS, What are style sheets?, What is CSS?, Cascading Order
Tree structures and inheritance, HTML and CSS, Rules and Style Sheets, CSS Rule
Grouping selectors and rules, Using Style Sheets in the Document, using the STYLE element, Browsers and CSS, CSS validation
DHTML
What is DHTML, Dynamic Styles, Dynamic Content, Benefits of Dynamic Contents, Implementation of following DHTML effects in web pages:
1. Related to CSS
Position: relative
Position: absolute
Visibility
Cursors
Watermark
Change background color
2. Related to Events
onload
onunload
onchange
onsubmit
onreset
onselect
onblur
onfocus
onkeydown
onkeyup
onkeypress
onmouseover & onmouseout
onclick
ondblclick
onmousedown & onmouseup
onmousemove
Disable right-click
3. Related to Text
Element access
Attribute change
Change position
onmousemove
onload & onunload
Tooltip
Typewrite message
Bigger text
Scrolling text
Blinking header
4. Related to Input Forms
Identical forms
Change background color of an input field
Change text color of an input field
Insert background image to an input field
Select all check-boxes
Change background color of a button
Change text color of a button
Insert background image to a button
Change background color of a drop-down list
Change text color of a drop-down list
Change background color of a text area
Change text color of a text area
Insert background image to a text area
5. Related to Images
Preload image
Change the size of an image
Change the source of an image
Change the size & the source of an image
Change the position of an image
Change the background image
Moving image
Drag and drop the image
Image viewer
6. Related to Window
Shake the window
7. Related to Links
Text transform
Letter spacing
Blinking link
Shaking link
Random Banner
8. Related to Menus
Top navigation
Left navigation
Drop down navigation (select box)
Top drop down
Always-on-top
Inset borders
Description menu
Description image
Cursor description
Cursor image
Sliding Vertically
Click sliding Vertically
Sliding horizontal
Click sliding horizontal
9. Related to Cursor
Cursor position
Cursor text
Cursor image
Cursor trail IE only

Suggested Readings: 
  1. Building Dynamic HTML; David S. Fox
  2. Writing Cross-Dynamic HTML; Heather Williamson
  3. DHTML and CSS for the World Wide Web; Jason Cranford Teaque
  4. Discovering HTML 4;Bryan Pfaffenberger