-
Notifications
You must be signed in to change notification settings - Fork 0
/
HTMLTAGS.txt
185 lines (86 loc) · 3.9 KB
/
HTMLTAGS.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
47
48
49
50
51
52
53
54
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<p> : Paragraph
<h1> : Headings. Can be <h1> through <h6>. Ordered from Largest in size to Smallest.
<body> : Contains things that will actually be displayed to the page.
<div> : Generic flow container. Has no effect until styled with CSS. "Division". Divides the page into sections. Divs can contain any other text or HTML element.
ATTRIBUTES (They have a name and a value):
ID: A value that can be added to a tag to identify it.
- Contained within the opening tag e.g.<div id="intro">
DISPLAYING TEXT:
<p> : Paragraph
<span> : Contain short pieces of text or other HTML. For use on lines of text that are inline.
<em> : Italicizes Text
<strong> : Emboldens text
Line Break (Only uses an opening tag):
<br>
Unordered List (A list of bullet points): <ul>
<li> : List items to be contained within an unordered list. </ul>
Ordered List (A list of numbered items): <ol>
<li></li>
IMAGES:
A self closing tag. Contains the attribute src (source). A URL or other file location.
<img src="image-location.jpg" />
Alt attribute: The description of the image (allows screen reader accessibility)
<img src="#" alt "A cute little brown bear" />
VIDEOS: Require an opening and closing tag
<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>
width and height determine the size of the video player within the webpage.
controls attribute allows the video player to have basic video controlls.
the text "video not supported" will only be displayed if the browser cannot load the video.
FORM:
For transferring User Entered Data
<form></form>
action= attribute is needed to tell where the information will be sent.
method= attribute is needed to tell how the information will be sent
method=get: for shorter, less secure transmissions
method=post: for longer, more secure transmissions
post sends the information invisbly
<form action="processingscript.php" method="post">
</form>
INPUT:
A form control, allowing input from a user.
It can be one of many types, including a text field, a checkbox, or a submit button.
input has no content and therefore does not warrant a closing tag.
<input type="text"> or simply <input> is a standard textbox
<input type="password">
<input type="submit" value="Click this button to Submit">
input is a self-closing tab
TEXTAREA:
A large multi-line textbox.
The number of rows and columns can be defined with
rows & cols
<textarea rows="5" cols="20">A big load of text</textarea>
SELECT & OPTION:
Two tags which work together to make drop-dow select boxes
<select>
<option>Option 1</option>
<option>Option 2</option>
<option value="third option">Option 3</option>
</select>
The value sent will be the text within the <option></option>,
unless the value= attribute is set. In which case that
value will be sent.
This can start off with an option already selected.
<option selected>Rodent</option> would pre-select "Rodent" from the items.
NAME:
An essential attribute that allows other languages
to interpret the results of the forms.
<input type="text" name="talkingsponge">
NOAH's ARK CONTACT (full) FORM (example)
<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name"></p>
<p>Species:</p>
<p><input name="species"></p>
<!-- remember: 'type="text"' isn't actually necessary -->
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual"> Asexual</p>
<p><input type="submit"></p>
</form>
-->The .php is an extension which allows us to handle the submitted data.