1
00:00:00,690 --> 00:00:02,540
Hello and welcome.

2
00:00:02,630 --> 00:00:11,580
In this video I will walk you through a basic hastier mail document structure.

3
00:00:12,480 --> 00:00:20,850
This is an illustration of a basic hastier middle document structure.

4
00:00:20,850 --> 00:00:26,790
So I'm going to walk you through the structure from top to bottom.

5
00:00:26,820 --> 00:00:35,190
I'll start with the doctype the doc type is what is called a declaration.

6
00:00:35,220 --> 00:00:46,260
It must be the very first thing in your heathier mail document before the history air marshal tag the

7
00:00:46,260 --> 00:00:52,670
dock type declaration is not an hastier mail tag.

8
00:00:52,920 --> 00:01:06,660
It is an instruction to the Web browser about what version of hastier mail the page is written in.

9
00:01:06,660 --> 00:01:16,270
It lets the web browser interpret the same documents as a web page.

10
00:01:16,320 --> 00:01:25,530
You always have to add the type declaration to the very top of your document.

11
00:01:25,530 --> 00:01:27,300
The first thing you should do.

12
00:01:27,390 --> 00:01:33,180
So the web browsers knows what type of document to expect.

13
00:01:33,180 --> 00:01:37,260
And then they can render the correct document.

14
00:01:38,130 --> 00:01:44,420
I have written the doctype in my case but it is not case sensitive.

15
00:01:44,430 --> 00:01:47,390
So you can also write it in like case.

16
00:01:47,460 --> 00:01:55,500
So in the illustration here say dock type space hastier males I'm busy closely the document type is

17
00:01:55,620 --> 00:01:58,410
an hastier mail document.

18
00:01:58,410 --> 00:02:07,090
So you're right the way you write the adult type you do the less than sign exclamation mark doctype

19
00:02:07,130 --> 00:02:12,540
and then hastier mail and then a greater than sign.

20
00:02:12,840 --> 00:02:17,260
Next we have the hastier mail element.

21
00:02:17,310 --> 00:02:25,440
So we've got the whole clean page tmr element and the closing hastier mail element the closing element

22
00:02:25,530 --> 00:02:37,590
is identified with the forward slash before the tag is close to the cma element wraps all the content

23
00:02:37,950 --> 00:02:39,870
on the entire page.

24
00:02:40,140 --> 00:02:46,970
And it is sometimes known as the root element.

25
00:02:47,820 --> 00:03:00,540
Next we've got the head element which contains all the metal information about the document motor basically

26
00:03:00,540 --> 00:03:07,980
refers to information about information so is micro information about information.

27
00:03:08,070 --> 00:03:20,670
The head element acts as a container for all the stuff you want to include on the hastier mill page.

28
00:03:20,970 --> 00:03:30,320
So whatever our content is enclosed in the head between the head element isn't the content that is visible

29
00:03:30,360 --> 00:03:34,110
when someone hits your web page.

30
00:03:34,140 --> 00:03:44,630
So within the head element you can add tags like the metal casket or saw the page title.

31
00:03:44,630 --> 00:03:47,720
You can also include that in there.

32
00:03:47,730 --> 00:03:50,430
What is it made to cast it.

33
00:03:50,570 --> 00:03:56,720
The cast said basically has a value of beauty.

34
00:03:56,840 --> 00:04:07,690
Dash it which is the attribute this element basically is used to set the character off your document.

35
00:04:07,950 --> 00:04:19,440
So this standard is a utf Dash 8 which includes most characters from the vast majority of human writing

36
00:04:19,710 --> 00:04:21,170
languages.

37
00:04:21,240 --> 00:04:27,490
So when you have your met our carcetti set to your tier that's it.

38
00:04:27,720 --> 00:04:37,700
It essentially means that he can handle any textual content you might put on it.

39
00:04:37,890 --> 00:04:49,890
The title element is used to set that title off your page which is the title that appears in the web

40
00:04:49,890 --> 00:04:51,530
browser tab.

41
00:04:51,570 --> 00:04:58,680
So when the page ad really loads it'll have a tag a title on the web browser.

42
00:04:58,710 --> 00:04:59,820
This is the.

43
00:04:59,890 --> 00:05:00,270
Right.

44
00:05:00,310 --> 00:05:07,750
You would have set within the documents that will get displayed and people can bookmark that and also

45
00:05:07,750 --> 00:05:11,100
see that as a favourite.

46
00:05:11,110 --> 00:05:20,780
Next we have the body element the body element our trulli contains the visual content of the page.

47
00:05:20,830 --> 00:05:28,840
So when you visit the website the actual content you can see is the content that is wrapped between

48
00:05:28,870 --> 00:05:37,180
the body tag which is anything between the opening and closing body tag is the visible content that

49
00:05:37,180 --> 00:05:39,820
is displayed on the web page.

50
00:05:40,690 --> 00:05:51,100
So it contains all the content that you want to show to the web user or visitor when they visit your

51
00:05:51,100 --> 00:06:03,490
page whether that is text images videos games playable audio tracks or what about content you have you

52
00:06:03,490 --> 00:06:12,810
have to place it between the body element for the visitor to see it inside the body element.

53
00:06:12,880 --> 00:06:16,730
I have called some other nested element.

54
00:06:16,990 --> 00:06:26,200
I've got a hey one tank between elemen Physically is used for hedin tag you can use that if you want

55
00:06:26,200 --> 00:06:28,400
to create a heading.

56
00:06:28,720 --> 00:06:35,850
And usually there are 1 2 6 1 being the largest we've got.

57
00:06:35,850 --> 00:06:38,850
The P stands for paragraph.

58
00:06:39,010 --> 00:06:44,820
You use that to add paragraph to a web page.

59
00:06:45,130 --> 00:06:56,620
Next we've caught the mge which is an image tag if you want to add images to your web page.

60
00:06:56,890 --> 00:07:04,650
Use the empty tack BMG is what is known as a self-closing attack.

61
00:07:04,720 --> 00:07:09,000
It doesn't have a close intact inside.

62
00:07:09,050 --> 00:07:10,170
I am g.

63
00:07:10,210 --> 00:07:11,110
Tag.

64
00:07:11,260 --> 00:07:17,410
You have to specify a couple of attributes.

65
00:07:17,520 --> 00:07:23,140
The first country boot is called The Test power of C or D Source.

66
00:07:23,170 --> 00:07:29,440
So basically if you add in an image you need to use the source attribute to specify where the image

67
00:07:29,500 --> 00:07:37,490
is going to be a reference from an every attribute you assign a value using that equals to.

68
00:07:37,720 --> 00:07:41,280
And you enclose the values in quotes.

69
00:07:41,330 --> 00:07:49,720
So in my example here I've said the image is located in my images folder and in the name of that image

70
00:07:49,720 --> 00:07:54,410
is called Poppy dot G next.

71
00:07:54,490 --> 00:07:57,680
And what the attribute called OT.

72
00:07:57,750 --> 00:08:07,200
This is core the alternate text and you have to give it a value of giving it a value of cute puppy image.

73
00:08:07,450 --> 00:08:17,080
Basically what that does if for any reason the image is meant to be on this page does not get displayed

74
00:08:17,680 --> 00:08:21,560
the alternate text will display the text instead.

75
00:08:21,790 --> 00:08:29,740
So the text will advise visitors that there was an image here or maybe a cute puppy or whatever.

76
00:08:29,950 --> 00:08:34,850
But basically you have to give a descriptive text that will show up.

77
00:08:34,930 --> 00:08:43,330
If anything happens to the image for example if the images moved or not position probably for some reason

78
00:08:43,330 --> 00:08:45,240
or the other doesnt display.

79
00:08:45,310 --> 00:08:46,850
Then they alternate text.

80
00:08:46,960 --> 00:08:48,960
Yes this played instead.

81
00:08:50,130 --> 00:08:59,750
There are so many CML elements vonda just use a tiny bit here in this illustration by as you continue

82
00:08:59,780 --> 00:09:03,100
to get more knowledgeable in his team.

83
00:09:03,140 --> 00:09:08,230
You begin to get more exposed to more hastier male elements.

84
00:09:08,330 --> 00:09:11,140
So that's it for this video.

85
00:09:11,330 --> 00:09:15,230
On the basic hastier male documents the structure.

86
00:09:15,560 --> 00:09:16,460
Thank you.

87
00:09:16,540 --> 00:09:16,970
Bye.