An attribute used in HTML that is used for web browsers screen reading devices to indicate the presence and description of an image Module 4

Size: px

Start display at page:

Download "An attribute used in HTML that is used for web browsers screen reading devices to indicate the presence and description of an image Module 4"

Sharlene Chase
5 years ago
Views:

1 HTML Basics Key Terms Term Definition Introduced In <a> A tag used in HTML that stands for Anchor and is used for all types of hyperlinks Module 3 <br> A tag used in HTML to indicate a single line break Module 3 <H1> A tag used in HTML that indicates a first level heading Module 2 A tag used in HTML that contains information about the document such as the title, description, and keywords but does not display on the web page Module 2 <head> <p> A tag used in HTML to indicate the start and stop of a paragraph Module 2 <strong> A tag used in HTML to mark up text that should be heavily emphasized Module 2 <title> A tag used in HTML that indicated the document title but is not visible in the document text Module 2 ALT An attribute used in HTML that is used for web browsers screen reading devices to indicate the presence and description of an image Module 4 Attribute Modifies a tag; defines a property for an element, consists of an attribute/value pair, and appears within the element's start tag Module 1 Body The location of the actual content of the HTML page with links, paragraphs, tags for images, etc Module 2 Cascading Style Sheets; designed to control the webpage display and give spacing, padding, bolded font sizes, colors, among other attributes, of the webpage Module 5 CSS Element Represents semantics or structure; for example: a start tag, content, and an end tag Module 1 Heading Contains information about the page, synonymous to the title page of a report Module 2 HREF An attribute used in HTML that links to a URL or webpage Module 3 Stands for Hypertext Markup Language, a standardized language for tagging text to achieve font, color, graphic, and hyperlink effects Module 1 HTML HTML tags Marks that a user inserts in a HTML text file that tells browsers how to structure the text Module 2 SRC An attribute used in HTML to designate the actual image file that should to be displayed Module 4 Tag Marks up the start and end of an HTML element Module 2 Glossary page 1

2 HTML BASICS MODULE ONE - WHAT IS HTML? Male: In this module we're going to be talking about what HTML actually is. HTML stands for Hyper Text Markup Language. And a basic summary of it is to say that it's basically the language of web pages. Every website that you go to, all the web pages that you see, have all been marked up in HTML. Now, when people use the web and they're not familiar with HTML, it all might seem a little mystifying at first. You see all the images, and video, and links, and forms, and all the things that are being done with HTML, and it seems like it should be really complicated. But in all honesty, all HTML works pretty much the same way. And that is that HTML files are just plain text files. They're not special. They're not like Word documents or anything like that. They're just plain text. In fact, if you fire up your web browser and you go to some website and you right click on some blank area of the webpage, usually in the menu that comes up there will be an option to view the source or view the page source. And if you check out that option, it will actually pull up the HTML document for you to see. It's just plain text files. And the good news is anything that you would normally use to create a text file can be used to make web pages. As you probably know, there are all kinds of HTML editors available for you. Some of them are free, all the way up to very expensive. Page 1

3 But really, you can use Notepad to make web pages. That's actually how I started in my very first web pages. I just used Notepad in Windows. They're just plain text files. So there's nothing special about them. In our presentations, I'm going to be using Dreamweaver just because it highlights the syntax with nice colors and things, and it makes it easier to demonstrate. But I won't be using any Dreamweaver features. I'll just be typing in plain text. So I just want you to know that whatever we do in this presentation, you don't need any special software for. You can just type it up in a text file, and you're off to the races. But these text files don't just have text in them. They're marked up with these special things called tags. And the way I think about tags is, if you ever wrote a paper in school, and you turned it in, and you got it back from the teacher, and it had little editing marks in it, you know, maybe there was a red mark for a new paragraph or to insert some punctuation or something like that. So your instructor marked up that document with special marks. And the idea was you were supposed to take this document and interpret those marks to change the way you formatted your document. So if you saw a new paragraph mark, she didn't want you to put that mark in your paper. She wanted you to break into new paragraphs or add periods, or commas, or change the spelling of words, whatever the editing marks told you to do. Well, that's basically what tags do in HTML documents. There's special marks, special characters that you will put in the text file, so that when a Page 2

4 web browser reads that text file, it will do certain things. It will break the text up into paragraphs. It will display things as lists. It will make some text clickable, depending on the editing marks that you put in. That's really all there is to tags. And when we get to the module where we look at tags, that should come together for you. These text files with tags on them are then interpreted by browsers. And when you get on the web using a browser, there's Internet Explorer, Chrome, Safari, Firefox, there's Opera, many, many browsers you could be using. These text files are loaded up in these browsers, and then they are interpreted by these browsers. They're displayed a certain way. And so mostly you use browsers to go out on the internet, but really you could use that same browser to open up these files on your local machine and your local computer, and they'll display them just as if you were out on the internet, which I might add is a really handy thing to do when you first start making web pages, because a lot of times you want to test them locally before you put them on a web server somewhere for the whole world to see. So you can use that web browser just to open up the files locally on your computer, just like you would use Microsoft Word to open up a Word document. And it will interpret those HTML files the same way as it would a regular webpage. And, as you know, we use HTML for a lot of different things. We can use them for web pages, which is the most common use. But you can also Page 3

5 use HTML to make your signatures look nice. You can use it to send out electronic newsletters and . HTML is just being used in a lot of different places. And so knowing how to use HTML, even on a very basic level, will allow you to do some interesting things. I want to talk a little bit about the way the web works. And that will help you understand HTML a little bit better. So we have these text files. Remember what I said; these files are just plain text files. There's nothing special about them. And these are sitting on web servers. Just like you have documents sitting on your shared drives and servers at work, these files are sitting out on servers just like that. The only difference is you access them over the internet. And along with these files are your image files, your video files, all the things that tend to get displayed on the web. But when you've got a browser open, you put in a URL in the address bar, and that URL is the address of a specific web server, and it asks it for a specific file. So you type that URL in or you click a link, or whatever you do, and your web browser asks that web server that's out there on the internet, hey, can you send me, you know, your default file or whatever page you happen to be linked to. And it will download that file, that HTML file, that plain text file I was talking about. It actually makes a copy of it on your local machine. And it reads through that file. And if that file references any other files like graphics or video, or something, then your web browser goes out to the Page 4

6 web server and asks for those, as well. And it gets local copies of all that stuff. And then finally your browser displays the file in a certain way, using the HTML to kind of tell it how it might do that. So for example, if I've got paragraph tags in my HTML, most browsers are going to split that text up into separate paragraphs. If I have text marked up as hyperlinks, then the browser's going to be make those clickable and use those links. So that's pretty much the way the way web works. When you're out on the internet, you are in this constant process of asking web servers for files, these plain text files. The web server sends your browser your files. And then your browser uses the HTML to render them a certain way. That whole process, you put those two slides together, and there are two very important things that we need to keep in mind. First of all, is that HTML files are just text. They do not have graphics in them. They do not have colors in them. They don't have any of that stuff. They are just text, plain text with those little special editing marks that you're going to put in them, so that your browser knows what to do with that text. And then that brings us to that second important key that it's the browser that renders the file. It's the browser that actually makes the file look a certain way. That's why when you right-click on a webpage and look at view source, and you see all this gibberish, that's the actual text file. Page 5

7 That's the actual file you downloaded. It's just your browser reads that file in, and then makes it look nice and neat, and makes things clickable, and all that. So it's important to understand HTML is not magic, and it's not really incredibly complicated. It's just text. It's your browser really that reads the things that you write, and then makes magic with it. [End of recording.] Page 6

8 HTML BASICS MODULE TWO - HTML TAGS Male: I want to talk about tags, HTML tags. These are the little marks that you will put in your text file that will tell browsers how to structure the text. Initially, they will seem kind of strange, but once you get a load of the pattern, you'll find that they're really easy, actually. And once you can use a few tags well, then pretty much you know HTML, because it's just a matter of looking up new tags to do the things that you want to do. I'm going to actually show you tags in code. This is what your basic template for a HTML document looks like. This is easily the weirdest part. A lot of this may look like gibberish, and I understand that. This is actually the most complicated part of HTML right here. What a lot of people do, since every HTML page starts this way, what a lot of people do is they will just have a file that just includes this in it. Notice I've got this saved -- I've got this saved, actually, as template, not HTML, so that you can copy and paste it. Most of your HTML editors like Dreamweaver, when you start a new document, will automatically stick this in for you, but this is the basic structure of an HTML document. Now I want to go over it piece by piece real quick. This thing up here is the dock type declaration. This basically tells your browser what kind of markup this is. In this case it's HTML. This is going to be your first tag. This is the definition of HTML is public, and here's the definition that you're using. Page 1

9 There are various versions of HTML. And I'm not really go into the differences of all the versions. This particular version is pretty recent and pretty flexible, this XHTML 1.0 transitional. There are other ones. There's XHTML 1.0 strict, which is a lot tighter. And then, of course, there's HTML 5 which has just come out very recently, that is starting to find some use obviously. You've probably heard about it. But there's still a lot about it that isn't widely supported yet, so I'm just kind of sticking with this one, but there are others if you want to look for them. And then you see what tags look like. They start out with this lesser than sign and with the greater than sign. This is the actual element where the tag name, HTML in this case. And since we're using this particular flavor of HTML, then we have this neat little attribute here that gives a name space to our tag. It doesn't really do anything, so I wouldn't worry about it too much. This is just the location of the standards for XHTML. It's just like a little label to show it what kind of HTML we're using. So don't freak out about this part, even though it is the weirdest looking thing you've ever seen. Just think of it is something that just needs to go in every single document in order for it to work correctly. Then down here in the actually HTML, I'm going to actually indent these a little bit differently here, so I'll make it a little bit easier to see. So we've got our head and we've got a body, just like a snowman. The head of your HTML page contains information about your page. It's not really text that's going to show up in the page, it's information about it. Page 2

10 Like if you hand in a report, your report has a title page. It gives you the title, the date it was written, the author. It's not really part of the content of your paper, but it gives you information about it. That's what the head of a document is for. So you notice here I've got this little meta tag to tell browsers what content it is. Once again, this is just something you put in every document. But there are other meta tags, or I should say other attributes you can use in meta tags, like key words and descriptions to help out search engines. And then you've got this title. This title, most browsers will put this up in the title bar of the browser itself. And we'll see how that works in a minute. But the head has information about your document. The body is where the actual content of your webpage goes. So here's where you paragraphs, your links, your tags for images, all that stuff is going to go in the body and not the head. The head is information about your page. Body is the actual content of your page. Now, you'll notice that all the tags, except for one, follows this format. The tag starts like this. And when you're ready to stop it, you use the same element name, and you put a slash in front of it. You see how this works. So here's the beginning of my HTML, here's the end of my HTML. Here's the beginning of my head, here's the end of my head. The beginning of my body, the end of my body. The beginning of my title, the end of my title. Page 3

11 The only one that's different is meta. Meta is one of a handful of tags that we call empty elements. They're kind of like irregular verbs in Spanish, they don't really contain any content. And so those we stop just by putting a slash at the end of the tag. There's not an opening and closing tag, cause nothing would go between it. And so here in the body is where we would put our contents. So for example, if I wanted to put paragraph, I would use P which starts my paragraph. And then I would stop my paragraph at the end if I wanted to start a brand new paragraph. It's pretty exciting stuff, huh? And, you know, I would just rinse, wash and repeat. That would all go in the body. Now, I already have a page to kind of demonstrate this stuff, so I'm going to flip over to that. So the side I'm going to work with here is the world of wombats. As far as I know, this is not a real site, and if it is, I would find that very amusing. But I want to use this to talk about different tags, okay. So here I've got the title of my page, it's World of Wombats, and this is the home page. This is a pretty common format for page titles where you put the website in front and then you put the page description at the end. Search engines use this a lot. This first line is a heading, H for heading, 1, meaning it is my first level heading. You think about an outline and you have headings. And you've got a heading and subheadings, and subheadings, and subheadings. H1 Page 4

12 is like your roman numerals. This is your top level heading here. So this is sort of like the thing in my page that designates all the rest of the content, all things wombat. And here I've got a nice paragraph. Here I've got another paragraph. And inside this paragraph I have some text that I want to be strongly emphasized, so the tag for that is strong. I want it to really stand out. Now I get down into my sub-points, so I use H2s. This is my second level heading. I've got another paragraph here. EM stands for emphasize. It means I want this text to emphasized but not quite as much as the stuff in strong. EM is for emphasis. Strong is for strong emphasis. P for paragraph. H1 for first level heading. H2 for second level heading. Here I've got another second heading. Once again, think about it like an outline, right? So this is my roman numeral one, this would be like point A, this would be like point B. Got another paragraph here. And then I've got a tag for a quotation, a big quotation block quote, you know, once again, like you might put into a report or something. Here's the start of my quote, here's the end of my quote. I've got two paragraphs in this quote. One is the actual quote and one is the citation. So I've got it in the site tags opening and closing, okay. Now, all of this seems like a lot. The thing you want to do is not so much memorize all these tags, cause you can look tags up. But do you understand the pattern? Do you understand how this works? Opening Page 5

13 and closing when I'm starting and stopping. Do you understand what the tags are doing? Because if you understand this pattern, you have understood everything there is to understand about HTML, because if you understand the way tags work, all you got to do is find the right tag for the job. And there's tons of references online to help you do that. Now, if I look at this in a browser -- okay -- so I'm using Chrome here, and I opened this file locally. This is not on the internet, this just on my machine. When I open this file in a browser, this is what my browser does. And notice all the tags are gone. The browser renders my document. Here's my H1. Here's my first paragraph. Here's my paragraph that had strong in it. Remember that strong tag. So this browser decided to make that bold. Here's my H2. Notice it's a little bit smaller than my H1. This is my paragraph. Here's the emphasis tag. Emphasis, I want it to stand out, but not as much as this guy. Here's my other H2, regular paragraph. And here's my block quote, okay. Notice that this browser gave me a nice indent here for my block quote. Not all browsers do that. This one did. Here's my quote. And then here's my citation, it went ahead and put it in italics. Now, there is a module we're going to look out on how to format HTML. Obviously, this is not real pretty, but it's just using browser defaults for formatting right now. Not all browsers will format everything the same by Page 6

14 default, so you don't want to rely on that. But you can kind of see what they do automatically. So it has taken my text file here, saved with a dot HTML extension, and it has rendered it this way in the browser. If I right-click out here and go to view page source, notice it pulls up my text file. See, so you can see the HTML here. You can do that on any webpage on the internet. So it's taking this file and it's displaying it in this way using my tags as a structural guide. There's a few other things that we can put in that you might want to be aware of. Notice I've got line breaks here, but those breaks do not show up in the browser. I'm going to pull up my browser page again. Notice those line breaks are not in the browser, because the browser uses the tags to know how to format. It doesn't use white space where I can put in 50 white spaces here, and the browser will only display one. I can hit enter a ton of times here. Doesn't matter, the browser will display it all as one sentence. So what happens if you really do want to break a line, like let's say you're writing poetry or something like that, and you actually want the line to break before the paragraph is over. Well, the tag for that is line break, it's BR. And it's one of those empty tags that has no content in it. And when I put a line break in there, so that's (Inaudible) underrepresented when I put that in there, and I refresh the browser, now I get a line break here, okay. Cause that BR tag is right there, so the browser knows to break there. Page 7

15 It's not something we do a lot, but there are occasions where you may be writing something where you need a hard line break somewhere, and that's one way we can do it. You also heard me mention that we can put in a ton of spaces, and I can put in a bunch of spaces here. And I can reload this in the browser, and nothing, still all one page, or one space, rather. If I do want a bunch of spaces for whatever reason, I can use this intuitive little guy, non-breaking space, ampersand NBSP semi-colon. And as many of these guys as I have, that's how many spaces I'm going to get. So there we go. Once again, extremely rare that you need to do that, but that's how it goes. Now, that syntax that I use, that ampersand NBSP semi-colon, that syntax is used for all kinds of special characters, which is very handy if you want to do something like a copyright symbol; ampersand copy semi-colon is the copyright symbol. And there it is. Or the trademark symbol, ampersand trade semi-colon. There I go. Or if you want to display characters that are actually part of HTML. For example, if I decided to do something like this is the less than sign, and I did this, that's going to mess my browser up, because this is also how you start a tag, and so it thinks I'm trying to start a tag, and that will totally mess everything up. So what I can do is I can go ampersand LT for less than, semi-colon. And now it will display that special character. I can't just type it. Ampersand, Page 8

16 incidentally, as you can see, is also a special character, right? Well, that's the special character for that, okay? So that's the way tags work. [End of recording.] Page 9

17 HTML BASICS MODULE THREE - LINKS Male: In this module we're going to talk about the thing that makes the web around, and that is hyperlinks. Those are the pieces of clickable text, usually they're underlined. Of course, nowadays people do all kinds of things to mark off their hyperlinks. But they're the things that you click in order to go to other websites, other pages. Sometimes it jumps to points on the same page, and sometimes it opens up an . We're going to look at all four of those types of links. They are extremely, extremely similar, so if you can figure one out, you can probably figure the rest of them out, too. Now, it turns out that I made a page already to demonstrate all four of these types of links, and we're going to take a look at that. A lot of stuff going on here that might look strange. We're going to take it piece by piece, so don't worry. The first thing I want to take a look at is how you make a hyperlink that goes to another website. Now, all hyperlinks follow basically the same format. And that format is this: A, it stands for anchor, H for F equals -- and then this is going to be where you want to go. You don't actually type that, of course, but that's where you're going to go. This is the attribute, and you're going to fill in the destination there. The stuff you want to click on goes here. And then you close your anchor tag like that. And that's what makes this clickable. Everything between an Page 1

18 opening and a closing anchor tag will be clickable, and when you click on it, it will go wherever you're designated here. So if I do this, I move this guy over here, now just the word stuff will be clickable, but the rest of the sentence won't be. This is important, because when you're doing HTML for the first time, if you fire up your webpage and half your page is a hyperlink, the odds are pretty good that you forgot to close your hyperlink somewhere. So with that pattern in mind, let's take a look at how to link to other websites. While we're here, these HTML tags, this is the HTML for an unordered list. If you've ever been in Microsoft Word and made a bullet point list, that's basically what we're doing here. It's a list where the particular sequence of items doesn't really matter. And so this is the start of my list. This is the stop of my list. And every item in the list has this list item tag, LI for list item. Start of my list item, close of my list item. So what I've done is I've created a list of links that go to other sites, right? Here's my H2 on the web. And notice the pattern here. A, H or F equals - - and then this is the address of the specific page that I want to go to. This is the text that I want to click on. This is the end of the hyperlink. This is one of the easiest kind of hyperlinks to make, because as long as you do the basic syntax right, A, H or F equals, yada, yada, close -- as long as you're doing that basic syntax right, this you can copy and paste straight out of your browser window. I mean what you put here is what will Page 2

19 go in the URL, the address bar for the browser. So go to the page you want to link to, copy out of that browser bar, come down here and paste it right in. So when we look at this in the web browser, this is what we get. And even though this file is saved on my local machine, if I actually click on one of these guys, I'm going to go out to that webpage that I link to. That's the address. Go back, it's wombats on National Geographic. Whoa, okay. So you can see how those links work. Notice, incidentally, while we're here, this is an unordered list, so the browser went ahead and put bullets here in front of it and indented it over a little bit, which is what most browsers do with unordered lists. Not all of them, but most of them will do this. So that's how you make links that go to other websites. What if you want to link the pages on your own site? Well, you could do it the same way. You could put in the full web address, and that would work just fine. But you don't have to. As long as the page is on your own website, you don't need to put the root web address in front, you just need the other pieces. So, for instance here, I've got a link back to the home page, I just have the file name, cause there's no other folders, there's no other nothing. And I don't need to put the root URL in front of it, the HTTP, whatever, whatever. Since it's on the same site, I just need to put the file name. I don't need to click this part. Just anything else. Page 3

20 So when I go to this page and I click on the home link, it takes me back to All Things Wombat. These are just files on my local machine, but it doesn't really matter, because since I don't have an address out in front, as long as index is in the same folder than this page, no worries, we'll go straight there. So that how we can do links on our own website. Kind of nice, because when this local, you know, you don't want to have your local machine path out here. And I can't tell you how many sites I've seen, I've got on the internet, clicked on a link, and someone's local machine path is on there because they didn't change it before they put it on the web server. So my advice is just don't do it at all. Now, what about points on the same page. This is a little more complicated. And you see this happening a lot of times in like frequently asked questions or pages where you have a lot, a lot of content, and you have links to jump back to the top. That's the most common way this gets used, but it gets used in a lot of other ways, too. This is a little more complicated, because what you have to do first is, you have to tell your browser where those destination points are, cause you're not going to another site, you're not even going to another page. So how's your browser going to know where to go when you click that link? Well, you have to create those destinations, and here's how you do it. A franker. Not an HREF this time. Do not put an HREF in the destination. It's name equals -- and then you give it whatever name you want. Here Page 4

21 I've called it main heading, cause that's what this is, but this doesn't matter. You give it whatever label you want, whatever label's meaningful to you. And then you close the tag right away, okay? This creates a little named point here for my browser. And to link to it, I follow the exact same hyperlink format we've always followed, except here it's not another file on my site and it's not on their website. It's pound sign and then the name that I picked. So this is main heading here. This is the main heading down here. So when I actually click on this guy, I will jump back to the top of the page. Now, this is kind of tricky to see because this page doesn't go all the way down. So what I'm going to do just to demonstrate this is I'm going to put in a bunch of blank paragraphs. And what this will do is it will force this link to go way, way, way, way down on the screen. And then you can see it work. A lot of blank paragraphs. Kind of twinging a little bit. Kind of twinging a little bit doing this. Let me put in non-breaking spaces so that those paragraphs actually display. Like I was saying, I'm kind of twinging a little bit doing this. This is horrible HTML. Do not use HTML this way to do all these weird spacing things. We'll take a look at that later. Let's see if that's enough. Yeah, that's enough, okay. So now I scroll down here. I got this link to go back to the top. I click, boom, jumps back to the top, okay. Page 5

22 So to recap, a link that goes to another website, a link that goes to another page on my site, and then a link that goes to a destination point that I just made up. And you can have as many of these as you want and you can have as many links going to them as you want. So the fourth type of link is an link. In other words, I'm going to click on the link, and it's going to open up an client, and it's going to prepopulate a with this address. And this is the way that looks. Same hyperlink format that all the others have. The only thing that's weird about it is mail to, cause I'm not going to another webpage, so I have to tell my web browser what I'm doing here. Mail to, colon, and then whatever the address is. And then whatever you're going to click on. It's usually good form to go ahead and put the address in the link, as opposed to just having a regular text link, like send an or something, because if, for whatever reason, the person isn't on their own personal machine or they don't have an client set up, then they can still get your address, and they can you later or they can copy and paste it, or something like that. But what this will do is if you have an client configured, when someone clicks on this link, it will pop up that client, like Outlook or whatever. And it will have the to address already populated. And that's how we do the different kinds of hyperlinks. [End of recording.] Page 6

23 HTML BASICS MODULE FOUR - IMAGES Male: In this module I want to talk about images, graphics. There aren't too many web pages these days that are just text. Of course, originally, that's pretty much all the internet was, and especially as bandwidth and downloading speeds were pretty slow, it just wasn't smart to put in any graphics at all, really, much less a lot of them. But these days, as bandwidth has gotten much faster, at the very least most web pages use images, product catalogs. Even a lot of them just use images as just art on the webpage, you know, making nice borders and, you know, cool looking layouts, and buttons, and things like that. So graphics are all over the web. One thing I'd like to remind you is that the HTML pages are just text files. They do not have pictures in them. What you do is you use a tag in your HTML to show the browser where the image is supposed to go, and then you tell it where the image file is. So let's take a look at that. So here I've got a wombat gallery. It's not a very extensive gallery. We only have one picture in it so far. Just incidentally, while we're here, div is the HTML tag for division, logical division. You use it for sections of the website, so you might have a div that has your navigation in it, another div that has your footer in it, another div that has your main article in it, or what have you. So in this division we've got our graphic. And we only have one. And this is the image tag, it's IMG. Page 1

24 Now, what comes next is kind of like the HREF in hyper linking, if you remember that from that module. If you remember in hyperlinks, we use the HREF attribute to show you where the link goes. Well, in images, we have an attribute that's very similar called SRC, it stands for source. And just like we used HREF to link to some other resource on the web, we use SRC, as well, except instead of reaching out to another page, we're reaching out to a graphic. So we're basically saying to our web browser, put an image here in my document, and here's where you're going to get it from. Now, in our case, the image file is called wombat ursinus. I sure help I said that right. Dot jpeg. If I didn't say that right, please don't send an and complain. And it is in my images folder, okay. If you look over here at my website files, you'll notice here I've got all my web pages. Here's the gallery HTML. I've got this images folder, and it's got my actual graphic in it. So that's why my link looks this way. If the jpeg were in the same folder as gallery dot HTML, then I would not need this. This is just a folder name. If this were in a folder called graphics, I would put graphics here. I just don't want you to think that somehow this is some magical part of making graphics work. It just happens to be the folder name that my graphic is in. So the SRC points to wherever that file is. Now, just like -- just like a hyperlink, I can also link to graphics out on other websites on the internet by giving it the full address; HTTPWWW, you know, all the way out to the image file. And that will work just fine. It's Page 2

25 generally considered bad form to do that, though, because when somebody pulls up my page in the browser, then it's going to use that SRC to go out to that other person's web server to get that file. So now I'm using their web server's bandwidth for my own site. And if I haven't already gotten their permission to do that, that could end up causing us some problems. So instead of using up their bandwidth, you want to try to not link to other images that are just out there on the internet somewhere. Stick to linking to images that are local to you. Here's the link to my image. This last attribute, alt, this is what you use to specify text, if, for some reason the image does not show up. There's a couple a reasons for this. One is maybe there's some kind of error, and so the image can't show up. Maybe it's an error on your web server. Maybe we spelled the name wrong, or somebody accidently deleted the image, so it's not going to show up. Well, this text will show up in its place. Maybe someone's browsing the web with images disabled. A lot of people -- well, I don't know if it's a lot of people, but there's a fairly good chunk of people who do that just because it's much faster, and they don't really care about seeing all the nice, neat graphics, they just want speed, so they'll turn images off. And they can still see this text. The main reason we have it here, though, is for accessibility. People who have visual challenges will use a screen reader that reads web pages to them. Well, a screen reader isn't a person, it's a machine. It can't look at Page 3

26 your graphic and go, okay, there's a pretty cool picture of a wombat here. It just doesn't know that. Putting this text in is so the screen reader can read it, and the screen reader can tell the person who's listening, you know, that this is a wombat ursinus or, you know, a photo of a wombat ursinus, or whatever I think would make the most sense if it were read aloud. Both of these attributes need to be there for accessibility reasons. Now, if I have a graphic that is just art, it's not really content, per se, it's just making things look pretty, then I still need to have that alt in there, but all I got to do is leave it blank. And then screen reader will skip right over it. And we want to do that, because if you leave alt out all together and just do that, a screen reader will say image. It will actually say the word image when it gets to that point. And that is not only unhelpful, but really annoying. If you've never used a screen reader to use a webpage before, you might try to do it. It's really -- it really gives you a lot of perspective when you listen to a screen reader and try to interpret the webpage without using your eyes, because people who haven't put in their alt attributes, 80 percent of the page is just the screen reader going image, image, image, image, you know, and it's just incredibly hard to use. So make sure all your graphics have an alt attribute. And if you don't want a screen reader to read it, then just leave it blank. But do not leave it out completely, okay. Page 4

27 So this is my image tag. And when I pull this guy up in the browser, here is my wombat gallery. And notice that it is displaying the image right where that image tag goes by via my source. See, I've got my H1, and then I've got my image, and then I've got this paragraph. H1, image, paragraph. Now, notice I went here and I said where I got the image from, and I should probably go ahead and include a link as well. Contrary to popular belief, images that are on the internet are not available for you to use however and whenever you want. They're intellectual property, just like anything else. And so if you use someone's images, you need to get their permission. Now, there are some images that are out there that are kind of in the public domain, they're available for use. Wikipedia is one place that lets you use their images, but you have to give them credit, just like you would if you cited somebody in a report. So that's what that text is there for. It's very important. A lot of people do not do this. They get somebody else's image and use it on their site, or maybe they get the image and change it a little bit and use it on their site. That is not okay from a legal standpoint. So if you use other people's images, even if you make local copies of them, make sure you get their permission or that they have some kind of policy in place where you can use their image if you say where you got it from. And then you'll be safe. Page 5

28 It is surprising easy, actually, to track down when somebody does this. So it's not a good idea to try to do it in the hopes that they won't find you, okay. Well, one of the issues that comes up with images is what we call the red X. You've probably seen this in browsers before, where you know an image is supposed to go there, but there's a red X. There is one and only one way that happens, and that is your browser can't find this. And there's all kinds of reasons why it might not be able to find it. Maybe this graphic is not on the web server. Maybe you forgot to upload it or someone deleted it or something. Maybe you got the folder wrong that it's in, you know, so it's in the wrong location. Maybe you spelled it wrong, you know, if I do this, my browser is not going to like that, so it's going to go looking for that image. Let's pull that up, see what happens. It's going to go looking for that image, but can't find it, cause I spelled it wrong. That's our old browser window there. So this is very important. When you see that broken image link, your problem is always going to be here. Look at the SRC. Check and make sure that everything is spelled correctly. And make sure that this image is in the place that you said it was. If this is in a different folder, you want to make sure that folder name is out here, or if it's not in a particular folder, then you don't want anything out here. Make sure it's a JPEG. If you put JPEG on the end of it, and not a JIFF, or a PING, or some other kind of image format, is pretty important. [End of recording.] Page 6

29 HTML BASICS MODULE FIVE - FORMATTING HTML Male: Well, if you've hung in this long, then you have seen a lot about different tags and how they're used to structure text and how you can use them for links and images. But probably you're wondering how to make this look reasonably decent. I mean when you just put tags in and the browser just pulls them up by default, it's functional, but it's not really pretty. And, of course, the pages we've been looking at are a far cry from any kind of professional sites you might have seen. And it would take a long time to do a completely professional webpage design here in this very short webinar. But at the very least we can show you how to start making your web pages look pretty. And so that's what this module is about, formatting HTML. The first point is, as a rule using HTML for formatting -- in other words, for display, is a bad idea. HTML is for structure and definition. In other words, you use HTML to mark up your document according to the structure of the text. So you don't use the H1 tag to make things really big and bold. In fact, some browsers won't even make them big and bold. You use H1s to mark up text that are your first level headings. You don't use H2 tags, make things a little smaller. You use them to mark your second level headings. You don't use paragraphs just to randomly create spacing in your document. You use them to mark up actual paragraphs. Page 1

30 You don't use block quote to indent things. You use block quote to mark up actual quotes. So you want to use your HTML to mark up your text according to what it is, and what the sections are, and what they mean. You don't want to rely on browser default displays. And this is where a lot of HTML tutorials go wrong, because they start teaching you things like the strong tag makes things bold. Well, the strong tag doesn't always make things bold. It depends on how the browser's going to interpret it. A lot of them do make it bold, but you can't depend on that. The strong tag is for strongly emphasized text. End of story. And you really don't know how a browser's going to interpret that. So if that's true, if we don't want to use HTML to do all our spacing, and colors, and all that good stuff, and what's gold and what isn't, what do we use? Well, there's a whole separate specification for that called cascading style sheets, CSS. Cascading style sheet are specifically designed to control webpage display. That's what it's built for, is to give you your spacing, and padding, and bold, and font sizes and colors. That's what this language is all about. When you have a cascading style sheet, you can use one style sheet to control the whole website's formatting. So instead of having stuff sprinkled throughout your HTML, you can have it all controlled from one central file, and you can make changes very easily. Page 2

31 You can even use style sheets to produce different output on different devices. So I can have the website show up one way on the monitor, I can have it print out on paper a completely different way. And I can have it show on a projector a completely different way. So style sheets are extremely powerful. And I'm going to give you a foundation for how we use them. This is what style rules look like in a style sheet. Doesn't look much like HTML, but you have to understand it's a separate specification. Once we go over it, though, I think you'll find it's really not that bad. The way you use a style sheet is you start out with the tag that you want to format. So here I'm using body. You remember the body tag? The body tag holds all the content of the webpage, so whatever I attach to the body here, that's going to apply to every single thing in the webpage. So what I did here in body is I went ahead and set the font family I want to use. And what I'm saying here is, if the user has Verdana, use Verdana. If they don't have that, my second choice is Geneva. And if they don't have that, then just use whatever San Sera font you can find on their machine. This will apply this to every text that's in the body tag. Then I put in some formatting for my H1s. I said everywhere I've got an H1, I want there to be a border on the bottom. I want it to be two pixels. I want it to be red. And I want it to be solid. So every H1 that I have this style sheet attached to, is going to show up this way. Page 3

32 And, so you can start seeing the power of how to change the formatting, cause if I decide that I want my borders to be blue, I just change it here, and all my H1s everywhere that are linked the style sheet are going to change that color. So this is a very powerful language. You get a lot of mileage out of it if you use the languages for what they're for. So HTML for document structure. CSS for formatting, for making it look pretty. Then for block quote, you know, I just went nuts. I gave block quotes a whip. I gave it a margin. Margin auto means it's going to put it in the center. I gave it some padding, so there's a space between the border of the block quote and the content. I gave it a background color, silver. And I didn't just put a border on the bottom. I put a border all the way around it, five pixels black with a double line. Now, it would take us a really long time to go over all the possibilities that style sheets have to offer. This isn't even the tip of the iceberg. This is such a small sampling of what style sheets can do. Style sheets can put different things in different places on the screen. They can even stack stuff on top of other stuff. All your colors, all your spacing, all your margins, whether things have rounded corners or not. These are all things you can control with style sheets. The amount of power you can get is amazing. Page 4

33 And if you have time, you might want to check out a site called CSS Zen Garden. That whole project is where they take the exact same HTML, but they have people submit all different CSS style sheets. And the websites look totally different, even though the HTML is exactly the same. So it's a very powerful language. So you put this in a file with a dot CSS extension. Well, once I've got that, how do I use it? Well, I have to tell my web pages to use that style sheet. So what I want to do is I want to use the link tag. This is not used for hyperlinks, and that throws some people off. So I've got this link tag. The relationship for this link is style sheet. The type is text slash CSS. And then I give it a HREF just like hyperlink. And I have to tell it where to find my style sheet. In this case my style sheet is in the exact folder, so I'm just going to say main CSS. Now, you remember what this looked like. I'm going to cut this out real quick. You remember what this looks like in the browser without the style sheet. So without that link tag in there, I'm going to fire it up just so we can refresh our memory. Here's what it looks like in the browser just using browser defaults. When I put that link tag in there, watch what happens when I reload. Hey, okay. So it's still not amazing looking, but at least we got some things going on here, right? And you can kind of see where this is going. Page 5

34 First of all, the font is Verdana, right? I said everything in the body tags put in Verdana. And so that's why the font changed. I said I want a border on the bottom of my H1s that are two pixels of solid red. That's what I got. And then I told my block quotes I want a five pixel, double lined black border, I want a silver background color, I want a little bit of padding in between the contents and the edge. And I want this to have a margin of auto, so I want it to be centered, and I want it to be 300 pixels wide. So I'm controlling the formatting of my website. This just gives you a taste of what's possible. Now, every webpage that I use this link on -- let's say I come over here to my links page, and I put this in. So here's my hyperlinks page, right? It takes on the exact same style sheets. My H1 has the border and the font is in Verdana, okay. So now I'm getting a consistent look across my page. And if I want to change, let's say all of a sudden, like I said, I want my borders to be blue, then all I do is come back to the style sheet and change it in this one place. I come back to my web pages, blue border, blue border all across my website, all the pages I have linked to that style sheet I changed. And that's why they're such a powerful formatting tool. Now, sometimes when you're using style sheets, maybe you want something to be different on one page, okay. And you have an exception to the rule. So this allows me to put in style sheets, or I should say style instructions, using the style tag also in the head of my document. Page 6

35 And then whatever style rules I put in here will apply to this page, but it won't apply anywhere else. It's not a global link like the other one is. So let's say here I want my H2s to be -- I don't know -- green, okay. So what's going to happen is, when I reload the home page, now my H2s are green. On the link, nothing. This applied to this page, but it didn't apply to every single one of them, to every single page. But it did do it for both H2s, right? All the H2s that are on this specific page. Well, what if you want an exception in just one specific location? So let's say I wanted this specific H2 to be -- I don't know -- purple. Well, then I can use the style attribute. I'm wondering all of a sudden if purple is a standard word. Let me actually use red just to be on the safe side. Links complete unaffected, but now I've got a red H2. This overrides everything else. This overrides everything for this specific page, and this applies globally. So if there are conflicts between style rules, the closest one always wins. The attribute will always win over the style tags which will always win over the linked style sheet. And that's the way we can use style sheets to format our web pages. [End of recording.] Page 7

CSS BASICS. selector { property: value; }

CSS BASICS. selector { property: value; } GETTING STARTED 1. Download the Juice-o-Rama 11-01 zip file from our course dropbox. 2. Move the file to the desktop. You have learned two ways to do this. 3. Unzip the file by double clicking it. You