Web Development
Tuesday, July 14, 2009
Professor: Good morning. I think we’re missing a couple of people so we’ll wait a few minutes. If you have questions about yesterday this is a good time to ask. I assume you understood everything perfectly? We’ll review a bit and then move onto today to new material. We’ll give ourselves 5 more minutes to wait for students to dwindle in.
I’m getting started. Have your browsers been wiped out?
Student: Yes.
Professor: We’ll have to install Notepad ++. Go to Google. Search for Notepad ++
This should show up.
[On screen.]
Click download.
So you want to click download Notepad ++. I think we use the 5.44 installer. Let’ said that again. Save file. That should save to your desktop.
It pops up and you click the icon on the desktop. And you double click the install the file you downloaded. So I think we’ll have to do that every morning. The computers are set up not to keep data.
Ok. So I’ll start on the blog. That’s where I’ll post each day. I posted stuff from yesterday and a recap. There’s the basic structure of the website. If you remember. The minimal amount of tags for the web. There’s another post for information architecture and wireframes. Above that is the code for each type of HTML element. Remember the page with lists, form elements, paragraph elements, pre-formated, etc? It’s also on the server so you can download there too.
Pop open winscp. It should be on your desktop or stock. [username deleted for security] is the user name. That’ll pop open this window here. [On screen.] Go to the one pot cooking on the server. If you’re falling behind in your own coding you can go to my folder here to Summer 2009 and there’s a list of the classes and the files I’m showing are here. In class 2 I’ll have a couple of things we’re looking at. In class 1 we have what we discussed yesterday. The code that has the HTML elements are in HTML frame.
That’s where you find things I listed on the blog. Poke around in this folder and files. You can upload the files for yourselves. Try not to overwrite my files. That’s a risk of you going into my folders.
Student: Can we access this from home?
I tried to access the server I couldn’t get into it.
Professor: You shouldn’t have a problem. Bear in mind, make sure SFTP is selected and the port number is 22. The settings may be different.
Student: Does it matter which SFTP?
It was definitely on port 22. But it wouldn’t let me get to the window. I got an error message.
Professor: Not sure what the problem was. It should work.
Student: Thank you
Professor: These servers are down sometimes. So maybe it was down when you tried to use it. That’s possible.
Let’s start with a recap of the blog post. I’ll run through the elements so it’s fresh in your brain. I know this is a lot of material right? It seems like a lot to me. Let’s go over it one more time. So …. every XHTML. The HTML tag has two things. A head and body. Those are the two main sub-components. The head has a title. So there are 6 things required of any HTML document. These lines are one element. The HTML tag and the head tag and the title tag and the body tag. The next post has those elements. So this should be your starting point for a document. Create your own file with the same code in it.
When you start a new XHTML — copy and paste this. The difference between the code is the content in the body and you’ll probably change the title and add more sub-tags and sub-headings. But this is exactly the same frame and architecture of every XHTML document you ever make.
Student: Where?
Student: It goes all the way up to ….
[On screen.]
Professor: Here. So I’m labeling my posts for the class so you can find it by searching by the class number. So today is class 2. Ok. So let’s go through the elements that are listed in the document here.
Ok. Remember what that element is?
Student: Header.
Professor: Tag name.
Student: H1
Professor: Use H1 as the most important header through H2, etc. This is a Ptag. [On screen.] This is the Ptag. I added comments for the Ptag. We didn’t cover this yesterday. This will show up in the code. You can read notes that you leave for yourself, but it doesn’t show up in the browser. That’s only visible to developers. It always begins with these marks. And ends with these marks. So you can go through the code and check that out. This is a paragraph of line breaks. Line breaks you enter in the code but it doesn’t show up in the website unless they have a BR tag. These are three lines because I made a line break here [On screen.]
Also the Ptag starts and ends with a /p. It has the slash on the inside of the tag because it doesn’t require a closing tag.
This is how you make a link. [On screen.] The A is the anchor which shows up for the link. When you click the link it takes you to the link you specified — we call that an attribute. What you put there is the link you link to.
This is a paragraph with a strong tag inside of it which makes something bold. The strong tag looks like this [On screen.]
So it’s just the paragraph but some text is indicated as important. The browser will make that bold. We can change those settings in CSS.
This is preformatted text. Unlike paragraph tags it’ll respect your line breaks. So we don’t have to respect the BR [bell rings ] Fire drill bell ringing …….
[Class laughing.]
Professor: I think they’re testing them. I don’t think there’s a fire.
That light went off. I’ll ask. One moment. I’m inclined to just stay in the room.
[Class laughing.]
False alarm. We’re fine. So the pre-formatted tag allows you to use line breaks without the BR code. You see the line breaks are here and the spaces in the code before the lines shows up visually on the page. That’s the idea of pre-formatted. There are spaces here on the blog but you can’t see it here. This is how you put an image on the page. The IMG tag. It has one attribute called SRC. I put in optional attributes called title and ALT. I hover over the image. The word “donkey” shows up.
Student: Can you move the paragraph on the right. The picture. The paragraph next to the picture?
Professor: We’ll go into that today. That’s about orientation. We’ll cover that.
When you mouse over with the cursor, the word “donkey” comes up. That’s because in the code I put the attribute called “title.” If the cursor sits over the image, it shows the word you put in.
The alt attribute is used for some browsers that don’t support images. The alt tag was a placeholder to show that there was meant to be an image but it can’t be displayed. So it displays the words instead.
Student: What about for people with reduced vision?
Professor: Exactly. They may have software that will read to them. So it’ll look at the alt text to see what it’s supposed to be about. Also search engines look at your alt tag to see what your image is about. That’s what a search engine is interested in. To make it easy to find that out, you should use alt tags properly to indicate what the images are about so it can properly index your page on the search engine.
There are two list types. There’s the ordered list and the unordered list. They’re almost identical. One has OL tag. And one has a UL tag. Those look like this [On screen.] by default. Ordered lists have numbers. Unordered lists have bullet points.
Each list item is an LI tag. Inside of the OL tag or UL tag there’s a series of LI tags.
The next thing is a table. This is a table tag. Table tags have two subtypes of tags. There are TR tags that indicate the row. Within the TR you can have TH tags or TD tags. In this case we have a three-row table. There are two heading subtags in the first row and two TD table tags in the second row. So the headings are bold. And the material below the headings are not bold.
It’s important to organize your tables with the right number of rows and columns.
The next section has a bunch of forms. All forms have to start with the form “tag” and end with the ending form “tag.” Everything between the opening form tag and closing form tag is some sort of control related to the form.
The first control was single line text input. Let’s see what that looks like. [On screen.] So that’s on the page because of these codes. I have the label using a label tag. And I have the text input using the input tag. The label matches the input because it’s indicated in the code that the label is for a particular input. I’ve given it the same ID as the input field.
Student: Will we go into a database and how you can sign into a website? You created those two forms with username and passwords?
Professor: We’ll do that next week. It’s more advanced.
Student: Can you limit the number of characters? Is that in HTML or JavaScript?
Professor: Both. In HTML there’s a max length attribute. There’s an attribute called maxlength that indicates how many characters can be used.
Anytime you try to control the images on your page, there are ways people can get around these things. If someone wants to enter more characters, they can do it if they know what they’re doing. Hackers can bypass those things. So you can’t always ensure that people are entering valid information with just HTML. You have to use other technologies.
You can use JavaScript but that can be hacked too. PHP on the server side is more secure. The client technology has software that manipulates your code and can process it on their own computer. Whereas on the server side, they don’t have access to your server. They can’t manipulate that code because they’ve never seen what’s on the server. Anytime you do security-related things, do it on the server side because you only have access to your server, theoretically.
Whereas with the client side, it’s very easy for other people to change your settings.
Password input is like the single line text input but it has type=password instead of type=text. So these two are identical except for that change. That change means the text you enter in the field isn’t displayed to the user. It’s not encrypted or secure. It just doesn’t show up visually on the page.
A drop-down list is created using the select tag. Just like the list had list items, a select tag has options. That option tag is used for each of the items in the select list.
Radio buttons look like this. [On screen.] You can click one or the other. This is a mutually exclusive set of buttons. To make them mutually exclusive, you have to give them the same name. Name=R1. If you give them different names, then people can select as many buttons as they want.
IDs should always be unique. If you give something an ID attribute, it has to be unique. But a name can be the same. You can give elements the same name.
Radio buttons that are not mutually exclusive can have different names. That way they’re not related.
You have a multi-line text input and use the text area tag. Enter in multiple lines of text. [On screen.] We can changed the width and height of things. That’s the way you do any kind of multiple line input.
Checkboxes are like radio buttons. They’re type=checkbox. The input tag has type=text single line. Type=password for invisible input. Type=radio for radio buttons. And then there’s type=checkbox. The input tag is useful with different attribute set for types.
The submit button is type=submt. The reset button is type=reset. And the generic button that doesn’t do anything is type=button. You’ll use the button type for JavaScript. JavaScript reacts to user actions. So when I click something, something else happens.
I can attach a behavior to this button. It will then call a JavaScript code that does something. Maybe it makes something visible or invisible, etc.
The iframe is attaching one page to another page. So we have the NYU page included in a box on this page. This is used a lot for advertisements. We’ll go to CNN.com. Do they have ads on here? Here’s an example. [On screen.] This is probably an iFrame with Flash animation inside it. This is probably loading the ad from another site. They use that for ads because ads always come from an ad server.
There are companies that only provide ads. They do all the negotiations with the advertiser. So what you will do as a site, you’ll receive code that the ad distributor gives to your site. That pulls the ad from another server. Since you don’t know where the server is coming from and the code, etc., you don’t want that code interfering with the code on your page. So you isolate it in an iframe. So the JavaScript code and Flash code don’t interfere with your page.
Student: How do you determine how big that is?
Professor: I can’t do it right now because I don’t have that installed. You can install something that gives you that information. There are tools we install into Firefox that helps us with that. We’ll get to that later.
That’s it for the XHTML controls. Let’s move onto a recap of the basic CSS stuff. We’ll get into new CSS techniques today. There’s stuff posted I just did this morning.
We have CSS receptors and Web layout. There’s a good post here that goes over the different selectors. We covered some of them but not all. I’ll go over the ones we did cover.
To style all paragraphs, use P in between the brackets and any styles you want to apply to the whole page. If you want to style only the P’s that have the ID equals some ID, use the pound sign. That will apply a style to only one individual paragraph. So it matches a paragraph that looks like this. [On screen.] That’s an important technique.
Selecting a particular class, if you make a style that’s P-dot and then a word, that matches any paragraph tag with the class that equals that same thing. A class is meant to be applied to many different things.
Any questions?
Let’s move on. I’ll open up Notepad++. What’s the first thing I do when I create a new document?
Student: Put the HTML code in.
Professor: Right, copy and paste that code. There are some things that are better to not think about. That’s one of them. We’ll just copy and paste versus recreating it.
I’ll go to the Web post with that code and copy and paste it into my new page. We’ll call this page Class 2 – CSS Selectors.
I’ll save that into a folder. Put this in your own personal folders under Class 2. I’ll make a folder with my name on it because it got wiped out. Inside of there I’ll make a Class 2 folder. Inside the Class 2 folder, I’ll make a basic_css folder. Inside of basic_css, I’ll call this file index.html. You may have noticed we call a lot of files that name. That’s a special file name. It’s the default file name the Web browser will look for.
If I tell the borrowers to go to [sever address deleted for security], I’m not giving it a file name. It’s a server name. I didn’t say to load up blog.html, etc. It’s just the server name. So the browser will request from the server that index.html file if nothing else has been requested. It’s the default page when you don’t specify a name.
Let’s put in some text in the body. We’ll put in a heading, page 1. It’s the same thing as the title. We’ll recreate some of the things we did yesterday. We’ll make a paragraph. Put some text in there called paragraph one. We’ll make a few paragraphs. Let’s make six paragraphs.
Now I’ll upload that to the server. Open WINSCP. Navigate on the left side. To your personal folder. And the on the server side do the same thing. Your name and the class 2. It’s not there you haven’t created it.
And create a folder called basic CSS there. Drag over the HTML so once you have that on the server and in your own folder it’s important to get used to … where do I go for the file?
Student: The address bar. Then you put it in your name ….
Professor: Ok. [On screen.] /class2cssspace. index. That’s very important to remember how to do. This URL you HAVE to get used to translating folder names to your OWN names. The URL is your own folder. It’s URL/the file folder. [On screen.]
Of course … [On screen.] So that’s what comes up if you hook up the right file. If I didn’t specify index.html it’ll load anyway because that’s the default it loads. It looks for a file called index.html.
So you all have or you’re looking at my version of a file with 6 paragraphs. So now we’ll specify styles for one paragraph — for several paragraphs then we’ll do new stuff. If you remember how to specify a style for paragraph 2 for example. I give it an ID that allows me to individually address this paragraph. It’s called P2.
So I know now this paragraph that I want to change the style of has an ID of P2. So I can make a CSS selector for only paragraph P2. So we have to first link the CSS file with this file. We have to indicate there’s a CSS file for the rules of this code. That’s using the “remember the link” tag. Relationship = style sheet. Type is text/CSS and href= where the file lives. I’ll require you to put your files in a subfolder called “styles.”
[On screen.]
Ok. So the link tag has three attributes. The relationship (rel) and the type is the type of code. It’s CSS code. And the hyper text reference is the folder and name of the file. That’s the subfolder from where the HTML file lives. So it’s a subfolder, file, etc. You tell the server where to find the style sheet. Now we have to create the file or else this code won’t know where to find the file. Let’s do that. Let’s make a blank page.
In Notepad you can save the window. We create a subfolder by clicking the icon with the star next to the folder. Create a folder called “styles.” Double click to get into the folder and save it as “styles CSS”. We linked from the XHTML to the style sheet. And we have the style sheet in the right position. So now we can write the code. We want a style for paragraph 2 so it has a font size of 20 point. The way we do that is P#P2. Meaning select paragraphs that have an ID of P2. Now brackets. So let’s give it a font-size:20 point. [On screen.] So this is a CSS property we changed. I posted a link of all the CSS properties available. There’s a big list. But they’re relatively straight forward.
So let’s give it a size of 20 point. If you’re familiar with microsoft word point size …
Student: When you save it it comes up as new instead of main.css.
Professor: Then I go to file, save as, and create the sub folders “styles.”
Student: I did that.
Professor: So you should be in the same folder as the HTML file. Then click this icon here for a new sub folder and name it “styles.”
Student: Right. I have that folder and the main CSS folder.
Professor: Double click to the styles folder. In that folder you want to save the file as “main.css.” You don’t want a new subfolder you just save the file as “Main.css.” Once you do that it should be set up correctly.
Ok. Now this is a selector. This is the rule. This selector only selects for the paragraph with ID. Not working?
Student: Crashed.
Professor: Re-open it. It stores your documents. It should be there.
Now we’ll upload this to the server. The whole thing. Go to winscp. You have to make sure you create the files on both the client and server side. You can drag the files so that you have the file in both places.
We should see paragraph 2 having a bigger font. Again this is because we use the selector and applied a bigger font to that paragraph. Now we’ll do the same thing but instead of applying it to one paragraph we’ll do several paragraphs at once. We do that by giving the paragraphs we want the styles to change for a class. We will give them a command class = blue. You can use whatever word you want. Blue is nothing special. I’ll give that class to the last 3 paragraphs. The last three paragraphs will have class = blue. In the style sheet we identify that the paragraphs with the style blue we attribute that. I’ll give it something obvious so I remember that they equal blue. So P.blue has color blue. [On screen.]
Remember the dot notation indicates a class name. The pound sign is for an ID.
Student: You can write in a hex code right?
Professor: Yes. If you know hex code. You can do 0,0,0,0 for blue. In HTML you use these codes for colors. Blue is just a primary color.
So you can now upload this to the server and the last three paragraphs are blue. Remember to re-upload the CSS file and the HTML file. Make sure they’re all in the right folders. Now if I refresh the browser they’re blue.
[On screen.]
Ok. Now that’s what we covered late yesterday. We’ll do a couple of more CSS commands. Now let’s say I wanted these numbers in here [On screen.] in the blue paragraphs to be purple. I just made purple up. The way we do that is in the HTML code we indicate we want special styling to these numbers. We want it in one specific point in the paragraph. We use the tag “Span.” You put a span around the text you want to change. We don’t want to change the formatting we’re just doing a style adjustment. Span is like a discrete tag. If I change this and upload it to the server you’ll see nothing changes on the page. Let’s drag that over. It’s the same as before. You wouldn’t know I added the span tag. Why put it in? Because I can attach a class or an ID to a span tag. So you attach “class = purple” so each will have that tag. When you have an attribute you can call it whatever you want. This now allows me to attach a style to these 3 pieces of text. We won’t change the formatting. We’re using the span tag to apply a selector to those three tags. So I can say span.purple, and it’ll make it purple.
So it looks for all span tags with class = purple and makes whatever is inside purple. So it’ll look for the purple class and change the class to purple.
So let’s try that. Let’s upload it to the server. Both to CSS and HTML. So just those numbers turn purple. So that’s the use of the span tag. It’s used for isolating text and attaching styles. That’s the ONLY use for the span tag. It’s useful because it doesn’t have default behavior of it’s own.
So let’s say I wanted [thinking] … this “purple” to have the color orange. What would I do?
Student: Replace purple with orange.
Professor: Ok. But it’s just ONE element I’m changing. So class isn’t the most appropriate.
Student: ID
Professor: Right. You give it an ID. You could use class. You can apply class to one element. But it makes more sense to use ID if you address one individual. So in this case we want “Orange.” So I make a style selector saying “all spans with ID orange have color Orange.” [On screen.]
Now I re-upload that to the server. [On screen.] I have to change the HTML and upload that to the server too.
And it’s orange now.
I’ll leave this example as is. We’ll move to a new file. Any questions about this so far? It’s about selecting pieces of texts and elements and changing their styles.
We’ll now go into the next set of CSS selectors. Let’s make a new file. I’ll copy and paste this so I don’t have to retype it all. [On screen.] I’ll save this new file as child_selector.html.
This is going to be a CSS Child Selectors as the title. So the HTML is matched up with the CSS. That makes it easy to organize. I wouldn’t normally call the CSS files the same as the HTML files. The CSS file will also be our H1 tag.
Now we’ll make a list. Let’s make it an unordered list with three different list items. We’ll call them item 1, 2, and 3. That’s the body of the document. It’s a heading with an unordered list with three items. [On screen.]
We have to make that CSS file we talked about the styles/child_selectors.css that we’re linking to. So let’s make a new file. Go to File, Save As, in the styles folder call it child_selectors.css. We have two files necessary for this example.
Let’s load this to the server and look at it. It’s always good to see what you’re starting with. Let’s view that in the browser by going to what URL? This isn’t a quiz. Remember everything here matches the file structure of the folder on our server. So we’ll type child_selector.html into the URL. We have to tell the browser which folder the file is in and what to load up.
We have our heading and three list items. The first thing we’ll do is make a style for the list items. This is something we’ve already done. How do I make a style for list items?
Student: By a class?
Professor: We don’t use class actually. In this case, we apply the style to the LI tag. We’ll make the style for the LI. It’s just the tag name. We’re applying it to all list items so there doesn’t have to be a particular class or ID. What do you want to do with the list items? What do we want to change? Pick anything.
Student: Move them to the left.
Professor: Ok. Let’s see where they are now. Let’s move it drastically to the right so we can see that it really worked. I haven’t used positions yet, so that’s good. Let’s change the position. There’s a CSS property called “position.” We tell it that we’re changing the position of this set of items. Make the position relative.
What this tells the browser is we’re changing the position of the object and tell it where it originally lies if we didn’t change. We give it the starting position and then change it relative to that starting position. We’ll move it from the left edge of the LI items 100 pixels to the right. This takes the starting point of the left position of the items and moves them over 100 pixels.
Student: Can you use IBM?
Professor: That’s a little advanced. EM is the preferred way of doing this. Some people say EM makes more sense for some reason. I won’t go too far into that. Pixels are the dots on the screen. You can see the actual pixels on this screen. This graphics card is lousy on my computer so you can see the pixels. But the pixel is literally a dot on the screen.
An EM is a proportional thing. It’s about in proportion to the size it would normally lie, how would you move this over? EMs are flexible and more practical, but I’m using pixels right now.
We’ll take the position of all the list items and shifting the left edge 100 pixels to the right. If I wanted to shift it to the left, I would use a negative number. We’re doing it to the right since we’re already at the edge.
Let’s upload that to the server. We’ll see what happens. We’ve shifted the whole thing over to the right. This brings up another topic to talk about now. There are three different values to set for position. There are three ways you talk about a position. You can talk about it relative to where it would lie by default behavior of the browser. You can also talk about position in absolute terms. That means starting from the absolute top left of this page, how many pixels to the left and down do you want to move your items.
If we talked about this in absolute terms and gave it a left position of zero, that would actually put the item in the top left. We can change the top position to zero. Those are the two properties that are X and Y coordinates. That puts the set of list items into the top left corner. They’re actually all in the top left corner because that’s a style we’re applying to all items.
Student: Which would you recommend?
Professor: It depends on what you do. If you want all the items to be in the top left corner, use the absolute positioning.
Student: Do you use one more than the other?
Professor: No, it really depends on what you’re trying to do. Once we start making full pages with lots of content, you’ll get the hang of playing around with this.
If I said the position was relative by changing this word to relative, [On screen.] that will not move the position at all from where it would originally lie. I’m changing the position relative to where it originally was and I’m not changing either one of the properties by any amount. It’ll just stay where it lives.
Let’s upload that. So they sit where they would normally lie. To drive this point further, if I change the top to 100 and the left to 100 and reupload, we’re shifting relative to the normal position down and over 100. You can really play around with things however you’d like.
Some people design a whole webpage where every little bit is positioned absolutely at a certain position. That’s bad form because it’s difficult to maintain your site. If you change one position, it has no effect on the other things. That causes problems for maintenance. So don’t do that for now. We’re going to be getting into layouts today and how you make column layouts. You’ll see there are some difficulties with that concept. It’s an attractive idea to say the columns are specific positions, but it’s not a good idea. Take my word for it.
Let’s move on. What I’ll do now in the HTML is let’s say I had a paragraph inside of one of these lists. I can put a paragraph tag for item 2. That’s a paragraph inside of list item 2. [On screen.]
Let’s say I also had a paragraph at the bottom of the page outside of the lists. So I have two paragraphs on the page. There’s one inside of list item 2 and one outside of the bottom. I’m doing to for a reason. Let’s see what that looks like with no styles applied.
That’s not what I meant to do. You can see you get into issues when you start positioning things. I’m going to remove the styling I did for the positions. Let’s re-upload it.
So that’s what the page normally looks like with no styling. So I want to show you how to address a style for a paragraph inside of something else. I’ll say for all the paragraphs inside a list item, do a particular style. That affects one paragraph but not the other paragraphs.
I’ll say LI, space, P and then the brackets. Let’s make it a background color of purple. That way we can see it easily. We haven’t seen this selector before. We’ve seen list item with pound signs and dots. But we haven’t seen a list item followed be a space and another tag. So the space indicates the P will be inside the LI. So this will change the style of all paragraphs inside a list item.
We’ll upload that to the server.
So only the paragraph inside the list item is being changed. That’s what’s called a child selector. It’s called that because the paragraph is like a child of the list item. It’s inside the list item. The list item is the parent.
That’s another thing available to you as a CSS coder. You can use this technique to change styles of certain items and not other items. This is a very commonly used one. You may only want to change some paragraph styles so you can use the child selectors to indicate which paragraphs to change.
So now we have two lists. They’re identical right now. I’ll give the second list an ID of L2 for “list 2.” I’ll give the first list an ID of L1. We don’t want the repeat the same ID. That way we can attach different styles to them. I’ll re-upload that file. We refresh the page. So there are two separate lists with the second item having a paragraph in it which is purple.
Let’s say I want the second list paragraph to be purple but not the first list’s paragraph.
Student: You have to specify for L2.
Professor: Exactly. Somehow I have to say for the paragraph that’s a child of list 2, apply this style. We haven’t seen how to do that yet. It’s combining things we have already seen.
What we say in the CSS is exactly that. You don’t want the child of any list. You want any paragraph that’s the child inside of an UL tag with an ID of L2. That sounds long winded. But all you have to do is say UL, pound sign, L2, space, LI P. So we’re merging a few things here. This is a style selector for any UL tag with an ID 2. That’s what this means.
The selector inside of that is to look for a list item and then look for the paragraph and make it purple. I tend to read these backwards. We’re applying the style to a paragraph tag. The last thing in the selector is receiving the style. The paragraph inside of the list item, which is inside the L2 ID gets the style. Let’s see if that works.
We’ll re-upload both files.
It works! So again, let’s cover this again. We have two lists right? Our goal is to apply a change to style to the first list not the second. So we change the CSS selector that looked different before [On screen.] So we change it to a specific selector that says “only apply that to the list item inside the ID of L2″ so the point is the space indicates a parent/child relationship. Since there’s a space it means it’s a child of the list item within an ID that’s relative. You can do this with classes too. The solicitors are independent. So this selects from an ID from L2. Combining them indicates one inside the other, inside the other. You can see hierarchy is important. There’s a hierarchical relationship to this. That’s what we indicate.
Ok. Questions?
So let’s say there’s one more thing I want to show. Another type of selector. Let’s say I have inside of the first list in item 3, I’ll put something there. I’ll put another list. Let’s say an unordered list. You can put one list inside another like this. It’s called second list item 1. I’ll make three list items inside the second list. 1,2,3. Inside the list item I’m putting a new list inside of it.
Let’s make an ordered list.
We have to close the ordered list. So we’ll have one list inside another. It’ll look more straight forward than it looks in code. You do this in Word all the time. It’s a list inside a list. We could get rid of these bullets but we’ll leave it for now. We want to apply a style to the second list but not the top level list.
There are a few ways to do this. I’ll change this a bit. We’ll actually put a paragraph inside the second item of the second list. Let’s do that. [On screen.]
Zoom out a bit [On screen.]
So inside of this nested unordered list — meaning inside another list – we have three list items. The second list item has a paragraph inside it. So let’s upload that to the server. It’s getting complicated but manageable.
So I want to change the style of the paragraph. There are many ways to do that. We know we can change the style by having an ID or a class and apply style to the class. We can indicate to give a style to any list item with an ID. I’ll show a new way to approach this paragraph.
So we can say UL LI UL LI P. That would select any paragraph in any list — you can make this as long as you want. I can say LIP which will look for any paragraph in any list item.
The thing I’ll show you now is we can say li > p. This will indicate any p that’s a direct child of a list item.
That would mean that if the paragraph is not inside anything else in the list item. It’s just directly in the list item. There’s nothing around it.
[On screen.]
It would not match this. Actually. It just means one thing directly inside another. It’s the least likely to be used. I don’t recommend you use this but it’s there if you want to address just one thing and not grandchildren. So we can change the style like this. Turn it yellow. Upload that. Why did all three turn yellow?
Student: They’re within
Professor: They’re all children of the Ai tag
This is one reason why you’ll see things like this. Ui li ul li. That would work. You’ll see these selectors. It’s not a good idea to make them TOO specific. Did I miss something? Ulli … it’s easy to get lost in these things. I don’t recommend to use too long selectors. But you can do this if you want. Maybe you need to have that many selectors. This would work without it. It means anything inside anything else. It can be several levels down. So I can say “ulp.” The p is not directly inside the ul. It’s separated by a list item. But this will work because it’s anywhere inside the ul. It doesn’t have to be directly in it to be a grandchild, etc.
So it matches all the Ptag in any list
Student: The difference between a nested item and grandchild
Professor: They’re the same term. A child is anything directly inside of this. For example. The H1 is a child of the body. The list item is NOT a child of the body its a child of the UL. The body has a child UL and the child has a list item. I can say the UL is the grandchild because it’s separated by one.
Student: Nested?
Professor: That means anything inside anything else. The li is nested in ul.
Student: CSS dictates what they look like.
Professor: It says only make the grandchild of something blue. You know because you coded the HTML. You use that structure by using those relationships.
So in this case we say make any child, grandchild, any p turn to yellow. It makes all the p’s turn yellow inside a list. Even though this one is a grandchild it still prints yellow.
Questions about this? Let’s say you have a paragraph you want to change color you say p and make it red.
That’s the simplest a tag name that applies to all paragraphs on the page. I can say p #.P5. That only applies to the paragraph P5. If I say P.red that only applies to paragraphs with classes equal to red. If I say p inside of li that only applies to paragraphs inside li. If I say p inside ul that applies to paragraphs inside a list. If I say < p that only applies to children of li. If I say li.17>.p This applies to any paragraph that’s a child of a list item of L7.
Space indicates parent/child and greater than child indicates direct descendant.
This is all posted. Any questions?
The most commonly used things I would advise you to start with the simple ones. Using P and an ID. Or P in the class to indicate the class. Those are simple. You can use ID’s and class to your advantage that’s not too confusing. When you get used to it you’ll use selectors like li space. But start simple and use the more complicated ones. The ID and class selectors are pretty simple. Use those first.
Ok. I’ll move onto a new topic now. Any questions about this?
Good question. Let’s see ….
There are a few ways. First would be to usource like HTML. You see the link tag and I see where the style sheet comes from. I copy that. Go to the browser and replace the file name with the file name from the CSS code. Enter and you’ll see the CSS show up there.
That’s always going to work. That’s the easiest way. There’s a tool we can use that’s more useful than that called “firebug.” If you Google firebug you can click that … [On screen.] They have a screen shot of what we’re talking about. You can view the source and it’ll bring up the style sheet. Let’s install this. Go to getfirebug.com and install that. It’s 1.3. It’s a Firefox add on. It’s adding a function that’s not on Firefox by default. You can edit options to allow the installation. You can add firebug to the list of sites it’s ok to install from. You should get a pop up like this once you give it permission. So now it’ll add software automatically. We have an old version of Firefox here.
Anyone else have this problem? I guess only mine is old.
[Class laughing.]
It’s downloading Firefox version 2. You will see on your own copies once you’ve installed firebug you’ll see a firefly icon. You should see that. Click on that. It’ll pop open a panel like this. Click on HTML and it’ll bring up the style. It’s useful as a tool.
It’s also good for HTML to see the code.
Student: Are there programs available for other browsers?
Professor: Internet Explorer is a lost case. But Safari and Opera has tools available. The general answer is no. Firefox is really the only browser that supplies easy ways for developers to use these tools. Firefox is built for developers very well.
Please don’t use Internet Explorer in this class. Things don’t look right in it. You’ll code something that’s perfect and it won’t display correctly. It’s actually the most widely used browser in the world, but it takes so much time to tweak it that we can’t use it in this class.
I’ll move onto Web layout. We talked about CSS and colors. But let’s make a site that looks decent. Let’s go to nyu.edu. They have a layout. There’s this section next to that section next to that section. We don’t know how to get these things to sit in the right place yet. We know how to make this purple. But we don’t know how to make the banner on top of the three columns. That’s one of the biggest issues in CSS is how to get things to sit in the page correctly. How do we position all of these items?
It’s tricky to do this. This will be difficult for most of you. There is a reliable technique, if used properly and consistently, can save you time doing this. We’ll make a new file. I’ll copy and paste the old file. We’ll save it in the folder called “layout.” We’ll save the file as “index.html.”
Student: Did you say in a folder called “layout.”
Student: Is it a new folder or a subfolder?
Professor: It’s up to you but I’m using a new folder. Do whatever makes sense to you. Just remember where you put it.
Student: What was it called?
Professor: It’s called “layout” in my “Class 2″ folder.
Student: Should it be part of CSS?
Professor: I made it separate. Wait, maybe I got lost in my own files. I made it as a separate folder outside of basic_css. I’ll make a subfolder called “styles” just like the other folder. I’ll save a style sheet called main.css, just like the other example. Let’s make a new file. Create a new subfolder called “styles.” Inside of that, save the blank file as “main.css.”
This will be the same thing we do for every example. We make the HTML file. Inside of that folder, I make a subfolder called styles and then a folder called main.css. You can call it whatever you want.
In my Class 2 folder, I have two subfolders, a basic_css, which is the last set of examples, and a layout folder. Inside of layout, I have index.html and styles. Inside of styles I have main.css.
If you want to just download my folder structure, go into my account and pull it to your side. Pull it from left to right.
We’ll create something that looks like what I posted on my blog. Let’s go there again. We’ll use my blog as a reference. It’s the latest post. The latest post is “CSS selectors and layout.” It has links to the different selectors we talked about. It has a link to a layout technique we’re mastering today.
So click the layout link which takes you to a post we’re talking about now. We’re creating a two column layout with two rows. It’s not pretty but it has columns and rows.
We’ll focus on how this maps into content and HTML contains. We have four or five boxes here. We have the outer box. Every page you make has a container around the whole thing. Inside of the outer box we have four separate boxes.
We’ll use a tag called div that we haven’t seen before. A div stands for division. It’s just a box. The div tag creates a box. We’ll create one big div tag and four nested div tags. Let’s go with the HTML first and the code. The code is straightforward. I say that about everything.
Let’s give this a head of Class 2 – CSS Layout. I’ll create a div tag. This is similar to the span tag. It doesn’t really do anything on its own. We have to give it behaviors. The span tag didn’t create a box. It just allowed us to style text individually. The div tag actually creates a box.
Inside of this div, I’ll create four more divs. Let’s make the boxes empty now. [On screen.] We have the big div that surrounds everything. We have the four little divs inside of the big div.
We have to look at these divs. They’re invisible unless you give them a style. For all divs in the style sheet — switch to your style sheet — make a style for all divs. We’ll give it a border with one pixel, a border color of red, and a border style of solid. This will make all divs have a one-pixel, solid red border around them. That way we can see them. This makes the boxes visible.
I’ll now upload this to the server. I’ll upload the whole folder so I don’t have to individually drag the files. Then I load that to the browser. So I’ll go to my folder/class 2/layout. That’s what I have. [On screen.]
It’s not exactly what we were looking for yet. There’s something on the page that looks like a squashed box. It doesn’t have depth or height yet.
My first task is creating the outer box and give it shape. Let’s not worry about the inner boxes yet. To give the outer box a height of 500 pixels or something like that, I will give it a height property in the CSS. There’s a property in CSS that sets the height of any box on the page.
How do I give a height property to just the outer div?
Student: Give it an ID.
Professor: Exactly. So to individually address this box, I need to give it an ID. There are other ways to do this but giving it an ID is the simplest way. So div, space, id equals “container.” Container is a common term for this. Get into the habit of calling the outermost div of your set of divs a container. You’ll see this term a lot. It’s how people learn to do these things.
The outer div has an ID container. Now I can apply specific styles. So div#container selects only the outer div. Let’s give it a height of 800 pixels. It’s big but not so big it goes off the screen.
I’ll re-upload all that stuff to the server. I’ll refresh the browser. It did go off the screen. I’ll make it smaller because I zoom in for this screen. You can make yours bigger because you’re not zoomed in on your computer screens.
So we have a box. There is a box with a left edge, you just can’t see it. See the box? There’s a box around the space. The other divs are still squished because we haven’t given them height. So the big red line up at top is the four other divs that are squashed together.
Let’s give height to those other four divs as well as width. We can do the same thing for the four divs as we did with the container div. So inside my HTML, what kind of CSS selector do I use to apply styles to the four smaller divs?
Student: Divdiv?
Professor: I’d say div#container div. So that means any div within the ID of div container. I’ll give a height of 80 pixels. We’ll make them square. So they have 80 pixels width and height.
You can see we’re using the CSS tools we’ve learned to create this layout. The layout isn’t working yet, but this is how we’re addressing the divs. Now I’ll upload this to the server again.
Now we can see four squares. They’re not laid out correctly, but they’re inside the main square. The next thing we want to work on is getting the squares to line up side by side. That’s the whole point of this exercise. We want to make something like what’s on the screen. There are two squares side be side on top of two others.
We don’t have the boxes in the right layout. So first we need to line them up next to each other. I do that by adding a property inside of the div#container div selector with float left. We haven’t told them to be on top of each other. That’s the default setting of the browser. That’s an important thing to bear in mind.
When I specify “float left,” I’m telling the browser to apply a style to these divs inside the container. I want them to go as far left as possible. This is tricky with layout. It’s an awkward way of saying to line them up side by side. So what happens to the top left div is it will go as far left as it can within the containing div. So it stays where it already is. The next div will wrap around on the next line and line up next to the top left one. The third box does the same thing. And the fourth box does the same thing.
Let’s see it happen. Then we’ll play around with it. The float left command tells it to go as far left as possible but it stays in the same row. So the boxes look like that. [On screen.] There’s no other way to put it. It doesn’t make a lot of sense, but it’s the way that it works. Once you get the hang of that, you go with it. Float left stacks things horizontally.
Now I can tell to not stack the boxes up side by side after the second box. That’s even more confusing. There are a couple ways to do it.
I’ll put another div in between the second and third div. It will be invisible. I’ll say class=”clear.” That applies to the new third div. Now it’s an empty div with nothing in it. So it is a div inside the container because of how we positioned it. So it will have the style we set for all divs in the container. But we don’t want that for this particular div. We’re going to override it.
We want the third div to be totally invisible. So we say to clear both. I’ll leave in visible at first. But I’m adding another style selector that says for all divs with class “clear,” give it the property “clear both.” I want to give it a height of zero pixels and a width of zero pixels. I don’t want this div to really show up on the page. I’ll show it to you with a height and width so you see where it sits. But we’ll change it back to zero.
I’ll start this with 10 pixels.
Normally I wouldn’t do that. It’s just for illustrative purposes. Let’s see what happens. [On screen.]
One moment.
I want to give it a background color to make it stick out. Yellow. Just to show you where the div is sitting. So that’s the div we created. I’m not sure why it’s so big. Let me debug this.
Should be 10 high and 10 wide. So to overwrite this I’ll give it a class to the other divs. Class = box let’s say.
So the boxy ones have the class box and the invisible one has class clear to overwrite the problem. So only divs with class box give height and width of 80. Only divs with class clear will have the smaller height and width and background color applied.
Student: Can I see that HTML.
Professor: Sure.
So this is the odd one out. [On screen.] So let’s try that. Again if you want the copy of the HTML you can get it from the directory. Ok. That’s more like it. What we have — you see the yellow box. That’ll disappear when I make it visible. The yellow box divides it in two rows. This has magically pushed the other two down further on the page. It’s because I set the clear both property in the CSS for the div it has the clear property set to both. The div will make sure there’s nothing on the right or left of it. It positions itself from where it would normally sit. Since this has class both it will push itself down the page as far as it has to to have nothing on the right or left. Let me show you what it looks like without the clear both set.
Not what I expected. You see it’s not doing what I want it to. I know why actually. One moment. If I put a float left property there it makes it like all the other divs, lined up side by side. When you attach the “clear.” If I said “clear left” it makes the div drop down until there’s nothing on the left. It drops here and slides left. Makes sense? This is confusing I’m sure
Student: I get why it keeps things from both sides but not the left
Professor: Any text you write is sitting on the left. It’s a default behavior of the browser. It starts left by default. If there’s nothing to the left it’ll shift to the left.
Student: Because of the hierarchy of the code nothing can be on the side of the yellow square and pushes the other two down.
Professor: Exactly. I changed the clear both to clear left. It’ll drop down until there’s nothing to the left and the browser will by default display on the left. I haven’t told it to not put anything on the right. Let me show you that.
Maybe not …
[Class laughing.]
That’s fine. That wasn’t critical to my point. I won’t play with it. Point is it has nothing to the left which is why it’s in this position. I also told it not to put anything on the right so it’ll force anything to be further down. It’s a way to draw a big marker on the page to say nothing is to the right or left of this so everything shifts below. The final trick in the end is to make it disappear taking out any height or width. There’s nothing to display the background color on. So let’s take it out.
It’s gone.
Actually there’s still a border I’ll get rid of. That one pixel is sitting here so that’s what the dot is here. Let’s override any borders. [On screen.] Say borders and pixels and it’ll override any style sheets set anywhere else. Now you would not know that there’s an invisible div setting the rows. That’s how it works.
So the important thing to remember which is — if I put a paragraph after this last box — I’ll take it out in a moment I just want to show you something.
The paragraph will normally not sit side by side. It’s sit below. In the last example [On screen.] this. Remember we made all of these and they were sitting one on another. That’s the default. But somehow for some reason this paragraph sits on the right of the last box. That’s not the default behavior of the browser. That’s only because of the float left. Take my word for it. When you have boxes that are floating you put a clear invisible box after every row. After the first row you have the box and after the second you have that invisible box. After every row make an invisible box which will make it behave appropriately. The invisible box will push everything down. That’s the rule of layout when you have boxes with float properties remember after the end of the row. In this case after 2 boxes you put an invisible box. If you abide by the rule you won’t have to think about it again. If you forget the clear thing at the end you’ll see the content after the box will sit someplace else.
Student: The box and the paragraph?
Professor: Every paragraph has padding by default. In CSS we can say to remove that. We can change that.
That’s a good question. I should show that. First let me change the size of the box so it looks more like the diagram. We have the basic parts in place. I just want to change the sizes which will move us into your question.
I’ll make it 200 not 400.
The sizing comes down to trial and error a bit. That’s 200 high that looks good. Let’s make …. I want to keep it compact. I’ll give the width 200 also. Yours could be bigger.
So we’re almost there now. Now I add space on the top and left to push the inside divs to the center. This is too far up and left according to the diagram. We want equal space on all sides. That’s called padding. There’s two spacing properties. One is padding. The space inside anything. Spacing the next. The space between the outer and inner box could be padding. So let me show you that.
On the container I give it padding of 5 pixels.
Student: Sorry. Excuse me.
Professor: What’s up. Ok. We can do it now
We’ll take a 10 minute break. Ellen wants to talk to you.
Speaker: I have receipts for anyone from yesterday. Anyone having checks for today we can have those now.
You’re the interpreters. We’re making sure that you’re registered with our office. They got in touch with us saying you’d be here.
Student: For what?
Speaker: the 100 dollar activity fee.
Professor: Don’t use the default program.
Professor: Where were we? So we’ll finish up the layout and positioning of these boxes. The example code is basically done. We’ll just tweak the padding, which is the spacing between the inner and outer boxes.
We’ll just play with the numbers. Let’s change the padding to 10 pixels. We could count the exact pixels with math, but we’ll just use our eyes right now. That didn’t work, so we’ll count the pixels.
We set the container to have a height of 200 and width of 200. So this outer div is a height and width of 200 pixels. I’ll remove the paragraph because we don’t need that anymore. So we have a 200×200 box. Inside of that box, how much spacing do we want around the four boxes? Let’s say 10 pixels. That means the inner boxes need to be 200 menus 10 on each side. So that’s 180. So 180 divided by 2 is 90. So each box needs to be 90 pixels wide. But we have a border applied which adds a pixel to all of our numbers on each side. So I’ll show you what happens when we set everything to 90.
When we set the boxes to 90, with a 10-pixel padding around each side, it looks like this, which is not what’s expected. [On screen.] Let’s look at the numbers again.
We have 200×200 for the outer div. The padding on all sides is 10 pixels. My math isn’t working. 200 minus 10 on each side is 180. 180 divided by 2 is 90. Why isn’t that working? Let me play with it for a second. My math isn’t working. Can anyone else see the problem? I’ll play with the heights by eye so we can finish this example.
So I was hoping that would happen earlier. This is what happens when the widths inside your container box are greater than the space available. It causes the inner divs to spill out one on top of the other. This happens frequently with CSS. You’ll wonder why these bugs are happening. It’s because your widths of the inner boxes are too big for the containing space.
So let’s change this back to 95. It should really be 90 or less. I don’t know why that’s not working. So 95 looks ok.
Student: 97 to 98 looks the closest to even.
Professor: Ok, we’ll say 97. You can do this by eye or do the math. My math is not working for some reason. So that looks right. [On screen.] In our diagram we have spacing between the boxes. We haven’t accounted for that yet. So let’s add that. That’s tricky. I’ll show you why.
If I put spacing around each box, that’s called a margin. So I want to differentiate between padding, which is the space separating a box from everything inside of it. So if we put padding around the outside box, that pushes the inside boxes away from the edge. So a padding of 10 pixels of the container box, pushes all sides in 10 pixels.
Margins are the opposite. Margins are the space outside of a box. Padding points inward of a box. Margins point outward of a box. So I want margins separating the outside edges of these inner boxes. I want to push things away from the boxes, so that’s margin.
I want to put a margin of 10 pixels. We know that will make the map of this stuff too big. So it’ll spill out of the box again. Let’s see if it happens. [On screen.] We have a problem. The spacing of these two added together is too big for the container, so it all falls out. So we have to subtract from the box width. So we subtract 4 times 10 pixels which is 40. So we separate 20 pixels from each box. Just take my word for it. So 77 would be the new width and height. This SHOULD work. [On screen.]
I’ll reiterate what’s happening here. We have an outer box of 200×200 with a 10-pixel padding inside of it. We have four 77-pixel boxes with 10-pixel margins on each side of each box. So the space between the top two boxes is 20 pixels. It’s 10 pixels from the left box and 10 pixels from the right box. It’s the same as the bottom two boxes.
So there’s 10 pixel padding from the outer box plus the 10 pixel margin from the inner box. So this can make you crazy doing all the math. I tried to do it by eye as much as possible. When I encounter a problem, I do the math to evaluate what’s wrong. But you can usually get by using your eye.
Student: The lines add one pixel?
Professor: Yes, the border is a one-pixel line. So that adds to the width of the box. So there’s six more pixels added to the whole amount. We can write a formula for that, but you can also just do it by eye.
We’re done with this example. It looks pretty much what we had on my blog. The technique is sound. That’s how you do rows and columns. If I wanted a two-column page with two rows of content, I would make this bigger and taller for the whole page. I would make the borders invisible and then place the content inside the boxes.
Student: How wide can you make it?
Professor: That’s a good question. There’s no clear answer to that. One thing you’ll commonly see is a container with a width of a big amount. Let’s say it’s 900 pixels. I won’t give this container a height. I’ll now go into how you most commonly use this technique in a real situation. Now we’ll make this the real size of a page.
I’ll save a copy of this before I start message with it. I’ll leave it alone and make a new example file. I’ll copy and paste the code to create a new file and put it in a new page. I’ll call the new page in a new folder in the Class 2 folder. I’ll call the folder “big layout.”
This is index.html. I’ll make the CSS file and save in that folder.
And make sure I put it in the big layout folder in a subfolder called styles. I’ll drill these concepts in of managing your files. This is main.css. You have that in your folder now. Drag it over.
And load in the browser. I did change something before I saved …. so I’ll make a normal size page using the same technique. The width is 900 pixels which is a normal width large format page. There aren’t standards but 900 pixels a wide but still reasonable sized page. You see in the container I’ll remove the height like I said I would. I generally will not put a height on a container. On a real page you don’t know what text you’ll have or the height. It’ll vary.
Student: Maybe it’s too early for this question. Isn’t the width variable like the height?
Professor: No. Not generally. There are a few different designs that you see on the web. It’s not common to see
Student: Floating?
Professor: Let’s look at a site. You do see it. But let’s see what’s available on the web. Any website.
Student: NY Times.
Professor: It’s important to see how other people do it. This is the Times site. I don’t know the layout but let’s find out. That’s the width. See it’s the same but centered. You can’t see easily can you? Um … that’ not working. Let’s go to a different smaller page for the projector. They use a fixed width centered lay out. The width isn’t changing. You see the content stays the same. It’s probably 900 pixels.
Student: How do you know what browser resolution your viewer is having?
Professor: You have to know your viewer. If you’re expecting people in 3rd world countries to have access to your site you don’t want a lot of graphics. So you design your site with that in mind. In America people have high res monitors. You can go to a 1000 pixels and still be ok. If you design for people with old monitors you want to keep it small. The are no real standards for that. Phone ringing …..
Adjust the width accordingly.
[Phone ringing]
[Class laughing.]
Hope it’s not a credit report. [Joke/joking.]
A really small monitor used 15 years ago was 640 pixels maximum. That’s half the size of this page. You’ll see websites developed in the mid 90′s with that. Let’s have an example?
I just saw one the other day I can’t remember. The UN is notoriously backwards.
Student: They just redesigned it
Professor: Let’s try that one. They have a width. I’m stretching this to my monitor here. This is set to 1500 pixels which is too big. That’s not too bad. They’ve changed the design. This is fixed width maybe 800 pixels wide. It’s staying the same even though I’m dragging it. It’s a centered fixed width. That’s what I’ll teach for this course. You may want a liquid lay out meaning it stretches. You’ll learn that easier after you learn the fixed width.
Let’ focus on the fixed width first then we’ll look at other layouts toward the end of the course.
We were centering the layout. We’ll make it smaller than 900. Let’s make it 700 pixels wide. So I’ll change that for the projector quality. I’ll remove the heading. That actually pushes down the boxes. We want this to take up the whole page now. This is a small change. So now we want this centered. That’s the next step. That’s actually a little tricky. It sounds simple ….
What you’ll do to center something is give the container div a margin setting. Remember the margin is the OUTSIDE spacing. 0 space auto So this is the setting we changed. What this means is this is a short hand property setting. I set all four sides of the margins. The margins for the top, left, right and bottom are one setting. When I say 2 values I say for the top and bottom apply zero and the left and right automatic. It applies as big of a margin as it can to the margin. That’ll give zero margins at the top and bottom and equal margins on left and right. It’ll move so the right and left margins are the same.
That’s how you center. You apply equal margins on both sides. This technique is common. It’s not the most intuitive. You wouldn’t think to center something you apply margins but that’s the way you do it. This will apply for browsers but Internet explorer doesn’t follow that. So you have to do it differently for Internet Explorer. Normally it’ll tell all texts to be centered. INternet explorer also applies that to boxes. So this actually tells Internet Explorer to center the box. I’ll leave a note in there for that.
“Center container div in IE.” That’s a comment in CSS. That’s just for you it won’t effect the code.
Here [On screen.] you leave the comment “center container in FireFox ” Comment just indicating what the two lines do.
So we have the centered relatively wide. Now we want to make boxes inside larger. So I’ll do that by eye and adjust them. So the box will have let’s say …. this is 700 … let’s try math 700 pixels wide divided by minus 10 pixel padding. That’s 700 [thinking] 680 pixels minus 4 times 10 is 640 minus 4 is …. [thinking] 636 divided by 2. What’s that. 636 divided by 2. 318. Let’s try that.
Probably won’t work.
Close. Not right. See the spacing isn’t the same. The one on the right is bigger. But I’ll write the formula out for prosperity. It’s the width of container minus the padding on the container minus [On screen.] the margin on inner boxes minus the order on the inner boxes. That’s the formula for the width of the box. So width of inner boxes = container width minus padding [On screen.]
So in our case the width equals 700 (width of container) minus the padding on the container which is two times. So it’s the padding on each side of the container. So it’s actually 2 times the padding. So 700 – 2 times 10. I’ll post this later. 2 times the margin … on left and right of container.
And minus the border on the left and right. So we have a 1 pixel border. That’s why my math is off. We have 1,2,3,4 pixels. There’s 4 borders on the INNER boxes. That equals … 700 – 20 -20 -4 = 656. That’s the width of the inner area. Now divided that by 2. That’s 328. Is that right?
Let’s try that.
You were close! I think you were right but I missed some calculations.
There it is. I’ll post that formula. I do it by eye not by calculation. It gets confusing to me. But when in a crunch you can do that. Notice how the container div stretched. It follows the outline of the boxes. That’s an important technique. Remember not to set the height for your container. Then you would be limiting the size of your site and you’ll have design issues pop up later. Any questions?
So what we’re doing is working on layout of the pages. This is simple with two rows, two columns. This can be applied to many pages. You can have one big box and use this technique. I’ll do that now and use the same tools. The floating property and clear property of CSS working in tandem to create what we want. I’ll open up Visio. I’ll show you how I would approach different problems of different layouts. I’ll draw some boxes and then we’ll try to code them. Anyone have a layout they prefer? A certain number of columns or rows?
Ok
Student: Variation like in the first line 2 columns and the second line 3-4 columns
Professor: Sure. Ok. So we don’t have to make it perfect. Just keep it simple. Don’t worry about exact spacing.
So let’s say 3.
So let’s not worry about the padding. We have two rows and I’ll throw one more in here for fun which is one big long column.
Just in case you ever find a layout like this, we’ll figure out how to do it. How would you approach this problem? How would you think about this in terms of code? That’s what this is all about. Look at a diagram and decide how to do it in code.
Student: You need 7 boxes.
Professor: Right. There’s one container, outer box. Every site you have has a div that’s the ID container. That’s a given. Then you have seven boxes inside.
Student: There are 6 inside.
Professor: Right. And they’re divided into three rows. So let’s do the HTML. You can do the HTML without worrying about how it looks.
I’ll make a new folder. With every example, I’ll make a new folder for it. I’ll copy and paste the code from the last example. What do we call this example? Think of a term for this layout.
Student: 3 rows.
Professor: Ok. Three_row_layout will be the name of the file. We need a style sheet in a subfolder called styles. So we make a new file, save it as. Make a new folder. Inside the styles folder, save it as main.css. So we have our two necessary files.
I’ve copied and pasted the code from the last example. That’s our starting point of the basic HTML necessary for a page. Now there are 6 boxes inside. So we’ll add two boxes to the existing code. We have 6 boxes inside one big box.
Student: You need to clear boxes.
Professor: That’s a good point. Let’s look. Where do the clears go?
Student: In between the two rows.
Student: After the 2nd one and after the 5th one.
Professor: Every row needs a clear so even after the last row, you need a clear. That’s something very important to remember. It’s not always necessary, but it’s better to get in the habit. It doesn’t get in your way and you’ll avoid later problems if you put a clear after every row.
We need 3 clears. Is that clear to everyone? That’s a critical part of layout is where to put the clears. Anytime you have a new row, after the end of the last row, put a clear. At the end of the second box of the top row, put a clear. It shows up below the row, but it’s like an invisible last column of every row.
So we have the three clears after each row. I messed up the code. [On screen.] So that’s the starting point. That’s our HTML code to start with. It’s now up to the style sheet to put the boxes in the right size. We have the right boxes in the right positions. Now it’s a CSS issue of making them the right shape. Let’s figure that out.
In our CSS, why recreate those from scratch? We’ll copy them from the last example. We’ll have to change them, but we have a starting point from the last example. We have center aligning from the last example. We have the border applied to every div. That’s for us to debug and test our code. We want to see the borders. We have a container that’s 700 width and 10 padding.
We have divs inside the container. And we have the clear. This makes things invisible. You’ll have this for everything.
Let’s upload those to the server so we know where we’re starting. In the browser I’ll load the folder three_row_layout. It’s just like the last sample. Now we adjust it so the second row has three boxes instead of two boxes. Right now we have two boxes on the second row. But the first two boxes at the top are ok.
Let’s think about that. How do I think about that? I want to get three boxes in the second row. Right now they’re all on top of each other. I have to reduce the width.
Student: Have an ID for the first two and an ID for the next three, etc.
Professor: I would make a class for each row. But it’s the same idea. For the first row, we used “box” as generic, I’ll change that to “row1_box.” The second row will be “row2_box.” And the third row will be “row3_box” even though there’s just one box.
Now we’ll apply different styles to different rows. For row1_box, I’ll leave it. So for the CSS, I’ll change the name to row1_box. I’ll give it a smaller height so we can see it better on the screen.
For row2_box, I’ll copy and paste the first box class and change some of the settings. You still have to float it left. That happens with all the boxes. I’ll keep the height the same. But now we have three boxes side by side, so the width has to change. What’s the formula for that? We have 700 pixels width in the container minus 10 pixels padding. 700 minus 10 pixels on each side is 680 minus 10 pixels times 6 is 60 pixels. 680 minus 60 is 620. And then subtract that from six borders. So that’s 614. So 614 should be the width of all of these three boxes combined. Divide that by three is 204.6. Let’s just say 204. You can’t do “point” sizes.
We’ll do the same calculation for row 3. That will have 700 minus —
Student: 778.
Professor: I’ll go through it so everyone sees it. 700 minus 20 pixels for the padding on both sides. That’s 680. 680 minus the margin of the inner box which is 20 pixels. So that’s 660. And then 660 minus 2. That’s 678.
So the width for row 3 is 678. Let’s upload that.
Student: What’s the height?
Professor: I made the height shorter to fit on the screen better. I set it to 128. But this is just for example purposes so you can see it on the screen. Ideally, you wouldn’t set the height. The content just makes the height whatever it needs to be.
We must of made some mistake here. But it’s not too far off. We’ll do the math again. 700 pixels wide. We have minus 10 on each side for the padding. That’s 680. 680 minus 6*10 which is 620. 620 minus 6 is 614. 614 divided by 3 is what we did last time?
Student: 211.
Professor: I don’t know how we got it so wrong last time. There it is. [On screen.] That’s the layout. It wasn’t that much different from our other layout. It’s just different calculations but the same ideas. Do the floating to get the boxes side by side. You have to have the clear div that sits in the code at each end of the row. We know that slides into the spot between the rows that’s invisible.
If we resize the window, our layout stays centered. That’s what most websites do. There are other kinds of layout techniques that behave differently. It could stretch and shrink, but we’ll get to that later.
Student: Is that recent that the web browsers centered things liquidly like that?
Professor: The technology wasn’t there to do it until the last five years, I’d say. So the CSS technology wasn’t as sophisticated as it is today. It didn’t even exist back in early 2000. CSS wasn’t available in all the browsers. So it’s just recently that this is possible. Screens and resolutions have gotten bigger.
Student: I was having trouble centering my things on sites. They said I needed Flash to do that.
Professor: There’s a lot of outdated or bad advice on websites. You have to pick and choose which sites you trust. That’s a huge problem for web builders. It’s difficult to get reliable information. You maybe needed Flash a while ago, but not anymore.
This is the standard way of making a layout. I want to do one more variation before you’re bored to death. We’ll do one column that takes up two rows’ worth of space. So we’ll make a new diagram. We’ll have a different layout which is commonly seen. So you have kind of unequal column heights. It’s the same concept and techniques. We just have to make sure everything’s lined up the right way.
How do you approach this problem? Anyone?
Student: Do a first element ID instead of a class for the long one.
Professor: We would probably have to have an ID. There’s still more stuff to do.
Student: Six boxes all together.
Professor: So one big container with five inner boxes. That’s our first step going through the HTML. We’ll make a new file. We’ll save it in a new folder called “tall_column_layout.” I’ll make a new folder called that. This file will be called index.html, of course. And then I have to make a copy of the style sheet and save that in a subfolder called styles. This is the practice you go through to make a new example.
There we have the same code put into a new folder. [On screen.] Now we’ll adjust the code with the right number of boxes and meaningful classes and IDs attached. So we have 6 boxes total. There’s a container and 5 inner boxes. Let’s make sure we have that in our code. I’ll remove the clear ones for now. So we have 5 boxes.
We’ll remove the class names. We’ll give them different class names in this example. We have the container with 5 inner generic boxes.
So you advised to give an ID to the big one. That’s reasonable. So that’s the first box starting from the top left. That’s how I think about it. The first one from top left is the big long box. We’ll call that “tall_box.” Then we continue to the right. So the top right box we’ll call “top_box.”
Student: Wide_box.
Professor: Do you want to give two classes or two IDs for the two wide boxes?
Student: Class.
Professor: Ok. You can do either one. So we’ll call it “wide_box” as a class and apply it to the top right and the bottom right boxes because they have the same width. What do you call the two middle boxes?
Student: “Middle_box.”
Professor: Ok.
Professor: We have our classes set up. Now we need to go to CSS and have style sheets. We’ll modify them to this design. Let’s get the style sheets named the right thing. The first is the Call box. That’s an ID so we change that to a # not a dot. This is going to apply to width. That’s a class we put on there. And the last one is “little box” which is also a class. Did we make that tall one an ID?
Student: Class
Professor: Let’s change that to class. It doesn’t matter so much. But we know there’s only one call tall box.
Let’s look. Tall, little, little, wide. Ok. Let’s now try to get the widths worked out.
Again, this is arbitrary for the tall. Total is 700. So it’ll take a third?
Student: Two. The one on the left is the same as the two in the middle
Professor: True. That sounds reasonable.
So that’s a nice. So this is 211 and this is 211. So make that 211. And the little boxes are also 211. The height we normally don’t give them but for now we’ll make it 400 pixels. That’s for the tall box. The wide box what’s the width for that? 2 times the small boxes plus the padding we’re missing. That’s 422 plus 40 I think? Plus 20.
Student: 111.
Professor: It’s actually bigger. The wide is bigger. 422
Student: Since we’re making the tall 400 shouldn’t that be the base since it’s all even
Professor: This is the width.
Student: I though you said height.
Professor: The width. The width of this is 422 plus the margins which is 20. So that’s 442. That’s it. Plus the 2 pixels. So that’s 444.
Let’s try this before we get more lost. It’s good to work incrementally. It’s easy to get something wrong. So we’re doing this little by little.
Upload to server and load in browser. That’s not bad. That’s actually good right? Close to what we wanted. This is a good problem. This is the container div. Anyone know why that’s there? There’s something we forgot to do.
Student: Clear boxes.
Professor: Right. This’ll happen if you’re missing the clear divs. This doesn’t make sense why this is there for no reason. Because the boxes are floating they’re set to left and taken out of context of how they are normally displayed. So the browser sees almost nothing although we know the boxes are in the container div. The browser treats it like nothing’s there unless we push it down. Take my word for it you HAVE to use float and clear. So insert a clear div at the bottom.
Upload that to the server. If you remember that rule you’ll be fine. If you try to figure out why you’ll get lost. That’s close [On screen.] So one thing to mention is that we didn’t put clear divs after each row. We didn’t do that. It’s fine to NOT do that. As long as the height and width are the right size it’ll force it. There’s no room here because the container is too narrow so it’ll automatically sit here. If we put a div there (clear) it’s not a problem. But it’s necessary at the end to make the container wrap around the boxes the right way.
That’s pretty much it.
This needs another 25 pixels or something.
Student: 430
Professor: 430? There we go. So that’s … that’s ok. That’s really the trick for every layout. You can modify this to fit different situations. But bear this in mind and you can master layout on the web. I think it’s time for lunch. Perfect timing.
Student: I’m not seeing on your server tall column layout.
Professor: You’re in SCP? Refresh
Student: I did.
Professor: Click the refresh button.
If you can’t find a file it’s because it hasn’t listed. If I create a file since the last time you loaded it it won’t show up. Questions? We’ll reconvene at 1:30.
[Break]
Professor: Is there someone sitting in the corner?
Student: Yeah.
Professor: I’ll wait a few minutes and then we’ll start.
Student: When you said that you can hack the code that appears on the client machine, you can do that with the Firebug, right?
Professor: Yes, you can use Firebug and other tools. You can bypass restrictions. If it’s client-side, use Firebug.
Student: So is that why they set up security measures for certain code?
Professor: If you keep it on the server side, it’s less likely to be hacked into. It’s much more difficult to hack into the server. So if you have a secure site, you want strong security on the server side.
Student: So I can change things around with Firebug?
Professor: Yes.
Student: But that only affects my appearance?
Professor: Yes. I’ll get started. What we’ll do every class will be the same. We’ll lecture in the morning and then you’ll work on the content for the rest of the day.
So we’re taking any of the layouts we’ve seen. Let me pull one up. We’ll figure out how to code it. So it’s like what we did here. But we’ll choose one that’s more difficult.
I recommend that most of you have something in your blog accounts. I’ll pull one up. [On screen.] I’ll pull up a wireframe from yesterday. This is Jeremy’s. For example, you can take this diagram you made and convert it into code. I can’t fit this on the screen.
What we’ve learned so far, you know how to approach this problem. Look at this diagram and start to think about how many boxes you have. How many divs do you need to make? There’s one container div around the whole thing. I would say there’s one div at the top with maybe an image tag inside of it as well as a heading tag.
I would make three column divs. One on the left, one in the middle, and one on the right that represents the high level of columns you have. Inside each column, I would put a bunch of divs in the one column. So we take the general idea of earlier and start to get more granular by filling in the boxes with content of a webpage. So that makes it a little more complicated, but it’s the same technique.
So that’s the assignment. If you created a diagram you think you can approach in code, use your own diagram from the wireframes yesterday. If you feel like your diagram isn’t finished or good enough or too difficult, use the Google Reader to find someone else’s diagram and code that.
This will take several hours to actually do, but this a good start for the rest of the day. Any questions? That’s what we’ll do for the rest of the day. Flag me down if you need assistance.
Professor: A word of advice for the assignment. Don’t start putting in the details right away. Lay out the big boxes first. Don’t worry about the little details yet. Just get the structure right first. In this case, it would be the container div, the top div, the left column div, the middle column div, and the right column div. Do that first. Get that looking sharp. Then you can address the details of the little divs inside the bigger divs, etc. Don’t get caught up in details at first.
Professor: Post your updates to your blogs. Just the link.
Make sure you back up your code on the server so you don’t leave here today without back ups.
That’s this one? Ok. Uh. So these two? So I would give them float left. The same thing you did with these two.
[End of class.] It’s 5 PM. So we have to leave the room. Make sure you save everything.