## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma in Engineering Level: Diploma Branch: Computer Engineering/ Computer Science and Engineering / Cyber System and Information Security Course / Subject Code : DI01000141 Course / Subject Name : Computer Basics and Static Web Page Designing w. e. f. Academic Year: 2024-25 Semester: 1 st Category of the Course: Engineering Sciences (ESC) Prerequisite: Basic understanding of operating systems and computers is beneficial. Rationale: In any business organization the work of documentation, data analysis and presentation are typically carried out in an office set-up. Therefore it is necessary for students to learn various software tools to carry out these activities accurately. The aim of this course is to develop students' fundamental IT skills and develop skills in using various components of MS-office, Internet and Google applications. It will enable them not only to carry out these tasks in their profession in future, but equally useful for making their project reports and presentations during their progression in the diploma programmer. The Internet is widely used in different areas such as banking, e-commerce, education and many others. Different technologies are used to develop web applications but HTML is the core component in all types of applications for formatting and presenting the web content. This course will impart skill sets related to designing HTML web pages, using cascading style sheets and embedding Java script. This course will also serve as a prerequisite for the advanced web development technologies, which students will learn in the upcoming semester. ## Course Outcome: After Completion of the Course, Student will able to: | Sr.N o | Course Outcomes | RBT Level | |----------|-------------------------------------------------------------------------------------------------------------------|-------------| | 01 | Explain basics of computers and the internet. | Understand | | 02 | Use Microsoft Word, Excel, PowerPoint and Excel for word-processing, data Analysis and preparing a presentation. | Apply | | 03 | Design webpage using formatting, image and table tags. | Apply | | 04 | Use advanced HTML tags and CSS for designing interactive and semantic web pages. | Apply | | 05 | Write client-side script using Java Script. | Apply | *Revised Bloom's Taxonomy (RBT) ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma in Engineering Level: Diploma Branch: Computer Engineering/ Computer Science and Engineering / Cyber System and Information Security Course / Subject Code : DI01000141 Course / Subject Name : Computer Basics and Static Web Page Designing ## Teaching and Examination Scheme: | Teaching Scheme (in Hours) | Teaching Scheme (in Hours) | Teaching Scheme (in Hours) | Total Credits L+T+ (PR/2) | Assessment Pattern and Marks | Assessment Pattern and Marks | Assessment Pattern and Marks | Assessment Pattern and Marks | Total | |-------------------------------|-------------------------------|-------------------------------|--------------------------------|--------------------------------|--------------------------------|--------------------------------|--------------------------------|---------| | | | | | Theory | Theory | Tutorial / Practical | Tutorial / Practical | Marks | | L | T | PR | C | ESE (E) | PA / CA (M) | PA/CA (I) | ESE (V) | | | 0 | 1 | 4 | 3 | 0 | 0 | 20 | 30 | 50 | ## Course Content: | Unit No. | Content | No. of Hour s | % of Weightage | |-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------|-------------------| | 1 | Basics of Computer and internet : ● Introduction to a Computer, Generations of Computer, Operating system concepts, purpose and functions Operations of OS ● Window Basic: Creating folder, Deleting, Renaming, Searching files/Folders, Overview of Control Panel and Taskbar, Installation of MS-office/any application software ● Introduction to internet, Basic Internet Terminologies: Browser, Webpage, Website, URL, WWW, Introduction to Email ● Gmail: Create an account; Adding Contacts; Composing an Email; Creating and Managing Labels, Filters and Signature, ● Google Drive: Create a folder, Upload and Download Files/folders, Sharing Files/Folders, Forms: Create a Form; Validate a Form; Share a Form; Managing Response | 08 | 10% | ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma in Engineering Level: Diploma Branch: Computer Engineering/ Computer Science and Engineering / Cyber System and Information Security Course / Subject Code : DI01000141 Course / Subject Name : Computer Basics and Static Web Page Designing ## Microsoft office tools - Word, Excel, Power point ## MS Word: - Functions and features of Word processor, Text Basics: Typing the text, Alignment of text, Editing Text: Cut, Copy, Paste, Select All, Clear, Find & Replace - Text Formatting and saving file: New, Open, Close, Save, Save As, Formatting Text: Font Size, Font Style, Font Color, Use the Bold, Italic, and Underline, Change the Text Case, Line spacing, Paragraph spacing, Shading text and paragraph, Working with Tabs and Indents - Table and its options, Inserting rows or columns, merging and splitting cells, Arithmetic Calculations in a Table. - Working with pictures, Inserting Pictures from Files. - Mail Merge ## MS Excel: - Introduction to Excel interface, understanding rows and columns, Naming Cells, working with excel workbook and sheets - Perform Calculations with Functions: Creating Simple Formulas, Setting up your own formula, Date and Time Functions - date, today, now, date, dif, Logical Functions -and, or, xor, not, if, Lookup and Reference Functions- Vlookup, Mathematical Functions - sum, sumif, rand, round, floor, ceiling, Statistical Functions - min, max, average, small, large, count, countif, counta, Text Functions -text, concatenate, trim,value,upper,lower,exact. - Sort and Filter Data with Excel: Sort and filtering data, using number filter, Text filter, Custom filtering, Removing filters from columns, Conditional formatting - Create Effective pie and bar Charts to Present Data Visually - Pivot table ## MS Power point: - Introduction to PowerPoint interface, Creating slides and applying themes: Inserting new slide, changing layout of slides, duplicating slides, Copying and pasting slide, applying themes to the slide layout, changing theme color, Slide background, Formatting slide background, Using slide views - Using slide Master: Using slide master, inserting layout option, creating custom layout, Inserting placeholders, Formatting placeholders - Slide show option: Start slide show, Start shows from the current slide, rehearse timing, Creating custom slide show w.e.f. 2024-25 2. 16 30% ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma in Engineering Level: Diploma Branch: Computer Engineering/ Computer Science and Engineering / Cyber System and Information Security Course / Subject Code : DI01000141 Course / Subject Name : Computer Basics and Static Web Page Designing | 3. | Basics of HTML: ● Introduction to HTML ● Syntax - Tags and Attributes, Formatting Tags (Body, Heading Styles, Paragraph, sub, sup, head, title) ● Image Tags (img, figure, figcaption ), Hyperlink - a tag ● Tables (table, th, tr, td, col, colgroup, caption) | 08 | 15% | |------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------|-------| | 4. | Advanced HTML and CSS ● Lists : Sorted List, Unsorted List, Definition List ● Semantic Elements (header, nav, section, article, aside, footer) ● Media Tags (audio, video, embed,svg) ● HTML Form: Form Object, Form Elements and its, properties and events (Input types-Text, Date, email etc., Datalist, fieldset, legend, select, option, option group) ● Introduction to CSS, CSS Types (inline Style, Embedded Style, Linked Style) ● Applying CSS styles to web page elements, div Tag, CSS Selectors (Class and ID) | 16 | 30% | | 5 | JavaScript ● Introduction to Javascript,Basic Syntax - Statements, Comments, Data types, Variables , Operators- Arithmetic, logical, comparison ● Working with built-in functions (alert(), prompt(), parsing functions, eval()) ● Conditional statements, Loop statements ● Working with user defined functions ● Document Object Model - Accessing HTML elements into JavaScript (Window, Document, Form, Input elements , no script tag) ● HTML Events (on change, on click, onmouseover, onmouseout, onkeydown, onload) | 8 | 15% | | | Total | 56 | 100 | Suggested Specification Table with Marks (Theory): ## Distribution of Theory Marks (in %) | R Level | U Level | A Level | N Level | E Level | C Level | |-----------|-----------|-----------|-----------|-----------|-----------| | NA | NA | NA | NA | NA | NA | Where R: Remember; U: Understanding; A: Application, N: Analyze and E: Evaluate C: Create (as per Revised Bloom's Taxonomy) ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma in Engineering Level: Diploma Branch: Computer Engineering/ Computer Science and Engineering / Cyber System and Information Security Course / Subject Code : DI01000141 Course / Subject Name : Computer Basics and Static Web Page Designing ## References/Suggested Learning Resources: ## (a) Books: | Sr. No. | Title of Book | Author | Publication with place, year and ISBN | |------------|-------------------------------------------------------------|---------------------------------------|----------------------------------------------------------------------| | 1 | Fundamentals of Computers, Sixth Edition | Rajaraman V, Adabala N | Prentice Hall India Learning Private Limited, ISBN: 8120350677 | | 2 | MS-Office for Dummies | Wallace Wang | Wiley India, New Delhi, ISBN: 9788126578559 | | 3 | Sams Teach Yourself Internet and Web Basics All in One | Ned Snell, Bob Temple, Michael Clark | Sams Publishing, Indiana, USA, ISBN:0672325330 | | 4 | HTML 5 Blackbook | DT Editorial services | Dreamtech press, New Delhi, ISBN : 9789351199076 | | 5 | HTML & CSS: The Complete Reference | Thomas Powell | Tata McGrew Hills, New Delhi, 2010 ISBN : 9780070701946 | | 6 | JavaScript the Complete Reference | Thomas Powell | Tata McGrew Hills, New Delhi, 2004 ISBN : 9780070590274 | ## (b) Open source software and website: 1. www.w3schools.com/html/ 2. www.csstutorial.net/ 3. https://www.w3schools.com/css/default.asp 4. https://www.w3schools.com/js/default.asp 5. https://www.tutorialspoint.com 6. https://edu.google.com/intl/ALL\_in/teacher-enter/products/forms/?modal\_active=none 7. https://support.microsoft.com/en-us/training 8. https://edu.gcfglobal.org/en/topics/googleapps/ 9. https://www.udemy.com 10. https://www.coursera.org/ ## Suggested Course Practical List: The following practical outcomes (PrOs) are the subcomponents of the COs. These PrOs need to be attained to achieve the COs. ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma in Engineering Level: Diploma Branch: Computer Engineering/ Computer Science and Engineering / Cyber System and Information Security Course / Subject Code : DI01000141 Course / Subject Name : Computer Basics and Static Web Page Designing | Sr.No | Practical Outcomes (PrOs) | Unit No | Approx. Hrs. required | |---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------|---------------------------| | 1 | Create a Gmail Account and use its Features like adding contacts. Compose mail, create and manage labels, filters and signatures | I | 2 | | 2 | Create folder name semester_1 in D drive. Add any text and any photo file (.Jpeg, .png) in that folder. Upload that folder in goggle drive and manage it. | I | 3 | | 3 | Create an online form for registration of students (for any activity) and download its response. | I | 3 | | 4 | Create a text document incorporating different formatting features, inserting images and tables as per given sample. | II | 4 | | 5 | Use mail merge feature for sending invitation letters for expert lectures to 10 industries. | II | 4 | | 6 | Create spreadsheet, Analyze data using formulas and functions and present it through charts. Also apply a pivot table to analyze data. | II | 4 | | 7 | Create a professional presentation incorporating various formatting features, inserting media and action buttons. | II | 4 | | 8 | Develop HTML/Web page using various formatting tags as per given sample. | III | 2 | | 9 | Use image tags to create a web page and Use hyperlink tag to navigate through different web pages as per given sample. | III | 4 | | 10 | Use HTML table tags to create web pages as per given sample. | III | 2 | | 11 | Use a sorted, Unsorted, Definition list to create a web page as per given sample page. | IV | 4 | | 12 | Use semantic tags to organize web page contents as per given sample. | IV | 2 | | 13 | Create a student registration webpage using different HTML form elements. | IV | 4 | | 14 | Use inline, internal and external style sheets for the student registration form and bank account form created in previous practical. | IV | 4 | ## GUJARAT TECHNOLOGICAL UNIVERSITY ## Program Name: Diploma in Engineering Level: Diploma Branch: Computer Engineering/ Computer Science and Engineering / Cyber System and Information Security Course / Subject Code : DI01000141 Course / Subject Name : Computer Basics and Static Web Page Designing | 15 | Use different CSS elements to create and format your Profile Page (Note: use CSS Background, Text, Font, Tables, Links, Images, Margin etc) | IV | 2 | |------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------|-----| | 16 | Use JavaScript to perform the following operations: a. find roots of quadratic equation B. find the highest from given three values. | V | 2 | | 17 | Use JavaScript to a. Check whether the given character is a vowel or consonant using a switch case. b. Print first 10 even numbers. | V | 2 | | 18 | Use JavaScript to change the background color of a webpage as selected by the user from a list of colors given in the combo box. | V | 2 | | 19 | Use JavaScript to perform arithmetic operations on two numbers entered into textboxes. Use Radio buttons to select arithmetic operations (Addition, Subtraction, Multiplication and Division). Display the result in another textbox. | V | 4 | | | TOTAL | | 60 | ## Note - i. More Practical Exercises can be designed and offered by the respective course teacher to develop the industry relevant skills/outcomes to match the COs. The above table is only a suggestive list. - ii. Care must be taken in assigning and assessing practicals as it is a first-year study practicals. - iii. The following are some sample 'Process' and 'Product' related skills (more may be added/deleted depending on the course) that occur in the above listed Practical Exercises of this course required which are embedded in the COs and ultimately the competency. ## List of Laboratory/Learning Resources Required: The major equipment with broad specifications for the PrOs is a guide to procure them by the administrators to usher in uniformity of practicals in all institutions across the state. | Sr.No | Equipment Name with Broad Specifications | PrO. No. | |---------|-----------------------------------------------------------------------------|-------------| | 1 | Computer with basic configuration and Internet Facility | ALL | | 2 | MS-OFFICE | 1,2 | | 3 | Computer system with operating system and browser that supports javascript. | ALL | | 4 | HTML IDEs and Code Editors | ALL | ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma in Engineering Level: Diploma Branch: Computer Engineering/ Computer Science and Engineering / Cyber System and Information Security Course / Subject Code : DI01000141 Course / Subject Name : Computer Basics and Static Web Page Designing ## Suggested Project List: Only one project is planned to be undertaken by a student that needs to be assigned to him/her in the beginning of the semester. The micro-project could be industry application based, internetbased, workshop-based, laboratory-based or field-based. Each micro-project should encompass two or more COs which are in fact, an integration of PrOs, UOs and ADOs. Each student will have to maintain a dated work diary consisting of individual contributions in the project work and give a seminar presentation of it before submission. The duration of the micro project should be about 14during the course. The students ought to - 16 (fourteen to sixteen) student engagement hours submit micro-project by the end of the semester to develop the industry-oriented COs. A suggestive list of micro-projects is given here. This has to match the competency and the COs. Similar micro-projects could be added by the concerned course teacher: - 1) Word documents: Prepare Subject teacher shall assign documents/Reports to be prepared by each student covering all the major features of MS word. - 2) Slide Presentations: Prepare slideshow with all Presentation features such as: classroom presentation, presentation about department, presentation about institute, presentation of report. (Subject teacher shall assign a presentation to be prepared by each student). - 3) Spreadsheets: Prepare Pay bills/salary statements, tax statement, student's assessment record, and Students fees system, earning and expenditure statement of a company to ascertain profit-loss etc. using spreadsheet. (Teacher shall assign a spreadsheet to be prepared by each student). - 4) Micro project problems can be designed by the teachers by combining the features of multiple s/w tools. For e.g. data can be collected through Google form, can be organized and analyzed using excel and finally presented using a presentation/ document. - 5) Construct departmental website - 6) Develop any domain specific website (Food, Automobiles, Educational, and Business etc. - 7) Develop a website showcasing information about electronic wastes and its dumping process. ## GUJARAT TECHNOLOGICAL UNIVERSITY Program Name: Diploma in Engineering Level: Diploma Branch: Computer Engineering/ Computer Science and Engineering / Cyber System and Information Security Course / Subject Code : DI01000141 Course / Subject Name : Computer Basics and Static Web Page Designing ## Suggested Activities for Students: Other than the classroom and laboratory learning, following are the suggested student-related cocurricular activities which can be undertaken to accelerate the attainment of the various outcomes in this course: Students should perform following activities in groups and prepare reports of about 5 pages for each activity. They should also collect/record physical evidences for their (student's) portfolio which may be useful for their placement interviews: - Undertake micro-projects in team/individually. - Encourage Students for creating and designing forms related to Departmental work. - Encourage students to participate in the Microsoft-Office Specialist World Championship. - Identify tools used for web page development and present its features. - Undertake course 'HTML' available on Swayam online platform. (https://onlinecourses.swayam2.ac.in/aic20\_sp11/preview) - Undertake course 'JavaScript for Beginners Specialization' available on coursera online platform. (https://www.coursera.org/specializations/javascript-beginner) or any other such site. - Undertake course 'HTML, CSS, and JavaScript for Web Developers' available on coursera online platform. (https://www.coursera.org/learn/html-css-javascript-for- web-developers) or any other such site. - https://cs50.harvard.edu/college/2023/fall/weeks/8/ - https://cs50.harvard.edu/x/2024/weeks/8/ - CS50x 2024 - HTML, CSS, JavaScript https://www.youtube.com/watch?v=ciz2UaifaNM - https://www.w3schools.com/ - https://www.w3schools.com/w3css/default.asp - https://www.w3schools.com/js/default.asp * * * * * * *