Hello and welcome to the part three of creatine basic hastier mail documents structure.
Before we carry on from where we left off in part two I just want to show you something if you notice
here we've got some indentation inside the text and it'll indentation is very important.
It helps makes your code more organized and neater and makes it easier for someone to read your code
and also for you to read your code.
So look in the code here from the indentation.
You can tell that the head and the body elements are charged elements to the hastier mill element.
So any content I had inside the head element will become child elements of the head.
And then grandkids behave here Mal any concept any elements inside the body element will become child
or children element of the body element and there will be grand children for the hastier male element
so you can tell the way the elements are related from the indentation so indentation is very important.
So I'm going to add a couple of tournaments to the head section so I come to the head inside the between
the head element to a tab.
And if you notice as I do a tab it automatically indent the place where the cursor is flashing.
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
space concept.
Okay then the value motor car set is an attribute and the value I'm going to set this value to you.
T f Dash 8 and then I close it with a greater than sign.
The motor car said basically is used to set the character set for the documents so that any text you
enter will be recognized by any way anybody who's viewing this all over the world so makes it easier
to interpret the characters in the document.
When you set attributes you always have to use it equal to to give the value and if values are in close
quarters as you can see here.
So I'm going to add another limit this time is going to be a title element.
So again left ankle bracket or less downside and when a type in title and then a greater than sign notice
automatically it does that for us.
Not all text editors to some you have to manually do it yourself.
But brackets automatically places the other types all year so it saves a bit of typing.
So in between the tag How type in my title.
I'm just going to say my sample
web web page Well a little bit like that.
If you notice it indentation you can tell that this two elements are child a mess of the head element.
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
moment.
Makes any content inside the head element is not visible.
The only thing that you do that is visible is this title here that will show up on the title of the
web browser and when the page is viewed everything else has just information purposes or used to reference
other related documents.
So now there's some element inside the body element.
Anything between the body element is the outhaul content that is visible on the web page.
So I'm going to add here one element.
Again I do less than sign.
Type in page 1 and then close that.
And I'm going to just say.
Low.
Hell a wall.
Okay.
The one is basically use as he head into if you want to as some kind of head into your web page you
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
the lowest head.
I know if they want to do is add a paragraph tag.
So the way you add paragraphs to a web page is by use in BP tack again.
I do here less than sign type in PE and then a greater than sign.
In between the opening and closing element you just type in your whatever text you want to see.
Today is a new day.
So that's all I'm typing for now so you can use as many paragraph tags as you want to insert paragraphs
anywhere within your document.
I'll write and I want to also add an image to my page here and the to add that major U.S. tax.
We do less sign typing in high energy.
I am just time for image.
You do a space.
You need to add an attribute and the attribute of going to court is source attribute.
This is important because I am using this to reference where the image is coming from.
The image is located inside these images for day here.
If I expand that so this is the image Tiger too.
So I need to reference this source.
So you use cause to sign and then you use quotes in between the quotes you specify the location of the
image.
So it's located inside my images folder and the name of the image is caught.
Poppy dot J.
P. G.
Right now you see this one here.
It's a pig file.
Im going to add another attribute called.
All.
This is an alternate text.
Basically what this means I'm going to give you the value first are equal to.
To give it a value and I just see you can type P Whatever you want and you just type in poppy image
and then are to be greater than sign to close the stack.
So with image tags they don't have a specific closing in tag like they like the tags so they have what
you call the self-closing.
You only have just the opener you don't have a clue as in when you're using the image tag.
So what this all attribute will do.
If for some reason this image is not able to be displayed then this text will take its place.
The text which does indicate to the visit of the page that there was an image here so this will show
up.
This image is not display correctly or not displayed at all.
That's what it's called or some alternate text so that's it for LIVE documentum doesn't click on the
file option and click save or not and that is simply document.
One thing I want to point out inside this image here where I have indicated the source because it's
located inside the same project directly as this indexed or Tastee I may have found that I am working
on.
You only need to specify the name of the folder and then the name of the image just like you've done
here.
All right.
One good thing about the brackets.
Tex had it all.
Is that his quote Life preview where you can preview your page.
So I'm going to click on this live preview that will open up the Google Chrome.
He only works with Google at the moment so if you click on that he or she can see his change and call.
So this is what the web page looks like.
This content here.
This piece of code here is what is being rendered here in a web browser so you can see here with my
sample web page.
This title here so anything with heavy has content is not displayed.
The only thing you can see is a title.
Shows up here in siding with the web browser and then you can see here.
Hello world.
This is one element here.
And then the paragraph is is here.
And then we have this image which is this image here and there is the also the documents is rendered
in the way it has been displayed in the edit.
So you can see we had the title first which this on this page here.
And we inside the body element we have the H1 which is this paragraph and then the image of the poppy.
So that's basically a very basic history mail documents structure.