1
00:00:05,210 --> 00:00:12,450
Welcome back to this lecture on basic tagging with H T.M. the main components of any web site are defined

2
00:00:12,450 --> 00:00:20,790
by him elements and every element is going to have a corresponding tag inside the actual h HTML file.

3
00:00:20,790 --> 00:00:25,130
We're going to start learning about those basic tags that are available to us in the previous lecture.

4
00:00:25,140 --> 00:00:30,900
We saw a title tag which is one of the most basic tags that already comes in that skeleton when typing

5
00:00:30,970 --> 00:00:31,990
HTL.

6
00:00:32,220 --> 00:00:36,590
Now discovered heading tags and how we can add in paragraph tags.

7
00:00:36,600 --> 00:00:42,510
Let's head over to the text editor Henri here I have my text editor open to that basic HTL file from

8
00:00:42,510 --> 00:00:48,330
the previous lecture as well as my browser open directly connected to this basic each team a file with

9
00:00:48,330 --> 00:00:49,440
the file path.

10
00:00:49,620 --> 00:00:54,330
I'm going to zoom into my browser a little bit so you can clearly see the changes that I'm going to

11
00:00:54,330 --> 00:01:00,690
do my basic HTL file the first types of element tags I want to show you were actually going to put inside

12
00:01:00,690 --> 00:01:01,760
the body.

13
00:01:01,770 --> 00:01:08,040
Notice that if we just add some text will see some text appear inside of the browser but there are also

14
00:01:08,040 --> 00:01:10,360
heading tags H-1.

15
00:01:10,740 --> 00:01:15,600
And if you begin to type H-1 you'll be able to enter and they will auto complete both the opening tag

16
00:01:15,840 --> 00:01:23,390
and the closing tag and any text in between these two heading one tags is going to be bold and larger.

17
00:01:23,520 --> 00:01:27,260
So I can say this is heading one.

18
00:01:27,490 --> 00:01:30,850
I will save this and then refresh my page over here.

19
00:01:30,970 --> 00:01:33,610
And now you get to see this heading 1 font.

20
00:01:33,640 --> 00:01:39,560
Keep in mind I'm very zoomed in to my browser so the effects in size are going to be a little distorted.

21
00:01:39,580 --> 00:01:44,890
However when you're following along you see the effects quite clearly now just says we have a heading

22
00:01:44,890 --> 00:01:47,690
1 we also have smaller sizes of headings.

23
00:01:47,860 --> 00:01:54,220
So there's a heading to type that out save or changes refresh the browser.

24
00:01:54,340 --> 00:02:00,070
And now I see a slightly smaller heading and as you may have guessed if I keep going down there's heading

25
00:02:00,070 --> 00:02:03,470
three so H-3 we can have the autocomplete.

26
00:02:03,980 --> 00:02:08,590
I have my heading three tag and then if I saved this and refreshed my changes.

27
00:02:08,590 --> 00:02:14,330
Now I get to see a smaller heading and this actually goes all the way to heading 6 so we'll skip four

28
00:02:14,330 --> 00:02:17,060
and five.

29
00:02:17,160 --> 00:02:24,800
You can type in heading 6 save this and if you refresh you'll see a bold but smaller versus Heading

30
00:02:24,800 --> 00:02:26,780
1 2 and 3.

31
00:02:26,780 --> 00:02:27,310
OK.

32
00:02:27,560 --> 00:02:28,850
So those are heading tags.

33
00:02:28,880 --> 00:02:34,220
And most commonly we'll be using Heading 1 and heading 2 and those are for font that you want to appear

34
00:02:34,250 --> 00:02:36,400
just large and bold on the page.

35
00:02:36,620 --> 00:02:42,600
And later on in the CSSA section of course we'll also discuss how to add in your own custom fonts.

36
00:02:42,600 --> 00:02:49,530
Now let's imagine we have just a bunch of untagged text that is actually tagged in between two tag elements.

37
00:02:49,530 --> 00:02:56,180
So here are some text and then I'll add some more spaces more text.

38
00:02:56,920 --> 00:03:02,090
Add a lot more spaces and say even more text save this.

39
00:03:02,280 --> 00:03:08,800
Now a lot of times people will expect these sort of spaces to actually show up inside of our Web page.

40
00:03:08,850 --> 00:03:14,120
The one to refresh this I see here is some text more text and even more text.

41
00:03:14,220 --> 00:03:19,760
And in fact these spaces aren't going to actually register unless you use proper tags.

42
00:03:19,800 --> 00:03:24,640
So the way you can actually create separation is through the use of what's known as a paragraph tag.

43
00:03:24,960 --> 00:03:29,870
So I will delete these and the paragraph tag it's just a simple tag.

44
00:03:29,930 --> 00:03:32,660
So if you begin to type P and then hit enter.

45
00:03:32,660 --> 00:03:34,030
You'll get the paragraph tag.

46
00:03:34,250 --> 00:03:42,990
So it can say here is some text and then inside of another paragraph tag I'll say even more text

47
00:03:46,710 --> 00:03:48,040
save those changes.

48
00:03:48,240 --> 00:03:53,280
And then when I refresh this you'll see now I actually have a break I say here are some text.

49
00:03:53,280 --> 00:03:55,160
There's a break and then even more text.

50
00:03:55,380 --> 00:04:01,340
If I didn't want to break then all I would have to do is grab even more text and put it all together

51
00:04:01,410 --> 00:04:03,820
inside that same paragraph tag again.

52
00:04:03,840 --> 00:04:08,030
This is known as a paragraph tag and it's just a simple P and then we refresh.

53
00:04:08,040 --> 00:04:09,550
Now we get to see everything.

54
00:04:09,600 --> 00:04:14,700
I'm really zoomed in here so you'll see the effects a lot more pronounced.

55
00:04:14,700 --> 00:04:20,940
So if I Reesa here this is what it would normally look like on your browser as a quick note.

56
00:04:21,030 --> 00:04:25,980
You'll often want to just generate a bunch of text as you're messing around for your test sites.

57
00:04:26,010 --> 00:04:33,450
The way to do that is if you just start typing Lorem you'll get this Lorem Ipsum hit enter and then

58
00:04:33,450 --> 00:04:37,790
select it and you'll get just a bunch of text that is known as Loar some text.

59
00:04:37,830 --> 00:04:44,430
This is filler text that will quickly create a filler paragraph of just Latin text that it's meaningless.

60
00:04:44,430 --> 00:04:49,710
So if you're fresh just now inside of our browser I can see what's known as larm if some text.

61
00:04:49,710 --> 00:04:54,820
This is just a quick way of quickly filling out large bundles of text for you to test out your Web site.

62
00:04:55,800 --> 00:04:58,710
Then finally I want to talk about inline tags.

63
00:04:58,950 --> 00:05:02,660
So here we have tags that basically have a start.

64
00:05:02,970 --> 00:05:11,990
All the information and then a stop or closing tag inline tags actually allows two tags inside of other

65
00:05:11,990 --> 00:05:13,080
tags.

66
00:05:13,280 --> 00:05:15,260
So let's create in paragraph 10.

67
00:05:15,770 --> 00:05:28,280
And here will say new semantics and let's say strong and emphasis.

68
00:05:28,300 --> 00:05:34,120
So if I saved this and refreshed my page I see new semantics strong and emphasis.

69
00:05:34,120 --> 00:05:39,370
Sometimes you're going to want to make things appear bold or you want to make things appear in a tablet.

70
00:05:39,670 --> 00:05:44,710
So in order to do this I'm going to wrap this strong text inside of a strong tag.

71
00:05:44,710 --> 00:05:49,480
So I'm going to create some more space for myself and if I begin typing out strong you should see a

72
00:05:49,480 --> 00:05:55,510
strong tag eventually form for yourself so you can select that and then we have these inline tags strong

73
00:05:55,600 --> 00:05:57,160
and then closing strong.

74
00:05:57,160 --> 00:05:58,750
Anything inside of this.

75
00:05:59,170 --> 00:06:04,110
So just put the text inside will end up looking bold inside of your browser.

76
00:06:04,120 --> 00:06:07,370
So if you refresh now I see bulled inside.

77
00:06:07,840 --> 00:06:11,900
So let's go ahead and make that strong text strong.

78
00:06:12,240 --> 00:06:17,530
So say inside strong Savir changes refresh and they should see how.

79
00:06:17,530 --> 00:06:19,270
Inside strong is not bold.

80
00:06:19,430 --> 00:06:23,270
And we can do the same thing for italics or emphasis.

81
00:06:23,320 --> 00:06:31,280
The way we do that is we use the E and tags so emphasis and now automatically create open inclosing

82
00:06:31,310 --> 00:06:33,140
E-M tags for us.

83
00:06:33,140 --> 00:06:39,330
We will grab emphasis here and let's say inside emphasis.

84
00:06:39,570 --> 00:06:41,000
Save it and now it does.

85
00:06:41,040 --> 00:06:43,630
In-between these inline emphasize tags.

86
00:06:43,800 --> 00:06:49,370
If I save and refresh notice now inside emphasis is now going to be in its hallux.

87
00:06:49,440 --> 00:06:54,500
So these are inline tags because typically they're going to be in line with some other major component

88
00:06:54,510 --> 00:06:55,770
like the paragraph.

89
00:06:56,130 --> 00:06:56,710
All right.

90
00:06:56,880 --> 00:06:59,200
That's really all we need to know about basic tagging.

91
00:06:59,430 --> 00:07:04,230
As a quick note there there's actually really useful resources online for basic tagging.

92
00:07:04,440 --> 00:07:10,660
One of them is the Mozilla Foundation's documentation for basic elements.

93
00:07:10,680 --> 00:07:14,970
There's a link to it inside of this lecture file that corresponds with what we just did here in this

94
00:07:14,970 --> 00:07:21,330
video but on screen over my browser right now it's a developer that Mozilla dot org and we have docs

95
00:07:21,330 --> 00:07:27,480
for web h him l n elements and Lotusphere it is a full reference for all the HTML elements possible

96
00:07:27,480 --> 00:07:31,050
so we have Area article buttons canvasses details and so on.

97
00:07:31,290 --> 00:07:34,190
You can see here that there is a ton of elements on the site.

98
00:07:34,380 --> 00:07:35,880
We definitely don't need to know all these.

99
00:07:35,880 --> 00:07:39,990
We're just going to go through the basic ones in this H.T. mail crash course but if you ever have questions

100
00:07:39,990 --> 00:07:41,840
on one you can always come here.

101
00:07:41,880 --> 00:07:43,320
Search for the one you're looking for.

102
00:07:43,320 --> 00:07:45,850
For example I can see that there's a paragraph here.

103
00:07:45,870 --> 00:07:51,030
So if I click on that will take me to the paragraph element and begin to describe what it does.

104
00:07:51,070 --> 00:07:54,280
So talk about taggle missions permitted parents the attributes.

105
00:07:54,440 --> 00:07:58,690
It's really nice as it has several examples here and it shows you the actual result.

106
00:07:58,740 --> 00:08:04,050
Here we can see how that paragraph is actually enabling the breaking of the text so we have the first

107
00:08:04,050 --> 00:08:08,810
paragraph wrapped in between these two p times in the second paragraph wrap inside another set of p

108
00:08:08,850 --> 00:08:09,630
tags.

109
00:08:09,630 --> 00:08:13,330
So when you actually run this you see a first paragraph and a second paragraph.

110
00:08:13,330 --> 00:08:18,820
And what's really cool is you can open this up in a site called Code pen which will basically allow

111
00:08:18,820 --> 00:08:21,500
you to play around with this inside your browser.

112
00:08:21,880 --> 00:08:25,240
So if you're just on a mobile device you can go ahead.

113
00:08:25,540 --> 00:08:30,490
This right here save it and you'll see the changes being uploaded.

114
00:08:30,490 --> 00:08:35,430
Sometimes asks you you can just say save is anonymous and then play around with the files.

115
00:08:35,560 --> 00:08:39,280
Ok we'll discuss code Penda IO in more detail later on.

116
00:08:39,280 --> 00:08:44,880
There's also G-S fiddle which is another Web site where you can write H-2 him all code inside your browser.

117
00:08:44,920 --> 00:08:46,960
All right so that's it for this lecture.

118
00:08:46,960 --> 00:08:48,810
Again we just covered basic tagging.

119
00:08:48,850 --> 00:08:52,420
Up next we're going to cover some more topics such as lists.

120
00:08:52,740 --> 00:08:53,380
We'll see either.