Republic of the Philippines

UNIVERSITY OF EASTERN PHILIPPINES

University Town, Northern Samar
Web: http://uep.edu.ph Email: [email protected]

DEPARTMENT OF INFORMATION TECHNOLOGY

COLLEGE OF SCIENCE

MODULES IN BASIC COMPUTER

PROGRAMMING

Computer 1b

Mar Riel C. Abuke

Faculty, I.T Dept
 Republic of the Philippines
UNIVERSITY OF EASTERN PHILIPPINES
University Town, Northern Samar
Web: http://uep.edu.ph Email: [email protected]

DEPARTMENT OF INFORMATION TECHNOLOGY

COLLEGE OF SCIENCE

MODULE -1
UNIT-1 Introduction to Web Development and Computer History
Overview
Welcome to module 1! You and I will study and learn together about how HTML works
and what its main functions why we need to know more about it, also I will give you a brief
discussion about computer history and its components (Hardware and Software classifications).
In this unit and throughout the modules, we’ll be writing out HTML documents by hand, so the
first thing we need to do is launch a text editor. The text editor that is provided with your
operating system, such as Notepad (Windows) or TextEdit (Macintosh), will do for these
purposes. Other text editors are fine as long as you can save plain-text files with the .html
extension. You can use some of text editors like Sublime, Notepad++, etc. But for now I want
you to get a feel for making up document manually.

Learning Outcomes
i. Students will have a basic & thorough understanding of HTML & CSS
ii. Get a feel for how markup works, including an understanding of elements and
attributes.
iii. Student should be able to create local HTML pages and move them to a remote web
server.
iv. Upon completion, the students will have coded a handful of useful HTML & CSS
examples
v. See how browsers interpret HTML documents.
vi. Design and develop basic web pages using HTML and CSS.
vii. Use graphics in Web pages
viii. Use tables in Web pages
ix. Link pages so that they create a Web site
x. Design and develop web pages using CSS styles, internal and/or external style sheets.
xi. Design and develop web pages using CSS for layout.
1.1 Introduction to Computer History and Web Development

What is a Computer? Why we need to know more about Computer? How it can helps us to
our everyday task in office or just in the house particularly during this hard time where we
are facing a pandemic situation and most of the people are just staying at home. Those are
the questions that bothers us about computers that we want to know about it. I am a
Veterinary students why should I have to study this type of academic subject? Further, for
more clarification about computers let me introduce to you my dear students the basics
about computer.

 Computer and its functions

Think about some of the different ways that people use computers. In school, students
use computers for tasks such as writing papers, searching for articles, sending email, and
participating in online classes. At work, people use computers to analyze data, make
presentations, conduct business transactions, communicate with customers and
coworkers, control machines in manufacturing facilities, and do many other things. At
home, people use computers for tasks such as paying bills, shopping online, communicating
with friends and family, and playing computer games. And don’t forget that cell phones,
iPods®, BlackBerries®, car navigation systems, and many other devices are computers too.
The uses of computers are almost limitless in our everyday lives

Computers can do such a wide variety of things because they can be programmed. This
means that computers are not designed to do just one job, but to do any job that their
programs tell them to do. A program is a set of instructions that a computer follows to perform
a task. For example, Figure 1-1 shows screens from two commonly used programs, Microsoft
Word and Adobe Photoshop. Microsoft Word is a word processing program that allows you to
create, edit, and print documents with your computer. Adobe Photoshop is an image editing
program that allows you to work with graphic images, such as photos taken with your digital
camera.
Figure 1-1 A word processing program and an image editing program

Programs are commonly referred to as software. Software is essential to a computer

because it controls everything the computer does. All of the software that we use to make our
computers useful is created by individuals working as programmers or software developers. A
programmer, or software developer, is a person with the training and skills necessary to design,
create, and test computer programs. Computer programming is an exciting and rewarding
career. Today, you will find programmers’ work used in business, medicine, government, law
enforcement, agriculture, academics, entertainment, and many other fields.
This modules introduces you to the fundamental concepts of computer programming
using the HTML. Before we begin exploring those concepts, you need to understand a few basic
things about computers and how they work.
1.2 Hardware and Software
If you have ever shopped for a computer, you’ve probably seen sales literature listing
components such as microprocessors, memory, disk drives, video displays, graphics cards, and
so on. Unless you already know a lot about computers, or at least have a friend that does,
understanding what these different components do might be challenging. As shown in Figure 1-
2, a typical computer system consists of the following major components:
 The central processing unit (CPU)
 Main memory
 Secondary storage devices
 Input devices
 Output devices
Figure 1-2 Typical components of a computer system

Let’s take a closer look at each of these components.

The CPU
When a computer is performing the tasks that a program tells it to do, we say that the
computer is running or executing the program. The central processing unit, or CPU, is the part
of a computer that actually runs programs. The CPU is the most important component in a
computer because without it, the computer could not run software.
Main Memory
You can think of main memory as the computer’s work area. This is where the computer
stores a program while the program is running, as well as the data that the program is working
with. For example, suppose you are using a word processing program to write an essay for one
of your classes. While you do this, both the word processing program and the essay are stored
in main memory.
Main memory is commonly known as random-access memory, or RAM. It is called this because
the CPU is able to quickly access data stored at any random location in RAM. RAM is usually a
volatile type of memory that is used only for temporary storage while a program is running.
When the computer is turned off, the contents of RAM are erased. Inside your computer, RAM
is stored in chips, similar to the ones shown in Figure 1-5.
Figure 1-5 Memory chips (photo courtesy of IBM Corporation)
Secondary Storage Devices
Secondary storage is a type of memory that can hold data for long periods of time, even
when there is no power to the computer. Programs are normally stored in secondary memory
and loaded into main memory as needed. Important data, such as word processing documents,
payroll data, and inventory records, is saved to secondary storage as well.
The most common type of secondary storage device is the disk drive. A disk drive stores data by
magnetically encoding it onto a circular disk. Most computers have a disk drive mounted inside
their case. External disk drives, which connect to one of the computer’s communication ports,
are also available. External disk drives can be used to create backup copies of important data or
to move data to another computer.
Input Devices
Input is any data the computer collects from people and from other devices. The
component that collects the data and sends it to the computer is called an input device.
Common input devices are the keyboard, mouse, scanner, microphone, and digital camera. Disk
drives and optical drives can also be considered input devices because programs and data are
retrieved from them and loaded into the computer’s memory.
Output Devices
Output is any data the computer produces for people or for other devices. It might be a
sales report, a list of names, or a graphic image. The data is sent to an output device, which
formats and presents it. Common output devices are video displays and printers. Disk drives
and CD recorders can also be considered output devices because the system sends data to
them in order to be saved.
Software
If a computer is to function, software is not optional. Everything that a computer does,
from the time you turn the power switch on until you shut the system down, is under the
control of software. There are two general categories of software: system software and
application software. Most computer programs clearly fit into one of these two categories.
Let’s take a closer look at each.
 System Software - The programs that control and manage the basic operations of a
computer are generally referred to as system software. System software typically
includes the following types of programs:
i. Operating Systems An operating system is the most fundamental set of programs on a
computer. The operating system controls the internal operations of the computer’s
hardware, manages all of the devices connected to the computer, allows data to be
saved to and retrieved from storage devices, and allows other programs to run on the
computer.
 ii. Utility Programs A utility program performs a specialized task that enhances the
computer’s operation or safeguards data. Examples of utility programs are virus
scanners, file compression programs, and data backup programs. Software
Development Tools Software development tools are the programs that programmers
use to create, modify, and test software. Assemblers, compilers, and interpreters are
examples of programs that fall into this category

 Application Software - Programs that make a computer useful for everyday tasks are
known as application software. These are the programs that people normally spend
most of their time running on their computers. Figure 1-1, at the beginning of this
chapter, shows screens from two commonly used applications: Microsoft Word, a word
processing program, and Adobe Photoshop, an image editing program. Some other
examples of application software are spreadsheet programs, email programs, web
browsers, and game programs.

Brief Explanation:
In this point I will explain further what I had presented above topics, so we all know that
the essential tool in making a HTML file is a computer. So if you already have one then it is
better so you could start exploring and experimenting how to make html file on your own.
Be guided to our next topic which I will going to discuss/present to you the Introduction and
the entire tutorial how to make HTML file and create a simple web application with the
basics of CSS.

1.3 Web Development with WWW,HTML,CSS Overview

What is WWW?
 Stands for "World Wide Web." It is important to know that this is not a synonym for
the Internet. The World Wide Web, or just "the Web," as ordinary people call it, is a
subset of the Internet. The Web consists of pages that can be accessed using a Web
browser. The Internet is the actual network of networks where all the information
resides. Things like Telnet, FTP, Internet gaming, Internet Relay Chat (IRC), and e-
mail are all part of the Internet, but are not part of the World Wide Web. The Hyper-
Text Transfer Protocol (HTTP) is the method used to transfer Web pages to your
computer. With hypertext, a word or phrase can contain a link to another Web site.
All Web pages are written in the hyper-text markup language (HTML), which works
in conjunction with HTTP.
What is HTML?
 HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages.
 Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to
structure it to display.
Originally, HTML was developed with the intent of defining the structure of documents
like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific
information between researchers.

Now, HTML is being widely used to format web pages with the help of different tags
available in HTML language.
What is CSS?
 Stands for "Cascading Style Sheet." Cascading style sheets are used to format the
layout of Web pages. They can be used to define text styles, table sizes, and other
aspects of Web pages that previously could only be defined in a page's HTML.

CSS helps Web developers create a uniform look across several pages of a Web site.
Instead of defining the style of each table and each block of text within a page's
HTML, commonly used styles need to be defined only once in a CSS document. Once
the style is defined in cascading style sheet, it can be used by any page that
references the CSS file. Plus, CSS makes it easy to change styles across several pages
at once. For example, a Web developer may want to increase the default text size
from 10pt to 12pt for fifty pages of a Web site. If the pages all reference the same
style sheet, the text size only needs to be changed on the style sheet and all the
pages will show the larger text.

While CSS is great for creating text styles, it is helpful for formatting other aspects of
Web page layout as well. For example, CSS can be used to define the cell padding of
table cells, the style, thickness, and color of a table's border, and the padding around
images or other objects. CSS gives Web developers more exact control over how
 Web pages will look than HTML does. This is why most Web pages today incorporate
cascading style sheets.
How to create a simple HTML file/page?
Follow instructions:
Here we will just using notepad text formatting app which is provided already with
windows operating system. I’ll show you the step by step process on how to create a basic html
file using notepad.
i. First on your computer search notepad in search bar and open it. As you open you will
see the notepad actual form window.

Step 1 Step 2

ii. You can now create a HTML file using notepad. Just follow the HTML formatting so the
browser could interpret the file format into an html interpretable output.
 iii. To save the file to html readable format put .html after the assigned file name. Ex,
(sample1.html) where sample is the filename with .html as extension.

In Save as type select All Files, and select your preferred location on your computer where you
want to save the file, here my preferred location where I want to save my project is in the
desktop location, after just click the Save button
 After saving the file you will able to see this output, here I used google chrome as my default
web browser so the html file will automatically use the google chrome icon as shown in the
above picture.
iv. If you open the file sample1 which I created as my sample html project you will be able
to see a result something like this below.

Try practicing at home, you can use your laptops, desktop computers or even your cellular
phones, there’s a lot of html editor program available in the internet that can run in touch
mobile phone and install it.
End of the Unit . . .
 Activity 1
Instruction: Please use the answer sheet below after this page and put all of your answers there,
no need to copy the questions.
Questions:
i. In your own understanding define and explain what is a computer and how it helps
people in their daily workarounds. Minimum 5 stanzas (5pts)
ii. Give 5 computer output devices and 5 input devices. (5pts)
iii. As a Veterinary students, could it be helpful to use a computer in your study? State
your answer. Minimum 5 stanzas (5pts)
iv. List at least 5 projects that can be created using HTML? (5pts)

Key Terms
Computer, Hardware and Software, HTML, WWW, CSS
Feedback
You have just done module 1. If you have something you cannot clearly understand then
don’t hesitate or afraid to ask me, I am here to help and guide you throughout this course. Also
how did you find with the activities? I am pretty sure all of your answers are correct as it is your
own perceptions about computer and all of the things running to it.
Summary
In this module. We’ve discussed the basics of computers and how it works because I am
confident it will be your tools towards success and for more advances in facing work difficulties
why not try to digging in about programming such as basic in HTML, particularly in our present
time where most of human transactions gathered and happening online using internet.
In this point I will explain further what I had presented above topics, so we all know that
the essential tool in making a HTML file is a computer. So if you already have one then it is
better so you could start exploring and experimenting how to make html file on your own.
There’s a lot of tutorials about how to deal with HTML in the internet, you could get there and
try to practice at home.
 Republic of the Philippines
UNIVERSITY OF EASTERN PHILIPPINES
University Town, Northern Samar
Web: http://uep.edu.ph Email: [email protected]

DEPARTMENT OF INFORMATION TECHNOLOGY

COLLEGE OF SCIENCE

MODULE -1

Basic Computer Programming (Computer 1b)

ANSWER SHEET
Instructions: Put all your answers here and after you finished answering, you can forward
this to MOODLE and I will check it immediately. Add additional sheet if necessary.

Name : _________________ Course/Year Section: ________ Date: _______ Score : ______

Activity - 1

1. It Helps us to do our works faster and makes us hassle free, we can also make classes or
attend classes using Computer. We can store addresses, numbers, names so that we can easily
find or contact our co-workers or beloved once.

2.
Output Devices Input Devices
Printer Keyboard
Headphone Mouse
Speaker Scanner
Monitor Webcam
Video Card Microphone

3. It me to do my research or home works faster using the internet, I can also save my data and
organize my files so that it can easily to find. I can attend my online classes and it keeps me
updated to some announcements.

4. *Biography website
*Product landing page
*Contact Page with Form
*Restaurant menu page
*Fitness Club Page
References
Introduction to Computers and Programming
-https://www.pearsonhighered.com/assets/samplechapter/0/3/2/1/0321537114.pdf

Basic Programming References

-https://www.tutorialspoint.com/html/html_tutorial.pdf

WWW meaning
-Christensson, P. (2006). WWW Definition. Retrieved 2020, Oct 20, from
https://techterms.com

CSS meaning
-Christensson, P. (2006). CSS Definition. Retrieved 2020, Oct 20, from
https://techterms.com

Introduction to HTML. Create a basic HTML file

-http://www.hiteshpatel.co.in/practicals/Practicals_IT.pdf