Voiceover: In the last lecture, 2 2
we created the basic structure 3 3
of our first HTML document using the head and body element. 4 4
Now, let's start to fill it with some content. 5 5
Now, back to our webpage. 6 6
In the head of the webpage, 7 7
let's just give our webpage a title for now. 8 8
For that, I'm gonna use the <title> tag. 9 9
Title. 10 10
And write something like... 11 11
my first... 12 12
blog post... 13 13
in here. 14 14
And now for the body. 15 15
Let's start with some text. 16 16
HTML has text for headings starting with the <h1> element 17 17
for the main headings, 18 18
all the way down to <h6> for less important headings. 19 19
So, I'm... 20 20
going to use an <h1>... 21 21
element here. 22 22
And let's just repeat the text from the title, 23 23
My 24 24
first 25 25
blog 26 26
post. 27 27
Alright. 28 28
Now, Do you want to see what this looks like in a browser? 29 29
There, a bracket string comes in again. 30 30
One great feature of this editor 31 31
is this so-called Live Preview. 32 32
So, when I hit this button here, 33 33
it opens a new browser window 34 34
with a live connection... 35 35
between our code and the browser. 36 36
So that we can see all the changes we make 37 37
in our code being immediately rendered by the browser. 38 38
So, then I go back to Brackets. 39 39
We see now that this symbol here has changed its color 40 40
to orange, which means that the connection is now live. 41 41
I will these two windows side by side. 42 42
So, the Brackets editor on this side, 43 43
and the Google Chrome window on this side. 44 44
So, we can see our changes immediately. 45 45
Now, I think this only works with Google Chrome, though. 46 46
If you prefer to use another browser, 47 47
let's say Firefox or Safari 48 48
or even Internet Explorer, 49 49
you can totally do that. 50 50
In that case, you gotta open the HTML file we created, 51 51
right from the Blog Post folder, 52 52
and then hit the reload button each time you want 53 53
to see the changes we made in the code. 54 54
So, this is what an <h1> element looks like 55 55
in a browser without any styling. 56 56
Also, notice how the title that we defined 57 57
for our webpage displays in the Google Chrome tab. 58 58
Let's continue with some secondary headings now, 59 59
which are, as you may guess, 60 60
<h2> elements. 61 61
Okay. 62 62
I'll write something like, 63 63
This is my 64 64
first 65 65
blog... 66 66
blog post. 67 67
And you see, like magic, that text appears 68 68
on the right side in the browser. 69 69
And, since it's so fun, let's add another one. 70 70
Right here. 71 71
Let's say... 72 72
H... 73 73
HTML is... 74 74
amazing. 75 75
Ah-may-zing. 76 76
Okay. 77 77
Now, it's time for some paragraphs. 78 78
Paragraphs are elements for larger texts. 79 79
And we use 'em just like this. 80 80
Now, we need some text for these paragraphs. 81 81
So, let's just go to Google Chrome 82 82
and look for some blindtext. 83 83
So, blindtext is commonly used 84 84
if we don't have any real text for a webpage. 85 85
I'm just gonna copy all of this and paste it right here. 86 86
That's a lot of text. 87 87
Cut it here. 88 88
So it's not so much. 89 89
'Kay, we can close this. 90 90
And, alright. 91 91
Here, we have a paragraph with some nice text in it. 92 92
Now, I will just make the same thing for the other 93 93
paragraph I want below this h2. 94 94
And now, we see we have two paragraphs here. 95 95
Now, suppose you want to apply some basic formatting 96 96
to the text. 97 97
Do you want to see how? 98 98
Alright, let's do it. 99 99
I'm gonna start with bold text using the tag. 100 100
Like... 101 101
this is a... 102 102
very. 103 103
Now, I use the element. 104 104
And close it. 105 105
And now the word: strong. 106 106
Text... 107 107
because 108 108
it is... 109 109
Strong. 110 110
Well, because it is bold, actually. 111 111
Just some random text. 112 112
Just so you see how this works. 113 113
So, these two words are bold now. 114 114
And now, some italics, 115 115
for which we use the tag, 116 116
which stands for emphasis. 117 117
So, again some random text, 118 118
I would... 119 119
like... 120 120
to. 121 121
Now, the element. 122 122
Emphasize... 123 123
how 124 124
important 125 125
it is... 126 126
to follow... 127 127
this course... 128 128
until the end! 129 129
Okay, and now we have... 130 130
the emphasize... 131 131
word 132 132
actually emphasize with the element. 133 133
At last, some underline text using the tag. 134 134
Which, you should actually not use on a real website, 135 135
but I will show it to you anyway. 136 136
So, there's some... 137 137
Underlined... 138 138
text. 139 139
Okay. 140 140
Now, see it's underlined here. 141 141
But, another thing you maybe noticed is 142 142
that even with all these line breaks I made here, 143 143
in the HTML document, 144 144
nothing happened here in the browser. 145 145
So, in fact, I can do as many as I want here, 146 146
see, nothing happens. 147 147
If I want a line break... 148 148
on my actual website, 149 149
I have to use the element, 150 150
which stands for break. 151 151
Goes like this. 152 152
Okay. 153 153
Now, you see the line here breaks. 154 154
Just to try it, let's put another one here. 155 155
Again, it worked. 156 156
And, another one here. 157 157
So, now we have one line 158 158
for each of the little sentences I wrote. 159 159
Congratulations! 160 160
You've just created your first HTML page. 161 161
It is like the most basic HTML you can possible imagine. 162 162
But, it's really not bad for the beginning. 163 163
And, in the next lecture, we will add some images 164 164
to the webpage to make it a little less boring.