WELCOME TO
ICT CLASS
Presented by: Mrs. Analyn E. LLABAN
Are you familiar with
Programming?
What comes on your mind
upon hearing the word
programming?
Was it like navigating
a maze without a
map?
Today, we will...
• Define what programming
is
• Know how programming
works
• Value why programming is
important
• Where programming is
used
• Do’s and Don’ts in
Programming
In computing, Programming is
creating a set of instructions
that a computer can execute to
perform specific tash
• These instructions are written in a
programming language such as Python, Java,
C++, or JavaScript
• It enables the development of software,
applications, websites, games etc.
• Programming involves problem-solving,
logic, and creativity to design efficient and
effective solutions.
How programming works?
Step 1: Writing Code
A programmer writes code using a programming
language. The code contains instructions that tell
the computer what to do.
Example (Python Code for Adding Two Numbers):
Example (Python Code for
Adding Two Numbers):
This code tells the computer to add two numbers
and display the result.
Step 2: Compiling or Interpreting
Computers only understand machine code
(binary: 0s and 1s), so the written code must
be converted into machine language.
• Compiled Languages (C, C++, Java): Convert
the entire program into machine code
before running.
• Interpreted Languages (Python, JavaScript):
Execute code line by line without prior
compilation.
Step 3: Execution
Once the code is translated into machine
language, the computer follows the instructions
and performs the task. If there are errors (bugs),
debugging is needed to fix them.
Why programming
important?
1: Automate tasks
Programming helps automate repetitive tasks,
making processes more efficient.
Example: Automating data entry or file
organization.
2. Solves Problems
It allows us to develop solutions for complex
real-world problems.
Example: Google search algorithms help
find relevant information in milliseconds.
3. Powers Technology
Everything from smartphones to web
applications and AI systems runs on code.
Example: Social media apps like Facebook,
Instagram, and Twitter are powered by
programming.
Why programming
important?
4. Enhances career opportunites
Many industries require programming skills,
increasing job opportunities
Why programming
important?
5. Encourages Logical Thinking
Learning to program improves problem-solving
and critical thinking skills.
Why programming
important?
6. Enables innovation
From robotics to space exploration
programming drives technological
advancements.
Do’s and Don’ts in
Programming
Do’s in Programming:
• Write Clean & Readable Code –
Use meaningful variable names and
comments.
Do’s and Don’ts in
Programming
Do’s in Programming:
• Follow Best Practices – Use proper
indentation, spacing, and documentation.
Do’s and Don’ts in
Programming
Do’s in Programming:
• Debug & Test Regularly – Fix errors and
test your code frequently.
Do’s and Don’ts in
Programming
Do’s in Programming:
• Use Version Control – Tools like Git help
track changes and collaborate.
Do’s and Don’ts in
Programming
Do’s in Programming:
• Optimize Performance – Write efficient
and scalable code.
Do’s and Don’ts in
Programming
Do’s in Programming:
Keep Learning – Stay updated with new
technologies and programming languages.
Do’s and Don’ts in
Programming
Do’s in Programming:
Use Modular Code – Break code into functions
and reusable components.
Do’s and Don’ts in
Programming
Don’t s in Programming:
• Don’t Ignore Errors & Warnings – Always
address bugs and warnings.
Do’s and Don’ts in
Programming
Don’t s in Programming:
Don’t Hardcode Values – Use variables and
configurations instead.
Do’s and Don’ts in
Programming
Don’t s in Programming:
Don’t Overcomplicate Code – Keep it simple
and maintainable.
Do’s and Don’ts in
Programming
Don’t s in Programming:
Don’t Skip Comments – Document your code
for better understanding.
Do’s and Don’ts in
Programming
Don’t s in Programming:
Don’t Neglect Security – Avoid storing sensitive
data in plain text.
Do’s and Don’ts in
Programming
Don’t s in Programming:
Don’t Copy Code Blindly – Understand the logic
before using code from others.
Do’s and Don’ts in
Programming
Don’t s in Programming:
Don’t Reinvent the Wheel – Use existing
libraries and frameworks when possible.
Common Terminologies
Used in Programming
Basic Programming Terms
Algorithm – A step-by-step set of instructions
to solve a problem.
Common Terminologies
Used in Programming
Basic Programming Terms
Syntax – The rules and structure of a
programming language.
Common Terminologies
Used in Programming
Basic Programming Terms
• Variable – A container that holds data (e.g.,
numbers, text).
• Data Type – The kind of data a variable can
store (e.g., integer, string, boolean).
Common Terminologies
Used in Programming
Basic Programming Terms
• Function – A block of reusable code that
performs a specific task.
• Loop – A structure that repeats a block of
code (e.g., for, while loops).
• Conditional Statements – Used for
decision-making (if, else, switch).
• Array – A collection of elements stored
under one variable name.
Object-Oriented
Programming (OOP) Terms
• Class – A blueprint for creating objects.
• Object – An instance of a class containing
data and methods.
• Method – A function inside a class that
defines behavior.
• Encapsulation – Hiding data within a class
to protect it.
• Inheritance – A way for a class to inherit
properties from another class.
• Polymorphism – The ability of different
objects to use the same method in
•Function of HTML
• HTML (HyperText Markup Language) is the
standard language used to create and
design webpages. It structures web content
using elements like headings, paragraphs,
images, links, tables, and forms. HTML
provides the foundation for web
development by defining the elements that
a browser will render.
Example of HTML
Document
Parts of an HTML
Document
An HTML document consists of several
essential parts that define its structure and
content. Below is a breakdown of each part
with examples.
1. <!DOCTYPE html> – Document Type
Declaration
• Specifies the version of HTML being used.
• Ensures the browser correctly interprets
the document.
• In HTML5, it is written as:
Parts of an HTML
Document
2. <html> – Root Element
• The container for all HTML elements.
• It wraps the entire HTML document.
• The lang attribute specifies the
document's language (e.g., en for
English).
Parts of an HTML
Document
3. <head> – Head Section
Contains metadata (information about
the document) and links to external
resources like CSS and JavaScript.
Example:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
<link rel="stylesheet" href="[Link]">
<script src="[Link]"></script>
</head>
Parts of an HTML
Document
4. <body> – Body Section
• Contains all the visible content of
the webpage, such as text, images,
links, tables, and forms.
Example:
Parts of an HTML
Document
5. HTML Content Elements in <body>
A. Headings (<h1> to <h6>)
• Define different levels of headings.
• <h1> is the largest, <h6> is the
smallest.
• Example:
Parts of an HTML
Document
5. HTML Content Elements in <body>
B. Paragraphs (<p>)
• Used for text content
Example:
Parts of an HTML
Document
5. HTML Content Elements in <body>
C. Links (<a>)
• Used to create hyperlinks to other
pages or websites.
Example:
Parts of an HTML
Document
5. HTML Content Elements in <body>
E. Lists (<ul>, <ol>, <li>)
Unordered List (Bulleted)
Example:
Parts of an HTML
Document
5. HTML Content Elements in <body>
E. Lists (<ul>, <ol>, <li>)
Ordered List (Numbered)
Example:
Parts of an HTML
Document
5. HTML Content Elements in <body>
F. Tables (<table>)
• Organizes data in rows and columns.
Parts of an HTML
Document
5. HTML Content Elements in <body>
G. Forms (<form>)
• Used to collect user input (e.g., text,
email, passwords).
Parts of an HTML
Document
6. Layout and Structural Elements
• These elements help structure the
content of a webpage.
Example:
Complete example of an HTML
Document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<a href="[Link]">Home</a> |
<a href="[Link]">About</a>
</nav>
<section>
<h2>About Me</h2>
<p>This is a brief introduction about me.</p>
<img src="[Link]" alt="My Photo">
</section>
<footer>
<p>© 2025 My Webpage</p>
</footer>
</body>
</html>
Try this background for online class.
*Please delete this section before downloading.