Original subtitles

1

And welcome back! In the previous videos we talked about some of the most common a HTML tags

2

and how the HTML document is read by the browser.

3

However we've missed one critical feature of HTML, and if we go back to our diagram here, that we

4

should remember from the first section the HTML file gets sent to us but the power of HTML is

5

in its ability to link to other document.

6

So if I go back here to our website it's a simple one page website but I can't really click on 'fuji',

7

or 'apple', or 'banana'.

8

It doesn't link to anything.

9

There must be a HTML tag that we can use for that right?

10

Well yes there is.

11

It's called a anchor tag.

12

So an anchor tag is very easy just an 'a'.

13

And this anchor tag has something called an 'href' which is an attribute and it's the hypertext reference.

14

So in this 'href' you'll be able to link to something.

15

Let's close this 'a' tag.

16

An 'a' tag has an opening and closing tag.

17

And if I save this and refresh the page, well nothing happens because you need something in the anchor

18

tag.

19

So let's do "New Page".

20

I save that, I refresh.

21

And we have "New Page" here.

22

Now if I click this, nothing happens. But you can see that it has the link, and the mouse changes images,

23

so it's clickable but nothing happens.

24

Well that's because we need to specify where we want the link to go.

25

Now let's think about this if we want to link to a new page.

26

We don't really have another new page, if you remember

27

We only have 'index.html'.

28

Wouldn't it be great if there was another file that we can link to?

29

Well let's create another file.

30

So let's open up Sublime Text,

31

actually. I'm going to say 'File' 'New File', I'm going to save this as 'newpage'

32

And we're going to save it to desktop and see over here how,

33

when I went to Sublime Text,

34

It's now a 'Plain Text'?

35

I need to make sure that this is an HTML file, so I can just do 'newpage.html'. Save, and Sublime Text

36

automatically adjusts to the 'HTML'.

37

So again I can type in that short command, 'html' and (then press) 'Tab', that comes with Sublime Text, and let's do

38

the title 'New Page' and the 'body'

39

We can just do a header [h1] that says, "This is the new page!"

40

If I save this... great! we have a new page. And if I go to my desktop here, you see that I have 'newpage.html'

41

and 'index.html'.

42

So how do we link these two together?

43

Well it's very simple.

44

We open up sublime again and within 'index.html'.

45

The 'href' can now say we're linking to 'newpage.html'. Let's save that and let's give it a try.

46

Refresh the page, click,

47

And "This is a new page!" awesome.

48

But to go back we have to press the back symbol, so let's link back to the original file again.

49

We can do this by 'p' tag, which is for 'paragraph' - I'm going to say 'Go Back'. Close that tag [/p].

50

But, hold on a minute.

51

I need an anchor tag, right?

52

If I just save this, and refresh the page, I say, 'Go Back'.

53

But what if you really, really want this to be a paragraph, or let's say you want this to be an 'h2' but

54

you also want it to be an anchor tag.

55

Well that's very simple you just wrap it in an anchor tag [a].

56

And just so it's nice and clear, we're going to have the nice spacing here.

57

And again an anchor tag must have an 'href', which tells us where to go. And we want to go to 'index.html'

58

So, 'index.html', save, and refresh.

59

Let's go back.

60

Let's go to the next one, and back.

61

So this is the power that comes with HTML, this ability to link to other pages.

62

And yeah, we can have text, we can have lists, we can have images, but the true power is in this linking

63

ability. In the next episode we're going to expand on this.

64

I'll see you in that one. Bye-bye