1
00:00:00,920 --> 00:00:01,620
Welcome back.

2
00:00:01,640 --> 00:00:08,119
In this video, we're going to expand on our knowledge and introduce you to a few more e-mail tags and

3
00:00:08,119 --> 00:00:11,060
make this website look a little bit prettier than just hello there.

4
00:00:12,150 --> 00:00:15,870
To get started, I'm just going to move the screens around so you can see better.

5
00:00:16,260 --> 00:00:19,560
All right, so we have the left and right and.

6
00:00:20,540 --> 00:00:25,640
Again, just to make sure everything works, if I change anything here to.

7
00:00:27,300 --> 00:00:27,540
Boo!

8
00:00:28,110 --> 00:00:31,710
And then I click save and then I refresh the page.

9
00:00:32,670 --> 00:00:34,470
I have everything updating perfect.

10
00:00:35,490 --> 00:00:42,510
Now, these aren't the only ASML tags that you'll encounter, there is actually a ton of them, and

11
00:00:42,510 --> 00:00:48,360
if you go back to the three schools dot com, you'll see over here.

12
00:00:49,480 --> 00:00:53,380
All the HTML tags that exist.

13
00:00:55,240 --> 00:01:02,860
There's a lot of them we're only going to be going through, I would say maybe 10 or 15 or so, because

14
00:01:02,860 --> 00:01:08,550
those are the only ones that well, technically that I've used in many years of development.

15
00:01:08,560 --> 00:01:11,560
There's a few things on here that I've never even heard of.

16
00:01:11,580 --> 00:01:12,460
I've never used.

17
00:01:12,700 --> 00:01:15,400
You can always look this up and learn them yourself.

18
00:01:15,700 --> 00:01:22,360
But I'll say that there's about 10 or 15 tags that are used ninety nine percent of the time, and those

19
00:01:22,360 --> 00:01:23,680
are the ones that you'll encounter.

20
00:01:23,690 --> 00:01:26,200
So we'll go through some of those most popular ones.

21
00:01:26,470 --> 00:01:30,490
And HMO doesn't really get any harder than than this.

22
00:01:30,760 --> 00:01:31,900
This is the syntax.

23
00:01:31,900 --> 00:01:39,820
As long as you get used to these little signs and structure, you're pretty much a HTML developer.

24
00:01:40,870 --> 00:01:48,250
So the first tag that I want to introduce you to is the contact, so the way that I have it here is

25
00:01:48,250 --> 00:01:50,400
actually not right.

26
00:01:50,410 --> 00:01:54,300
You want to make sure that everything is surrounded by a tag.

27
00:01:54,310 --> 00:01:58,330
So a Web browser right now can see and just print out bux.

28
00:01:58,810 --> 00:02:03,910
But if you want to do it right, you'd want to put something like an H1.

29
00:02:04,800 --> 00:02:06,180
And an H1 tag.

30
00:02:07,140 --> 00:02:09,600
If I save this and I refresh.

31
00:02:10,840 --> 00:02:16,700
We get what we call a header, so that is a header and then one, what does one mean?

32
00:02:16,720 --> 00:02:20,700
Well, it actually goes all the way up to six.

33
00:02:21,430 --> 00:02:28,750
So if I change this to two and I'm not going to do every single one, let's just do another one each

34
00:02:28,750 --> 00:02:30,760
six to.

35
00:02:32,960 --> 00:02:40,220
Age six, and if I save this and refresh the page, you can see that there's different sizes in the

36
00:02:40,220 --> 00:02:40,640
tax.

37
00:02:41,800 --> 00:02:50,410
So that's the header tag, and again, if I scroll through the three schools and I go to the H, you

38
00:02:50,410 --> 00:02:57,100
see over here that there's the header tax explained here and this website is really, really cool because

39
00:02:57,100 --> 00:03:02,950
you can actually click on try it yourself and you can play around with different things.

40
00:03:05,920 --> 00:03:08,590
Quick run and it changes it for you.

41
00:03:09,340 --> 00:03:13,330
So, again, this is a really, really good website for you to get familiar with all the tags.

42
00:03:13,990 --> 00:03:15,670
But again, we're going to stick to.

43
00:03:17,520 --> 00:03:23,280
Our Web site for now, another thing that I want to introduce you to is something called a PAETEC or

44
00:03:23,280 --> 00:03:24,090
a paragraph tag.

45
00:03:24,300 --> 00:03:26,430
A paragraph tag lets you.

46
00:03:28,400 --> 00:03:29,010
Paragraphs.

47
00:03:29,540 --> 00:03:36,470
So now if I refresh, well, there's not much different from what we had before, which was no tags

48
00:03:36,470 --> 00:03:38,540
and just saving it refresh.

49
00:03:39,610 --> 00:03:40,270
But.

50
00:03:42,170 --> 00:03:47,360
You can see the difference when I copy and paste this and have a few.

51
00:03:48,740 --> 00:03:50,390
Paragraphs versus.

52
00:03:51,500 --> 00:03:58,990
This let's see what happens, I say this you'll see over here that with sublime text after I don't know

53
00:03:59,000 --> 00:04:04,430
what to say about maybe like 20 saves, I'll ask you to make a purchase, because technically this is

54
00:04:04,430 --> 00:04:06,260
an unregistered one you can ignore.

55
00:04:06,260 --> 00:04:06,920
For now, just click.

56
00:04:06,920 --> 00:04:11,960
Cancel again is just one annoying thing that will pop up every now and then.

57
00:04:12,710 --> 00:04:14,420
I actually have a register sublime text.

58
00:04:14,420 --> 00:04:15,650
I just wanted to show you this area.

59
00:04:15,650 --> 00:04:17,540
So you're not surprised when you see it.

60
00:04:18,019 --> 00:04:23,810
You sublime text for as long as you need it for free when you start getting into the developer role

61
00:04:23,810 --> 00:04:25,030
and working full time with it.

62
00:04:25,280 --> 00:04:26,920
I do recommend that you make a purchase.

63
00:04:26,930 --> 00:04:30,170
It's a great program and you still get everything through the I'm registered.

64
00:04:30,170 --> 00:04:33,560
You just have this pop up that shows up after a few saves.

65
00:04:34,340 --> 00:04:37,640
But anyway, from now on I'm going to be using a registered sublime account.

66
00:04:37,640 --> 00:04:43,310
I just want to show you that er if I refresh the page here, you'll see that I have the paragraph's

67
00:04:43,310 --> 00:04:44,390
show up nicely.

68
00:04:45,660 --> 00:04:52,440
But these unstructured pieces of tax, well, everything is kind of in line and and HMO doesn't really

69
00:04:52,440 --> 00:04:55,860
know what to do with it, so it puts everything on one line.

70
00:04:56,040 --> 00:04:59,580
I also want to show you one other quick trick and sublime text.

71
00:04:59,580 --> 00:05:04,710
So writing this gibberish is not very exciting and kind of takes a bit of time.

72
00:05:04,710 --> 00:05:06,270
And developers are lazy.

73
00:05:06,280 --> 00:05:09,110
We want to make sure that everything is done fast and efficient.

74
00:05:09,300 --> 00:05:15,710
So if you actually put Lorem here and then press tab, you'll get Lorem some paragraphs.

75
00:05:15,870 --> 00:05:22,530
So let's do that and then delete that lorem tab and then one more.

76
00:05:24,500 --> 00:05:26,610
Lauren, perfect.

77
00:05:26,720 --> 00:05:34,820
Let's say that and refresh and we have nice paragraphs, as you can see, we have some tags and what

78
00:05:34,820 --> 00:05:36,350
we call nested tags.

79
00:05:36,680 --> 00:05:38,030
So you can see that the body.

80
00:05:38,960 --> 00:05:46,040
Is the parent and sublime text actually lets you close and open, so you have the body tag, you have

81
00:05:46,040 --> 00:05:51,830
the header tags which are children of the body tag, and then we have BTX.

82
00:05:52,040 --> 00:05:54,680
A lot of people get confused in the naming.

83
00:05:55,220 --> 00:05:56,750
I've mentioned this as tag.

84
00:05:56,760 --> 00:06:05,990
So essentially anything that has this syntax is a tag, but this is called an H1 element.

85
00:06:05,990 --> 00:06:11,160
So that's when it's an entire block of functionality with content inside it.

86
00:06:11,450 --> 00:06:21,140
So again, tags and then this is an H1 element again is just naming, but you'll hear tags and elements

87
00:06:21,140 --> 00:06:22,640
kind of used interchangeably.

88
00:06:22,640 --> 00:06:24,680
But those are the specific differences.

89
00:06:25,250 --> 00:06:25,520
All right.

90
00:06:25,670 --> 00:06:29,240
Let's get into some of the more exciting things.

91
00:06:29,240 --> 00:06:33,230
Let's say, for example, I really want to emphasize lorem ipsum here.

92
00:06:33,920 --> 00:06:45,020
Well, I can use another tag, Bettag, and then we close it at Lorem Epsom and let's make the screen

93
00:06:45,020 --> 00:06:47,060
here a little bit bigger just so you can see.

94
00:06:47,600 --> 00:06:48,350
There you go.

95
00:06:49,310 --> 00:06:54,830
So we have the B tags over here and if I click save, I refresh.

96
00:06:56,990 --> 00:07:01,760
No, we don't want to translate this page, we see that this is now Balde again, let's make it a little

97
00:07:01,760 --> 00:07:02,240
bit bigger.

98
00:07:02,390 --> 00:07:02,850
There you go.

99
00:07:03,030 --> 00:07:09,170
Now, this syntax is actually not used anymore or it's not recommended, obviously still works.

100
00:07:09,920 --> 00:07:11,150
But there was a problem.

101
00:07:11,150 --> 00:07:17,660
That e-mail was initially used for websites that ran on computers, on PCs, on Macs.

102
00:07:17,660 --> 00:07:25,910
And now we have things such as mobile phones and iPads, although the bolded text and we actually have

103
00:07:25,910 --> 00:07:27,560
another one, which was the.

104
00:07:28,520 --> 00:07:29,600
Italicized.

105
00:07:30,720 --> 00:07:31,260
Hi.

106
00:07:33,710 --> 00:07:40,840
Although we had this for most phone, some of them didn't have ability to board the text and didn't

107
00:07:40,860 --> 00:07:47,960
have the ability to italicize or some screen readers, which people who are visually impaired use didn't

108
00:07:47,960 --> 00:07:51,850
really understand the meaning behind Italicize and Bob.

109
00:07:51,950 --> 00:07:55,820
So now we use something called strong for bolded.

110
00:07:57,820 --> 00:08:05,050
And refresh and therefore italicized, we use em for emphasis.

111
00:08:08,380 --> 00:08:08,960
There you go.

112
00:08:09,680 --> 00:08:10,130
Now.

113
00:08:11,030 --> 00:08:16,940
The reason this change was made was a move towards something called Semantic ASML, and we'll get into

114
00:08:16,940 --> 00:08:23,660
that into a later lesson, but just know that there's some tags that have evolved over the years and

115
00:08:24,080 --> 00:08:27,220
it's part of why a Schimel five exists.

116
00:08:27,230 --> 00:08:28,580
We'll get into that a little bit more.

117
00:08:28,580 --> 00:08:31,310
But just wanted to give you a quick note on that.

118
00:08:31,940 --> 00:08:32,289
All right.

119
00:08:32,299 --> 00:08:33,610
I think that's enough for now.

120
00:08:33,620 --> 00:08:36,110
We're going to get into more tags in the next video.

121
00:08:36,110 --> 00:08:38,870
For now, play around and I'll see in the next one.