Original subtitles

1 1

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 <strong> tag. 100

100

Like... 101

101

this is a... 102

102

very. 103

103

Now, I use the <strong> 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 <em> 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 <em> 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 <em> element. 133

133

At last, some underline text using the <u> 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 <br> 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.