All right.

So now let's tackle what exactly is HTML and how do we

use it to structure our websites.

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

it could be Safari or Firefox.

They all have a single purpose

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

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

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

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

there should be a heading that says hello world.

So if we pass that code into our browser,

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

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

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

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

So for example,

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

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

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

but it does enable

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

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

So HTML stands for hypertext markup language

and the really important part here is the word markup

because there's many markup languages. For example,

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

or GML, generalized markup language.

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

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

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

publishers. So for example,

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

be printed in bold,

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

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

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

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

So you don't have to sign up,

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

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

So this is the live version of our website,

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

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

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

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

I'm going to minimize the CSS and JavaScript sections

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

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

or to have something which we can give structure to.

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

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

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

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

or you can read this book online as HTML.

So this is what the plain text looks like.

It has all of the texts in the book,

but absolutely no structure.

But when we have a look at the HTML file,

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

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

So if you go ahead and just copy this part,

the adventures of Sherlock Holmes by sir Arthur Conan Doyle,

and you copy it and place it into your pen.

So in the HTML section here. Now,

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

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

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

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

So we can make our website look like that also by adding an h1 tag into our
HTML. So the tag starts with angular brackets and end with angular brackets

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

Now,

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

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

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

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

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

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

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

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

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

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

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

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

we can simply wrap this text around an h2 tag.

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

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

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

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

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

I hope you're starting to get the gist.

The heading tags get smaller as the number goes up.

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

it gets even smaller, h5, smaller still,

and all the way until h6

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

if you keep going to h7,

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

It doesn't change the heading size.

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

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

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

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

it is to your journey as a web developer.

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

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

And a lot of that involves getting good at Googling.

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

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

to know? So in this case,

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

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

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

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

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

And the most relevant for us is the h1 to h6

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

you can learn more about the heading elements used in HTML

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

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

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

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

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

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

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

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

headings.

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

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

element.

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

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

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

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

in a structure that I find to be quite handy.

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

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

And if you scroll down, you can see that we've got h1 through to h6.
And if you click on any of these then it brings up

actually the MDN documentation

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

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

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

So if we head back over to our HTML file,

we're going to change that back to an h3

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

9.

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

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

such as a Word or Google docs,

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

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

it doesn't quite work like that.

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

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

like so.

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

both an open and a close tag.

So when we had the h1 through the h6 tags,

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

and then we closed it off with a closing tag.

 But the line break element works all by itself

and you can even put it inside, like

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

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

Powered by TCPDF (www.tcpdf.org)