OK we'll come back.
So now is the time where we finally get to start actually writing some code and we're going to start
by talking about HCM out in the next unit.
We're going to cover a lot of different parts of it to him how we're going to learn by the end how to
write simple age to him old documents when understand the difference between closing and self-closing
tags tagged with the attributes you want to definitely use M.D and a lot which you've already seen.
And at the very end I'll give you an image of a Web site and you should be able to write the corresponding
H.T. amount.
So translate an image to actual code.
So we're going to start by talking a little bit about the history of HDMI.
So again it stands for hypertext markup language.
Think back to that first introduction to front end video HDMI out is the structure and content of a
page not the styling not the interactivity just the structure and content.
Back in the academic community in the year 1989 early 1990 there's not exactly a hard start date to
age Timo but in that time basically people were exchanging papers.
Giant thesis papers and scientific documents technical documents and they all have very specific formatting
.
But when they're being exchanged there was no way to actually send that formatting across the Internet
.
So what I mean is let's say you wanted to have a paper that looked like this.
And this is a style guide that I found on writing scientific papers.
So let's just take the abstract section.
So your abstract looks like there's a heading here.
It's a little bolded and bigger text.
We've got this sort of introduction to one part of the abstract and then a bunch of bullet points.
We've got italicised and bolded text.
And then it looks like a link to another part of the paper.
And then lastly we've got some nested bullet points.
So this information if I wanted to send this to somebody.
But all that I could send is text.
So I can't send an image of this I can't send like the actual structure of it.
All I can send is some text so that might look something like this.
The problem is how do I take this text here which is the same text as over here in Hadaway in code the
structure.
How do I say this abstract which actually don't have here.
But if I added that in how would I say this is bold and bigger text and so is function.
And there's a bullet point right here and another bullet point right here.
So that is what each team lets us do.
It lets us take text in content and just by writing some other text on top of it.
It lets us specify exactly.
This is a heading this is bold.
This is a italicized.
This is a link and that last part.
Link is actually really important.
Thats where the name comes from Hypertext Markup Language because each T.M. allows us to create hyperlinks
and linking documents together is really important.
Many scientific papers are going to be referencing other scientific papers footnotes and all sorts of
citations.
H tim l facilitated that and made a really big impact and then basically caught on.
People realized it's pretty simple.
It's not a very intimidating thing so moved kind of away from purely academic situations to kind of
broader use all the way up to my space.
Few remember my space or if you ever had a myspace you could actually edit your profile just by writing
HDMI.
So there are people who are absolutely not technical and they were still able to write H T M L and C
Ss to add some interesting features to the page to make some customized visuals.
OK.
So let's keep that in mind.
We have this giant thing of text that we want to be able to encode some structure.
And I want to say this is bold or this is a bullet point and so on.
Tim L allows us to do that using H.T. tags.
So what we basically do is we take some content in the middle and we sandwich it between an opening
tag and a closing tag.
This lets me specify specific parts of the page or of the paragraph for the content that I can say right
in between these two tags is a bold right between these two is a link right between these two is italicized
text and so on.
So I'll show you that we could go through here and decide OK.
This is going to be a heading on our page and we'll wrap it in an H1 tag which we haven't introduced
yet.
We will get there.
But for now let's just specify that this is the largest heading on our page.
The next thing we might want to do is go ahead and make this bolded here.
So the way that we make things bold there's a few the simplest one is to wrap it in something called
a B.Tech to say that it's bold.
For those of you who know him l the tag is actually on its way out.
It's being deprecated which means that you're basically you're not supposed to use it anymore.
It works just fine.
There is an alternative.
We'll discuss in a little bit.
Likewise I might want to make something let's say a separate paragraph.
So I wanted to add some spacing between this line and the next line.
So I add a paragraph and what that will do is whatever's between these two tags goes on its own line
and has basically returned on either side.
So as you can see the general rule applies to all the tags that we've seen or we had an H1 or bold tag
or a paragraph tag.
Don't focus on the tags himself just yet.
We're going to have plenty of videos discussing individual ins and outs of all the tags.
But again remember this pattern we have tag name starting tag name closing some content in between.
OK so the next video we're now going to actually make a new real Tim efile not just a scientific document
some text but a real file.
And we're going to open it in the browser and actually see the age T.M.