Unit Overview

Web development is the process of creating websites for various purposes such as

 information sharing and

 facilitating online businesses.
In this unit,we will discuss about
 the World Wide Web (WWW) and its foundations
 the concept and uses of websites
 different types of HTML (Hypertext Markup Language) elements

4.1 World Wide Web (www),

 World Wide Web (www), commonly known as the Web

 WebisacollectionofwebsitesorwebpagesthatareaccessedovertheInternet

usingawebbrowser.TheWebisjustoneoftheservicesoftheInternet,andthemostpopularone.There
arealsomanyotherservicesthatareprovidedovertheInternetsuchas

 email,
 file transferandcommunicationservices.

Web is invented by imBerners-Leein1989inthefamouslaboratoryfoundinSwitzerlandknownasCERN.

When the Web was invented, it was formed out of four essential foundations:

 HTML,
 HTTP,
 a web server, and a
 web browser.
 HTML, which stands for HyperText Markup Language, is the language that is used
to create webpages.
 A web browser is a software used by users to view webpages.
 A web server,is a software that stores webpages and responds to
user requests that come through web browsers.
 HTTP stands for HyperText Transfer Protocol, is the set of rules that web browsers and web
servers use to communicate with each other.
 A website is a publicly accessible collection of interrelated webpages.
A website that is physically placed in one part of the world can be accessed from any other
part of the world.
Hypertext is used to link a webpage with other resources like another webpage, videos,
images, and the like.
 Application of website in efferent organization
1, in e-commerce:
to conduct online transactions.
Used to make orders products from their homes or workplaces.
Reduces the cost of transportation and increases the efficient use of our limited time.
2. In government
For accessed various governmental e-services e.g make applications for passports
3. Education
Used to make educational resources accessible to students.
Online learning
4.2. Website Design
It is concerned with the plan and design of various aspects of a website, such as layout,
navigation, appearance, and graphics.
The goal of a website design is to create a website that is appealing to its target audience.
Guidelines to consider when a website is designed.
1. Target Audience: website developer must know about the audiences (who uses the websites e.g
children, adult…. )
2. Navigation: WebPages should be logically organized to allow easy navigation. This is used for
users to find what they seek fast. A website with poor navigation confuses and drives away
visitors.
3. Consistency: The feel and look of WebPages on a website should be similar. We must achieve
better use of backgrounds, colors, typefaces, and the like throughout the website.
4. Simplicity: making our website simple and easy understandable by Appling various elements of a
website, such as the use of colors, graphics, typefaces….
5. Accessibility: website must including people with disabilities
 Websites can be developed using
1. WYSIWYG (What you see is what you get) software like Adobe Dreamweaver.
2. Simple text editors such as Notepad
Note: developing WebPages using simple text editors is a little more difficult than WYSIWYG software
4.3. HTML Basics
 Elements of a webpage are
1. headings,
2. tables,
3. paragraphs,
4. images, and others
HTML is markup language that uses different predefined tags for creating the above website elements.
The current version of HTML is HTML5. Html documents are saved with a “.html” extension. For
example, home. html is a valid file name for an HTML document or a webpage.
4.3.1 HTML Tags and Elements
HTML tags are a set of predefined names enclosed in angle brackets. Each HTML tag has its
specific meaning, and web browsers are designed to interpret or render HTML tags.
Table 4.1 Sample HTML tags

There are three Major components of HTML document. They are

 Start tag :< tag name >
 Content : it can be text, image, video
 end tag :</ tag name >
There are html elements that haven’t end tags they are called void elements
Table 4.2 Void elements

4.3.2 Structure of HTML Documents

 All HTML documents or WebPages have a common structure.
 There are two sections of HTML documents.
1. <head>
2. <body>
 Figure 4.4 Structure of an HTML document

4.3.3 HTML Attributes

 They are used to define more properties to HTML elements.
e.g paragraphs have attributes that used to present the locations of paragraphs in web
browser. This attribute is called align .the align attribute have four values they are
Left, right, center and justify
 Attributes are written inside the start tag with attribute-value pairs(attribute=value). e.g
<p align =”right ” > This is a paragraph </p>
 Attributes are normally optional to many of the HTML tags. However, there are some HTML
elements that cannot function as intended without the use of some attributes
e.g The image element should have the “src” attribute which refers to the name and location of
the actual image
Attributes in the <video >element
 Controls attribute used to add controls like play, pause, and volume. „
 Width and height attributes control the width and height of the video
 src attribute is used to refer to the file name of the video
4.4. HTML Links
 They are used to navigate(move) from one webpage to another
 The links come in the form of text or images and are normally known as hyperlinks
 Hyperlinks can be distinguished by the hand symbol that the mouse cursor is turned to when the
mouse is hovering over the hyperlinks.
4.4.1 Links to other Pages
The anchor tag () is used to create hyperlinks.
Syntax:<a href =”URL”> clickable text < /a>
1. <a> = anchor tag
2. Href= is the attribute that the URL of the destination webpage is assigned to.
3. URL stands for Uniform Resource Locator. It is used to reference the address of the linked
webpage.
4. clickable text visible to the user when the webpage is displayed on the web browser. When
this is clicked, the user will be redirected to the given URL.
Example

 Another important attribute of the anchor tag is the “target” attribute.

The “target” attribute and its values
Using Image as HTML link
Example

URL
1. Absolute
2. Relative
Absolute URL: includes the protocol, the hostname, as well as path of the webpage. In other
words, it will have a form such as this: http://www.somewebsite.com/somefile.html „
Relative URL: is a path given relative to the location of the current webpage.
Example: somedirectory/somefile.html
4.4.2 Links to Page Sections
 This is a hyperlink that created with in different parts, or sections of the same page.
 This is especially useful in a webpage that has a large size content. Readers can easily go to different
sections of the page without having to scroll up and down.
The anchor tag is used in two different ways:
1. Using “name” attribute is used to designating names to specific locations and
2. Using “href” attribute is used to in creating links to the locations from other places on the same
page.
 Example

4.5. HTML Tables

HTML table is used to organize data in terms of rows and columns.
Table 4.4 HTML tags used for creating tables

 The number of rows of a table is determined by the number< tr>element

 the number of columns is determined by the number of <td>elements
 The table has a “border” attribute, and its values can be 1,.4…..
 If the border attribute is not used, the data will be displayed in the same way but without a border
 When the layout of the table needs the or
 “colspan” is an attribute that used to merging of multiple columns
 “rowspan” attributes that used to merging of multiple rows,
 The “colspan” and “rowspan” attributes can also be used to define the layout of an entire page.
4.6. HTML Lists
 They are used to present different types of lists.
 The types of lists are known as ordered lists, unordered lists, and description lists.
4.6.1 Ordered List
 <ol>is the tag that is used to create ordered/numbered lists.
 The <li>tag is used to insert individual items into the list. By default, Arabic numerals are
used for ordering purposes in ordered lists.
 the “type” attribute can be changed the default to some other form such as the English
alphabet.
Table 4.5 The “type” attribute and its values for the Ordered List

4.6.2 Unordered List

 <ul> the tag that is used to create unordered/bulleted lists.
 The default bullet type is “disc”.
 The “type” attribute is used to change the default type to any of the other types.
Table 4.6 the “type” attribute and its values for Unordered List
Example

 Lists can be nested. Nested list is A list that placed under any other type of list.
 4.6.3 Description List
 the<dl>tag is used to define the whole description.
 the<dt>tag is used to add the item that is to be described or defined.
 the<dd>tag is used add description or definition
example
 UNIT 5
HARDWARE TROUBLESHOOTING
AND PREVENTIVE MAINTENANCE
5.1. Hardware Troubleshooting
 Hardware troubleshooting is a systematic approach to locating the cause of a
fault(problem) in a computer system and solving technical problems.
 Hardware troubleshooting is the process of reviewing, diagnosing, and identifying
operational or technical problems within a hardware device or equipment.
 It aims is resolve
 physical and/or
 logical problems and issues within computing hardware.
 Software troubleshooting is the process of scanning, identifying, diagnosing, and resolving
problems, errors, and bugs in software.
 Many computer hardware problems can be solved by checking
 Working power outlet is plugged into.
 Everything is turned on.
 monitor is plugged into a power outlet
 Check that the keyboard, mouse, monitor, speakers, etc. are properly plugged
into the computer system.
 Try a different port to check if it is a port issue, or change the device if the device is
damaged.

5.1.2 Check POST

 POST stands for Power on Self-Test.
 This is part of a computer’s startup program that is used to diagnose
 Keyboard
 Random Access Memory (RAM)
 Disk drives and other hardware to make sure they are working properly.
 If the POST detects any errors in the hardware:
 It displays a text error message on the screen or
 emits a series of short and long beeps
5.1.3 Beep Codes
 Beep codes are sounds emitted by the computer during Power on Self-Test (POST).
 Each BIOS (basic input/output system) manufacturer has a unique beep sequence for hardware
failures.
Some of the beep codes and the respective problems
 One beep sound: indicate that the system is booting properly.
 No beep but the system turns on and runs fine: indicates your “beeper” may have died out
 No beep: The power supply is not plugged in or turned on. If not, the power supply is
completely dead.
 Steady, short beeps: The power supply may be bad or the voltages might be wrong.
Replacement would usually be necessary.
 Steady, long beeps: The power supply has gone bad.
 Long, continuous beep: Your Random Access Memory (RAM) sticks may have gone bad.
 One long, two short beeps: There has been a video card failure. Your first action is to try
reseating the video card. If reseating doesn’t work, replace the video card.
5.1.4 BIOS Information
 BIOS stand for basic input/output system.
 BIOS is a program used by a computer to start the computer system after it is powered on.
 It also manages data flow between the computer’s operating system (OS) and attached devices,
such as
 the hard disk,
 video adapter,
 keyboard,
 Mouse and printer.
 If the computer boots and stops after the POST, your computer has a BIOS setting problem.
 Fixing BIOS problems requires a good knowledge of computer hardware.
5.1.5 CMOS Error
 CMOS stands for Complementary Metal-Oxide Semiconductor
 It is an onboard chip that stores information ranging from the time and date to system
hardware settings
 Its primary function is to handle and store the BIOS configuration settings.
 If a computer shows a CMOS alert message on the screen, it indicates that the CMOS battery
needs to be replaced.
 5.1.6 Event Viewer
 Event Viewer records the following information about the problem:
 The problem that occurred
 The date and time of the problem
 The severity of the problem
 The source of the problem
 The event ID number
 Which user was logged in when the problem occurred
 steps to launch the Event Viewer:
1. On the Windows Search box, write event viewer
2. A pop-up menu appears
3. Click on Event Viewer
 Events are placed in different categories. the vast amount of troubleshooting related to the
Windows Log category, which contains the following items:
1. Application: The Application log records events related to Windows system components,
such as drivers and built-in interface elements.
2. System: The System log records events related to programs installed on the system.
3. Security: This log records event related to security, such as logon attempts and resource
access.
5.1.7 Hardware Problems
Device Manager is used to check the status of hardware devices.
The following steps can be followed to identify hardware problems in Windows based
Systems
1. Click on the Windows search box in the lower-left corner.
2. Type Control Panel.
3. Double-click the Control Panel on the Windows pop-up menu.
4. Click Hardware and Sound.
5. under Device and Printers, Click on Device Manager
The Device Manager has the following four benefits.
1. It works as a centralized utility from which all the hardware on a system
Can be configured.
2. It provides a central and organized view of all hardware- Microsoft
Windows-recognized hardware- installed on a system.
3. It helps to manage all the hardware devices installed on a system. This
includes keyboards, hard disk drives, USB devices, etc.
4. It helps to change hardware configuration options, manage drivers, enable
or disable hardware, identify conflicts between hardware devices, etc.

 Error icon displayed by Device Manager window for hard ware problems
 A yellow triangle with an exclamation mark indicates that the device has a problem.
 A red X means that the device is disabled or removed or Windows can’t locate the device.
 A downward-pointing arrow means the device has been disabled
 5.1.8 Diagnostic Tools
 Diagnostic Tools are software tools that are used for troubleshoot, diagnose
and solve hardware problems.
 The top two diagnostic tools are
1. Windows Performance Monitor and
2. Windows Resource Monitor.
1. Windows Performance Monitor
 It gives a quick view of vital information about
 Computer hardware
 CPU,
 Memory,
 Disk, and
 Ethernet
 used to examine the effects of Running applications in both real-time and
 for later analysis
 steps to view the Performance Monitor
1. Press CTRL + ALT + Delete button at the same time.
2. Choose Task Manager
3. Then click on the Performance tab to see the performance of the CPU and Other devices in
the computer.
2. Windows Resource Monitor.
 Windows Resource Monitor is better suited for tracking
 CPU,
 Network,
 Memory,and
 Disk usage.
 It allows to look into
 which processes are affecting the CPU,
 how much memory is being used,
 the disk activities, and
 The network information such as current TCP (Transport Control Protocol)
connections, and which processes are listening on which port.
 steps to open the Windows Resource Monitor:
1. On the Windows search box, write Resource Monitor
2. Click on the Resource Monitor

 Windows Resource Monitor lists the four sections for CPU they are
 Processes,
 Services,
 Associated Handles, and
 Associated Modules.
5.2. Basics of Preventive Maintenance
 Preventive maintenance is the practice of routinely taking measures in hardware
Administration that reduces the risk of hardware failures.
 It also improves the likelihood of quick recovery in the event that a failure does occur.
 Maintenance activities include
 performing diagnoses on different hardware components
 replacing any components that show signs of excess wear
 keeping hardware components clean from dust to
5.2.1 Preventive maintenance for Dust
 preventive maintenance against dust such as
 Cloth,
 chemical cleaners, and
 vacuum cleaners
1. Cloth
Microfiber cloth is made from a high-quality material that Absorbs and removes all fingerprints,
smudges, oils, and dust from the screen.
2. Chemical cleaner
 They are used to clean computer screens.
3. Vacuum Cleaner
 It is used to remove dusts from
 inside parts of a computer
 computers’ air ventilators,
 connection ports,
 keyboards
5.2.2 Run antivirus
 computer virus is a type of computer program that(when executed) replicates
itself by modifying other computer programs and inserting its own code.
 Computers infected with viruses when
 Computes are connected to the Internet or when
 flash disk is inserted into a computer system
 Antivirus, which is also known as anti-malware, is a computer program used to
Prevent, detect and remove malware.
 Some examples of free antivirus software are
 AVAST,
 AVG,
 AVIRA, and
 Bit defender.
5.2.3 Backups
 Backup is a process of transferring data or files from a computer system to external storage
devices.
 The backup file is used to recover data loss during computer failure.
 If up-to date backups are available, computer users will not have to worry about losing a
Day’s work in the event a PC is unexpectedly crashed.
  steps to backup on a Windows-based computer:
1. Open the Control Panel
2. Choose Backup and Restore
3. Choose Set up back-up
4. Click on Create a system image,
5. Select the storage drive either a hard disk, DVD disk, or a Network drive
6. Then click on the next button, and
7. Finally click on the start backup button
5.2.4 Scan Hard Disk
 Fragmentation is the scattering of portions of files in the disk in nonadjacent areas.
 Fragmentation slowing access to the files.
 Fragmentation occurs
 When old files are deleted from the hard disk and new files are saved.
 when a file is updated over time
 When a hard disk is new, the operating system puts files on the disk contiguously (next to
one another).
 A defragmenter utility program, commonly called a “defragger,” finds all the
Scattered files on the hard disk and reorganizes them into the smallest number of
Adjoining regions
 Defragmentation increases the computer’s speed.
steps to disk defragmentation:
1. Type Windows Administrative Tools on the Windows search box and click
on Windows Administrative Tools.
2. Double-click on Defragment and Optimize Drives.
3. Select the drive, and then click on the Optimize button.

5.2.5 Power Protection Devices

 Electric power causes many problems on computer hardware components.
Tools that are used prevent potential damages caused by electric powers.
1) Surge protector: Prevent your equipment from damage if there is a power surge(to protect
against too much electricity).
2) Stabilizer: deliver a consistent voltage level to the equipment. It Prevent your equipment
from damage caused by Power fluctuations
3) Voltage regulator: used to adjust for power sags or brownouts ( against too little
electricity)
4) UPS (Uninterruptible Power Supply): protect against the complete absence of
Electricity: it is kind of a short-term battery that (when the Power fails) will keep your
computer running long enough (5–30 minutes)
UNIT 6
FUNDAMENTALS OF PROGRAMMING
6.1. Types of Programming Languages
 Computer program is a set of instructions that commands a computer what to do.
 Programming languages are computer languages that are used to write different types of
computer programs
 types of computer programs
 machine language,
 assembly language, and
 high-level language
Machine Language
 It is a low-level computer language.
 It is a language in which Everything’s are represented in binary system (1 and 0).
 It Understandable by computer directly without any need for translation. That is why it is
very fast and uses memory efficiently.
 Writing programs in machine language is very difficult.
Assembly Language
 It is also a low-level computer language
 Everything’s are represented in symbols known as mnemonics. Though it is easier than
using a binary system but it is still difficult.
 programs that are written in assembly language are translate to machine language by
Software is known as Assembler
High-Level Language
 High-level languages are closer to human
 It allows programmers to focus more on the problem they want to solve than on the
programming language.
 Examples of high-level programming languages
 C,
 C++,
 Java,
 C#,
 Python, Perl, and Ruby.
 high-level language programs cannot be directly executed by the computer
 programs that are written high-level language are translate to machine language by
 Compiler or
 Interpreter
 Compilers translate programs written in high-level language all at once into machine
language.
 Programming languages that use compilers are C, C++, Java, and C#.
 Interpreters translate and execute programs a statement at a time.
 Programming languages that use interpreters include Python, Perl, and Ruby.
6.1.2 Syntax and Semantics