B. C. A (Semester I) 030010108: Introduction to Web Design Lesson Plan Objective: To provide basic understanding of web and HTML for designing web pages in conjunction with HTML tags, text, videos and CSS and event handling using JavaScript. Course Outcomes: Upon completion of the course, students shall be able to CO1: describe the usage and working of Web. CO2: describe structures of HTML and CSS. CO3: use HTML formatting, listing, linking and table elements. CO4: design web pages contain application forms and frames with CSS. CO5: apply graphics and layouts in designing of web pages. CO6: use JavaScript within HTML document. Unit Sub Unit No. of Lecture (s) Topics Reference Chapter/Additional Reading Teaching Methodology Unit-1: The Web 1 1.1 Introduction MMD#1 Page No. 1-2 Web Browser, Web MMD#1 Page No. 8-12 1.2 1 Discussion, Server 1.3 Internet BR#1 Page No. 1-11 Planning Website : MMD#1 Page No. 13-17 1.4 Types of Sites, Lifespan 2 of Site, Practice Good Design 1.5 1 Web Hosting: the URL MMD#3 Page No. 49-53 1.6 1 Domain Names and IP MMD#3 Page No. 54-61 Address Transferring Files : FTP, MMD#3 Page No. 72-76 1.7 1 Browser-Based Uploading Unit-2: HTML and Cascading Style Sheets 2 2.1 1 Introduction: HTML MMD#2 Page No. 26 Chalk & Talk HTML Document: Basic MMD#2 Page No.27- Skeleton, Adding 29,32-36 2.2 Contents, Structuring 2 Text, HTML and Nesting 2.3 1 HTML : Paragraph, Line Breaks, Heading, Horizontal Lines, Preformatted Text MMD#5 Page No. 107-114 2.4 Introduction to CSS JSW#4 Page No. 137 Evaluation Parameter Quiz-1, Unit test-1 Unit test-1, Quiz-1, Assignment Ms. Khushbu Patel Page 1
2.5 1 Syntax and Structure of CSS JSW#4 Page No. 138 Class and ID Selectors, JSW#4 Page No. 152-156, 2.6 2 Pseudo Selector, JSW#5 Page No. 181-184 Measurement Units BR#14 Page No. 298 2.7 External Style Sheets, JSW#4 Page No. 139-141 1 Embedded Style Sheets BR#14 Page No. 299-312 and Inline Style Sheets Unit-3: HTML Formatting, Listing, Linking and Table 3 HTML Formatting PB #7 Page No. 138 153 3.1 : Look and 2 Character Type of Listing and MMD#1 Page No. 119-3.2 1 Listing, 123 Nested Listing Web Typography: CSS JSW#5 Page No. 186-219 Font properties, CSS Text spacing 3.3 properties, Customizing 1 Bulleted and Numbered Lists 3.4 1 HTML Linking : Internal and External Links, Relative Links, Mailto Link Website navigation using CSS MMD#8 Page No. 213-225, 3.5 1 http://www.w3schools.co m/css/css_navbar.asp 3.6 JSW#6 Page No. 124-126 2 HTML Table JST#11 Page No. 106-119 Applying properties in JSW#6 Page No. 231-248 3.7 HTML Table: Margin, 2 Padding and Border Unit-4: HTML Forms & Frames 4 1 Forms working JSW#11 Page No. 432-433, 4.1 Discussion Form Element, Input JSW#11 Page No. 434-444 1 Objects: text, 4.2 password, checkbox, radio, submit, reset Input Objects grouping JSW#11 Page No. 444-450 1 and <SELECT>, 4.3 <OPTION> AND <TEXTAREA> Styling Forms with CSS, JSW#11 Page No. 450-457 4.4 2 Styling Forms within Tables 4.5 1 Frames Frame : JST#11 Page No. 292-299 4.6 2 <FRAMESET>, Unit test-1, Internal-1, Assignment Quiz-2, Unit test-2, Internal-1, Assignment Ms. Khushbu Patel Page 2
<FRAME>, <NOFRAMES> and <IFRAME> 4.7 2 Customizing Frame Characteristics Unit-5: Adding Graphics and Page Layout 5 Images: The <IMG> Element, Alternate 5.1 2 text, Picture Size, File Format for Graphics, Putting Pictures on Colored Background Images and Styles: Inline Images in Text, 5.2 3 Borders, Wrapping Text Around an Images, Adding Captions, Background Images 5.3 1 Image Links and Image Map Style based Layout: 5.4 2 Structuring pages with <div> element, Floating Boxes, Fixed Boxes Unit-6: Java Script 6 Java Script : 6.1 2 Introduction, Serverside and Client-side programming, Scripting Language JST#11 Page No. 299-308 MMD#7 Page No. 183-193 MMD#7 Page No. 194-204 MMD#8 Page No. 226-229 MMD#9 Page No. 243-246 MMD#15 Page No. 423-426 6.2 1 <SCRIPT> Element MMD#15 Page No. 426-431 6.3 1 Variables and Data MMD#15 Page No. 431- Types 434 6.4 1 Functions MMD#15 Page No. 434-440 Dialog Boxes: Alert, BR#8 Page No. 143-147 6.5 1 Confirm and Prompt boxes, Unit test-2, Internal-2, Assignment Unit test-2, Internal-2 References : 1. Matthew MacDonald - Creating a Website : The missing manual SPD O Reilly [MMD] 2. Joel Sklar, Web Design Principles, CENGAGE Learning [JSW] 3. Joel Sklar, Textbook of Web Design, CENGAGE Learning [JST] 4. Bayross - Web Enabled Commercial Application Development - BPB Publication [BR] 5. Patel and Barik - Introduction to Internet & Web Designing - Acme Learning [PB] Note: # denotes chapter number. Ms. Khushbu Patel Page 3
Course Objectives and Course Outcomes Mapping: Understanding of Web and HTML Use of HTML tags, text, videos and CSS Event handling using JavaScript : CO1, CO2 : CO2, CO3, CO4, CO5 : CO6 Course Units and Course Outcomes Mapping: Unit No. Units 1 The Web 2 HTML and Cascading Style Sheets 3 HTML Formatting, Listing, Linking and Table Course Outcomes CO1 CO2 CO3 CO4 CO5 CO6 4 HTML Forms & Frames 5 Adding Graphics and Page Layout 6 Java Script Course Outcomes and Programme Outcomes Mapping: Course Outcomes Programme Outcomes PO1 PO2 PO3 PO4 PO5 PO6 CO1 CO2 CO3 CO4 CO5 CO6 Modes of Transaction (Delivery): Lecture method shall be used along with Chalk & Talk and Discussion method. Show the demonstration of designing web pages using HTML tags, CSS and JavaScripts. Activities/Practicum: The following activity shall be carried out by the students. Student shall perform comparative study of two HTML versions. Student shall perform comparative study of two CSS versions. Ms. Khushbu Patel Page 4
The following activity shall be carried out by the teacher. of Microsoft Office Front Page tool. of Macromedia Dreamweaver tool. Concept Map: Introduction to Web Design The Web Java Script HTML and Cascading Style Sheets Adding Graphics and Page Layout HTML Formatting, Listing, Linking and Table HTML Forms & Frames Unit-1: The Web The Web Introduction Provides facility to Transferring Files using Web Browser Web Server Internet Planning Website Domain Names and IP Address using Web Hosting FTP Browser-Based Uploading Types of Sites Lifespan of Site Practice Good Design the URL Ms. Khushbu Patel Page 5
Unit-2: HTML and Cascading Style Sheets HTML and Cascading Style Sheets Basic Skelton Adding Contents Structuring Text Introduction HTML and Nesting allows Document HTML Introduction Syntax Preformatted Text CSS Structure Class and ID Selectors, Pseudo Selector, Measurement Units Inline Style Sheets Embedded Style Shee External Style Sheets Paragraph Horizontal Lines Line Breaks Heading Ms. Khushbu Patel Page 6
Unit-3: HTML Formatting, Listing, Linking and Table Types Look Character HTML Formatting Listing Can be Nested Listing CSS Font properties CSS Text spacing properties HTML Formatting, Listing, Linking and Table Web Typography Customizing Bulleted and Numbered Lists Internal Links External Links Linking HTML Table Website navigation using CSS Mailto Links Relative Links Margin having Properties is Padding Unit-4: HTML Forms & Frames is is Border HTML Forms & Frames text password Form Element, Input Objects reset submit Forms Form working Input Objects Grouping <SELECT> <OPTION> Styling Forms with CSS Styling Forms within Tables <FRAMESET> <FRAME> Frames Customizing Frame Characteristics <NOFRAMES> IFRAME> checkbox radio <TEXTAREA> Ms. Khushbu Patel Page 7
Unit-5: Adding Graphics and Page Layout Adding Graphics and Page Layout The <IMG> Element Alternate text Picture Size having File Format for Graphics using having Images Putting Pictures on Colored Background Images and Styles Background Images Image Link Inline Images in Text, Borders Wrapping Text Around an Images Adding Captions Style based Layout Image Map discusess Fixed Boxes discusess Structuring pages with <div> element discusess Floating Boxes Unit-6: JavaScript JavaScript Introduction having use for use for Dialog Boxes is of type Alert Server-side and Clientside programming Scripting Language apply in is a perform using Functions Data Types Variables is of type Confirm Prompt Boxes <SCRIPT> Element Ms. Khushbu Patel Page 8