Exercises (seatwork/lab exercise/hw) 20%
Quiz 30%
Long Test / Practical Test 50%
WELCOME
INTRODUCTION TO
WEB DEVELOPMENT
MEARSK V. DIAZ
COMPUTER SCIENCE TEACHER
Simple things should be simple, complex
things should be possible. – Alan Kay
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HISTORY HTML TAGS SAMPLE ACTIVITY
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Once upon a time, back when there
weren’t any footprints on the Moon,
some farsighted folks decided to
see whether they could connect
HISTORY
several major computer networks
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
invented the World
Sir Tim Berners-Lee
Wide Web in
1989.
He is the Director
HISTORY of the World Wide
Web Consortium
(W3C)
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
This wasn’t a new idea, but his simple
Hypertext Markup Language (HTML)
managed to thrive while more ambitious
hypertext projects floundered.
HISTORY Hypertext originally meant text stored
in electronic form with cross-reference
links between pages.
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Hypertext Markup Language is a
language for describing how text,
graphics, and files containing other
information are organized and linked.
HISTORY
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
By 1993, only 100 or so computers
throughout the world were equipped to
serve up HTML pages.
Those interlinked pages were dubbed
HISTORY the World Wide Web (WWW), and
several web browser programs had
been written to enable people to view
web pages.
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HISTORY
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HISTORY
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
diazsardines.atspace.eu
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HISTORY
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HISTORY HTML TAGS SAMPLE ACTIVITY
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML works its magic through
short codes called tags. Each tag
HTML TAGS consists of three parts:
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
An opening left angle bracket (<), also known as the
less-than sign.
The name of the element you want to use. Element
names are short alphanumeric codes such as p for a
paragraph, em for emphasis, and h1 for a first-level
heading.
A closing right angle bracket (>), also known as the
greater-than sign.
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
angle brackets
HTML TAGS
< html >
element name
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
angle brackets
HTML TAGS
< p >
element name
the word tag to refer to the element and its surrounding angle brackets, such as <p> or <em>
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
the word “element” is used to refer
to a specific item of HTML, such as
p or em.
the word “tag” to refer to the
HTML TAGS
element and its surrounding angle
brackets, such as <p> or <em>
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
If you add the <p> tag, for example, you're
telling the browser to display the text as
paragraph. You also have to tell the browser
when you want it to stop displaying the text with
that element, so you need to add a companion
called the closing tag.
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
angle brackets
HTML TAGS
< /p >
forward slash
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
<p> This is amazing! </p>
HTML TAGS opening tag closing tag
Together, the opening and closing tags create a
kind of container to which you add some text
(or even other elements)
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
<p> This is amazing! </p>
HTML TAGS opening tag closing tag
Together, the opening and closing tags create a
kind of container to which you add some text
(or even other elements)
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
<!DOCTYPE html>
All HTML documents must start with
a document type declaration
<html> </html>
HTML TAGS
The HTML document itself
<body> </body>
The visible part of the HTML
document
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
<!DOCTYPE html>
<html>
<body>
HTML TAGS
</body>
</html>
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Open Notepad.
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Save as file
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Choose All Files
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
File name:
Save to Desktop
HTML TAGS
DiazM.html
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Save your file
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Open your HTML file
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Open your HTML file
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Open your HTML file
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
The idea is that information
in the head of the page
somehow describes the
page but isn’t actually
displayed by a web browser.
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS Information placed in the
body, however, is displayed
by a web browser.
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
<meta charset="utf-8">
This tag defines the character set the page
will be written in—in this case UTF-8. This
tag should always come right after the
HTML TAGS opening <head> tag in your HTML
documents.
Without it, your pages could become
vulnerable to hackers.
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
<meta charset="utf-8">
Unicode is a character set. UTF-8 is
encoding.
Unicode is a list of characters with unique
HTML TAGS decimal numbers (code points).
A = 65, B = 66, C = 67 …
This list of decimal numbers represent the
string "hello": 104 101 108 108 111
W E B D E V E LOP M ENT HOME HISTORY SAMPLE ACTIVITY
<meta charset="utf-8">
Encoding is how these numbers are
translated into binary numbers to be
stored in a computer:
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY SAMPLE ACTIVITY
<meta charset="utf-8">
UTF-8 encoding will store "hello" like this
(binary):
01101000 01100101 01101100 01101100 01101111
HTML TAGS 104 101 108 108 111
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
heading
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
paragraph
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
unordered list
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Description List
HTML TAGS
<dl> - description list
<dt> - defines the term
<dd> - describes the term
W E B D E V E LOP M ENT HOME HISTORY SAMPLE ACTIVITY
Description List
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Attributes
All HTML elements can have attributes.
Attributes provide additional information
about an element.
Attributes are always specified in the start
HTML TAGS
tag.
Attributes usually come in name/value
pairs like: name="value"
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Language Attribute
The language of the document can be
declared in the <html> tag.
The language is declared with the
HTML TAGS lang attribute.
Declaring a language is important for
accessibility applications (screen readers)
and search engines:
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS disc
circle
square
none
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Type Attribute
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML <div> Tag
defines a division or a section in an HTML
document.
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML <div> Tag
defines a division or a section in an HTML
document.
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML <img> Tag
defines an image in an HTML page.
has two required attributes: src and alt.
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML <a> Tag
defines a hyperlink, which is used to link
from one page to another.
The most important attribute of the <a>
element is the href attribute, which
HTML TAGS indicates the link's destination.
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
An unvisited link is
underlined and blue.
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
DiazMExtra.html
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
<br>
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML <br> Tag
inserts a single line break.
is an empty tag which means that it has no
HTML TAGS end tag.
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
image as a hyperlink
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Style Attribute
Setting the style of an HTML element, can
be done with the style attribute.
HTML TAGS Background Color Text Alignment
Text Color Fonts
Text Size
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Background Color
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Text Color
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Fonts
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Fonts
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Text Size
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Text Size
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Text Alignment
HTML TAGS
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
HISTORY HTML TAGS SAMPLE ACTIVITY
W E B D E V E LOP M ENT HOME HISTORY HTML TAGS SAMPLE ACTIVITY
Create a network of webpages at least 3.
Name the 3 webpages Home, Biography
and Gallery respectively. It is up to you in
terms of design and contents but make sure
ACTIVITY that it is presentable and you are using all
the HTML tags including its attributes.
To be submitted on or before
August 30, 2019
COMPUTER PROGRAMMING HOME PROGRAM HISTORY CONTROL STRUCTURE ACTIVITY
All computer programs, no
matter how simple or how
complex, are written using one
CONTROL or more of three basic structures:
STRUCTURE
sequence, selection, and
repetition.
COMPUTER PROGRAMMING HOME PROGRAM HISTORY CONTROL STRUCTURE ACTIVITY
PROGRAM HISTORY CONTROL ACTIVITY
STRUCTURE
COMPUTER PROGRAMMING HOME PROGRAM HISTORY CONTROL STRUCTURE ACTIVITY
repeat for (each customer buying a TV)
enter the original price of the TV
calculate the discount by multiplying the original price by 15%
calculate the total due by subtracting the discount from the original price
print a bill showing the original price, discount, and total due
end repeat
1. Which control structures are used in the algorithm?
2. What will the algorithm print when the price of the TV
is P10,000?
3. How would you modify the algorithm so that it can be
used for only the first 10 customers buying a TV?
COMPUTER PROGRAMMING HOME PROGRAM HISTORY CONTROL STRUCTURE ACTIVITY
The 10 salespeople at Harkins Company are paid a 10%
bonus when they sell more than P15,000 in product;
otherwise, they receive a 5% bonus. Create an
appropriate algorithm using only the given instructions.
display the salesperson’s name and bonus
else
end if
end repeat
enter the salesperson’s name and sales
if (the sales are greater than 15,000)
calculate the bonus by multiplying the sales by 5%
calculate the bonus by multiplying the sales by 10%
repeat (10 times)