Let's not learn about HTML attributes,
classes and ids.
And then also learn
about a couple more different HTML elements.
So what are attributes?
Well in HTML some elements can have attributes
and these attributes basically describe elements.
So that's for example create a link
and this link will be inside of this paragraph, okay.
So as you already saw we can nest elements
inside one another, for example this h1 is inside the body
and this p element is also inside the body.
So the child elements of the body element okay.
So I forgot to mention that in the last lecture.
Anyway so let's not add this link element
inside of the paragraph.
And for that, we use the anchor element.
So there's an a, and then in here
we put a text that we want to be displayed on the page.
So just like before and the paragraph, for example
so here I want to place a link to my profile on Udemy.
So let's say Jonas on Udemy
but now how do we tell the browser where this link
should actually point to?
And that's where the attributes come in.
So, as I said, we used attributes to describe elements.
And in this case, we described this anchor element
using the href attributes.
And so href stands for hypertext reference.
And so here you put the URL where this link should point to.
So let's actually get my profile page on Udemy.
So Jonas Udemy that's actually a link,
I think yes, so let's copy this and put it here.
Okay, give it a safe.
And now well here we have to reload it.
Sometimes it doesn't work.
Sometimes we have to reload okay,
so when you don't see it changing right away
just reload and then it will work.
So here we have this now blue link.
And so that's the standard format of any HTML link.
And when we now click this indeed,
it goes to my user page here on Udemy.
And of course you can use your own link
or whatever link you want to use.
And then we can go back and we're back on this page.
Okay, so that's what we used this href attribute for.
We described the anchor element by telling it
which URL it should go to,
whenever we click on the link.
Now here on the page,
you can actually see that there's text here.
So this link is right in line with the previous text.
So the text here in this paragraph
that's why we call the anchor element an inline element.
So it flows in line with the rest of the text.
Now on the other hand, for example
this h2 element here is a so-called block element.
Because as we see here, this heading is not in line
with the text of the previous element.
It created a new line
which only contains this content of this heading right?
So all of this year is this huge block.
And so it's a block element not an inline element, okay.
So we can actually include this link here in a sentence.
So let's say you can learn more about it
and then let's say on Udemy.
All right here, we need a space, okay.
And so now this looks like a normal sentence
and then with a link in it,
and we can even put a period after it ,great.
So let's check out another element which needs attributes
which is the image element.
So let's do that after this somehow space here
and for the image we use the img tag
and then this source attribute.
And then in here we can specify any image
from the current working folder
or we can also set an image URL.
So let's do that.
So what I'm doing here is,
since we're talking about HTML and CSS on this page,
I want to copy this image here, okay.
So the image address, so I'm getting the image address here
and now I'm pasting it here.
And so this jpg image is now the source of this image.
Okay, and now you see here that
with the auto save and edit this closing slash
and that's because the image element
does not have a closing tag.
It only has an opening tag which is a img of course
but then we don't have a closing tag.
And so we can close this opening tab
by the end using this slash here at the end of the tag.
But it's actually not mandatory,
it works just the same without this one here.
Okay, so image doesn't have a closing tag
because we don't really put any
like written content in here.
It's not like we say now a course image
or something and then close the image, right.
That would make no sense.
And so that's why images don't need the closing tag.
Now if we check it indeed here now is the image.
Okay, so that's the source attribute.
And as you see,
different elements have different attributes.
So for example
the href attribute is not going to do anything on an image
and the opposite is true for the source attribute.
So if we use source here on the anchor element,
it's not gonna have any effect.
And so when you really learn HTML properly
you gonna learn exactly which attributes
you can use on which elements.
But it's actually pretty straight forward,
and you get used to it pretty quick.
Now there are two very important attributes that
we can actually use on all elements
and which we can use to identify them.
And these are classes and ids.
So we use classes and ids to essentially name elements
so that we can then select them in CSS
in order to style them.
And actually we also use ids and classes to select elements
from JavaScript when we do dumb manipulation.
So classes and ids are crucial to identifying elements
and especially classes.
And here's how that works.
And again we can add them on any element.
So let's add one here to this paragraph.
So all we have to do is class
and let's call this one the first okay.
Because it's the first of these two paragraphs
and then here class again and you guessed it.
This one is gonna be called second.
And we gonna use this in the next lecture
to then select the two paragraphs
and style them differently.
So then according to these classes,
now as I said beside classes,
we also have ids and they work like this.
So let's add it here to the image
and let's call it course image just like this.
Now the difference between classes and ids
is that ids have to be unique, okay?
So each id can only be used once on the page
while classes can be used over and over again.
So I could have more paragraphs called second
but I could not have another element called course image.
All right, in practice we actually almost never used ids
to style elements or to select them from JavaScript.
It's just a better practice to use classes.
Okay, and now to finish let's create an HTML form
so that we can use some more attributes.
Okay, so let's do that here after the image.
And now I'll also introduce you
to the idea of basically creating boxes.
So we want the contents of this forum to be in a box.
And so there are many ways of creating boxes in HTML.
The most generic box is a div.
So let's say div
and let's give it a name here using an id again,
does that so we use classes and ids in different places
so that you can learn how to use both.
So I'm calling this box here your name
because that's what we gonna do in this form.
So just an input asking for the user's name basically.
Okay, and here it already close the element for me.
Or and maybe you're also noticing that for the names here.
So the id name but also for class names in CSS,
we use the dash to separate two different words.
So in JavaScript we would use camel case.
So course, and then like this, right.
But the convention is yes
as is to write it like this.
Of course it will also work the other way
but this is just a convention, okay.
And let's create just a heading for this form,
your name here, okay.
And you can see that of course we can have multiple
h2 elements here on the same page.
So we have here a secondary heading and here another one.
Okay, so we of course you already have the h2 here now
and there's also this box around it,
but you cannot really see it
but we will see it in the next lecture
when we actually style all of these elements using CSS.
Anyway let's not add another paragraph here
please fill in this form.
And now let's actually use an input element.
And so like that we are then basically creating a form.
So input and then we use the type attribute
to specify the type of data that should be inputted
into this element.
So once again
we're using an attribute to describe this element.
So here we could use a text
or as you can see it we could use button checkbox,
email, file and so on and so forth.
But here we just gonna use text
not then we can even specify a placeholder.
Now we'll just use the auto complete functionality here.
Okay, and we close it.
And once more this is one of the elements
which does not have a closing tag because, well again
it doesn't make much sense to have that here.
And then usually a form also has a button.
And so for that we have to button element.
And in this case it actually makes sense to have content.
And so that's why there is a closing tag
which the S code automatically placed there for us.
Let's give it a safe and here we go, nice.
So we have a nice input and a button,
of course nothing will happen
because for that we would need some JavaScript
but that's not the point of this lecture or of the sector,
but now you know how to create a form like this.
And now just to finish this form
we should actually change the name
or the type of the element of this box here.
Okay, because this is now a form
because it has this input and this button elements.
And so in HTML we have a special element for that,
which is instead of div we use form,
okay give it a safe.
And it looks exactly the same but this is more semantic.
What this means is that the form element
better describes the content that is inside of the box
than just the generic box that is the div okay.
So the div element is really just a generic box
which has no meaning at all.
And so that's usually not a good idea
for many reasons for example for SEO,
when Google searches your page,
it's better if it knows exactly what each element means
than just having generic boxes without any meaning at all.
Okay, so using the appropriate element,
according to the content that's in it
is the idea of semantic HTML.
In this case we are creating a forum here
because we have an input and a button.
And so we use the form element that HTML gives us
just for this purpose.
Okay, it looks exactly the same as a div element,
but it has meaning and so it's semantic.
Okay, and that's it for this video
in the next one we're finally gonna style all this,
using some HTML.