1
00:00:00,690 --> 00:00:08,260
Hello and welcome to the part three of creatine basic hastier mail documents structure.

2
00:00:08,730 --> 00:00:15,570
Before we carry on from where we left off in part two I just want to show you something if you notice

3
00:00:15,570 --> 00:00:23,070
here we've got some indentation inside the text and it'll indentation is very important.

4
00:00:23,370 --> 00:00:33,960
It helps makes your code more organized and neater and makes it easier for someone to read your code

5
00:00:33,990 --> 00:00:36,970
and also for you to read your code.

6
00:00:36,970 --> 00:00:40,030
So look in the code here from the indentation.

7
00:00:40,410 --> 00:00:51,920
You can tell that the head and the body elements are charged elements to the hastier mill element.

8
00:00:51,990 --> 00:00:59,780
So any content I had inside the head element will become child elements of the head.

9
00:01:00,210 --> 00:01:09,540
And then grandkids behave here Mal any concept any elements inside the body element will become child

10
00:01:10,470 --> 00:01:19,310
or children element of the body element and there will be grand children for the hastier male element

11
00:01:19,320 --> 00:01:29,730
so you can tell the way the elements are related from the indentation so indentation is very important.

12
00:01:29,820 --> 00:01:37,080
So I'm going to add a couple of tournaments to the head section so I come to the head inside the between

13
00:01:37,080 --> 00:01:39,700
the head element to a tab.

14
00:01:39,870 --> 00:01:47,200
And if you notice as I do a tab it automatically indent the place where the cursor is flashing.

15
00:01:47,250 --> 00:01:55,950
So going to create a new tag and do less than sign I type in the name of the town is going to be a mental

16
00:01:56,580 --> 00:01:59,450
space concept.

17
00:02:00,690 --> 00:02:12,860
Okay then the value motor car set is an attribute and the value I'm going to set this value to you.

18
00:02:12,870 --> 00:02:22,700
T f Dash 8 and then I close it with a greater than sign.

19
00:02:23,130 --> 00:02:33,150
The motor car said basically is used to set the character set for the documents so that any text you

20
00:02:33,150 --> 00:02:42,420
enter will be recognized by any way anybody who's viewing this all over the world so makes it easier

21
00:02:42,450 --> 00:02:47,640
to interpret the characters in the document.

22
00:02:47,820 --> 00:02:55,150
When you set attributes you always have to use it equal to to give the value and if values are in close

23
00:02:55,370 --> 00:02:57,390
quarters as you can see here.

24
00:02:57,750 --> 00:03:02,360
So I'm going to add another limit this time is going to be a title element.

25
00:03:02,700 --> 00:03:16,620
So again left ankle bracket or less downside and when a type in title and then a greater than sign notice

26
00:03:16,650 --> 00:03:19,320
automatically it does that for us.

27
00:03:19,380 --> 00:03:24,080
Not all text editors to some you have to manually do it yourself.

28
00:03:24,250 --> 00:03:29,620
But brackets automatically places the other types all year so it saves a bit of typing.

29
00:03:29,640 --> 00:03:33,680
So in between the tag How type in my title.

30
00:03:33,780 --> 00:03:39,240
I'm just going to say my sample

31
00:03:41,790 --> 00:03:47,980
web web page Well a little bit like that.

32
00:03:48,210 --> 00:03:56,850
If you notice it indentation you can tell that this two elements are child a mess of the head element.

33
00:03:56,950 --> 00:04:06,060
So I'm just going to remove some space so that's fit for the head element that's all I'm doing for the

34
00:04:06,060 --> 00:04:07,000
moment.

35
00:04:07,090 --> 00:04:13,050
Makes any content inside the head element is not visible.

36
00:04:13,050 --> 00:04:19,560
The only thing that you do that is visible is this title here that will show up on the title of the

37
00:04:19,560 --> 00:04:27,120
web browser and when the page is viewed everything else has just information purposes or used to reference

38
00:04:27,390 --> 00:04:30,030
other related documents.

39
00:04:30,360 --> 00:04:36,340
So now there's some element inside the body element.

40
00:04:36,390 --> 00:04:44,850
Anything between the body element is the outhaul content that is visible on the web page.

41
00:04:44,940 --> 00:04:48,370
So I'm going to add here one element.

42
00:04:48,420 --> 00:04:51,530
Again I do less than sign.

43
00:04:51,660 --> 00:04:56,200
Type in page 1 and then close that.

44
00:04:56,850 --> 00:04:59,100
And I'm going to just say.

45
00:05:00,080 --> 00:05:01,750
Low.

46
00:05:02,640 --> 00:05:05,640
Hell a wall.

47
00:05:07,380 --> 00:05:08,070
Okay.

48
00:05:08,160 --> 00:05:16,390
The one is basically use as he head into if you want to as some kind of head into your web page you

49
00:05:16,500 --> 00:05:27,330
see him one tanks and there are six of them here 1 2 8 6 8 1 being the largest hedin and then 6 been

50
00:05:27,360 --> 00:05:29,710
the lowest head.

51
00:05:29,890 --> 00:05:33,270
I know if they want to do is add a paragraph tag.

52
00:05:33,420 --> 00:05:38,860
So the way you add paragraphs to a web page is by use in BP tack again.

53
00:05:38,910 --> 00:05:45,800
I do here less than sign type in PE and then a greater than sign.

54
00:05:45,930 --> 00:05:54,270
In between the opening and closing element you just type in your whatever text you want to see.

55
00:05:54,330 --> 00:06:01,520
Today is a new day.

56
00:06:02,610 --> 00:06:10,740
So that's all I'm typing for now so you can use as many paragraph tags as you want to insert paragraphs

57
00:06:10,830 --> 00:06:12,740
anywhere within your document.

58
00:06:12,880 --> 00:06:21,620
I'll write and I want to also add an image to my page here and the to add that major U.S. tax.

59
00:06:21,700 --> 00:06:27,690
We do less sign typing in high energy.

60
00:06:27,710 --> 00:06:29,400
I am just time for image.

61
00:06:29,600 --> 00:06:30,550
You do a space.

62
00:06:30,570 --> 00:06:38,750
You need to add an attribute and the attribute of going to court is source attribute.

63
00:06:38,820 --> 00:06:44,340
This is important because I am using this to reference where the image is coming from.

64
00:06:44,340 --> 00:06:48,530
The image is located inside these images for day here.

65
00:06:48,540 --> 00:06:52,130
If I expand that so this is the image Tiger too.

66
00:06:52,380 --> 00:06:54,680
So I need to reference this source.

67
00:06:54,900 --> 00:07:04,510
So you use cause to sign and then you use quotes in between the quotes you specify the location of the

68
00:07:04,560 --> 00:07:05,170
image.

69
00:07:05,360 --> 00:07:12,090
So it's located inside my images folder and the name of the image is caught.

70
00:07:12,090 --> 00:07:14,600
Poppy dot J.

71
00:07:14,600 --> 00:07:16,710
P. G.

72
00:07:16,980 --> 00:07:18,850
Right now you see this one here.

73
00:07:19,020 --> 00:07:21,230
It's a pig file.

74
00:07:21,300 --> 00:07:25,520
Im going to add another attribute called.

75
00:07:25,620 --> 00:07:26,580
All.

76
00:07:27,660 --> 00:07:29,960
This is an alternate text.

77
00:07:29,970 --> 00:07:34,710
Basically what this means I'm going to give you the value first are equal to.

78
00:07:35,080 --> 00:07:44,570
To give it a value and I just see you can type P Whatever you want and you just type in poppy image

79
00:07:45,090 --> 00:07:52,390
and then are to be greater than sign to close the stack.

80
00:07:52,440 --> 00:08:01,530
So with image tags they don't have a specific closing in tag like they like the tags so they have what

81
00:08:01,530 --> 00:08:03,540
you call the self-closing.

82
00:08:03,540 --> 00:08:08,360
You only have just the opener you don't have a clue as in when you're using the image tag.

83
00:08:08,640 --> 00:08:13,930
So what this all attribute will do.

84
00:08:14,110 --> 00:08:20,850
If for some reason this image is not able to be displayed then this text will take its place.

85
00:08:20,850 --> 00:08:27,540
The text which does indicate to the visit of the page that there was an image here so this will show

86
00:08:27,540 --> 00:08:28,590
up.

87
00:08:28,640 --> 00:08:32,810
This image is not display correctly or not displayed at all.

88
00:08:32,850 --> 00:08:39,960
That's what it's called or some alternate text so that's it for LIVE documentum doesn't click on the

89
00:08:39,960 --> 00:08:44,440
file option and click save or not and that is simply document.

90
00:08:44,460 --> 00:08:52,470
One thing I want to point out inside this image here where I have indicated the source because it's

91
00:08:52,560 --> 00:08:58,410
located inside the same project directly as this indexed or Tastee I may have found that I am working

92
00:08:58,410 --> 00:08:58,910
on.

93
00:08:59,220 --> 00:09:05,850
You only need to specify the name of the folder and then the name of the image just like you've done

94
00:09:05,850 --> 00:09:06,430
here.

95
00:09:06,590 --> 00:09:07,570
All right.

96
00:09:07,680 --> 00:09:10,380
One good thing about the brackets.

97
00:09:10,390 --> 00:09:11,340
Tex had it all.

98
00:09:11,340 --> 00:09:16,980
Is that his quote Life preview where you can preview your page.

99
00:09:17,100 --> 00:09:24,600
So I'm going to click on this live preview that will open up the Google Chrome.

100
00:09:24,600 --> 00:09:31,300
He only works with Google at the moment so if you click on that he or she can see his change and call.

101
00:09:31,830 --> 00:09:34,950
So this is what the web page looks like.

102
00:09:34,960 --> 00:09:36,060
This content here.

103
00:09:36,060 --> 00:09:43,680
This piece of code here is what is being rendered here in a web browser so you can see here with my

104
00:09:43,680 --> 00:09:45,230
sample web page.

105
00:09:45,390 --> 00:09:50,880
This title here so anything with heavy has content is not displayed.

106
00:09:50,880 --> 00:09:53,190
The only thing you can see is a title.

107
00:09:53,370 --> 00:09:59,600
Shows up here in siding with the web browser and then you can see here.

108
00:10:00,090 --> 00:10:01,020
Hello world.

109
00:10:01,050 --> 00:10:03,800
This is one element here.

110
00:10:04,220 --> 00:10:06,880
And then the paragraph is is here.

111
00:10:06,960 --> 00:10:13,260
And then we have this image which is this image here and there is the also the documents is rendered

112
00:10:13,290 --> 00:10:17,030
in the way it has been displayed in the edit.

113
00:10:17,070 --> 00:10:23,280
So you can see we had the title first which this on this page here.

114
00:10:23,400 --> 00:10:32,880
And we inside the body element we have the H1 which is this paragraph and then the image of the poppy.

115
00:10:33,060 --> 00:10:39,400
So that's basically a very basic history mail documents structure.