Build a Website - Adding Content

Kevin Frey: Hi! I'm Kevin Frey from Trans Effect LLC, and today we're learning how to create a website. We have already gotten our template set up, so we're going to examine our template a little more closely in this clip.

As we remember in the last clip we have got our header and our side bar and our main content here and then a footer at the bottom of the page. Now if you look at the I Heart Planes website, up here in this section is the header. We have the main body section here with the picture of an airplane, the side bar contains our navigation or links to other pages on the site.

The footer contains a Copyright statement. So we get back here to Dreamweaver and again as you are adjusting the content and the items on the screen here, Dreamweaver in the background is writing the code to make the look that you desire possible. And if we go up here to Split View, we can see half our design and half the code behind it. So you can explore this way, how some of the HTML tags work.

For instance, Main Content if you highlight it, it will highlight it in the Code View and you can see that Main Content is surrounded by h1 HTML tag. H1s represent top level headers. If we scroll down here, this is a second level header or an h2. The font gets a little smaller and as you go down through from h3 to h4 to h5 to h6, the text will continue to get smaller and less bold.

Now the Main Content is a text element, the first paragraph, paragraphs are also text elements. But the containers themselves for instance the header is in what's called a Div. A Div is simply a block container in HTML. We start a Div here and we end the Div here and it simply contains the heading Header.

The Side Bar has also its own Div. The Main Content also a Div and the footer has a Div. So you can see that Divs are basically just blocks that will hold content. So those are just a few of the HTML tags that make the construction of the page like this possible. Next we are going to talk a little bit about CSS and how to style some of those HTML tags. We typically keep CSS and HTML in separate files. The HTML represents the layout of the page and the CSS represents the presentation or the styles of that layout. So for instance if you have all of your paragraphs on the pages of your website with a black background and white text and you instead want your paragraph to have a white background and black text, you just change that in one spot in your style sheet and all of your HTML pages will link to that style sheet and you won't have to make those changes on each HTML page that you have.

Let's take a look at how the style sheet is referenced. Here's the link tag in which the style sheet is referenced, the href simply tells the HTML file that we are linking to an external document. Here's the path of the document and the rel attribute here tells us that it's a style sheet or a CSS file and the type of file is Text/CSS. You can see that our style sheet is called Sample.

css and in Dreamweaver you can just go right up here and check out our style sheet.

We talked earlier about selectors, properties and values, right now we are going to talk about Classes. A class is simply a way of making multiple HTML elements have the same styles. For instance, if I were to use just the P selector and change the background color property to red, that would make all of the paragraphs across my whole website have a red background color.

However, if only want the paragraphs on one page to have a red background color, then I'll assign a paragraph class. So I will add my period here and I'll make it redbg and then I'll be able to go back to my source code here and which paragraph do I want to have a red background? Let's say this first paragraph. Here it is. What I'm going to do is I'm going to assign a class attribute to the paragraph tag. So I'll be a class =, and what was the name of our class, it was redbg, and that will give our paragraph a red background. That's how classes work. You see it doesn't affect our other paragraph but if we were to assign this paragraph a class of redbg it would also end up with a red background. So that's how classes work.

Now is addition to classes we also have Ids. Ids are similar are to classes, but Ids specify a single item, whereas classes -- a redbg class, here if I take away this selector and leave only the class, that redbg class can apply to anything. So if I go back and I make a Div, have a class of redbg, it changes the whole Div to have a Red background. I am going to go ahead and undo that. I'm going to undo the paragraph too.

If you see this Div, it has an id of Main Content, Main Content being an id can have styles applied to it, just like anything else but those styles will only apply to an object with an id of Main Content and you can only have one Main Content id on your HTML page. So if you need styles to apply to multiple elements you should use classes instead of Ids.

Now, having a class like this, and then an id after it, by the way the id is indicated by the # sign here just like a class is indicated by the period. Having the ID set up like this tells you that this item with the Main Content id is within something that has this class applied to it. And so right now Main Content id is reset to the way it was. If we want to add an extra style to that id, we are going to go ahead and -- to change it up we are going to make the background color blue this time. I am going to click on it and you see that, that applies the style to this id. Now obviously with CSS we can do more than apply background colors. We can change the size of the div by adding width property and we can make the width 600 pixels wide and it will increase the width of our Div here, we don't want to do that but it's important that you know that changing the properties of the items in your HTML page is done through CSS and not inside the HTML file. That way if you need to change anything you only change it in one spot.

Now it should be obvious, the benefit of what-you-see-is-what-you-get editor is, what you see is what you get. So here if you want to change your text, all you have to do is change your text. And my text is changed and that's it, what you see is what you get. Anything else you want to change it's just like editing in a Word document. So that about covers our examination of the template and even some more HTML, CSS stuff. Next we are going to talk about inserting hyperlinks.