Voiceover: In the last lecture,
we created the basic structure
of our first HTML document using the head and body element.
Now, let's start to fill it with some content.
Now, back to our webpage.
In the head of the webpage,
let's just give our webpage a title for now.
For that, I'm gonna use the <title> tag.
Title.
And write something like...
my first...
blog post...
in here.
And now for the body.
Let's start with some text.
HTML has text for headings starting with the <h1> element
for the main headings,
all the way down to <h6> for less important headings.
So, I'm...
going to use an <h1>...
element here.
And let's just repeat the text from the title,
My
first
blog
post.
Alright.
Now, Do you want to see what this looks like in a browser?
There, a bracket string comes in again.
One great feature of this editor
is this so-called Live Preview.
So, when I hit this button here,
it opens a new browser window
with a live connection...
between our code and the browser.
So that we can see all the changes we make
in our code being immediately rendered by the browser.
So, then I go back to Brackets.
We see now that this symbol here has changed its color
to orange, which means that the connection is now live.
I will these two windows side by side.
So, the Brackets editor on this side,
and the Google Chrome window on this side.
So, we can see our changes immediately.
Now, I think this only works with Google Chrome, though.
If you prefer to use another browser,
let's say Firefox or Safari
or even Internet Explorer,
you can totally do that.
In that case, you gotta open the HTML file we created,
right from the Blog Post folder,
and then hit the reload button each time you want
to see the changes we made in the code.
So, this is what an <h1> element looks like
in a browser without any styling.
Also, notice how the title that we defined
for our webpage displays in the Google Chrome tab.
Let's continue with some secondary headings now,
which are, as you may guess,
<h2> elements.
Okay.
I'll write something like,
This is my
first
blog...
blog post.
And you see, like magic, that text appears
on the right side in the browser.
And, since it's so fun, let's add another one.
Right here.
Let's say...
H...
HTML is...
amazing.
Ah-may-zing.
Okay.
Now, it's time for some paragraphs.
Paragraphs are elements for larger texts.
And we use 'em just like this.
Now, we need some text for these paragraphs.
So, let's just go to Google Chrome
and look for some blindtext.
So, blindtext is commonly used
if we don't have any real text for a webpage.
I'm just gonna copy all of this and paste it right here.
That's a lot of text.
Cut it here.
So it's not so much.
'Kay, we can close this.
And, alright.
Here, we have a paragraph with some nice text in it.
Now, I will just make the same thing for the other
paragraph I want below this h2.
And now, we see we have two paragraphs here.
Now, suppose you want to apply some basic formatting
to the text.
Do you want to see how?
Alright, let's do it.
I'm gonna start with bold text using the tag.
Like...
this is a...
very.
Now, I use the element.
And close it.
And now the word: strong.
Text...
because
it is...
Strong.
Well, because it is bold, actually.
Just some random text.
Just so you see how this works.
So, these two words are bold now.
And now, some italics,
for which we use the tag,
which stands for emphasis.
So, again some random text,
I would...
like...
to.
Now, the element.
Emphasize...
how
important
it is...
to follow...
this course...
until the end!
Okay, and now we have...
the emphasize...
word
actually emphasize with the element.
At last, some underline text using the tag.
Which, you should actually not use on a real website,
but I will show it to you anyway.
So, there's some...
Underlined...
text.
Okay.
Now, see it's underlined here.
But, another thing you maybe noticed is
that even with all these line breaks I made here,
in the HTML document,
nothing happened here in the browser.
So, in fact, I can do as many as I want here,
see, nothing happens.
If I want a line break...
on my actual website,
I have to use the element,
which stands for break.
Goes like this.
Okay.
Now, you see the line here breaks.
Just to try it, let's put another one here.
Again, it worked.
And, another one here.
So, now we have one line
for each of the little sentences I wrote.
Congratulations!
You've just created your first HTML page.
It is like the most basic HTML you can possible imagine.
But, it's really not bad for the beginning.
And, in the next lecture, we will add some images
to the webpage to make it a little less boring.