Original subtitles

1 1

Welcome back. 2

2

In this video, I'm going to show you 3

3

how to include images in your webpage 4

4

and also what HTML attributes are. 5

5

So back to our webpage, 6

6

where we want to include some images. 7

7

But before we can do that, we need some images, right? 8

8

Okay so I will just head here to Google Chrome 9

9

and type html5, 10

10

'cause that's the language we're using. 11

11

And I like this one, 12

12

so I will save the image 13

13

right into our project folder 14

14

and call it logo. 15

15

So that's one of the images, 16

16

and beside that, I also want an image for the author. 17

17

Now you can, of course, use a photo of yourself, 18

18

but I will use this very handy website 19

19

called RandomUser, 20

20

where you can get random profile pictures. 21

21

So I will just save this one. 22

22

I will call it author. 23

23

Okay. 24

24

Also, down here, 25

25

I will just write the name of this gentleman 26

26

so I don't forget it. 27

27

Gonzales. 28

28

Okay so this is the author of our page. 29

29

Now, to put images on our webpage, 30

30

we use the img tag, which actually has no closing tag, 31

31

so it's just img. 32

32

Yeah, that's right, there are some HTML elements 33

33

which have only the opening tag and no closing tag, 34

34

and the img element is one of them. 35

35

Just going to close this, alright. 36

36

Now I wanna put the image 37

37

here between this first paragraph 38

38

and the secondary header. 39

39

So <img 40

40

and then close it. 41

41

And now we're gonna see element attributes 42

42

for the first time. 43

43

Attributes provide additional information about an element. 44

44

Because now, to indicate which image we want to display, 45

45

we use the source attribute, which is src. 46

46

Src. 47

47

And now, Brackets helps us again 48

48

and shows all the available files in our project folder. 49

49

And here, in this place, I want to see the logo image. 50

50

So I just choose this and hit enter. 51

51

And, here we go. 52

52

Now the same thing with the author. 53

53

Go down here and insert the other image. 54

54

Okay, <img src 55

55

and Brackets predicts what we wanna write, 56

56

so hit return and choose the author. 57

57

Then close it and now it should be there. 58

58

Here it is. 59

59

Now, besides the source attribute, 60

60

we should also give the img elements an alt attribute, 61

61

which is an alternative text for the image, 62

62

if the image cannot be displayed 63

63

in the browser for some reason. 64

64

I will just put here some text, 65

65

and the alt text should be some text 66

66

which describes the image. 67

67

In this case, I will type in 68

68

The HTML5 Logo, 69

69

and down here, I will say this is the 70

70

Author photo. 71

71

Now, as you can see, 72

72

this text doesn't display on the website. 73

73

It's really just in case the image 74

74

cannot be displayed for some reason. 75

75

So, this was images. 76

76

I think that now you know 77

77

how you can display images on your website. 78

78

It's really easy and straightforward. 79

79

Next up, we have a lecture about links. 80

80

See you there!