1

BASIC WEB CONCEPTS

2
Web Design Terminology
Network is defined as several computers connected together
with purpose of sharing resources including data, information
and hardware

Internet is a worldwide collection of computers interconnected
to one another either wired or wireless including all computers
that we use at home, in schools, offices and many other places

World Wide Web is a collection of resources and information
interconnected via the internet

Web page is a formatted page within a web site that may
contain text, graphics, video and multimedia. This page can be
viewed and explored on the internet by the use of a program
called Web Browser

Home page is usually the first web page of a web site which
usually provides information about the web site, its purpose and
contents

3
Basic Web Design Principles
Balance this concept has to do with symmetrical and
asymmetrical arrangements of the text and objects of the web
page.
Proximity is the placement of elements with logical
relationship close to each other. Proper arrangement of related
elements would facilitate user interaction and understanding of
the web site
White spaces are literacy blank spaces which are placed around
web page elements which allow readability of important texts
and draw attention to images on the web site
Contrast is a way to differentiate the elements of a web page. It
can be achieved by varying the sizes, character and colors of the
elements, to arrange them according to which needs to be
emphasized and which ones supports
Focus is that element in the web site that you want the attention
of the viewer drawn to first.
Unity is the sense of agreement and harmony of all the
elements of the web site. It is achieved by using the same
company logo, font color, font style composition and other
elements that it decide to use with consistency and repetition


4
Essential Elements of Web Contents

Accuracy ensuring the reliability of the
information you publish on the web site

Readability is designing and composing the
content of the web pages making them easily
accessible and readable

Concise is using the least words to convey a
message to the internet

5
Hypertext Markup Language
4
(HTML4)
6
Hypertext Markup Language is language
used for creating web pages
Tags are the basic units or building blocks of
an HTML file. It is enclosed in angle brackets

7
Two types of tags:
Container tag have the start and end tag
a. <p>
b. <i>
empty tag does not have the start and end tag
a. <br>
b. <hr>

8
Output:
9

10
Headings
- Are container tags which format text using pre-
defined values for size and color
- There are 6 heading tags and they are <h1></h1>,
<h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>
and <h6></h6> each having its own effects on texts

11
Output:
12
Paragraph
Is a container tag and it is the <p></p>

13
Output:
Line Breaks
- Use <br> tag which creates line break or new line
Horizontal Rules
- Allow you to underline headlines or complete
lines of text
- Use <hr>
14

15
Output:
16
Output:

17
LISTS
Ordered Lists
- First type of list and also known as numbered list
- Numbered usually starting at 1 (but can be
changed using the start attribute)
- Use the container tag <ol></ol> and each item is
specified by the empty tag <li>

Different types of numbering:
1. 1 for regular numbering (1, 2, 3, 4, etc)
2. a for lowercase alphabet (a, b, c, d, etc)
3. A for uppercase alphabet (A, B, C, D, etc)
4. i for lowercase Roman numeral (i, ii, iii, iv, etc)
5. I for uppercase Roman numeral (I, II, III, IV, etc)

18

19

20

21

22

23

24
25

26
27

28

29

30

31
32
33

34

35

36

37

38

39

40

41

42

43

44

45

46
Cascading Style Sheets
47

48

49

50

51

52

53

54
JavaScript
55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80
81
Hypertext Markup Language
5
(HTML5)

82

83

84

85
Output:

86

87

88
89
Output:

90

91
Output:
92

93

94
Output:
95

96

97