Includes HTML tags, CSS and Javascript

1. Basic Web
Developme
nt
1

2. BASIC WEB CONCEPTS
2

3. 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

4. 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

5. 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

6. Hypertext Markup Language
4
(HTML4)
6

7. 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

8. 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

9. Output:
9

10. 10

11. 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

12. Output:
12

13. Paragraph
 Is a container tag and it is the <p></p>
13

14. 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. 15

16. Output:
16

17. Output:
17

18. 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. 19

20. 20

21. 21

22. 22

23. 23

24. 24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33

34. 34

35. 35

36. 36

37. 37

38. 38

39. 39

40. 40

41. 41

42. 42

43. 43

44. 44

45. 45

46. 46

47. Cascading Style Sheets
47

48. 48

49. 49

50. 50

51. 51

52. 52

53. 53

54. 54

55. JavaScript
55

56. 56

57. 57

58. 58

59. 59

60. 60

61. 61

62. 62

63. 63

64. 64

65. 65

66. 66

67. 67

68. 68

69. 69

70. 70

71. 71

72. 72

73. 73

74. 74

75. 75

76. 76

77. 77

78. 78

79. 79

80. 80

81. 81
Hypertext Markup Language
5
(HTML5)

82. 82

83. 83

84. 84

85. 85

86. Output:
86

87. 87

88. 88

89. 89
Output:

90. 90

91. 91

92. Output:
92

93. 93

94. 94

95. Output:
95

96. 96

97. 97