So now that we understand how the HTML boilerplate works and what each line does in it it's time 1
to move into the body section and start giving our web site some content because at the moment our web 2
site is looking a little bit plain. 3
So if we have a look at Jon Kleinberg’s web site the first thing that we want right at the top here is 4
a level one heading that says our name. 5
So let's head back into Atom. 6
And as a challenge to you add a level one heading inside the body section of your web site that contains 7
your name. 8
So this one's easy and it's made even easier using the autocomplete features inside Atom. 9
All I have to write in order to create an h1 tag which is what's needed to create a level one heading 10
is I just have to write h1 and it makes a suggestion asking me, ‘Are you looking for a heading level 11
one?’ 12
And now if I hit enter or if I hit tab I get the h1 tag inserted automatically opened and closed for 13
me and my cursor gets moved right in between. 14
Exactly the place where I would need to start typing. 15
So now if I hit save and I head back over to my personal site and remember if you close down this tab 16
you can always go into your finder or your explorer to open it back up again or you can select the full file 17
path from Atom as well and paste it into here. 18
Now if I hit enter you can see my h1, my level one heading, gets shown up here just like Jon Kleinberg’s 19
and we're ready to move on to the next thing. 20
Now we want to have a line that shows our title so who it is that we are. 21
So let's head back to Atom and first I'm going to get rid of this little heart because it doesn't look 22
very professional and I'm going to add another HTML element under the h1. 23
And this is a good point to talk about how to keep your HTML file neat and tidy. 24
Now most programmers are very serious about how to indent and structure their HTML files. 25
And the reason for it is because having these indents makes it easy for us to see at a glance which 26
tags are inside other ones. 27
So for example if we look at the top level here we've got the html tag. 28
And because both the head and the body tags are indented inside these html tags, 29
it shows us at a glance that the head is inside the html element as is the body but the body and 30
the head, they’re at the same hierarchical level. 31
They're not inside of each other at all. 32
And this is a good structure for us to be able to see at a glance what's happening in our code. 33
And also when other programmers look at our code, because we're used to working with the same structure, 34
it's easy to be able to understand what's going on at a glance. 35
So you can see that there's one part of our code that breaks this rule and that's this line here. 36
Our h1 is contained inside our body element and so it should be indented like so. 37
And you can clearly see that this is now a child or contained inside the body tag. 38
Now if you didn't want to do that manually every single time. 39
Well we actually installed a package right at the beginning that helps us with this organization. 40
It's our little housekeeper if you will. 41
So if you go to packages and go to Atom Beautify and click on Beautify it will automatically beautify 42
your entire code file to make all of the indents for you and to make everything look neat and tidy. 43
So every so often once your code starts getting messy either learn the shortcut or go through it in 44
the menu and reorganize your code file. 45
It'll make it much easier on the eyes and much easier to read. 46
So now I want to add my title under my h1 tag. 47
And for this I'm going to use the p tag which is a paragraph tag and the p tag formats text into a paragraph. 48
So they get a new line and the text inside gets grouped together into the same paragraph. 49
So let's add my title here. 50
And now let's see what our changes look like. 51
So remember again command S or control S to save and head back over to our site and command R or control 52
R to refresh or click this button to refresh and there we go. 53
There’s our brand new paragraph showing up. 54
Now if we look at Jon Kleinberg you can see that his title is italicized and ours is not. 55
So how can we make ours italicised as well? 56
Well this is where our lessons, our documentation, is going to come in handy. 57
Let's go ahead and go to Google and see if you can find out how to italicize your text using HTML. 58
So let's write italicize HTML MDN and let's hit enter and you'll see that there's actually two tags 59
that come up here and the first one that comes up is this one so let's have a look at it first. 60
Now this is the em or the emphasis element and it marks text that has a stress emphasis. 61
Now it looks like this in practice. 62
And the result is that it makes it look italicised. 63
Now you might have noticed back here we also had the i element or the i tag and it does the same 64
thing visually. 65
It also makes the text that's in between the i tags italicised. 66
But there's a little bit of a difference here. 67
And the difference is quite subtle. 68
The emphasis tag tells the browser the words that are enclosed between it should be stressed or should 69
be emphasized but the i tag only italicises the text. 70
So it only styles the text to make it slanted and it doesn't confer any of that emphasis. 71
And for this reason it's good practice to always use emphasis instead of italic because it conveys 72
more information and it isn't just about the style. 73
Remember when writing HTML code we're more concerned about structuring our text rather than caring 74
about how it looks or how it appears. 75
Now a similar pair is the b tag or the bold tag. 76
And this is equivalent to the i tag, it makes any text that's in between 77
bolded, like so. 78
But instead what you should be using is the strong tag. 79
And that's because the strong tag again confers meaning. 80
It says that this text has strong importance and therefore it's displayed in bold rather than merely 81
saying that this should be styled so that it's darker than the rest of the text. 82
And if you're interested you can have a read between bold and strong as well as emphasis and strong as 83
well as emphasis and italic. It makes for some interesting reading and gives you a bit more background 84
information on the different between these two tags. 85
But whenever you're looking to make something bold in your website you should probably be using the 86
strong tag. 87
And whenever you want to make something italicized you should be using the emphasis tag. 88
So let's go ahead and make our paragraph, this title, italicized, or emphasized, like so. 89
So, if you remember, all we have to do is just to enclose it inside the em tag. 90
Now you can do that for the entire length of the text or you can simply apply it to just a section of 91
the text. 92
So for example if I wanted to make the part where it says The App Brewery bolded then I can simply add 93
a strong tag and have The App Brewery, not including the full stop, inside the strong tag. 94
Now if I hit save and go ahead and refresh then you can see that the entire paragraph is emphasized 95
and The App Brewery is bolded. 96
So we've done a little bit of formatting for our web site. 97
Now let's move on to the next part. 98
We're going to add a little bio here and that again is going to be inside a paragraph element and it 99
just tells anybody who's visiting our personal site who we are and what we're all about. 100
So once you are ready go ahead and figure out where you should add this and complete the challenge. 101
OK so that wasn't so hard. 102
All we have to do is just to indent. 103
So we're in the right position. 104
Inside the body tag we're going to create a new paragraph element. 105
So this is going to be on a new line from this paragraph. 106
They're going to be separate paragraphs. 107
And here I'm going to write I am an iOS and WebDeveloper. 108
I love coffee and brew my own beers. 109
Let's save and check it out here. 110
All right. 111
Looks pretty good. 112
And we're getting pretty far already. 113
So obviously you can put as much or as little as you want here and design your website however you want 114
it to look. 115
Now the next thing I want to add is this horizontal line and we've done that previously. 116
So you can go ahead and add that into your code file as a challenge. 117
All right. 118
So do you remember how to do that? 119
Well all we need to do is we're still staying inside the body because we're creating the content for 120
our web site and all we need to do is just to create a horizontal rule. 121
So I'm going to use my good friend autosuggest, I'm going to write hr and hit enter to insert a new 122
horizontal rule. 123
And now it's looking pretty similar to what we've got here. 124
Now the last thing I want to add is a subtitle where I'm going to list all the books and courses that 125
I'm teaching. 126
So go ahead and add a level three heading to your web site 127
underneath the horizontal rule and call it Books and Teaching or if you don't have any Books and Teaching 128
you can simply call it Education and list all the schools that you've attended. 129
So underneath the horizontal rule 130
I'm going to add an h3, so level 3 heading, and this is going to be the Books and Teaching. 131
All right. 132
So we've already got most of our personal site coded up. In the next lesson 133
we’re going to be diving into HTML lists and how we can create these bullet points as well as numbered 134
points and add it to our website. 135
So all of that and more. 136
I will see you on the next lesson.