Original subtitles

1

And welcome back.

2

In this video we're going to be learning about self-closing tags.

3

Up until this point we use all tags that have the opening and then the closing which has this slash

4

in it.

5

Now there are a few elements that don't have this syntax but they have something called 'self-closing

6

tags'.

7

So let's say here between Fuji and Honeycrisp I want to have a bit of a line break.

8

I can use something like 'br' here and if I save this and I 'refresh',

9

we have a little line break.

10

There's also 'hr' which is horizontal line,

11

so you get a horizontal line for refresh right through here.

12

'hr' tags just have one single element, self-closing.

13

You might also see something like this, and that is something from the old version of HTML, which

14

uses xHTML.

15

You can read up more about it on your own, but just keep in mind that with HTML5, we are just going

16

to be using this.

17

So obviously on web pages there's going to be images.

18

So would it be nice if there was a picture of a Fuji apple here.

19

Let's see how we can do it.

20

So with an image tag, and let's think about this critically if I didn't know what an image tag is and

21

I wanted to add an image to my HTML file, well if I Google "image HTML tag", again one of the

22

first websites that pops up is the W3 Schools, and I'll show you exactly how an image tag works.

23

If I click try yourself you can see it in action you can play around with but you can see here that

24

an image tag is a self-closing tag.

25

There's no closing image tags just just one single tag.

26

And if I do image [img] and we have something called source here and this is something called an attribute

27

some HTML tags can have something called attributes, which add special properties to the specific

28

tag.

29

So an attribute always has a value attached to it and the image source [img src].

30

That's what it stands for, tells us where the image is coming from.

31

So let's find an image of fuji apple let's go, images, oh, I like this one. Let's do 'view image' and give us the link

32

of where this image is.

33

So I'm just going to copy that paste it in here.

34

Let's go back to our example here we can see here that there's a few more attributes that we can add

35

to an image tag.

36

But for now we can just leave it here close the tag.

37

You can see that Sublime Text has the nice highlighting for us and if I save this go back to our website

38

and I click refresh I get this massive fuji apple, and obviously that's that's too big.

39

Ideally we can make it a little bit smaller again if we go back to the example you'll see that there

40

has width and height so we can actually just copy that and add it to the attributes so that we specify

41

the width.

42

And this is in pixels [px].

43

So I save that, I refresh and look at that we have the fuji apple, it looks very very pretty.

44

Let's add the picture for honeycrisp as well.

45

I'm going to do this fast.

46

You should be able to just copy this image.

47

And again we want to make it the same size as the previous one so I'm going to leave the width and height

48

the same.

49

And let's find a - an image of a honeycrisp apple.

50

So, 'honeycrisp apple' and 'Images', it looks quite similar doesn't it?

51

And 'view image' let's copy the source from here going to save that.

52

Go back to our website and let's refresh and look at that.

53

We have our apples. So, image tags are very very useful.

54

You might be asking yourself, "what does the 'alt' attribute mean?"

55

And this is something that you can actually read up on so if you scroll down if you look over here you

56

can see that 'alt' specifies an alternate text for an image.

57

So again, this is something that can be used by screen readers and you can define what the image is of.

58

So, here the 'alt' is "smiley face".

59

So when a screen reader reads it, it says, "Oh and this part of the website there is a smiley face".

60

Just to recap, we learned about self-closing tags - which don't require

61

two of them, so an opening and closing tag.

62

Just a single one.

63

So we use 'br' for line break.

64

We used 'hr' for a horizontal line, and then we have the image tag that also has to have some attributes.

65

So, it has a source which tells us where to grab the image from,

66

it has a width attribute, a height attribute, with a value of 42 pixels, and 42.

67

All right I'll see you in the next lesson.