Subtitles of the Movie

Now let's talk about code here and I'm going to do so inside Dreamweaver. Are you ready for it - background code? Now don't get squeamish on me here. I'm going to lay it out for you nice and easy and you know what? I have some great news for you, too. Before we even look at this - close your eyes if you want and just listen to me here - the great news is that if you're brand new to all this number one, it's very straightforward as long as you sort of commit the time to learning it as I mentioned not too long ago. The other piece of good news is because we're talking about Photoshop and Web design, Photoshop's going to handle writing all of the necessary HTML and CSS code for us, so you can wipe the sweat off your forehead and rest assured that Photoshop's going to be handling all of the code for us. We will not be coding anything together here in this time that we have together. But I do want to give you just kind of a quick run-through as to how it all functions. Let this little segment be your introduction to HTML and CSS if you've never delved into it before. So what I'm going to talk about here is the sort of the fundamental structure of all HTML pages and I'll also talk about how some of the HTML tags work and also a little bit about CSS as well. So I'm looking at my code here and you'll notice that the entire block of code begins with HTML inside angle brackets and it ends with /HTML. So all that does is it says, hey, we have HTML here. This is an HTML document, right. And then what happens next is we have something called the head Container. You can think of these different blocks as boxes, or containers that other things go inside of, right. So I have the HTML container and now I have the head container and on the same level as the head container I also have the body container. Now how I think of the head container is I think of him as the storage area for my page. Anything that I want to store for my page and use later on I can put inside the head area. The body area is going to hold the actual content of my page, so anything that sits inside the body area would show up inside a Web Browser by default. You'll notice inside the head area we have a page title surrounded by the title tags, and we also have some weird, wacky stuff here in pink and blue. That's a CSS Rule, or a CSS Style and I'll talk about that in just a second. As for the body, what I have inside the body is a paragraph, which begins with p and you can see where the paragraph begins and you can also see where the paragraph ends and of course, the paragraph simply contains some text that reads: Here's just a bit of text. Now, what I did is I took the word just and I made it bold by simply surrounding it with the strong tag, or the strong element, right - that's how it works. So, as you can see, it breaks down into some pretty simple ideas, some pretty simple concepts. You just have to know your HTML elements, that's really what it boils down to. What's a paragraph, what's a heading, what's a body and so on. Now let me talk about CSS for just a moment. You can see that we have this CSS Rule sitting inside the head area of our document, and I won't go off the deep end here on you but, essentially what we have here is what's referred to as an Internal Style, in other words, it's a part of our html document. And the name of the Style, very simply, is MyStyle. I know, very creative, right? And the MyStyle CSS Rule contains three properties. It contains a font, which is set to Verdana, or Geneva, or a sans-serif font. You know what, I can make that even simpler for you. I'm just going to whittle it right down to Verdana. So, that's the font that I want to use. I have a font size, which is set to 13 pixels and then I have a color, which is described in this kind of weird looking code here. That's all the Style is doing and as I mentioned not too long ago, this is just like a Style load of another application. It happens to be in code but it's still the same idea. It's still the same concept, right? So, how it works now is I want to take MyStyle and I want to apply it to my paragraph inside my document and this is how you do it. You type in class equals and then in quotes the name of your style, just like that. And what that does is that formats the entire paragraph with the CSS Rule that's being described above. So if I go into Dreamweaver's Design View you can see how my text actually looks.