Original subtitles

1

Welcome back.

2

In this video we're going to expand on our knowledge and introduce you to a few more HTML tags and

3

make this website look a little bit prettier than just, "Hellooooooooo there."

4

To get started I'm just going to move the screens around so you can see better.

5

All right.

6

So we have left, and right, and again just to make sure everything works.

7

If I change anything here to, - and then I click 'Save', and then I refresh the page, I have everything

8

updating perfect. Now,

9

these aren't the only HTML tags that you'll encounter.

10

There is actually a ton of them, and if you go back to the 'w3schools.com' you'll see over here all

11

the HTML tags that exist.

12

There's a lot of them.

13

We're only going to be going through,

14

I would say maybe, 10 or 15 or so because those are the only ones that, well technically, that I've used

15

in many years of devolvement - there's a few things on here that I've never even heard of.

16

I've never used.

17

You can always look up and learn them yourself.

18

But I'll say that there's about 10 or 15 tags that are used,

19

ninety-nine percent of the time and those are the ones that you'll encounter.

20

So we'll go through some of those most popular ones and HTML doesn't really get any harder than -

21

than this.

22

This is the syntax, as long as you get used to these little signs and structure you're pretty much a

23

HTML developer.

24

So the first tag that I want to introduce you to is the 'h1' tag.

25

So the way that I have it here is actually not right.

26

You want to make sure that everything is surrounded by a tag, so a web browser right now can see 'BOOOOO',

27

and just print out 'BOOOOO'.

28

But if you want to do it right, you'd want to put something like an 'H1'

29

And an 'h1' tag.

30

If I saved this and I refresh, we get what we call a 'header'.

31

So that is a header and then one what '1' does one mean?

32

Well it actually goes all the way up to 6.

33

So if I change this to '2', and I'm not going to do every single one, let's just do another one 'h6'

34

and if I save this, and refresh the page, you can see that there's different sizes in the text.

35

So that's the header tag.

36

And again if I scroll through the W3 Schools and I go to the 'h' you see over here that there's the header

37

tags explained here.

38

And this website is really really cool because you can actually click on 'Try it Yourself', and you can

39

play around with different things.

40

Click run, and it changes it for you.

41

So again, this is a really really good website for you to get familiar with all the tags.

42

But, again we're going to stick to our website for now.

43

Another thing that I want to introduce you to is something called a 'p' tag, or a paragraph tag. A paragraph

44

tag lets you have paragraphs.

45

So now if I refresh, well there's not much different from what we had before, which was no tags and just

46

saving it, refresh but you can see the difference when I copy and paste this and have a few paragraphs

47

versus this.

48

Let's see what happens.

49

I save this.

50

You'll see over here that with Sublime Text it after I don't know what to say about maybe like 20 saves

51

it'll ask you to make a purchase, because technically this is a non-registered one. You can ignore for now,

52

just click 'Cancel'.

53

Again it's just one annoying thing that will pop up every now and then.

54

I actually have a registered Sublime Text, I just wanted to show you this error,

55

so you're not surprised when you see it.

56

You can use Sublime Text for as long as you need it, for free.

57

When you start getting into the developer role and working full time with it, I do recommend that you make

58

a purchase.

59

It's a great program and -

60

and you still get everything through the 'I'm registered'.

61

You just have this pop up that shows up after a few saves.

62

But anyways, from now on I'm going to be using a registered Sublime account.

63

I just wanted to show you that error. If I refresh the page here,

64

you'll see that I have the paragraphs show up nicely.

65

But these unstructured pieces of text, well, everything is kind of in one line.

66

And HTML doesn't really know what to do with it, so it puts everything all on one line.

67

I also want to show you one other quick trick in Sublime Text, so writing this jibberish is not very

68

exciting and kind of takes a bit of time.

69

Developers are lazy.

70

We want to make sure that everything is done fast and efficient.

71

So if you actually put 'Lorem' here and then press 'Tab' you'll get Lorem Ipsum paragraphs.

72

So let's do that and delete that. 'Lorem', 'Tab'.

73

And then one more, 'Lorem', 'Tab'. Perfect.

74

Let's save that and, 'Refresh', and we have nice paragraphs.

75

As you can see we have some tags, and what we call 'nested tags', so you can see that the 'body' is the

76

parent and Sublime Text actually lets you close and open these.

77

So you have the 'body' tag, you have the header ('h1', etc.) tags, which are children of the 'body' tag.

78

And then we have 'p' tags.

79

A lot of people get confused in the naming.

80

I've mentioned these as tags, so essentially anything that has this syntax is a tag.

81

But this is called an 'h1 element' so that's when it's an entire block of functionality with content inside

82

it.

83

So again tags.

84

And then this is an 'h1 element'.

85

Again it's just naming but you'll hear tags and elements kind of used interchangeably but those are

86

the specific differences.

87

All right let's get into some of the more exciting things, let's say for example I really want to emphasize

88

'Lorem ipsum' here.

89

Well I can use another tag, a 'b' tag, and then we close it at 'Lorem ipsum'. Let's make that screen here a little

90

bit bigger.

91

Just so you can see.

92

There you go.

93

So we have the 'b' tags over here.

94

And if I click 'Save', I refresh.

95

- Oops, we don't want to translate this page.

96

We see that this is now bolded. Again, let's make it a little bit bigger.

97

There you go.

98

Now this syntax is actually not used anymore, or is not recommended - obviously still works, but there was

99

a problem that - HTML was initially used for websites that ran on computers, on PCs, on Macs. And now we have things

100

such as mobile phones and iPads, although the bold text, and we actually have another one which was

101

the italicised, 'i', although we had this, for most phones - some of them didn't have the ability to bold

102

the text, and didn't have the ability to italicise, or some screen readers,

103

which people who are visually impaired use, didn't really understand the meaning behind italicised

104

and bold.

105

So now we use something called, 'strong' for bold and 'Refresh'.

106

And then for italicized we use, 'em' for emphasis.

107

And there you go.

108

Now, the reason this change was made was a move towards more - something called semantic HTML, and

109

we'll get into that into a later lesson but just know that there are some tags that have evolved over

110

the years and it's part of why HTML5 exists.

111

We'll get into that a little bit more,

112

but just wanted to give you a quick note on that.

113

All right.

114

I think that's enough for now.

115

We're going to get into more tags in the next video. For now,

116

play around and I'll see you in the next one.