Original subtitles

1 1

So far, we have placed headings, 2

2

paragraphs, and images on our blog post webpage. 3

3

Another very important thing in webpages are links, 4

4

so let's go back to the little webpage 5

5

that we were playing with. 6

6

So, links are defined with the a tag, 7

7

which stands for anchor. 8

8

And we used the href attribute to tell 9

9

the browser where the link should take us. 10

10

For example, let's link to the Udemy website. 11

11

Let's do it right here after this image. 12

12

And as I said, we used an a tag, 13

13

with href attribute. 14

14

So, the link to the Udemy website is an external link, 15

15

because that website doesn't make part of our project. 16

16

So in that case we have to indicate 17

17

the complete path to the website we want to link to, 18

18

which means that it has to start with http://. 19

19

For Udemy, that would be http 20

20

//www.udemy.com. 21

21

Alright, and now I close it, 22

22

and here goes the text that will appear on the webpage. 23

23

So, link to Udemy. 24

24

So let's see if this works. 25

25

Click right here, 26

26

and yeah, it takes us to the Udemy website. 27

27

Alright. 28

28

Now, back in Brackets, 29

29

we see this message right here, 30

30

and this happened because we left the webpage 31

31

we were working on. 32

32

And so, the connection between Brackets 33

33

and the browser was lost. 34

34

So, let's close this, 35

35

and hit it again. 36

36

Okay, now the connection is back up. 37

37

A solution for this would be 38

38

to open the link in a new tab, right. 39

39

Sometimes that's actually right thing to do. 40

40

So I'll show you how to do that. 41

41

It's quite easy, 42

42

we just need to define the target attribute. 43

43

So target, and then from these four options, 44

44

we choose the blank options. 45

45

And now let's test it again. 46

46

I click here, okay, and so, 47

47

the Udemy site opens in a new tab 48

48

without leaving our original blog post. 49

49

So if we close this, 50

50

we are just back to our webpage. 51

51

We can also link to any document inside our current project. 52

52

For example, other webpages, 53

53

which is very important, 54

54

or even images, or other documents, 55

55

and those will be internal links. 56

56

So let's just add a link to the HTML image 57

57

we used before. 58

58

And I will do it right after this link. 59

59

So again, the a 60

60

href 61

61

and I will choose this logo here. 62

62

And again, we want it in a new tab. 63

63

I will say HTML logo. 64

64

Okay, and this also works. 65

65

So you see, we cannot only link to other websites, 66

66

but also to other documents such as images. 67

67

These were links. 68

68

Now you know how to make internal links 69

69

and external links to other webpages. 70

70

Congratulations, 71

71

you made it to the end of the introductory HTML section. 72

72

That's awesome! 73

73

Remember, that this section was designed 74

74

to make you familiar with HTML. 75

75

So far, we covered the basic structure of a webpage, 76

76

headings, paragraphs, images, and links. 77

77

We'll start to really work with HTML 78

78

when we're gonna start with our killer website project. 79

79

But before we do that, 80

80

the next section I'll introduce CSS 81

81

to style the HTML we just created. 82

82

Now to end this HTML section, 83

83

make sure you take the following quiz 84

84

to remember some things you learned so far. 85

85

So, good luck.