1
00:00:00,750 --> 00:00:01,910
Hello and welcome.

2
00:00:01,950 --> 00:00:11,600
In this lecture we are going to create the structure for our app using hasty e-mail.

3
00:00:11,990 --> 00:00:12,640
All right.

4
00:00:12,650 --> 00:00:14,960
I've got my text set it opens.

5
00:00:14,960 --> 00:00:21,580
I'm just going to switch to my blank page CML file here does see the code indexed or hasty mail.

6
00:00:21,920 --> 00:00:28,670
So the way this lecture is going to work I'm going to rewrite the code and then I'll add it on and explain

7
00:00:28,670 --> 00:00:35,590
what I have to I have just added some hasty e-mail tags.

8
00:00:35,780 --> 00:00:43,840
The very first line here the doc type is not actually part of the CML document is called a doc type

9
00:00:43,850 --> 00:00:45,980
so it's a declaration.

10
00:00:45,980 --> 00:00:54,740
The purpose of the doc type is to notify the web browsers or search engine that the document contains

11
00:00:54,860 --> 00:00:56,820
hasty AML five.

12
00:00:56,840 --> 00:00:58,540
So that's the main purpose.

13
00:00:58,610 --> 00:01:07,670
The actual Haiti AML documents starts from line 2 which is the opening tag and line 5 which is the closing

14
00:01:07,670 --> 00:01:07,990
tag.

15
00:01:08,000 --> 00:01:17,330
So every other content between these hasty AML opening and closing tag all comprise of the content of

16
00:01:17,360 --> 00:01:25,190
this page so we can all sob nest of attacks inside this element.

17
00:01:25,200 --> 00:01:31,470
This HCM elements are going to nest child elements.

18
00:01:31,700 --> 00:01:41,760
I have had add a child element which is the had tag here line three to eight 2 so also a notice of intent

19
00:01:41,760 --> 00:01:48,970
and properties so you can tell by looking at the code that the head element here is a child of the Haiti

20
00:01:48,980 --> 00:01:54,200
AML and these tags here are children of the head tag.

21
00:01:54,200 --> 00:01:58,880
So they had tag at the is merely for informational purposes.

22
00:01:58,880 --> 00:02:05,780
You don't actually see the content of the head tags they're there to provide information for the web

23
00:02:05,780 --> 00:02:10,450
browsers and for search engine purposes.

24
00:02:10,460 --> 00:02:18,530
So we've got a title tag on line 4 which basically displays the title of the page then line 5.

25
00:02:18,530 --> 00:02:27,890
We've got a mentor tag and inside of it it's got an attribute called concept set with a value of UTF

26
00:02:27,950 --> 00:02:30,080
Dash 8.

27
00:02:30,320 --> 00:02:39,830
So Metcalf's the concept refers to the encoding type for these documents standard is UTF 8 line number

28
00:02:39,830 --> 00:02:50,030
six of the code corner the method tag with a attribute of name and the value of viewport also another

29
00:02:51,200 --> 00:02:59,600
attribute called content with the value of with equals device minus a width comma initial dash skill

30
00:02:59,690 --> 00:03:09,710
equals 1 what line 7 is saying is that so what line 6 is saying is that this document can be viewed

31
00:03:09,890 --> 00:03:17,720
by any device regardless of the screen size so you can have a small device like a cell phone or big

32
00:03:17,720 --> 00:03:24,800
device like a big computer screen and also I've said the initial skill to dash one that means equals

33
00:03:24,800 --> 00:03:25,400
one.

34
00:03:25,610 --> 00:03:30,780
You can zoom this scale here and there was you to zoom in and out.

35
00:03:30,950 --> 00:03:36,110
Line 7 is a reference to our external star sheet which is here.

36
00:03:36,110 --> 00:03:37,980
This started here.

37
00:03:38,120 --> 00:03:49,560
A reference to the staff sheet I have added another child element which is the body so the content of

38
00:03:49,560 --> 00:03:55,500
the body tag the bodies start from line 10 and on line 26.

39
00:03:55,800 --> 00:04:02,260
So this is the actual content that will be visible when a visitor goes to this page.

40
00:04:02,770 --> 00:04:08,260
OK so only the content between the body tag is displayed.

41
00:04:08,370 --> 00:04:10,550
Body tag on line eleven there.

42
00:04:10,590 --> 00:04:20,100
I have caught a head in tag which is a hate one and I've also used some in line styling so rather than

43
00:04:20,490 --> 00:04:27,450
I'm going to do some external styling later but I've also embedded some in life styling here so line

44
00:04:27,510 --> 00:04:34,890
eleven I'll call the hate one tag which is ahead in tag and I've applied a style toit given the color

45
00:04:35,010 --> 00:04:43,690
black and given the margin to the left 0 3 9 5 pixels and the font weight refers to the boldness so

46
00:04:43,760 --> 00:04:51,720
I've given it the value of bold and then the actual title the text will be displayed is image slider

47
00:04:52,440 --> 00:05:04,890
I've inserted a couple of brake tags to create some space on line 12 and 13 line 14 to line 21 is where

48
00:05:04,890 --> 00:05:14,570
we create a div we create a main deep on line 14 code wrapper and given that this will be the main div

49
00:05:14,580 --> 00:05:17,960
that will wrap the images.

50
00:05:18,210 --> 00:05:26,000
So giving it to a style maximum width of a thousand pixels and position to be relative.

51
00:05:26,090 --> 00:05:26,660
Okay.

52
00:05:26,670 --> 00:05:30,170
And I've created a few image tags.

53
00:05:30,210 --> 00:05:37,300
I am G tags and giving them a class of slides so they all belong to the same class.

54
00:05:37,440 --> 00:05:43,410
So when I'm doing this I says later the styling will be applied to this image class.

55
00:05:43,410 --> 00:05:50,570
So with the image class slides I've also with the AMG need to specify the location of the image.

56
00:05:51,120 --> 00:05:54,930
So the location of the image you do that using an attribute.

57
00:05:54,930 --> 00:06:00,260
So the source attribute here is used to specify where the image is coming from.

58
00:06:00,900 --> 00:06:05,460
So the image is coming from my images folder and thus the first image.

59
00:06:05,460 --> 00:06:14,070
Second image third fourth and so on have applied a styling to the images to the way to be 100 percent

60
00:06:14,520 --> 00:06:16,070
of the parent container.

61
00:06:16,460 --> 00:06:24,670
But will modify this slightly when we are doing our external styled shit on line 22 and 23.

62
00:06:24,680 --> 00:06:33,870
I've created a class called button 1 and button to giving it a position of absolute and so from the

63
00:06:33,870 --> 00:06:40,140
top 45 percent of the parent container from the left said it's zero.

64
00:06:40,320 --> 00:06:49,350
I've also attached a event on click event to it event handler and what this will do a virtual look attached

65
00:06:49,440 --> 00:06:51,380
a function of greater function here.

66
00:06:51,420 --> 00:06:53,860
Well should I would display this.

67
00:06:53,910 --> 00:06:57,990
Show you how this was done in the javascript later.

68
00:06:57,990 --> 00:07:05,870
So this was the function would do it with check for the number of slide and respond accordingly.

69
00:07:05,940 --> 00:07:09,940
Here in this button in of this plan.

70
00:07:10,110 --> 00:07:14,420
The reason I put this span here so that I can style this.

71
00:07:14,760 --> 00:07:20,510
This entity this entity is used to create a less than.

72
00:07:20,750 --> 00:07:24,370
And this is used to create equal great idea.

73
00:07:24,890 --> 00:07:35,010
Okay so the ampersand JT will create a greater downside sine the upper sine L2 will create a less than

74
00:07:35,010 --> 00:07:35,370
sine.

75
00:07:35,970 --> 00:07:36,960
So we gonna use it.

76
00:07:37,170 --> 00:07:43,310
The greater left unsigned to switch between next and previous on the slide.

77
00:07:43,310 --> 00:07:49,680
And need to wrap them inside a span I.D. so that I can styled them property because you can store them

78
00:07:49,770 --> 00:07:51,480
alone a bit difficult.

79
00:07:51,570 --> 00:07:59,020
That's why I've wrapped them around the span element and the deep ends here on line 24.

80
00:07:59,190 --> 00:08:02,580
Line 25 is a reference to our script.

81
00:08:02,580 --> 00:08:09,810
The script is javascript is always placed just before the closing body tag so that it doesn't even wait

82
00:08:09,810 --> 00:08:15,180
for all the elements on the page to load before the script executes.

83
00:08:15,300 --> 00:08:20,520
So that's set for our hasty email for this project.

84
00:08:20,520 --> 00:08:23,630
Thanks for watching and bye for now.

85
00:08:23,790 --> 00:08:31,260
I'll just say that we can have a quick look and see what it looks like.

86
00:08:31,410 --> 00:08:33,540
So this is what the page looks like at the moment.

87
00:08:33,540 --> 00:08:40,200
Obviously the functionality is not in place or we can't slide through the images at the moment but at

88
00:08:40,200 --> 00:08:43,920
least we've got the structure in place.