All language subtitles for 4. Tags

Hi, within this lecture, we're finally going to start learning about HDMI.

So first of all, we actually have written our first code, right?

This is the first code.

But it's not the complete or it's not very fancy code right now.

So before we start, we need to declare that we're writing an 80 mile code.

So let me open Google dot com and see how they have started their age demo.

So if we open doors and if we try to see the source and you can do this in any other Web site, as though

if you say we've paid search, you see this thing doctype, HDMI.

So it means that we're writing leet the HDMI line.

We are writing with the latest version, which is DHT, Hermel five point oh.

So before we write anything, we generally do this stuff.

We open and and angular brace or.

And smaller than or greater dense size.

We're going to use those things a lot because these are called tags and we work with tags in HDMI.

OK.

So get used to this thinks.

Right.

This exclamation mark doctype h demo.

So we are basically saying that this is an HDMI file and we are writing an HDMI code or comment.

So here you go.

We are now ready to start.

And the second thing that's really going to do is to use this tags again.

So we work with tags generally in each demo.

We open tags and we close tags afterwards.

So as you can see, we open the tag and we didn't close the tag in DOCTYPE Declaration.

So dirt, something called self-closing tags.

This is Volf the types and these are rare, rigidly open the tags and close the tags.

And I'm going to show you s closing tags examples later on.

But then you type or renew.

Just write some tag.

You must close it or else HDMI won't understand what you're doing.

For example, if you're writing a text, you need to say it's the text.

And for example, if you write HDMI, well, then you should close it.

So this is a closing tag and the left part is an opening tack.

So this these are called tags again.

So here you go.

It means that I'm starting my HDMI coat.

OK.

And then HDMI code.

We generally have two different parts which are head and body.

So we can see this in every Web site because it defines some structure.

So Buddy means buddy of the code or buddy of the page.

It's what we see, actually.

So let me show you what I mean.

If you go to Google again and say inspect element, we can see this buddy.

And if you just closes down, as you can see, there are two main paths under HDMI Alltech, which is

the head and body.

OK.

So when I hover over this hat, I it doesn't show me anything.

But when I hover over this buddy shows me the whole page.

So when you hover over items in this inspector, it's highlights the items that you're hovering on.

For example, if you want to find the HDMI code of does Google image, you can hover over the items

one by one until you see the code itself.

And as you can see, when I hover over had, it doesn't show me anything because in had we have general

information like meta data, like the title of the page or some of the encryption of the page, something

like that.

OK.

But we don't have the items that user will see.

For example, in the title we see the Google.

And this is the title.

We see the Google over here.

OK.

So that kind of information, generally information that we're not going to see in the Web page itself,

like the title, like the metadata content.

UTF eight encryption.

OK, we're going to actually use this in our HDMI cord as well.

If you don't give the title, if you don't specify a title, nothing will show up in the browser tabs.

And this is not what we want.

So basically in other HDMI tag, we're going to have two separate tags, first of which is head.

So in the hat, like we have seen, we can't specify the title.

And again, I'm writing what I have to write inside of these tags.

OK.

If I write something out of this tag, it won't be included in the head section.

It will be included in something else.

And similarly, if I write title over here, if I write something between these tags.

OK.

It will be included in the title section.

If I write somewhere else, it won't be included in the title section.

That's why we use tags.

So here we go.

So I have written Color Links website.

If you save it.

If you run it on your browser.

OK.

As you can see now, we don't see anything because we don't have anything in body, but we see the color

Linux Web site as a title.

So before we didn't see that.

Maybe if you just delete this or cut this with control X and save it with control s.

Okay.

And if you come over here and refresh this, as you can see, we don't see this.

We don't have the title anymore.

So if you just replace it with Control V and save it with control s.

Then if you come back and refresh this, as you can see now I have this color, the next Web site.

So that's it.

That's why we use title.

So it's in the had section.

As I said before, it's not what the user sees, but it's the jerilyn formation.

We're not going to specify an encryption or something like content, like on maybe an image like the

Google logo icon in here.

OK, so it's enough for us to understand what Head does.

What we're gonna do.

We're going to focus on body to see different parts of the body.

So as you can see, Buddy is written in the same way like we did with the hat.

So that's it for the hat section.

So if I want to go into the body, then I will have to open another tag in here.

But if I open it in here, it won't be body.

OK.

So if I write something in here, it will be included in the hat section, not body section.

And by the way, you cannot write just random things.

You have to specify if you want to take notes.

For example, you can do this.

The smaller sign.

Exclamation mark, dash, dash.

Metadata, for example.

Metadata is just a note that you take and close the tag.

Like this.

So this is the syntax.

If you want to take notes, you can write whatever you want in here.

I have written down metadata because that's what the head section does.

You write the metadata in here.

It won't be shown in the content or to the user at all.

OK.

If you want to take notes during this section.

Just use this sign, text, exclamation mark, dash, dash and add the same thing at the end of this

thing as well.

And you can do this like that with TAPS in order to make it a little bit more readable.

OK.

For example, it's much better right now.

So under HDMI we have that had.

And don't forget to check every time you just make a change and spurt working perfectly right now for

us.

And you can just do it like this.

If you see something like this, it's exactly the same thing.

But it's more readable.

And you get all these nice things in Genie as well.

So, OK, let's tap here.

And within the next picture, we're going to move on to Buddy.

So I'm just writing buddy over here.

OK.

We're going to fill this up in the next lecture.