Add content to your web pages

Hi there!

In this video we're going to look at adding HTML content to a page.

Here in front of us is the page that we are going to be making together.

And we are going be creating the HTML that makes up say this image here.

Also the navigation in the top.

We will create all these headings here in the middle, this paragraph text.

We will also add these images to the page.

And that´s the role of HTML It´s the starting point of every web site.

What´s also happening here though, is that all of the HTML is being styled by something called CSS.

And while the word here called "GOLDRUSH" is created in HTML, so you type in the words and you tell it´s a heading, but it´s the CSS that gives it its color, its size and the spacing between letters.

The CSS also does the distances, away from these boxes, the background colors.

All of that is done with CSS.

Essentially, HTML are building blocks and it´s CSS that makes them pretty.

In this video though we´re going to focus on writing the HTML.

There is another tutorial here that will cover CSS but today it´s step 1: HTML What does HTML look like when there is no CSS applied.

This other tab here, this is the exact same site but without the CSS.

You can see my navigation there, here is my heading.

Here is my images, my paragraph text.

These are the things that we going to be adding.

And it´s not until later when you start adding CSS before they start looking really pretty like they did in the last example.

So let´s open up Dreamweaver and start adding our HTML.

Now, before we go on any further, let's just make sure that we’re all in Developer mode.

On the top right here.

You could be in Standard.

Let's switch to Developer.

And I've also defined the site here in Dreamweaver.

Just to manage the files.

Now, to follow along you'll have to do the same.

You can do it up here under Site, New Site.

Now, we're not going to run through that at the moment.

There's another video here to teach you about site definition, if you need a little bit of help with that.

So this is the HTML page here that we will be working with.

It´s called "rendered-index-start.html.

Now the document here already has some HTML containers.

It links it just here so that we have got a place to put our HTML.

Just to get us started.

Let´s have a look at these containers in the browser.

So if we want to preview our document in the browser Down the bottom right here, you can click on this.

It is called the Real-time Browser Preview.

Click Google Chrome.

And this beautiful page is what we are starting with.

You can see there is nothing actually on the page.

The containers are empty.

And they are just ready to receive the HTML we are going to create today.

Cool.

So let´s go and put in our first HTML element.

Back to Dreamweaver.

So, the first thing we're going to do is we're going to add our logo image.

So, there is a container set up for it here.

So, let's go and add our image.

Images use a tag.

So, we're going to start with the angle bracket.

We type in "img", which is the HTML tag to place an image on the page.

Then, we put in "src" for the source.

And we press Enter.

And you can see Dreamweaver pre-fills out some of the syntax that needs to go in HTML for it to work.

Let's put in an equal sign and the quotation marks.

Another cool thing is that it's opened up this Browse window.

So, I can click on Browse.

And there's my images folder.

And I'll be using my logo-white.png.

The last thing I need to do is close off my angle brackets, and that is how you insert an image in HTML.

The next bit of our HTML will look at our navigation.

So, the navigation is going to be in the top right, and how a navigation is traditionally built is that we're going to put it inside this container we already have, called "nav", which is short for navigation.

And you design it with something called an unordered list.

Quickly, though, before we create our own, this is what a completed unordered list looks like.

Essentially, an unordered list is just a bullet point list that we can style to remove the bullet points and make it a good-looking navigation.

So, first up.

Angle brackets, I'm going to use "ul".

That's the tag name for an unordered list.

I am going to close it off.

And tags that you make will have a closing as well.

You can see this one here.

"Header" has an open and it has a close, and it's the same syntax except that there's a forward slash there.

You can say the same here with this "a" tag that already exists.

It opens there, then "a", and has a "/a" to close it.

Same with the "ul".

So, we’ve got a "ul" open.

And we're going to create it by opening an angle bracket, then putting in our slash, and Dreamweaver’s super clever and goes "you probably mean to close it," and just fills in the rest for us.

Nice.

The "ul" is the parent.

Inside of this "ul" you need list items.

And they are the actual bullets that go inside.

And they are called "li".

We're going to close them off the same way.

Angle brackets, forward slash.

Dreamweaver fills it in.

And that's going to give it a bullet point list.

And what we'll do is, inside this list, we will now put in a link.

To put in a link, we open it up and we use this one that's defaulted to automatically, which is "a".

An "a" is an anchor tag used to create anchor links.

You complete it by typing in "href".

The "href" is the hyperlink reference that references the page or maybe the website that you're going to direct the user to when this link is clicked.

And you can see I started typing "href".

And I use the down arrow, hit Return.

And Dreamweaver fills it all in.

Happy days.

Where's this link going to go?

We're going to use a placeholder, and that's just the pound or hash sign.

You can see hyperlinks are a little bit more complicated than say the "li" item.

That's okay.

We're going to close it off just like we did the other ones.

Angle brackets, forward slash, and Dreamweaver fills it in.

Now, in between this "a" tag here between the angle brackets.

This is where you type in the words that you want to put as your menu list.

Let´s go check what we have done so far out in the browser.

And hey, look at that we have got a navigation.

Kind of, ok.

It´s a litle link that´s inside of a list item and it´s a bullet point that makes it an unordered list.

Nice work.

But you might be asking: "Where did the image go?"

That´s kind of my fault in the moment though I have.

It is up here but here is a white logo on a white background.

And the white logo will make more sense a little later when that green background is added.

Cool!

Let´s go and add the rest of my list items.

Because I have got only one at the moment and there are five in total.

Back to Dreamweaver.

So I've got five different options in my navigation.

So what I´m gonna do is with my cursor inside of here I could select it all, Copy it.

Hit Return.

And paste.

That works.

But an easier way is to put my cursor inside this "li" and type command D on a Mac or control D on a PC.

And I've hit it five times.

I can go switch these out.

You can see the "HOME", "HOME", "HOME".

And then go through, maybe have an "ABOUT".

And I can go switch these out.

And that's fine.

And we’re learning syntax.

That's cool.

But a quick way is - watch this.

All this hard work.

Goodbye.

What I'm going to do, is inside of here, I'm going to use a bit of code-helping from Dreamweaver and Emmet.

What I want is a "ul".

Inside that "ul", I would like some list items.

How many would I like?

I'd like five.

So, asterix, 5.

Times it by 5.

And inside of those list items, I'd like an "a" tag, please.

If I hit Enter, it does nothing.

But if I hit Tab on my keyboard, watch this.

Wow.

Super-duper time-saver.

It’s tricks like this in Dreamweaver that can really speed up your website build.

Now, let's put in our pound sign.

Now, remember this is just a placeholder and we’ll replace this later on to actual links to the pages we’re building.

Next are the names of our nav buttons.

I am going to put it "HOME", "ABOUT".

"GALLERY", "TICKETS", "CONTACT".

And that's often how navigations are built.

And that is the HTML that makes up our navigation.

Let´s check it in the browser.

Cool!

So you get the idea of what a raw HTML navigation looks like.

What I´d like to do now is to attach a premade CSS document. to our HTML for the rest of this tutorial.

Now I want to stick to making HTML in this tutorial, but I also want the rest of the HTML we create here in this video to look well designed when we are adding it to the page.

So let´s go and attach our premade CSS sheet in Dreamweaver now.

So back here in Dreamweaver we are going to attach our CSS sheet.

And you do it at the top here.

It has to be done in the head.

So this is the opening of my head and the closing.

And it can be done anywhere in here.

I´m gonna do it just after this last bit of script.

Now, to attach a CSS sheet there is quite a lot of syntax that goes on the page.

So we will use a trick, similar to the one we used earlier on.

So we gonna type in "link" and then if you hit tab: Cool, ha?

It adds everything we need to tell Dreamweaver to attach a style sheet.

The last thing we need to do is actually reference the style sheet.

And you can see it over here in my files this is one that I´ve made earlier.

To attach it, we are going to these quotes.

And I start typing "st" and you can see Dreamweaver reaches out and says, "did you mean this file, styles.css?"

And I say, "Yes, please" and just hitting return on my keyboard.

Now what´s happened.

Nothing really, right?

It´s because we are in Code view.

But let´s go and look at the big change in the browser.

Holy moly!

Now remember, this is the exact same HTML but now I´ve got a premade bit of CSS that I made seperately.

And remember there is a video tutorial here on CSS specifically.

So you can go do that.

So my CSS has told it to do a few things.

It said bullets be gone, underlines be gone. the blue be white and move it to the top in the right.

And now we can see my little image.

He is now on a green background.

And there is a few other things here, the containers that we´ve got on our pages.

There is this green box, there is also a white box.

There is a gradient box, there are some other elements going on on the page and that is coming from my CSS sheet.

Cool, so let´s go it back into making the HTML with Dreamweaver.

Next up, let's add some text and, in particular, let's look at headings.

Let's look at our finished version.

Our first version has a couple of headings.

This is my main heading, and that's considered your Heading 1.

This is my next most important heading.

It's going to be my Heading 2.

And this one here is going to be my Heading 3.

So, let's go add those in Dreamweaver.

It's going to go into this box I've got.

Made earlier here under "hero-content".

And what I'll do is, remember, we’ll put in our open angle brackets.

The first one at the top is the "h2".

Close it off, and open it up, and then slash.

And it fills it in.

That is fast, but it gets faster.

Watch this.

We could do that.

That's fine.

But if we just type "h2", and hit Tab.

Look at that.

Nice.

So, there's my "h2", and I will put in my text.

Next one is my "h1" tag.

Lovely.

This is Rendered.

Here it is in the background.

There's my Heading 2.

There's my Heading 1.

Let's add our Heading 3.

Remember, "h3" and then tab.

Now, for this one.

I'm going to type this one out.

Because I've got a special character I want to show you.

So, it should be hyphen and then it goes to the 21st, 2017.

Now, the hyphen in here, while it works on some browsers, it doesn't work on all of them.

So, if you need to add a special character - I'm talking about any of these ones.

Or any other kind of stranger non-letters or numbers.

You need to add these special HTML syntax for those.

Just to make sure they work everywhere.

To do that, they all start with an ampersand, which is cool.

You can see Dreamweaver's helping out here, loads.

Because I can never remember what all of these are.

But you can see, finding to use - percentage sign.

It’s ampersand, then a pound sign, then 37, semi-colon.

All of that there is the percentage sign.

Let's check in the browser.

You can see the browser interprets it and puts in the percentage instead of that crazy-looking HTML.

So, let's go find the one that's going to work for our hyphen.

I am going to get rid of this one.

Remember, what do they start with?

With ampersand.

Scroll down.

And there's my hyphen.

So, it's the ampersand, pound or hash, 45, semicolon.

That is a hyphen.

Let's check in the browser.

And there's a hyphen.

Nice work.

The last little bit of text here.

It’s saying it is in "SAN FRANCISCO".

Nice.

There is our h3.

Next thing we're going to work on is, we're going to put some text in this white area here.

It’s going to look like this in the end.

This nice, big, intro text.

Let's go and do that.

Next on our list of really useful HTML tags is going to be the "p" tag.

We're going to use that for that introductory text.

So, it's going to go into this "div" here, this container "div".

And we're going to put in a "p" tag.

So, "p".

Tab.

There is my "p" tag.

Now, the "p" tag is short for paragraph.

You´ll often have a lot of p tags on your site.

Think of them as body copy.

So, we're going to put in a big chunk of text here.

And thanks to the wonderful CSS that we already have attributed to it.

It's played around with the font and the size and made it look all pretty.

Great.

Next up is to fill in this part.

Let's have a look.

It's meant to look like this.

Nice little image.

Let's go do him.

So, "img" is the same as before.

But we're going to speed it up.

Remember, we did "img".

And then we did "src".

We kind of filled all this in.

It gets quicker.

You're probably going to guess how this works.

We’re going to type in "img".

Hit Tab.

Hey, hey.

Fills it all in.

Inside of here, we're going to go to our images folder and we are going to go and use this one called "goldrush.jpg".

Nice little preview there, thank you.

Next is the alt tag.

This is used by screen reading software and also what appears on the page if the images don't load.

In this case, we'll put the artist name in there.

Check your browser.

There he is there.

I love that image.

So, the next thing to add is - here’s my finished version.

We're going to add this "h2", and that is a "p" tag.

Now, what we want to do is, we want our "h2" to look different from the "h2" we've got at the top here.

And our "p" tag here to be different from this "p" tag.

We're going to do that using something called a class.

So it's going to go in this container here.

And so, we're going to put in an "h2".

Remember we're going to put "h2", and then tab.

Presto.

This one's going to be "Goldrush".

And so it doesn't look like the other "h2", We're going to put in something called a class.

Now a class, you can see there.

I'm going to put Return in and it fills in all that syntax that I need.

Including the equals and the quote marks.

This one's going to be "artwork-title".

This just gives it a little bit of a specific name.

So, it's an "h2" still.

Awesome.

But, it's going to apply that CSS styling called "artwork-title".

Just to make it look a little bit different.

Same with "p" tag down here.

So, "p" and then tab.

And what we'll do is we'll add a "class".

This one is "artwork-text".

Paste the text in.

In my browser.

Great, "h2" and a "p" tag.

And they look different from my other "h2" and "p" tag.

Next is the See More button.

There is a little link to click.

We’ll do that underneath the "p" tag.

And remember, we typed in the "a href", we started typing it in the long way.

Remember, it gets quicker.

And you can probably guess it's "a", then hit Tab.

Puts all the stuff in for us.

Lovely.

We don't have a link for this to go to at the moment.

So, we're going to use that pound or hash sign.

And what we'll do here is we'll add our "class" as well.

There's a "see-more" class we can add.

Lovely.

The actual text goes between these angle brackets "See More".

Check in the browser.

See More.

There he is.

Here’s the link, nice.

So, well done, everyone.

We've added lots of HTML content.

The real common stuff: the "p" tags, the "h1", the images, the hyperlinks.

And those are the really common building blocks for a web page.

Now, we've been a little sneaky because we've had the styling already done.

What I'd like to do is just show you what the HTML, what we've done today, looks like without all the pretty styling that already exists.

Because what you do is you add your "h1", then go off and start with CSS.

Now, there are lots of lovely videos here to help you with CSS.

But we've kept that nice and separate.

So, let's go and turn it off to see what happens.

So, in Dreamweaver, if I scroll to the top, this link here links my styles to this page here.

And I can get rid of it by selecting it and deleting it.

And, oh.

You can see what's happened in the background here.

This is just displaying the HTML that I put in.

Here it is.

There's my "ul" and "li"s.

There's my "h2"s.

There’s my "h1".

There’s an image.

There's some links.

There’s the "footer".

And, without any styling, that's what HTML looks like.

So, they go hand in hand, The best of buds.

You put the HTML in your HTML page.

Then, you style that using your CSS sheet.

Well done, everyone.

That's it for adding HTML content to your webpage.