Original subtitles

1 1

Let's not learn about HTML attributes, 2

2

classes and ids. 3

3

And then also learn 4

4

about a couple more different HTML elements. 5

5

So what are attributes? 6

6

Well in HTML some elements can have attributes 7

7

and these attributes basically describe elements. 8

8

So that's for example create a link 9

9

and this link will be inside of this paragraph, okay. 10

10

So as you already saw we can nest elements 11

11

inside one another, for example this h1 is inside the body 12

12

and this p element is also inside the body. 13

13

So the child elements of the body element okay. 14

14

So I forgot to mention that in the last lecture. 15

15

Anyway so let's not add this link element 16

16

inside of the paragraph. 17

17

And for that, we use the anchor element. 18

18

So there's an a, and then in here 19

19

we put a text that we want to be displayed on the page. 20

20

So just like before and the paragraph, for example 21

21

so here I want to place a link to my profile on Udemy. 22

22

So let's say Jonas on Udemy 23

23

but now how do we tell the browser where this link 24

24

should actually point to? 25

25

And that's where the attributes come in. 26

26

So, as I said, we used attributes to describe elements. 27

27

And in this case, we described this anchor element 28

28

using the href attributes. 29

29

And so href stands for hypertext reference. 30

30

And so here you put the URL where this link should point to. 31

31

So let's actually get my profile page on Udemy. 32

32

So Jonas Udemy that's actually a link, 33

33

I think yes, so let's copy this and put it here. 34

34

Okay, give it a safe. 35

35

And now well here we have to reload it. 36

36

Sometimes it doesn't work. 37

37

Sometimes we have to reload okay, 38

38

so when you don't see it changing right away 39

39

just reload and then it will work. 40

40

So here we have this now blue link. 41

41

And so that's the standard format of any HTML link. 42

42

And when we now click this indeed, 43

43

it goes to my user page here on Udemy. 44

44

And of course you can use your own link 45

45

or whatever link you want to use. 46

46

And then we can go back and we're back on this page. 47

47

Okay, so that's what we used this href attribute for. 48

48

We described the anchor element by telling it 49

49

which URL it should go to, 50

50

whenever we click on the link. 51

51

Now here on the page, 52

52

you can actually see that there's text here. 53

53

So this link is right in line with the previous text. 54

54

So the text here in this paragraph 55

55

that's why we call the anchor element an inline element. 56

56

So it flows in line with the rest of the text. 57

57

Now on the other hand, for example 58

58

this h2 element here is a so-called block element. 59

59

Because as we see here, this heading is not in line 60

60

with the text of the previous element. 61

61

It created a new line 62

62

which only contains this content of this heading right? 63

63

So all of this year is this huge block. 64

64

And so it's a block element not an inline element, okay. 65

65

So we can actually include this link here in a sentence. 66

66

So let's say you can learn more about it 67

67

and then let's say on Udemy. 68

68

All right here, we need a space, okay. 69

69

And so now this looks like a normal sentence 70

70

and then with a link in it, 71

71

and we can even put a period after it ,great. 72

72

So let's check out another element which needs attributes 73

73

which is the image element. 74

74

So let's do that after this somehow space here 75

75

and for the image we use the img tag 76

76

and then this source attribute. 77

77

And then in here we can specify any image 78

78

from the current working folder 79

79

or we can also set an image URL. 80

80

So let's do that. 81

81

So what I'm doing here is, 82

82

since we're talking about HTML and CSS on this page, 83

83

I want to copy this image here, okay. 84

84

So the image address, so I'm getting the image address here 85

85

and now I'm pasting it here. 86

86

And so this jpg image is now the source of this image. 87

87

Okay, and now you see here that 88

88

with the auto save and edit this closing slash 89

89

and that's because the image element 90

90

does not have a closing tag. 91

91

It only has an opening tag which is a img of course 92

92

but then we don't have a closing tag. 93

93

And so we can close this opening tab 94

94

by the end using this slash here at the end of the tag. 95

95

But it's actually not mandatory, 96

96

it works just the same without this one here. 97

97

Okay, so image doesn't have a closing tag 98

98

because we don't really put any 99

99

like written content in here. 100

100

It's not like we say now a course image 101

101

or something and then close the image, right. 102

102

That would make no sense. 103

103

And so that's why images don't need the closing tag. 104

104

Now if we check it indeed here now is the image. 105

105

Okay, so that's the source attribute. 106

106

And as you see, 107

107

different elements have different attributes. 108

108

So for example 109

109

the href attribute is not going to do anything on an image 110

110

and the opposite is true for the source attribute. 111

111

So if we use source here on the anchor element, 112

112

it's not gonna have any effect. 113

113

And so when you really learn HTML properly 114

114

you gonna learn exactly which attributes 115

115

you can use on which elements. 116

116

But it's actually pretty straight forward, 117

117

and you get used to it pretty quick. 118

118

Now there are two very important attributes that 119

119

we can actually use on all elements 120

120

and which we can use to identify them. 121

121

And these are classes and ids. 122

122

So we use classes and ids to essentially name elements 123

123

so that we can then select them in CSS 124

124

in order to style them. 125

125

And actually we also use ids and classes to select elements 126

126

from JavaScript when we do dumb manipulation. 127

127

So classes and ids are crucial to identifying elements 128

128

and especially classes. 129

129

And here's how that works. 130

130

And again we can add them on any element. 131

131

So let's add one here to this paragraph. 132

132

So all we have to do is class 133

133

and let's call this one the first okay. 134

134

Because it's the first of these two paragraphs 135

135

and then here class again and you guessed it. 136

136

This one is gonna be called second. 137

137

And we gonna use this in the next lecture 138

138

to then select the two paragraphs 139

139

and style them differently. 140

140

So then according to these classes, 141

141

now as I said beside classes, 142

142

we also have ids and they work like this. 143

143

So let's add it here to the image 144

144

and let's call it course image just like this. 145

145

Now the difference between classes and ids 146

146

is that ids have to be unique, okay? 147

147

So each id can only be used once on the page 148

148

while classes can be used over and over again. 149

149

So I could have more paragraphs called second 150

150

but I could not have another element called course image. 151

151

All right, in practice we actually almost never used ids 152

152

to style elements or to select them from JavaScript. 153

153

It's just a better practice to use classes. 154

154

Okay, and now to finish let's create an HTML form 155

155

so that we can use some more attributes. 156

156

Okay, so let's do that here after the image. 157

157

And now I'll also introduce you 158

158

to the idea of basically creating boxes. 159

159

So we want the contents of this forum to be in a box. 160

160

And so there are many ways of creating boxes in HTML. 161

161

The most generic box is a div. 162

162

So let's say div 163

163

and let's give it a name here using an id again, 164

164

does that so we use classes and ids in different places 165

165

so that you can learn how to use both. 166

166

So I'm calling this box here your name 167

167

because that's what we gonna do in this form. 168

168

So just an input asking for the user's name basically. 169

169

Okay, and here it already close the element for me. 170

170

Or and maybe you're also noticing that for the names here. 171

171

So the id name but also for class names in CSS, 172

172

we use the dash to separate two different words. 173

173

So in JavaScript we would use camel case. 174

174

So course, and then like this, right. 175

175

But the convention is yes 176

176

as is to write it like this. 177

177

Of course it will also work the other way 178

178

but this is just a convention, okay. 179

179

And let's create just a heading for this form, 180

180

your name here, okay. 181

181

And you can see that of course we can have multiple 182

182

h2 elements here on the same page. 183

183

So we have here a secondary heading and here another one. 184

184

Okay, so we of course you already have the h2 here now 185

185

and there's also this box around it, 186

186

but you cannot really see it 187

187

but we will see it in the next lecture 188

188

when we actually style all of these elements using CSS. 189

189

Anyway let's not add another paragraph here 190

190

please fill in this form. 191

191

And now let's actually use an input element. 192

192

And so like that we are then basically creating a form. 193

193

So input and then we use the type attribute 194

194

to specify the type of data that should be inputted 195

195

into this element. 196

196

So once again 197

197

we're using an attribute to describe this element. 198

198

So here we could use a text 199

199

or as you can see it we could use button checkbox, 200

200

email, file and so on and so forth. 201

201

But here we just gonna use text 202

202

not then we can even specify a placeholder. 203

203

Now we'll just use the auto complete functionality here. 204

204

Okay, and we close it. 205

205

And once more this is one of the elements 206

206

which does not have a closing tag because, well again 207

207

it doesn't make much sense to have that here. 208

208

And then usually a form also has a button. 209

209

And so for that we have to button element. 210

210

And in this case it actually makes sense to have content. 211

211

And so that's why there is a closing tag 212

212

which the S code automatically placed there for us. 213

213

Let's give it a safe and here we go, nice. 214

214

So we have a nice input and a button, 215

215

of course nothing will happen 216

216

because for that we would need some JavaScript 217

217

but that's not the point of this lecture or of the sector, 218

218

but now you know how to create a form like this. 219

219

And now just to finish this form 220

220

we should actually change the name 221

221

or the type of the element of this box here. 222

222

Okay, because this is now a form 223

223

because it has this input and this button elements. 224

224

And so in HTML we have a special element for that, 225

225

which is instead of div we use form, 226

226

okay give it a safe. 227

227

And it looks exactly the same but this is more semantic. 228

228

What this means is that the form element 229

229

better describes the content that is inside of the box 230

230

than just the generic box that is the div okay. 231

231

So the div element is really just a generic box 232

232

which has no meaning at all. 233

233

And so that's usually not a good idea 234

234

for many reasons for example for SEO, 235

235

when Google searches your page, 236

236

it's better if it knows exactly what each element means 237

237

than just having generic boxes without any meaning at all. 238

238

Okay, so using the appropriate element, 239

239

according to the content that's in it 240

240

is the idea of semantic HTML. 241

241

In this case we are creating a forum here 242

242

because we have an input and a button. 243

243

And so we use the form element that HTML gives us 244

244

just for this purpose. 245

245

Okay, it looks exactly the same as a div element, 246

246

but it has meaning and so it's semantic. 247

247

Okay, and that's it for this video 248

248

in the next one we're finally gonna style all this, 249

249

using some HTML.