Original subtitles

0 So now that we understand how the HTML boilerplate works and what each line 1

does in it, 2

it's time to move into the body section and start giving our website some 3

content cause at the moment, our website is looking a little bit plain. 4

So if we have a look at Jon Kleinberg's website, 5

the first thing that we want right at the top here is a level one heading that 6

says our name. So let's hit back into Atom and as a challenge 7

to you, add a level one heading inside the body section of your website that 8

contains your name. 9

So this one's easy and it's made even easier using the auto complete features 10

inside Atom. All have to write in order to create an h1 tag, 11

which is what's needed to create a level one heading, is I just have to write 12

h1 and it makes a suggestion asking me, 13

are you looking for heading level one? And now if I hit enter, or if I hit tab, 14

I get the h1 tag inserted automatically, opened and closed for me 15

and my cursor gets moved right in between exactly the place where I would need 16

to start typing. 17

So now if I hit save and I head back over to my personal site, 18

and remember if you close down this tab, 19

you can always go into your Finder or your Explorer to open it back up again 20

or you can select the full file path from Atom as well and paste it into here. 21

Now, if I hit enter, you can see my h1, 22

my level one heading gets shown up here just like John Kleinberg's 23

and we're ready to move on to the next thing. 24

Now we want to have a line that shows our title, so who it is that we are. 25

Let's head back to Atom. And firstly, 26

I'm going to get rid of this little heart because it doesn't look very 27

professional 28

and I'm going to add another HTML element under the h1. 29

And this is a good point to talk about how to keep your HTML file neat and tidy. 30

Now, 31

most programs are very serious about how to indent and structure their HTML 32

files. 33

And the reason for it is because having these indents makes it easy for us to 34

see at a glance, which tags are inside other ones. 35

So for example, 36

if we look at the top level here and we've got the HTML tag and because both the 37

head and the body tags are i dented inside these HTML tags, 38

it shows us at a glance that the head is inside the HTML element and as is 39

the body. But the body and the head they're at the same hierarchical level. 40

They're not inside of each other at all. 41

And this is a good structure for us to be able to see at a glance what's 42

happening in our code. And also when other programmers look at our code, 43

because we're used to working with the same structure, 44

it's easy to be able to understand what's going at a glance. 45

So you can see that there's one part of our code that breaks this rule. 46

And that's this line here. 47

Our h1 is contained inside our body element 48

and so it should be indented like so. 49

And you can clearly see that this is now a child or contained inside the body 50

tag. Now, if you didn't want to do that manually every single time, 51

well, 52

we actually installed a package right at the beginning that helps us with this 53

organization. It's our little housekeeper, if you will. 54

So if you go to packages and go to Atom Beautify 55

and click on beautify, 56

it will automatically beautify your entire code file to make all of the indents 57

for you and to make everything look neat and tidy. 58

So every so often, once your code starts getting messy, 59

either learn the shortcut or go through it in the menu and reorganize your code 60

file. It'll make it much easier on the eyes and much easier to read. 61

So now I want to add my title under my h1 tag. 62

And for this, I'm going to use the P tag, 63

which is a paragraph tag and the P tag formats text into a paragraph. 64

So they get a new line and the text inside gets grouped together into the same 65

paragraph. So let's add my title here, 66

yeah. 67

And now let's see what our changes look like. So remember again, 68

command +s or control + s to save and head back over to our site and command + r or 69

control + r to refresh or click this button to refresh. And there we go. 70

There's our brand new paragraph showing up. Now, if we look at Jon Kleinberg, 71

so you can see that his title is italicized and ours is not. 72

So how can we make ours italicized as well? Well, this is where our lessons 73

on documentation is going to come in handy. 74

Let's go ahead and go to Google and see if you can find out how do to italicize 75

your text using HTML. 76

Go on. 77

Let's write italicize HTML MDN 78

and let's hit enter. 79

And you can see that there's actually two tags that come up here 80

and the first one that comes up is this one. So let's have a look at it first. 81

Now this is the em or the emphasis element 82

and it marks text that has a stress emphasis. 83

Now it looks like this in practice 84

and the result is that it makes it look italicized. 85

Now you might have noticed back here, 86

we also had the i element or the i tag 87

and it does the same thing visually. 88

It also makes the text that's in between the i tags italicized. 89

But there;s a little bit of a difference here and the difference is quite subtle. 90

The emphasis tag tells the browser the words that are enclosed between it 91

should be stressed or should be emphasized, 92

but the i tag only italicizes the text. 93

So it only styles the text to make it slanted 94

and it doesn't confer any of that emphasis. And for this reason, 95

it's good practice to always use emphasis instead of italic 96

because it conveys more information 97

and it isn't just about the style. 98

Remember when we're writing HTML code we're more concerned about structuring our 99

text rather than caring about how it looks or how it appears. Now a similar pair 100

is the B tag or the bold tag, 101

and this is equivalent to the i tag. 102

It makes any texts that's in between bolded like so. 103

But instead, what you should be using is the strong tag. 104

And that's because the strong tag, again, confers 105

meaning. It says that this text has strong importance and therefore it's 106

displayed in bold rather than merely saying that this should be styled so that 107

it's darker than the rest of the text. And if you're interested, 108

you can have a read between bold and strong, as well as emphasis and strong, 109

as well as emphasis and italic. 110

It makes for some interesting reading and gives you a bit more background 111

information on the different between these two tags. 112

But whenever you're looking to make something bold in your website, 113

you should probably be using the strong tag. 114

And whenever you want to make something italicize, 115

you should be using the emphasis tag. 116

So let's go ahead and make our paragraph, 117

this title, italicized or emphasized like 118

so. If you remember, 119

all we have to do is just to enclose it inside the em tag. 120

Now you can do that for the entire length of the text, 121

or you can simply apply it to just a section of the text. So for example, 122

if I wanted to make the part where it says the App Brewery bolded, 123

then I can simply add a strong tag and have the App 124

Brewery not including the full stop inside this strong tag. Now, 125

if I hit save and go ahead and refresh, 126

then you can see that the entire paragraph is emphasized and the App Brewery is 127

bolded. So we've done a little bit of formatting for our website. 128

Now let's move on to the next part. 129

We're going to add a little bio here and that again is going to be inside a 130

paragraph element, and it just tells anybody who's visiting our personal site 131

who we are and what we're all about. So once you're ready, 132

go ahead and figure out where you should add this and complete the challenge. 133

OK. So that wasn't so hard. All we have to do is just indent, 134

so we're in the right position, 135

we're inside the body tag. And we're going to create a new paragraph element. 136

So this is going to be on a new line from this paragraph. 137

They are going to be separate paragraphs and here I'm going to write 138

I am an iOS and web developer. 139

I love coffee 140

and brew my own beers. 141

Let's save and check it out here. All right. It looks pretty good 142

and we're getting pretty far already. So obviously you can put as much 143

or as little as you want here and design your website 144

however you want it to look. Now, 145

the next thing I want to add is this horizontal line. 146

And we've done that previously. 147

So you can go ahead and add that into your code file as a challenge. 148

Go on. 149

All right. So do you remember how to do that? Well, 150

all we need to do is we're still staying inside the body because we're creating 151

the content for our website. 152

And all we need to do is just to create a horizontal rule. 153

So I'm going to use my good friend autosuggest and I'm going to right hr and 154

hit enter to insert a new horizontal rule. 155

And now it's looking pretty similar to what we've got here. Now, 156

the last thing I want to add is a subtitle where I'm going to list all the books 157

and courses that I'm teaching. Go ahead 158

and add a level three 159

heading to your website underneath the horizontal rule and call it books and 160

teaching. Or if you don't have any books and teaching, 161

you can simply call it education and list all the schools that you've attended. 162

Okay. 163

All right. Underneath the horizontal rule, I'm going to add an h3 164

so a level three heading, 165

and this is going to be the books and teaching. 166

All right. 167

So we've already got most of our personal site coded up. In the next lesson, 168

we're going to be diving into HTML lists and how we can create these bullet 169

points as well as numbered points and add it to our website. 170

So, all of that and more, I'll see you on the next lesson.