Original subtitles

0 All right. So now let's tackle what exactly is HTML and how do we 1

use it to structure our websites. 2

So no matter what you use as your browser, it could be Chrome, 3

it could be Safari or Firefox. 4

They all have a single purpose 5

and that's to interpret your files, such as your HTML files, 6

CSS files, your JavaScript files into a website that should be displayed. 7

For example, we've got a little bit of HTML code here 8

that says that our website should have a title called hello and in the body, 9

there should be a heading that says hello world. 10

So if we pass that code into our browser, 11

it will open it up and display it like so with the title of the website 12

usually on the top bar and that H1 or that big heading 13

showing up in the body of our website. So before we dive deep into this, 14

it's really important to remember that HTML is the foundation of all websites. 15

So for example, 16

you won't see websites that are created using just a CSS file or just a 17

JavaScript file, but you can create websites using just an HTML file. 18

Now it might not look great. It will probably look like came from the nineties, 19

but it does enable 20

your website to display texts or various elements such as images or forms or 21

tables, depending on how you code up the HTML file. 22

So HTML stands for hypertext markup language 23

and the really important part here is the word markup 24

because there's many markup languages. For example, 25

you might have heard of things such as XML, extensible markup language, 26

or GML, generalized markup language. 27

And all of these languages share a common history. They're based off the markup 28

that used to be put into manuscripts where editors would mock up the manuscript 29

and either specify changes to the author or specify structure and layout to the 30

publishers. So for example, 31

you might have the squiggly line that shows the publishers that this part should 32

be printed in bold, 33

or this part should be printed in italics. And HTML works in much the same way. 34

You can specify the layout and structure of your website by using HTML tags. 35

So if you had it over to your browser and go to a website called codepen.io, 36

then we can have a look and have a play around with real-life HTML. 37

So you don't have to sign up, 38

just head over to codepen.io and then hit create new pen. 39

And then we're going to change the view to a format like this. 40

So this is the live version of our website, 41

and these are the places where we're going to put our code. 42

So as you can see codepen lets you put in HTML, CSS, and JavaScript, 43

which will together get interpreted and get shown on the left as your website. 44

Now, as we're only working with HTML at the moment, 45

I'm going to minimize the CSS and JavaScript sections 46

and I'm just going to work from the HTML, um, section. 47

Now we're going to need some text to work with 48

or to have something which we can give structure to. 49

If you head over to gutenberg.org/ebook/1661, 50

you get taken to the adventures of Sherlock Holmes by Arthur Conan Doyle. 51

So one of my favorite books of all time. If you have a look down here, 52

you can see that you can view the book as plain text, 53

or you can read this book online as HTML. 54

So this is what the plain text looks like. 55

It has all of the texts in the book, 56

but absolutely no structure. 57

But when we have a look at the HTML file, 58

you can see that it has laid out the book where a structure that is more human 59

readable, and this is what we're going to replicate using HTML. 60

So if you go ahead and just copy this part, 61

the adventures of Sherlock Holmes by sir Arthur Conan Doyle, 62

and you copy it and place it into your pen. 63

So in the HTML section here. Now, 64

you can see that all of this text gets put onto the screen with absolutely no 65

structure. And in order for this to start looking like this, 66

we're going to start adding a little bit of HTML. 67

So the first thing we can see is that this is the largest heading on the page. 68

So we can make our website look like that also by adding an h1 tag into our 69

HTML. So the tag starts with angular brackets and end with angular brackets 70

and in the middle is the type of element or the type of tag you want to use. 71

Now, 72

it's really important that when you open tags that you also close them because 73

as you can see here, I've got an open tag but I have yet to close it 74

and it thinks that the entire contents of my page should be made into the 75

largest heading possible. And that's not what I want. 76

I only wanted for this section, the adventures of Sherlock Holmes. 77

So in order to close the tag, it's the same angle bracket 78

but then I have to use a forward slash and then write h1. 79

So now only this part is an h1 or a large heading. 80

Now, if we have a look at the other parts, 81

I would say that this word by is a little bit smaller than the author name. 82

So let's structure this as a heading also, but let's make it a subtitle. 83

So let's make it a slightly smaller heading. And to do that, 84

we can simply wrap this text around an h2 tag. 85

And now we have Sir Arthur Conan Doyle as a heading, 86

but in a smaller size and shown with less important than the big title. 87

So no,w finally, we have this word by, 88

and I reckon that's one size smaller than this heading. 89

So let's go ahead and wrap this inside an h3. 90

I hope you're starting to get the gist. 91

The heading tags get smaller as the number goes up. 92

So for example, if I change this to an h4, 93

it gets even smaller, h5, smaller still, 94

and all the way until h6 95

which is the smallest font size for the heading element. Now, 96

if you keep going to h7, 97

you'll notice that it doesn't do anything anymore. 98

It doesn't change the heading size. 99

And that's because the heading elements only go from h1 to h6. 100

Now, how do I know that, I hear you ask? 101

So this is a good point in the course to introduce documentation. 102

And the reason why I'm talking about it so early on is because of how important 103

it is to your journey as a web developer. 104

So one of the key skills in becoming a great web developer, or in fact, 105

any sort of programmer is getting good at finding out how you can help yourself. 106

And a lot of that involves getting good at Googling. 107

How do you find the specific piece of information that's going to help you 108

achieve what it is that you want or help you understand what it is that you want 109

to know? So in this case, 110

we're talking about headings and we are using HTML, 111

and I'm going to add in the name of the documentation that I prefer to use, 112

which is MDN and it stands for the Mozilla developer network. 113

So the same people who made Firefox, for example. So if I go ahead and hit 114

enter, you see a whole bunch of results come up. 115

And the most relevant for us is the h1 to h6 116

and it talks about headings. So if we click on that, 117

you can learn more about the heading elements used in HTML 118

and they even have example code snippets that show you what it would look like 119

rendered in a browser. Now there's a couple of sources for documentation. 120

One is of course MDN, another one is called w3schools. 121

So let's see if we tried w3 schools with HTML and we're talking about 122

headings, right? Let's see what we get here. So HTML 123

headings is the first result that comes up. And similarly, 124

you've got the code examples, you've got the results, 125

and you've got a little bit of notes that tell you how you should be using your 126

headings. 127

Both of these places have a lot of really useful usage notes, 128

and it's worth reading through when you're first coming across a particular 129

element. 130

That way you'll have a good foundation of knowledge when you start to build and 131

create your own websites. So I want to show you one 132

last resource that I quite like using, which is called devdocs.io, 133

and this is basically a website that puts together a lot of the useful documentation 134

in a structure that I find to be quite handy. 135

So if we have a look inside the HTML 5 tab, 136

and we go into the elements, we can see that there's a total of 135 elements. 137

And if you scroll down, you can see that we've got h1 through to h6. 138

And if you click on any of these then it brings up 139

actually the MDN documentation 140

so you can see that it's similar to what we saw on MDN, 141

but it's just structured in a very simple way, and it's very easy to follow. 142

So that's definitely a website that's worth bookmarking. 143

So if we head back over to our HTML file, 144

we're going to change that back to an h3 145

which is an HTML tag that actually exists as opposed to something like h 146

9. 147

So the next thing that we need to do in order to better replicate this website 148

is to add some space between these lines. Now in a word processor 149

such as a Word or Google docs, 150

you'll be able to simply just hit enter a few times or hit return a few times 151

and get that spacing show up. Now, unfortunately, in HTML, 152

it doesn't quite work like that. 153

It's a little bit more complicated. In order to create that spacing, 154

we actually have to use an HTML element called a line break and it's written 155

like so. 156

And the interesting thing about this HTML element is that it doesn't require 157

both an open and a close tag. 158

So when we had the h1 through the h6 tags, 159

you can see that we started out by marking the text with an h1 160

and then we closed it off with a closing tag. 161

But the line break element works all by itself 162

and you can even put it inside, like 163

so, to make this part go onto a new line. Now, 164

this is a good time point to review the anatomy of HTML tags.