basic web development
TRANSCRIPT
![Page 1: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/1.jpg)
Basic Web Developme
nt
1
![Page 2: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/2.jpg)
BASIC WEB CONCEPTS
2
![Page 3: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/3.jpg)
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
![Page 4: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/4.jpg)
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 repetition4
![Page 5: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/5.jpg)
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
![Page 6: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/6.jpg)
Hypertext Markup Language
4
(HTML4)
6
![Page 7: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/7.jpg)
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
![Page 8: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/8.jpg)
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
![Page 9: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/9.jpg)
Output:
9
![Page 10: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/10.jpg)
10
![Page 11: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/11.jpg)
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
![Page 12: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/12.jpg)
Output:
12
![Page 13: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/13.jpg)
Paragraph
Is a container tag and it is the <p></p>
13
![Page 14: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/14.jpg)
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
![Page 15: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/15.jpg)
15
![Page 16: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/16.jpg)
Output:
16
![Page 17: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/17.jpg)
Output:
17
![Page 18: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/18.jpg)
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
![Page 19: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/19.jpg)
19
![Page 20: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/20.jpg)
20
![Page 21: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/21.jpg)
21
![Page 22: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/22.jpg)
22
![Page 23: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/23.jpg)
23
![Page 24: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/24.jpg)
24
![Page 25: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/25.jpg)
25
![Page 26: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/26.jpg)
26
![Page 27: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/27.jpg)
27
![Page 28: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/28.jpg)
28
![Page 29: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/29.jpg)
29
![Page 30: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/30.jpg)
30
![Page 31: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/31.jpg)
31
![Page 32: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/32.jpg)
32
![Page 33: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/33.jpg)
33
![Page 34: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/34.jpg)
34
![Page 35: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/35.jpg)
35
![Page 36: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/36.jpg)
36
![Page 37: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/37.jpg)
37
![Page 38: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/38.jpg)
38
![Page 39: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/39.jpg)
39
![Page 40: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/40.jpg)
40
![Page 41: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/41.jpg)
41
![Page 42: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/42.jpg)
42
![Page 43: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/43.jpg)
43
![Page 44: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/44.jpg)
44
![Page 45: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/45.jpg)
45
![Page 46: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/46.jpg)
46
![Page 47: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/47.jpg)
Cascading Style Sheets
47
![Page 48: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/48.jpg)
48
![Page 49: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/49.jpg)
49
![Page 50: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/50.jpg)
50
![Page 51: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/51.jpg)
51
![Page 52: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/52.jpg)
52
![Page 53: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/53.jpg)
53
![Page 54: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/54.jpg)
54
![Page 55: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/55.jpg)
JavaScript
55
![Page 56: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/56.jpg)
56
![Page 57: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/57.jpg)
57
![Page 58: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/58.jpg)
58
![Page 59: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/59.jpg)
59
![Page 60: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/60.jpg)
60
![Page 61: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/61.jpg)
61
![Page 62: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/62.jpg)
62
![Page 63: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/63.jpg)
63
![Page 64: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/64.jpg)
64
![Page 65: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/65.jpg)
65
![Page 66: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/66.jpg)
66
![Page 67: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/67.jpg)
67
![Page 68: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/68.jpg)
68
![Page 69: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/69.jpg)
69
![Page 70: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/70.jpg)
70
![Page 71: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/71.jpg)
71
![Page 72: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/72.jpg)
72
![Page 73: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/73.jpg)
73
![Page 74: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/74.jpg)
74
![Page 75: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/75.jpg)
75
![Page 76: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/76.jpg)
76
![Page 77: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/77.jpg)
77
![Page 78: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/78.jpg)
78
![Page 79: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/79.jpg)
79
![Page 80: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/80.jpg)
80
![Page 81: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/81.jpg)
81
Hypertext Markup Language
5
(HTML5)
![Page 82: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/82.jpg)
82
![Page 83: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/83.jpg)
83
![Page 84: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/84.jpg)
84
![Page 85: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/85.jpg)
85
![Page 86: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/86.jpg)
Output:
86
![Page 87: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/87.jpg)
87
![Page 88: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/88.jpg)
88
![Page 89: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/89.jpg)
89
Output:
![Page 90: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/90.jpg)
90
![Page 91: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/91.jpg)
91
![Page 92: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/92.jpg)
Output:
92
![Page 93: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/93.jpg)
93
![Page 94: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/94.jpg)
94
![Page 95: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/95.jpg)
Output:
95
![Page 96: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/96.jpg)
96
![Page 97: Basic web development](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55aa74cf1a28ab687f8b4580/html5/thumbnails/97.jpg)
97