Course: CSC 224 Internet Technology I (2 credits Compulsory)

Transcription

1 Course: CSC 224 Internet Technology I (2 credits Compulsory) Course Duration: Two hours per week for 15weeks, ((15 hours) Theory and (45 hours) Practical), as taught in 2010/2011 session Lecturer: Abikoye, Oluwakemi Christiana M.Sc. Computer Science (Ibadan), B.Sc. Computer Science (Ilorin), MNCS,MSAN, MIEEE Computer Society. Department of Computer Science, Faculty of Communication & Information Sciences, University of Ilorin, llorin, Nigeria. kemi_adeoye@yahoo.com, abikoye.o@unilorin.edu.ng Office Location: Block 10 Room F9 Faculty of Communication & Information Sciences, University of Ilorin, llorin,nigeria. Consultation Hours: 12noon 2pm (Mondays & Wednesdays) Course Content History of XML, HTML,DHTML; Scripting and E-commerce; Basics of XHTML, CSS, Java Scripts, and Dynamic HTML, Brief discussion of WYSIWYG HTML editors including Macromedia DreamWeavers. Course The course gives a general introduction to Internet Technology covering a brief history of the Internet, explaining how it grew from its humble origins into the worldwide network that we enjoy today to identifying the most popular Internet services and the relationship between the Internet and the World Wide Web. The course provides comprehensive knowledge on the concepts of Internet Technology which include its architecture, services and protocol. The two most important protocols that allow networks to communicate with one another and exchange information which are the TCP (Transmission Control Protocol) and IP (Internet Protocol) are discussed. Also the functions of each layer at the TCP/IP networking model is covered. The brief history of HTML, XML, XHTML and DHTML are addressed. The course also covers in depth XHTML, CSS and Javascript. The concept of a markup language and how to create web pages using XHTML tags, CSS and Javascript are all covered in the course. Additional topics addressed include Discussion of WYSIWYG HTML editors, including Macromedia Dreamweaver. Course Justification Internet technology has now become dominant factor in business, academia, and everyday life. E-commerce and e-services are now fueling market change, with practically any business anyplace nurturing its equivalent on the internet. The Internet carries a vast range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support electronic mail. The Internet has changed the way companies do business, consequently increasing the demand for skilled web developers and administrators. This course will provide the students the opportunities to enhance their Internet skills. It will also allow them to acquire skills necessary to design sites that communicate effectively which are accessible to the widest audience and are attractively designed. 1

2 Course The main objectives of this course are to enable students to understand the key design principles used to build the internet and the details of internet protocol and also provide students with a fundamental understanding as to how an XHTML-compliant web site is developed, implemented, and maintained. At the end of this course, the students should be able to: (i) demonstrate an understanding of the design and construction of internet services; (ii) write program in X-HTML, Cascading Style Sheets and JavaScript, without the aid of web-development software; (iii) describe the operations of internet protocols and develop their own internet applications; (iv) design sites that communicate effectively which are accessible to the widest audience and are attractively designed; and (v) explain the underlying technological concepts that enable the Internet to work. Course Requirements Students are expected to attend 75% of the classes before they can sit for the examination and participate very well in the class. Students are also expected to bring their laptops to class so as to be able to work through examples in the notes during the lectures practically. Students must as well participate in all assignments whether individual or group. All students will have accounts. Methods of Grading S/N Type of Grading Score (%) 1. Test Assignment 5 3. Project Online discussion 5 5 Final Examinations 70 TOTAL 100 Course Delivery Strategies The course delivery strategies will include face-to-face lectures and practical sessions. An online discussion will be available to all students of the course to exchange ideas. Practical Schedule 1. Visit to some websites noting their URL. 2. Study of IP addresses. 3. Study of Markup languages code to identify their differences. 4. Study of how browser fetches web page from a server by requesting a particular page address. Creation of simple HTML file using text editor. Study of an XML file. 5. Starting XHTML document, identify tags, element in XHTML. Formatting text in bold, big, emphasized, italic, subscript, superscript format using XHTML code. Displaying some characters like <,>,&,, in XHTML using Character Entities. 2

3 6. Defining unordered list, ordered list and definition list with specific examples using XHTML code. 7. Using anchor tags to create links on web pages and also using Image tag and its attribute to insert images to XHTML document. 8. Creating and formatting table on web page using XHTML code, creating of forms using the various form elements. 9. Creating Image Map and inserting Frames to web page. 10. Formatting of XHTML elements and tags using CSS properties. 11. Writing of simple code using JavaScript programming concepts. 12. Using various WYSIWYG HTML editor tools to create web page. LECTURE CONTENT Week 1: General Introduction to Internet technology. The objectives are to provide a brief history of the internet, clarify the relationship between WWW and the Internet and also to define the Internet & identify the most popular internet uses. First Hour History and definition of the internet, World Wide Web (WWW) and the Internet, uses of the Internet. Practical Hour Visit to some websites noting their URL. 1. What do you understand by the word Internet? 2. What is the difference between the Internet and WWW? 3. Discuss briefly the history of the Internet. 4. List three facilities available in the Internet. 5. What led to the evolution of the Internet? 1. A Brief History of the Internet 3. Available at: Accessed 15 January, Internet Wikipedia, the free encyclopedia 3. Available at: Accessed 15 January, www. hpl.hp.com/personal/dejan_milojicic/internet.pdf Week 2: The Concept of Internet Technology The main objectives of this week are to introduce the students to the concept of internet technology and to provide students with a thorough understanding of the basic principle of computer networks, the design philosophy of the internet and the details of internet protocols. 3

4 First Hour The Concept of Internet technology Practical Hour Study of IP addresses. 1. Briefly explain into details the concept of Internet technology. 2. List/explain briefly five Internet services. 3. What do you understand by Internet Architecture? 4. Describe into details the TCP/IP network Model. 5. Differentiate between the OSI/TCP and TCP/IP Models. 6. Mention three protocols under the Link layer in the TCP/IP Models. 7. What do you understand by Internet Protocol? 8. What are the functions of the Network Layer? : 1. www. hpl.hp.com/personal/dejan_milojicic/internet.pdf 2. Kurose 2 J.F & Ross K.W. Computer Networking, 3 rd Edition 3. TCP/IP Model Wikipedia, the free encyclopedia 3. Available at: Model. Accessed 15 January, Accessed 15 January, Accessed 15 January, Internet technologies ppt presentation. Available at: Accessed 15 January, Week 3 History of HTML, XML, XHTML & DHTML The objective of this topic is to familiarize the students with the historical background of all markup languages. At the end of this topic, the students will have an idea on the unique features, strengths and weaknesses of all the markup languages. Also the students will know about the working groups, authors and the ruling body responsible for the evolution of each of the markup languages. First Hour The History of SGML, HTML,XML, XHTML and DHTML Practical Hour Study of Markup languages code to identify their differences. 1. XHTML is more advanced that HTML. Discuss 2. List five markup languages you are familiar in the order of their date of invention. 3. What do you understand by DHTML? Describe its origin and unique features. 4. Briefly explain how HTML came into existence. 5. Highlight the strengths and weaknesses of SGML / HTML that led to the evolution of XML. 4

5 1. History of XHTML 3. Available at: Accessed 14 January, Accessed 14 January, Addison Wesley Longman Accessed 14 January, The History of XML 3. Available at: Accessed 14 January, Ross Shannon 3 (2008) The History of HTML. Available at: Accessed 14 January, Accessed 14 January, The History of HTML by mary Belliss. Available at: Accessed 14 January, history.htm Accessed 14 January, Accessed 14 January, Accessed 14 January, Week 4: Introduction to HTML and XHTML The objective of this topic is to introduce the students to the concept of HTML and other markup languages like the XHTML and XML. At the end of this class the students will be able to know how browser fetches page, create an HTML file, define HTML tags, create an XML file, the differences HTML and XHTML files and also about Document Type Definition. First Hour HTML file, WWW, XHTML, differences between XHTML & HTML, overview of XML, Document Type Definition (DTD). Practical Hour Study of how browser fetches web page from a server by requesting a particular page address. Creation of simple HTML file using text editor. Study of an XML file. 1. Explain briefly how browsers fetch web pages. 2. What do you understand by HTML file? 3. List & explain the advantages of using XHTML over HTML. 4. Highlight the differences between XHTML & HTML using examples where appropriate. 5. State the characteristics of an XML file Accessed 14 January, Accessed 14 January, Castro 2 E. (2006). HTML, XHTML & CSS: Visual Quick Start (pp ). (6 th ed.) Peachpit Press. ISBN: Terry 1, 2 F. (2007). Web Development and Design Foundations with XHTML (pp ). (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: X. 5. Griffin 1 J, Morales, C. and Finnegan, J. (2003). Web Design and Development Using HTML. Franklin, Beedle and Associates Incorporated. Wilsonville, Oregon U.S.A 5

6 Week 5: Basics of XTML Part 1 - Document Structure, Text formatting & Character Entities The objective of this week s lecture is to introduce to the students the basics/syntax of XHTML. At the end of this topic the students will be able to define XHTML tags, elements and document structure and also define some character using XTML character entities. Also the students will be exposed to the concept of text formatting in XTML. First Hour XTML tags & elements, Tags attributes, XTML document structure, Text formatting using XTML tags, Citation, Quotation & definition tags, XTML character entities. Practical Hour Starting XHTML document, identify tags, element in XHTML. Formatting text in bold, big, emphasized, italic, subscript, superscript format using XHTML code. Displaying some characters like <,>,&,, in XHTML using Character Entities. 1. Highlight the elements that are mandatory in XHTML. 2. How many parts does an XHTML document have? Mention the parts. 3. What is the use of tag attributes in XHTML elements? 4. Write a XHTML code that will display this text: CSC 224 Internet Technology in bold, italic, strong & emphasized format. 5. List out five common character entity in XHTML and their corresponding entity name & number Accessed 14 January, Castro 2 E. (2006). HTML, XHTML & CSS: Visual Quick Start (pp.56-62; 70-79). (6 th ed.)peachpit Press. ISBN: Terry 1, 2 F. (2007). Web Development and Design Foundations with XHTML (pp.31-35; 46-52). (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: X. 4. Terry 2 F. (2010) Web Development and Design Foundations with XHTML (pp ; 43-45). (5th ed.). Addison-Wesley. ISBN: Weeks 6 and 7: Basics of XHTML Part 1- Lists, Links & Images The students will be exposed to the rudiments of defining lists using different types of XHTML lists. They will be able to use the anchor tag to create several types of hyperlink to another document, an XHTML page, an image, a sound file, a movie, etc. Also students will know how to define images using XHTML image tag and understand the use of web colors on web pages. 6

7 First Hour (Week 6) Unordered lists, ordered lists, definition lists, Anchor tag & Href attribute, Target attribute Practical Hour (Week 6) Defining unordered list, ordered list and definition list with specific examples using XHTML code. First Hour (Week 7) Absolute and Relative links, the Anchor tag and id attribute, Image tag and the Src attribute, Alt attribute, Height and Width attributes, Border attribute and Web colors. Practical Hour (Week 7) Using anchor tags to create links on web pages and also using Image tag and its attribute to insert images to XHTML document. 1. Mention the three types of list we have in XHTML. 2. Write an XHTML code that will produce the following output. (a). Coffee (b) 1. Coffee. Milk 2. Milk. Sugar 3. Sugar 3. What do you understand by Definition lists? 4. What is the use of an anchor tag? State two attributes associated with the tag? 5. What is the difference between absolute link & relative links? 6. Write an XHTML code to produce a link to a web site name 7. What is the use of alternate and source attribute of an image tag? 8. Write an XHTML code to define an image whose source is 9. Which color space is used in defining color in web page? 10. Write an XTML code to set the background of your web page to color black and also the text to color yellow Accessed 14 January, Castro 2 E. (2006). HTML, XHTML & CSS: Visual Quick Start (pp ; ; ). (6 th ed.). Peachpit Press. ISBN: Terry 1, 2 F. (2007). Web Development and Design Foundations with XHTML (pp.38-41; 71-82; ; ). (3rd ed.). Pearson, Boston, M.A U.S.A. ISBN: X. 4. Terry 2 F. (2010) Web Development and Design Foundations with XHTML (pp 37-40; 47-52; ). (5th ed.). Addison-Wesley. ISBN: Weeks 8 and 9: Basics of XHTML Part 2 Tables, Forms, Image Map and Frames The objective of this lecture is to introduce the students to the use of tables, forms, frames & image maps. At the end this topics the students will be able to create & format tables using XHTML. Create forms using various form elements to collect user input on web page using XHTML code, create many links inside of a single image using XHTML image map and also to be able to separate various part of a page using frames. 7

8 First Hour (Week 8) Overview of XHTML Table, Table Caption, Table attributes, Header & footers, Column & Row span, Cell padding & cell spacing, Overview of Form tag, Input tag, The Form Elements (Text fields, Radio buttons, Checkboxes, Text area etc), Form attributes and its associated values. Practical Hour (Week 8) Creating and formatting table on web page using XHTML code, creating of forms using the various form elements. First Hour (Week 9) XHTML image maps, area tags, Overview of frames, frameset attributes. Practical Hour (Week 9) Creating Image Map and inserting Frames to web page. 1. What do you understand by cellspacing & cellpadding? 2. Write an XHTML code that will produce this output What is the use of table data tag? 4. Mention 4 form elements. 5. Which type of form element will you use when you want to define a form whereby a user is to select one out of a limited number of choices? 6. What is the difference between the method GET & POST? 7. What do you understand by the word Hotspots 8. What is the use of Image maps on a website? 9. Differentiate between Frame and Table. 10. What is the use of frame in designing a web page? 1. Accessed 14 January, Castro 2 E. (2006). HTML, XHTML & CSS: Visual Quick Start (pp ; ). (6 th ed.). Peachpit Press. ISBN: Terry 1, 2 F. (2007). Web Development and Design Foundations with XHTML (pp ; ; ). (3rd ed.). Pearson, Boston, M.A U.S.A. ISBN: X. 4. Terry 2 F. (2010). Web Development and Design Foundations with XHTML (pp142; ; ). (5 th ed.). Addison-Wesley. ISBN: Weeks 10 and 11: Basics of Cascading Style Sheets (CSS) Objective At the end of this topic the students will be able to format web page appearance using CSS in XHTML. 8

9 First Hour (Week 10) Overview of CSS, introduction to CSS syntax, Class & Id Selectors, CSS comments, Types of CSS (Internal & External) First Hour (Week 11) Adding styles inline, Inheritance & overlapping of CSS, Inserting style sheet, Multiple style sheets, List of CSS properties. Practical Hours (Weeks 10 and 11) Formatting of XHTML elements and tags using CSS properties. 1. What does CSS stand for? 2. How do you insert comment in a CSS file? 3. Which CSS property controls the text size and also change background color? 4. How do you add a background color for all <h1> elements? 5. How do you make each word in a text start with a capital letter? 6. How do you make the text bold? 7. Which tag is used to define an Internal style sheet? 8. Write the correct XHTML for referring to an External style sheet? 9. What are the three methods for using style sheets with a web page? 10. Which HTML attribute is used to define inline styles? 1. Accessed14 January, Castro 2 E. (2006). HTML, XHTML & CSS: Visual Quick Start (pp ). (6 th ed.). Peachpit Press. ISBN: Terry 1, 2 F. (2007). Web Development and Design Foundations with XHTML (pp ). (3rd ed.). Pearson, Boston, M.A U.S.A. ISBN: X. 4. Terry 2 F. (2010). Web Development and Design Foundations with XHTML (pp ). (5 th ed.). Addison-Wesley. ISBN: Weeks 12 and 13: Basics of JavaScript The objective is to introduce the students to the overview of JavaScript. At the end this class the students will be able to put JavaScript into a web page and also they will be equipped with a programming tool while coding using markup languages. First Hour (Week 12) Introduction to JavaScript, the strength of JavaScript, Putting JavaScript into HTML page, running & debugging JavaScript, Practical Hour (Week 12) Putting JavaScript into an HTML page First Hour (Week 13) JavaScript variables, JavaScript operators, JavaScript Statements, JavaScript loops, JavaScript Arrays, JavaScript Functions. Practical Hour (Week 13) 9

10 Writing of simple code using JavaScript programming concepts. 1. What is the relationship between JavaScript and objects? 2. What are the advantages of using JavaScript in web designing? 3. Write out the syntax of FOR loop? 4. Which JavaScript statement will you use in handling multi-way branch? 5. Mention two programming languages that are similar to JavaScript. 6. Inside which HTML element do we put the JavaScript? 7. Write JavaScript syntax to output Hello World 8. How do you write a conditional statement for executing some statements only if I is NOT equal to 5? 9. A program written by JavaScript is driven by what? 10. How many different kind of loops are there in JavaScript? Mention them Accessed 14 January, Terry 1, 2 F. (2007). Web Development and Design Foundations with XHTML (pp ). (3rd ed.) Pearson, Boston, M.A U.S.A. ISBN: X. 3. Terry 2 F. (2010) Web Development and Design Foundations with XHTML (pp ; ) (5th ed.) Addison-Wesley. ISBN: Pollock 2 J. (2010). JavaScript, A Beginner s Guide (3 rd ed.) McGraw-Hill Companies, USA. ISBN: Accessed 14 January, 2011 Week 14: Brief discussion of WYSIWYG HTML editors The objective is to expose the students to the concept of using WYSIWYG HTML editors to create web pages. At the end of the class the students will be able to develop web pages with WYSIWYG HTML editors without necessarily knowing the intricacies of HTML. First Hour Introduction to the concept of WYSIWYG, WYSIWYG HTML editor, advantages & disadvantages of WYSIWYG HTML editors. Practical Hour Using various WYSIWYG HTML editor tools to create web page. 1. What do you understand by WYSIWYG? 2. State three advantages of WYSIWYG HTML editors. 3. Mention three WYSIWYG HTML editors you are familiar with. 4. Explain the concept of WYSIWYG HTML editors. 5. How does a WYSIWYG HTML editor work? 1. Accessed 20 January,

11 2. WYSIWYG Wikipedia, the free encyclopedia 3. Available at: Accessed 20 January, Accessed 20 January, wysiwyg-html-editor/. Accessed 20 January, Accessed 20 January, Week 15: Revision All topics would be reviewed. Students would be expected to ask questions and seek further clarification on any topic that they could not understand during the course of the lectures. Also questions will be asked from students to ascertain the level of understanding of the course. First Hour Revision Second Hour Questions & Answers Revision Questions 1. Discuss briefly the history of HTML. 2. Using examples differentiate between XHTML & HTML. 3. Write a XHTML code that will display this text: HELLO WORLD in bold, italic, big strong & emphasized format. 4. Write an XHTML code to produce a link to a web site name 5. Mention four application layer protocols. 6. Illustrate with diagram the concept of Data flow within a network. 7. What is Document Type Definition (DTD)? 8. Write an XHTML code that will produce this output: First name: Last name: Age: 9. Give two examples to illustrate the part CSS syntax is made up of. 10. Describe JavaScript as a Language. 11. When do you use the method GET & POST in sending information on the Internet? 12. Discuss into details where to put JavaScript in HTML file. General 1. Accessed 14 January, Accessed 14 January, Castro 2 E. (2006). HTML, XHTML & CSS: Visual Quick Start. (6 th ed.) Peachpit Press, 456p. ISBN: Terry 1, 2 F. (2007). Web Development and Design Foundations with XHTML (3rd ed.) Pearson, Boston, M.A U.S.A, 736p. ISBN: X. 11

12 5. Terry 2 F. (2010) Web Development and Design Foundations with XHTML (5th ed. ) Addison-Wesley, 696p. ISBN: Addison Wesley Longman Accessed 14 January, Griffin 1 J, Morales, C. and Finnegan, J. (2003). Web Design and Development Using HTML. Franklin, Beedle and Associates Incorporated. Wilsonville, Oregon U.S.A 8. Accessed 15 January, Internet technologies ppt presentation. Available at: Accessed 14 January, Pollock 2 J. (2010). JavaScript, A Beginner s Guide (3 rd ed.) McGraw-Hill Companies, USA, 512p. ISBN: Accessed 14 January, 2011 Legend 1- Available in the University Library 2- Available in Bookshops. 3- Available on the Web. 4- Personal Collection 5- Departmental Library 12