Course Title: Internet Web Technology

Teacher

Geeti darshani panigrahi

Category

Core Courses

Course Attendees

Still no participant

Course Reviews

Still no reviews

Course Code: CUTM2488(1-4-1)

Course Objectives

  • Choose best technologies for solving web client/server problems.
  • Create conforming web pages.
  • Use JavaScript for dynamic effects.
  • Use JavaScript to validate form input entry.
  • Use appropriate client-side or Server-side applications.

 

Course Outcomes

COs  Course outcomes  Mapping COs with POs (High-3, Medium-2, Low- 1)
 CO1  Able to gain knowledge on Internet,Websites,client Server model  PO1 (3)
 CO2  Ability to design HTML Web pages  PO2(3)
 CO3  Ability to develop the web pages by using XHTML,CSS,Javascript and JQuery.  PO3 (3), PO5(1)

 

 

Evaluation system

As per the University Norms

 

Topic wise distribution period

Sl. No Topics Hours
1 Web development introduction 7
2 Introduction to HTML 15
3 CSS 13
4 JavaScript 24
5  jQuery 10
Total 72

 

Course Syllabus

Module-I: Web development introduction (10hr)

Internet, Internet protocols (TCP/IP, UDP, HTTP) Browser, WWW, Search engine, Client server architecture, URL, Webpages, Websites and webservices

PPT regarding: Web Development

 

Module-II:HTML (15hr)

Basics: HTML introduction, HTML editor, HTML basics and documents, HTML Tags and Attributes, Types of HTML Tags, Basic Tags (HTML Tag. Head Tag, Title Tag, Body Tags).

Page formatting: Adding a new Paragraph, adding a line break, inserting a blank space, changing page background.

Text Formatting: Html Headings, Formatting elements (Bold text, Important text, Italic text, deleted text, Inserted text, Subscript text, Superscript Text), Comments, Horizontal Lines.

Creating Lists (Ordered List, Unordered Lists, Definition Lists)

HTML Tables: Table borders, sizes, Table headers, Padding and spacing, colspan and rows pan, Table styling and col group.

Others: Images, Text link, Image link, HTML forms, Frames and XHTML.

PPT regarding: HTML

Practice

  1. Write a program in create a HTML page, which has properly aligned paragraphs with image along with it.
  2. Create a table to show your class timetable
  3. Use tables to provide layout to your HTML page describing your college use <span> and <div> tags to provide a layout to the above page instead of a table layout.
  4. Create a HTML page by using basic HTML Tags, Table Tags, List Tags, Image Tags, Forms.
  5. create a webpage HTML describing your department use paragraph and list tags. Apply various colours to suitably distinguish keywords, also apply font styling like italics, underline and two other fonts to words you find appropriate, also use header tag.
  6. Create your resume using HTML tags also experiment with colors, text , link , size and also other tags you studied.
  7. Create links on the words means when click on that word it will move to other pages.
  8. Insert an image and create a link such that clicking on image takes user to other page
  9. Change the background colour of the page. At the bottom create a link to take the user top of the page.
  10. Create a webpage with HTML describing your department use paragraph and list tag.
  11. Use frames such that page is divided into 3 frames 20% on left to show contents of pages, 60% in centre to show body of page, remaining on right to show remarks.
  12. Embed audio and video into your HTML webpage.

 

 Module -III : CSS( 13hr)

Introduction, Benefits of CSS, CSS Syntax,  CSS selector(Class selector,Id selector, Grouping selector,Universal selector), External style sheet, internal stylesheet, inline style sheet,and the class selector , div and span tags , CSS properties(  background-image,background -color, border style, height, width , text align) box model in CSS(margin, border, padding )  Positioning using CSS.

PPT regarding: CSS

Practice:

  1. Design a web page of your home town with an attractive background color, text color, an Image, font etc. (use internal CSS).
  2. Write an HTML page that contains a selection box with a list of 5 countries, when the user selects a country, its capital should be printed next to the list; Add CSS to customize the properties of the font of the capital (colour, bold and font size).
  3. Use External CSS to format your class timetable as you created.
  4. Use Inline CSS to format your resume that you created.
  5. Use External, Internal, and Inline CSS to format college web page that you created.
  6. Design a web page using CSS (Cascading Style Sheets) which includes the following: a) Use different font, styles: In the style definition you define how each selector should work (font, colour etc.). Then, in the body of your pages, you refer to these selectors to activate the styles.

 

Module -IV : Javascript(24hr)

Javascript introduction, Javascript object model, Variables, Datatypes, Operators, Control flow(if-else, for loop, while loop, do-while loop),Type conversion, Popup boxes ,Functions, Arrays,Strings,Javascript classes and object,Document object model,HTML events and calling javascript functions on events,Accessing HTML form elements, Email and password validations.

PPT regarding: Javascript

Practice:

  1. How to add javascript to HTML.
  2. Write a JavaScript program to find out factorial of a number.
  3. Write a program to find out the perimeter and area of a circle using JavaScript.
  4. Write a program in JavaScript to check whether the number is even or odd.
  5. Write a program in JavaScript to check whether the number is palindrome or not.
  6. Write a program in JavaScript to calculate the days by entering two dates.
  7. Write a program in JavaScript to calculate the age from date of birth.
  8. How to create dropdown list using JavaScript.
  9. How to disable radio button using JavaScript.
  10. Create a JavaScript calculator using HTML , CSS, and JavaScript.
  11. Write a java script program to test the first character of a string is uppercase or not.
  12. Write a java script function to print an integer with commas as thousands of separators.
  13. Write a java script for loop that will iterate from 0 to 15 for each iteration, it will check if the current number is odd or even, and display a message to the screen.
  14. Write a java script program which compute, the average marks of the following students then this average is used to determine the corresponding grade.
  15. Write a java script program to sum the multiples of 3 and 5 under 1000
  16. Create a “registration form “with the following fields
  17. a) Name (Text field)
  18. b) Password (password field)
  19. c) E-mail id (text field)
  20. d) Phone number (text field)
  21. e) Sex (radio button)
  22. f) Date of birth (3 select boxes)
  23. g) Languages known (check boxes – English, Telugu, Hindi, Tamil)
  24. h) Address (text area)

Write JavaScript to validate the following fields of the above registration page.

Name (Name should contains alphabets and the length should not be less than 6 characters).

Password (Password should not be less than 6 characters length).

E-mail id (should not contain any invalid and must follow pattern [email protected]) Phone   number (Phone number should contain 10 digits only).

  1. How to make a popup using HTML, CSS, and JavaScript.

 

 

Module -V : jQuery(10hr)

jQuery concept, Adding jQuery to webpages, jQuery selector, jQuery event methods, jQuery effects(hide/show, fade, slide) Insertion of header/footer in HTML pages using jQuery.

PPT regarding: jQuery

Practice:

  1. Install jQuery script
  2. Selecting values, getting values, setting values.
  3. Adding jQuery to webpages.
  4. Use jQuery selector .
  5. Use jQuery event method and jQuery effects.

Session 1: _

Web development introduction: Internet, intranet, web development classification of web development.-

https://www.guru99.com/intranet-vs-internet-difference.html

https://www.youtube.com/watch?v=-1k9uXV3M10

Video Reference: YouTube

Session 2: -

Internet protocol and types of internet protocol, Difference between TCP/IP and UDP.

https://www.geeksforgeeks.org/types-of-internet-protocols/

https://www.youtube.com/watch?v=_2-tKEVE9cE

Video Reference: YouTube

Session 3: -

Client server architecture, Web browser, Web server

https://www.geeksforgeeks.org/client-server-model/

https://www.youtube.com/watch?v=_kT2wg_PEFc

Session 6&7

Define Webservice. Give comparison between webservice and web application, Components of web services

https://www.geeksforgeeks.org/what-are-web-services/

https://www.youtube.com/watch?v=2DBiSiffYN8

Session 8& 9

Domain name system, types of Domain name system and how it works.

https://www.javatpoint.com/computer-network-dns

https://www.youtube.com/watch?v=JkEYOt08-rU

Session 10&11&12-

Introduction to HTML, HTML Basics: HTML editor, HTML comment, HTML layout, HTML elements, HTML heading, HTML Tags, HTML paragraph

Practice-

  • How to write comments in HTML?
  • Explain the layout structure of HTML.
  • What are various heading elements used to add heading in HTML?
  • How to define an HTML heading in HTML5?
  • How to add sub heading using HTML?
  • How to define documents body, paragraph, single line break?

https://www.geeksforgeeks.org/html/

Session 13&14

HTML text formatting: Html Headings, Formatting elements (Bold text, Important text, Italic text, deleted text, Inserted text, Subscript text, Superscript Text), Comments, Horizontal Lines.

Practice-

  • What are various formatting tags are available in HTML?
  • How to display HTML tags as a plain text in HTML?
  • How to highlighting a text in HTML?

https://www.geeksforgeeks.org/html/

Session 15 & 16 &17

HTML link, images, and HTML list

Practice-

  • How to create hyperlink?
  • How to create navigation link using HTML5
  • How to create links to section within the same page in HTML?
  • How to add images in the webpage?
  • How to set width and height of an image using HTML?
  • How to turn an image into a link in HTML?
  • How to add an image in the GIF format in HTML?
  • How to add description list of an element using HTML?
  • How to implement various types of list in HTML?

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 18&19&20

HTML tables

Practice-

  • Create a simple table in HTML using a table tag and also add rows and columns.
  • Explains the addition of the border to the HTML Table.
  • Describes the addition of Collapsed Borders in HTML.
  • Describes the addition of Table cell padding in HTML.
  • Explain the text align property in a table in HTML.
  • Explain the boarder space property to make the space between the Table cells.
  • Describe the use of row span and Col span attributes in HTML.
  • How to create nested table in HTML.
  • Create a table to show your class timetable

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 21 &22&23

HTML Form: HTML form attribute, HTML form elements, HTML input types, HTML input attributes and frame.

Practice-

  • Create one registration form.
  • Create one Sign up form
  • Create one Contact us form.
  • Create one Sign in form.
  • Use frames such that page is divided into 3 frames 20% on left to show contents of pages, 60% in centre to show body of page, remaining on right to show remarks.

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 24

Audio and video in HTML

Practice-

  • Embed audio and video into your HTML webpage

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 25&26

CSS: Introduction, Benefits of CSS, CSS Syntax

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 27 & 28

CSS selector(Class selector,Id selector, Grouping selector,Universal selector)

Practice-

  1. Write an HTML page that contains a selection box with a list of 5 countries, when the user selects a country, its capital should be printed next to the list; Add CSS to customize the properties of the font of the capital (colour, bold and font size).

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session29&30

 

CSS properties(  background-image,background -color, border style, height, width , text align) box model in CSS(margin, border, padding )  Positioning using CSS.

 

 

  1. Design a web page using CSS (Cascading Style Sheets) which includes the following: a) Use different font, styles: In the style definition you define how each selector should work (font, colour etc.). Then, in the body of your pages, you refer to these selectors to activate the styles.

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 31&32

 

External style sheet, internal stylesheet, inline style sheet,and the class selector , div and span tags.

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 33&34

 

  1. Use External CSS to format your class timetable as you created.
  2. Use Inline CSS to format your resume that you created.
  3. Use External, Internal, and Inline CSS to format college web page that you created.

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 35&36

Practice-

 

  1. How to create right aligned menu link using HTML and CSS?
  2. How to remove cell spacing from table using CSS?
  3. How to animate bullet in list using CSS?

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 37 &38

JavaScript:  JavaScript introduction, where to put JavaScript in an HTML document, JavaScript statements, JavaScript basic syntax.

 

Practice: -

  1. How to add JavaScript to HTML.

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 39&40

JavaScript output, JavaScript comment, JavaScript operator, Datatypes in JavaScript.

Practice-

  1. Write a java script program to test the first character of a string is uppercase or not.
  2. Write a java script function to print an integer with commas as thousands of separators.

 

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 41 &42

Variables in JavaScript, Global and local variables in JavaScript, Type conversion.

Practice-

 

  1. Write a program in JavaScript to calculate the days by entering two dates by using global variable.
  2. Write a program in JavaScript to calculate the age from date of birth by using local variable.

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 43&44

JavaScript Functions, Arrays,Strings .

 

Practice-

  1. Write a javascript program to find out factorial of anumber by using user defined function.
  2. Write a program to find out the perimeter and area of a circle using javascript.
  3. Write a program to access an element ,add an elements and change elements in array.
  4. Write javascript program to concatenate two string.
  5. Write JavaScript program to convert the string into uppercase and lowercase form.

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 45&46

Control flow(if-else, for loop, while loop, do-while loop)

Practice-

Write a program in javascript to check wheather the number is even or odd.

  1. Write a program in javascript to check wheather the number is pallindrome or not.
  2. Write a java script for loop that will iterate from 0 to 15 for each iteration, it will check if the current number is odd or even, and display a message to the screen.
  3. Write a java script program which compute, the average marks of the following students then this average is used to determine the corresponding grade.
  4. Write a java script program to sum the multiples of 3 and 5 under 1000
  5. Write a program sum of positive number only by using while loop.

 

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 47

 

Popup boxes

Practice-

  1. How to make a popup using HTML, CSS, and JavaScript.

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 48&49

JavaScript classes and object, Document object model

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 50&51

HTML events and calling javascript functions on events.

Practice-

  1. Difference between mouseover , mouseenter and mousemove events in javascript.
  2. How to trigger events in JavaScript.
  3. How to handle JavaScript event in HTML?

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 52&53&54

Accessing HTML form elements.

 

Practice-

  1. Create a “registration form “with the following fields
  2. a) Name (Text field)
  3. b) Password (password field)
  4. c) E-mail id (text field)
  5. d) Phone number (text field)
  6. e) Sex (radio button)
  7. f) Date of birth (3 select boxes)
  8. g) Languages known (check boxes – English, Telugu, Hindi, Tamil)
  9. h) Address (text area)
  10. How to create dropdown list using JavaScript.
  11. How to disable radio button using JavaScript.

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

session 55&56&57

Email and password validations

Practice-

  1. Write JavaScript to validate the following fields of the above registration page.

Name (Name should contains alphabets and the length should not be less than 6 characters).

Password (Password should not be less than 6 characters length).

E-mail id (should not contain any invalid and must follow pattern [email protected]) Phone   number (Phone number should contain 10 digits only).

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 58&59

JQuery: JQuery concept, Adding JQuery to webpages.

Practice-

  1. Adding JQuery to webpages.
  2. Install jQuery script
  3. Selecting values, getting values, setting values.

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 60&61

jQuery selector

Practice-

  1. Use jQuery selector
  2. Create one button and a textbox. Onclick on the button the text written in textbox should display

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Session 62 & 63&64

JQuery event methods, JQuery effects(hide/show,fade, slide) Insertion of header/footer in HTML pages using JQuery

 

Practice-

  1. Use jQuery event method and jQuery effects.
  2. How to handle events in dynamically created elements in jQuery?

https://www.geeksforgeeks.org/html/

https://www.w3schools.com/html/

Our Main Teachers