Hello and welcome.
In this lecture we are going to create the structure for our app using hasty e-mail.
All right.
I've got my text set it opens.
I'm just going to switch to my blank page CML file here does see the code indexed or hasty mail.
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
what I have to I have just added some hasty e-mail tags.
The very first line here the doc type is not actually part of the CML document is called a doc type
so it's a declaration.
The purpose of the doc type is to notify the web browsers or search engine that the document contains
hasty AML five.
So that's the main purpose.
The actual Haiti AML documents starts from line 2 which is the opening tag and line 5 which is the closing
tag.
So every other content between these hasty AML opening and closing tag all comprise of the content of
this page so we can all sob nest of attacks inside this element.
This HCM elements are going to nest child elements.
I have had add a child element which is the had tag here line three to eight 2 so also a notice of intent
and properties so you can tell by looking at the code that the head element here is a child of the Haiti
AML and these tags here are children of the head tag.
So they had tag at the is merely for informational purposes.
You don't actually see the content of the head tags they're there to provide information for the web
browsers and for search engine purposes.
So we've got a title tag on line 4 which basically displays the title of the page then line 5.
We've got a mentor tag and inside of it it's got an attribute called concept set with a value of UTF
Dash 8.
So Metcalf's the concept refers to the encoding type for these documents standard is UTF 8 line number
six of the code corner the method tag with a attribute of name and the value of viewport also another
attribute called content with the value of with equals device minus a width comma initial dash skill
equals 1 what line 7 is saying is that so what line 6 is saying is that this document can be viewed
by any device regardless of the screen size so you can have a small device like a cell phone or big
device like a big computer screen and also I've said the initial skill to dash one that means equals
one.
You can zoom this scale here and there was you to zoom in and out.
Line 7 is a reference to our external star sheet which is here.
This started here.
A reference to the staff sheet I have added another child element which is the body so the content of
the body tag the bodies start from line 10 and on line 26.
So this is the actual content that will be visible when a visitor goes to this page.
OK so only the content between the body tag is displayed.
Body tag on line eleven there.
I have caught a head in tag which is a hate one and I've also used some in line styling so rather than
I'm going to do some external styling later but I've also embedded some in life styling here so line
eleven I'll call the hate one tag which is ahead in tag and I've applied a style toit given the color
black and given the margin to the left 0 3 9 5 pixels and the font weight refers to the boldness so
I've given it the value of bold and then the actual title the text will be displayed is image slider
I've inserted a couple of brake tags to create some space on line 12 and 13 line 14 to line 21 is where
we create a div we create a main deep on line 14 code wrapper and given that this will be the main div
that will wrap the images.
So giving it to a style maximum width of a thousand pixels and position to be relative.
Okay.
And I've created a few image tags.
I am G tags and giving them a class of slides so they all belong to the same class.
So when I'm doing this I says later the styling will be applied to this image class.
So with the image class slides I've also with the AMG need to specify the location of the image.
So the location of the image you do that using an attribute.
So the source attribute here is used to specify where the image is coming from.
So the image is coming from my images folder and thus the first image.
Second image third fourth and so on have applied a styling to the images to the way to be 100 percent
of the parent container.
But will modify this slightly when we are doing our external styled shit on line 22 and 23.
I've created a class called button 1 and button to giving it a position of absolute and so from the
top 45 percent of the parent container from the left said it's zero.
I've also attached a event on click event to it event handler and what this will do a virtual look attached
a function of greater function here.
Well should I would display this.
Show you how this was done in the javascript later.
So this was the function would do it with check for the number of slide and respond accordingly.
Here in this button in of this plan.
The reason I put this span here so that I can style this.
This entity this entity is used to create a less than.
And this is used to create equal great idea.
Okay so the ampersand JT will create a greater downside sine the upper sine L2 will create a less than
sine.
So we gonna use it.
The greater left unsigned to switch between next and previous on the slide.
And need to wrap them inside a span I.D. so that I can styled them property because you can store them
alone a bit difficult.
That's why I've wrapped them around the span element and the deep ends here on line 24.
Line 25 is a reference to our script.
The script is javascript is always placed just before the closing body tag so that it doesn't even wait
for all the elements on the page to load before the script executes.
So that's set for our hasty email for this project.
Thanks for watching and bye for now.
I'll just say that we can have a quick look and see what it looks like.
So this is what the page looks like at the moment.
Obviously the functionality is not in place or we can't slide through the images at the moment but at
least we've got the structure in place.