ITI (Trade-COPA) Day-16

ITI COPA (Computer Operator & Programming Assistant) – Basic Notes

Topic- Web Design Concepts

1. Introduction to Web Design

In today’s digital world, websites play a very important role in communication, business, education, government services, and entertainment. Web design refers to the process of creating, designing, and maintaining websites. It includes planning the structure of web pages, writing content, designing layout, adding images, links, forms, and applying styles to make the website attractive and user-friendly.

Web design mainly uses technologies such as HTML, CSS, and sometimes scripting languages, along with content management systems (CMS) and web authoring tools.

2. Concepts of Static and Dynamic Web Pages

2.1 Static Web Pages

A static web page is a type of web page where the content remains the same for all users. These pages are written using HTML and CSS only, and they do not change unless the developer manually edits the source code.

Characteristics of Static Web Pages

  • Fixed content

  • Same information for all users

  • Simple to create

  • Loads faster

  • No database connection

Technologies Used

  • HTML

  • CSS

Examples

  • Personal profile page

  • Company information page

  • Simple brochure website

Advantages

  • Easy to design

  • Low cost

  • Secure (no database)

  • Fast loading

Disadvantages

  • No user interaction

  • Difficult to update large websites

  • Not suitable for complex applications

2.2 Dynamic Web Pages

A dynamic web page displays different content to different users. The content can change automatically based on user input, time, database data, or other factors.

Characteristics of Dynamic Web Pages

  • Content changes dynamically

  • Uses server-side scripting

  • Connected to databases

  • Supports user interaction

Technologies Used

  • HTML

  • CSS

  • JavaScript

  • PHP, ASP.NET, Python, etc.

  • Database (MySQL, SQL Server)

Examples

  • Social networking sites

  • E-commerce websites

  • Online banking systems

Advantages

  • Interactive

  • Easy content management

  • Suitable for large websites

Disadvantages

  • Complex to develop

  • Requires server and database

  • More security risks

Difference Between Static and Dynamic Web Pages

Static Web PageDynamic Web Page
Fixed contentChanging content
No databaseUses database
SimpleComplex
FasterSlower than static
HTML & CSSHTML, CSS, scripts

3. Introduction to HTML

3.1 What is HTML?

HTML (HyperText Markup Language) is the standard language used to create web pages. It defines the structure and content of a web page using tags.

HTML is not a programming language; it is a markup language.

3.2 Features of HTML

  • Easy to learn

  • Platform independent

  • Supports multimedia

  • Works with CSS and JavaScript

  • Used by all web browsers

3.3 Structure of an HTML Document

An HTML document consists of:

  • <!DOCTYPE html> – Document type

  • <html> – Root element

  • <head> – Meta information

  • <title> – Page title

  • <body> – Main content

4. Various HTML Tags

4.1 Basic HTML Tags

  • <html> – Root tag

  • <head> – Header section

  • <title> – Title of webpage

  • <body> – Main content

4.2 Text Formatting Tags

  • <h1> to <h6> – Headings

  • <p> – Paragraph

  • <br> – Line break

  • <hr> – Horizontal line

  • <b> – Bold

  • <i> – Italic

  • <u> – Underline

4.3 List Tags

  • <ul> – Unordered list

  • <ol> – Ordered list

  • <li> – List item

4.4 Link and Image Tags

  • <a> – Hyperlink

  • <img> – Image

4.5 Table Tags

  • <table> – Table

  • <tr> – Table row

  • <td> – Table data

  • <th> – Table header

4.6 Form Tags

  • <form> – Form container

  • <input> – Input field

  • <textarea> – Text area

  • <button> – Button

  • <select> – Dropdown list

5. Concepts of Controls Used in Web Pages

Controls are input elements that allow users to interact with web pages, especially through forms.

Common Web Controls

  • Text box

  • Password box

  • Radio button

  • Check box

  • Submit button

  • Reset button

  • Dropdown list

Uses of Web Controls

  • Collect user information

  • Login forms

  • Registration forms

  • Feedback forms

Advantages

  • User interaction

  • Data collection

  • Improves website functionality

6. Concepts of CSS

6.1 What is CSS?

CSS (Cascading Style Sheets) is used to style and format HTML elements. It controls the appearance of web pages such as colors, fonts, layout, spacing, and alignment.

6.2 Features of CSS

  • Separates content from design

  • Improves website look

  • Reusable styles

  • Faster page loading

6.3 Types of CSS

1. Inline CSS

  • Applied directly inside HTML tag

2. Internal CSS

  • Written inside <style> tag

3. External CSS

  • Written in separate .css file

6.4 CSS Properties

  • Color

  • Background

  • Font

  • Border

  • Margin

  • Padding

  • Display

6.5 Applying CSS to HTML

CSS can be applied using:

  • Style attribute

  • <style> tag

  • <link> tag

7. Introduction to Open Source CMS

7.1 What is CMS?

A Content Management System (CMS) is software that helps users create, manage, and modify website content without coding knowledge.

7.2 Open Source Software

Open source software is software whose source code is freely available for use, modification, and distribution.

Advantages of Open Source CMS

  • Free to use

  • Easy content management

  • Community support

  • Customizable

7.3 Popular Open Source CMS

1. WordPress

  • Most popular CMS

  • Easy to use

  • Blogging and websites

2. Joomla

  • Flexible CMS

  • Used for portals and websites

Features of CMS

  • Themes and templates

  • Plugins and extensions

  • User management

  • Media management

8. Web Authoring Tools

What are Web Authoring Tools?

Web authoring tools help create websites easily using visual editors instead of manual coding.

Popular Web Authoring Tools

  • KompoZer

  • FrontPage

  • WordPress Editor

Advantages

  • Easy for beginners

  • No deep coding required

  • Faster development

9. Importance of Web Design for ITI COPA Students

  • Office website maintenance

  • IT support tasks

  • Basic web development jobs

  • Freelancing opportunities

  • CBT exam preparation

MCQ Questions (35 Questions – CBT Exam)

1. Web design is related to:

A) Hardware repair
B) Creating websites
C) Database only
D) Networking
Ans: B

2. Static web pages contain:

A) Dynamic content
B) Fixed content
C) Database
D) Scripts only
Ans: B

3. Dynamic web pages use:

A) Only HTML
B) Only CSS
C) Server-side scripting
D) Printer
Ans: C

4. HTML stands for:

A) HyperText Markup Language
B) High Text Machine Language
C) Hyper Transfer Machine Language
D) Hyper Tool Markup Language
Ans: A

5. HTML is a:

A) Programming language
B) Markup language
C) Database
D) Compiler
Ans: B

6. Which tag is used for paragraph?

A) <p>
B) <h1>
C) <br>
D) <title>
Ans: A

7. Which tag is used to insert image?

A) <image>
B) <img>
C) <src>
D) <pic>
Ans: B

8. Hyperlink tag is:

A) <link>
B) <href>
C) <a>
D) <url>
Ans: C

9. Which tag creates ordered list?

A) <ul>
B) <li>
C) <ol>
D) <dl>
Ans: C

10. <br> tag is used for:

A) Paragraph
B) Line break
C) Space
D) Image
Ans: B

11. Web controls are used for:

A) Design only
B) User interaction
C) Printing
D) Storage
Ans: B

12. Which is a form control?

A) <table>
B) <input>
C) <img>
D) <title>
Ans: B

13. CSS is used for:

A) Structure
B) Styling
C) Database
D) Security
Ans: B

14. CSS stands for:

A) Computer Style Sheet
B) Cascading Style Sheets
C) Creative Style System
D) Color Style Sheet
Ans: B

15. Inline CSS is applied:

A) In external file
B) Inside tag
C) In browser
D) In server
Ans: B

16. External CSS file extension is:

A) .html
B) .css
C) .js
D) .xml
Ans: B

17. CMS stands for:

A) Computer Management System
B) Content Management System
C) Control Management Software
D) Content Machine System
Ans: B

18. WordPress is a:

A) Browser
B) CMS
C) Compiler
D) Server
Ans: B

19. Joomla is an example of:

A) OS
B) CMS
C) Browser
D) Antivirus
Ans: B

20. Open source software means:

A) Paid software
B) Free software
C) Source code available
D) Trial software
Ans: C

21. KompoZer is a:

A) CMS
B) Web authoring tool
C) Browser
D) Server
Ans: B

22. FrontPage is used for:

A) Networking
B) Web designing
C) Programming
D) Database
Ans: B

23. <table> tag is used for:

A) Forms
B) Lists
C) Tables
D) Images
Ans: C

24. Dynamic websites are suitable for:

A) Small pages
B) Large applications
C) Offline use
D) Static data
Ans: B

25. CSS improves:

A) Security
B) Appearance
C) Database
D) Speed only
Ans: B

26. Which control allows multiple selection?

A) Radio button
B) Check box
C) Text box
D) Button
Ans: B

27. HTML file extension is:

A) .htm / .html
B) .css
C) .exe
D) .doc
Ans: A

28. <head> tag contains:

A) Images
B) Meta information
C) Forms
D) Tables
Ans: B

29. CMS reduces the need of:

A) Internet
B) Coding
C) Browser
D) Server
Ans: B

30. Web authoring tools are useful for:

A) Beginners
B) Hackers
C) Servers
D) Routers
Ans: A

31. HTML tags are written inside:

A) Brackets
B) Quotes
C) Angle brackets
D) Curly braces
Ans: C

32. CSS helps in:

A) Layout design
B) File storage
C) Email sending
D) Virus protection
Ans: A

33. Static websites are:

A) Interactive
B) Database driven
C) Non-interactive
D) Script based
Ans: C

34. Which is NOT a CMS?

A) WordPress
B) Joomla
C) KompoZer
D) Drupal
Ans: C

35. Web design knowledge is useful for:

A) IT support
B) Office work
C) Website maintenance
D) All of the above
Ans: D





Posted by at

No comments:

Post a Comment

Give your valuable feedback

Subscribe to: Post Comments (Atom)

ITI (Trade - COPA) Day-23

ITI COPA (Computer Operator & Programming Assistant) – Basic Notes TOPIC- PROGRAMMING LANGUAGE – PYTHON 1. Introduction to Programming...