Web Development
Wednesday, July 15, 2009

I’ll start in 3 mints. If you have any questions you should ask now. Question about the assignment? The ones I saw looked great.

On the blog if you see it there’s an updated post. It’s for the topics today. We’ll go through the advanced Css. There are files up there we’ll go over in detail. Familiarize yourself and we’ll start in 3 minutes.

[Students working.]

I’ll call out attendance so I can learn your names.

Kathryn. Shy? Heidi. Alma. Scott. Jeremy. Mark. Jenna. James. Otis. David. Luca? Carrie Ann. Samantha.

I’ll start. I think there’s one person missing. So I’ll go over all the material from yesterday. And all the CSS layouts. I’ll do a mock up and how you lay out a page. Then will go into the advanced topics on the board. So I step back.

Some are having problems with file management. So I’ll go through it in a rudimentary way.

So first thing you do with web projects is you open up the web browser, obviously, the text editor which is NotePad++ for us. That’s not installed then you open up the WinSCP. We’ve done that before. Just Google NotePad++. Then there’s the download tab up at the top. Download executable. Then click the installer EXE. Then that saves it and you must run it to install. So you should know how to do this. Let me know if you don’t.

I’ll go through the set up of the file systems we use. Where do you want to store the files? On the desktop, or flash drive, etc. You lose track of the files and that’s an issue with everyone. But you need to know where you store the files.

So I choose a place on the hard drive where you can make and save a file. I’ll do this in My Documents. Create a new folder with your name. Or that’s what I’ll do.

Each time you make a file or save a new file it goes in that file. It’s critical for you to know where you put your files. Go into that folder then make a sub folder for every project.

First is called Layout Examples. This is just the name I choose. But you can use what you want. All the files in this example are in THIS folder. Click to get in there. Then I put the files from Text Editor in there.

I make a file index.html. This is Save as … now I must find that folder. Here it’s in My DOcuments. Then I save as, once in the project folder. I save it as index.html.

I’ll start putting HTML code in there. Then I just copy paste from my blog or wherever, since I need the basic structure.

I go to the blog. I scroll to find the simple page I made. It’s the outline of the HTML page. That is what I want. Copy it. Then I paste it into the HTML file.

Save.

Now I have an HTML file that’s a good starting point for all my other work. This file requires the CSS, and we’ll do all design issues I use a tag to indicate this is a style sheet. There’s the link tag. [On screen.]

I put the style sheet file into a folder named Main.css. I know these are all the same.

This links to the subfolder styles. You see in the explorer window I must court a sub folder called styles with a folder called Main.css.

So now file. New folder. Make a folder “styles” and that’s where I save the CSS files. So I create now Main.css.

Student: Half way down where does it apply?

Professor: I didn’t bring that up but it must be in the head. You shouldn’t put it in the body since that’s not good HTML. But the things you do incorrectly sometimes work. The browsers are made to accommodate that.

This is supposed to be in the head is since the way the browser processes the code is it starts from the top to bottom. It looks at the head first before the body so with the style sheet in the head you know the browser will load all the design first. But if it’s in the body it may look jarred. The head loads first in the browser memory. Understand the head loads first. That’s the same with the JavaScript files. We want the behaviors to load appropriately before the body loads.

So we’ll create Main.css. That must be in. The styles folder. And that must be in the same file with the HTML. So in the project folder of layout sample 2 I just need to put the blank CSS file. Text editor, Create new file. Save as. Inside the styles folder. That’s where the code will be — call it Main.css.

That’s the set up of for the project. There’s CSS file and the HTML file and that’s it. That’s the basic set up.

Now I’ll repeat the lay out process from yesterday. Here’s a layout.

Open VISIO. I encourage you to NOT type everything out that I’m typing unless you are very fast.

In here, in visio I start with a general basic diagram. Just for the generic shapes. Drag the rectangle for the page. This is simple. It won’t take long. I’ll make a standard website layout. Here’s the header. I won’t do detail in that. I’ll make a left navigation section. There.

Then I make the footer. Then the content section. That’s for the meain content. Some call this the “C Clam.” [sp?] But that’s not the main word for it. But it’s similar to a “C” shape. This is a template. You can keep the header and footer the same but change what’s in the middle. It’s simple.

Now I’ll code this up.

So I think — I’m working at an agency and I must code this — the first thing I think about are how many Dibs I need. There’s the container Dib. It surrounds everything. Even if you don’t see the box you need boxes around everything.

Second I have the clear header so I need a box for that. Then for the footer and contents too.

Each box translates to “Div bag.” I need the container and the sub-divs.

Student: Can you do a container in a container.

Professor: Sure. You can name it whatever you want too. You’ll see it’s common with all developers. There are conventions you can use but you all look at each other’s code. When you see the container and it’s called container and you steal it you just use the same name.

Now to NotePad++.

I’m going to make a div and call it container. The div is a tag name. ID is an attribute. This is a special attribute I can use to create a style sheet. That’s why I give it an ID. For the DIV with the ID container give it this much padding and etc.

Every div has to close if it opens. Every tag has to close if it opens.

There I have the container. Inside that container has four sub-divs. So let’s make four sub-divs. ID equals header. I’m going to close it for now.

div ID equals left.

div ID equals content.

div ID equals footer.

It helps sometimes, while working on this simple layout, to put the word header inside the header, left inside left, content inside content and footer inside footer.

I will see where the different parts are. I will remove that once I’m done laying out the site.

Go to the style sheet, main.css. This is code you will be recreating for every page you make. It has a box for the container. Just lay out the boxes first for the HTML. You don’t even have to give them the IDs first. Just put divs on the page. We know what they are going to be, approximately.

I’m going to upload this to the server. Let me connect. If you remember you should all have this memorized by now. [server address deleted for security]. Usurae name is [username deleted for security]. Password is [password deleted for security]

Now we are going to get to the WinSCP screen. It’s the first screen we get when we log into the server. I’m going to go through the file system management again. We have to figure out where the files are on our client and our server so we can drag and drop them.

Male Student: I think I went up a few levels.

Teacher: That’s what I’m talking about.

This is not the most intuitive screen. We have to get used to the browser again. When you are lost the easiest thing to do is click either for the client directory or server directory. It shows you the hierarchy.

I remember that I put my files in the My Documents folder, in a sub-document in there. Your files are probably in a D drive.

I’m going to go to my files. This is just on the client side for now. I’m going to double click to get into the folder I created. I’m going to stay here at the level where I can see the folder I made for this project.

I will do the same thing on the server. Click where I am on the server. When you get lost you can always hit the back button, which will turn blue if you navigate away from where you logged in.

To get into where the files live on the web I have to double click to get into [server address deleted for security]. I double click into my folder. Then I find this project in the folder I created. In my case it’s in class 3 and it will live there, it’s not there yet.

I’m now going to drag that whole folder from the client to the server. Now the two will be in sync. Both folders have the same contents.

I drag and drop it into the white space. If you drag and drop on another folder it will put it in that folder, you don’t want that.

Drop into the white space. It will ask you if you really want to copy. Yes you do.

Another problem we will all have at some point, is where do you go in the web browser to see this file? To test it. The first thing that might help is at the top in the blue header section you will see the path. The file structure for where you are on the server. You will see [server address deleted for security]/your name/ any other folder. That’s the starting point to look for the folder on the web browser.

I’m going to go there. [sever address deleted for security]/yourname/class3. I changed the server settings last night so you can see a list of all the files in any folder. I prevented that before because it makes it accessible to hackers. This shows you the inner structure.

I got this URL by looking in WinSCP. Ignoring the first few things in the blue section, but looking after it says [server address deleted for security] and whatever subfolders are after that.

One mistake you may make is double clicking on an HTML in this window. It doesn’t work that way. It will download a copy of the file to your personal computer and open that file. It’s loading onto your local system. Not what we want to do.

You always have to look at what the path is. Then load that yourself, manually, into the browser.

Male Student: When we come in everything has been erased but it’s on the folder? How can I get the code we put in?

Teacher: I have, on the server site, a bunch of stuff for class three that I don’t have the on the client side. I would highlight everything, or do it one at a time, and drag them from the right to the left. I’m downloading from the server to the client. That makes a local copy of all of those files. Then I can edit them from NotePad++.

You should never double click any files in this program. Just don’t do it. It seems like you should be able to but it doesn’t work that way.

We can change the settings and make that ok, but since it will be wiped out everyday we won’t bother.

If I want to open a text file I will first go to NotePad++ then to file open and find that file.

If I want the backgrounds folder I won’t just double click the HTML file. I will go to NotePad++. File. Open. Then I will find wherever that file is, wherever I just downloaded it to.

I always put them in the same subfolder with my name on it so I don’t have to think about where my files are.

I click backgrounds. That’s where I double click to open the file. Don’t ever try to open a file directly from NotePad++. It’s not good for viewing HTML files or the codes that go with it.

You may see me do it when I do shortcut, but I’m very familiar with the program. Don’t do it yourself. Don’t do it at home.

Back to what we were discussing, setting up this diagram [On overhead.] I have the HTML file where I want it. Now I need the styles to look the right way.

How do you lay two things side by side? Things tend to stack on the web in HTML. We are overriding that default behavior and making two boxes stacked side by side.

The first thing to think about in the code is the layout technique we will be using. I recommend we always start with this standard layout for the first week or week and a half. If you want to get fancy later, that’s fine.

I’m going to fix the width of this container div. Everything will rely on this width. I’m going to make it 600 pixels because this screen is small. Generally I do 900.

To make a container that has a width of 600 I have to do that in the style sheet, that’s where the style information goes.

How do I do that? How would I make the computer have 600 pixels wide?

Male Student: In the CSS.

Teacher: What do I write?

Male Student: I’m not sure.

Teacher: Anyone else?

Female Student: div pound container. Open bracket with 600 px. Close bracket.

Teacher: That’s the standard format for applying the style to a particular div with a particular ID.

You saw that a lot yesterday. You will see it again today.

Any questions about how that works? Makes sense? If it doesn’t let me know.

We are going to assume that is 600 pixels wide. If we went and re-uploaded this to the server using example two we have no idea looking at this what is going on. You can’t tell anything from this text we are seeing here [On overhead.]

I have no idea where the divs are. I can see some text but I can’t see how wide they are or their shape. I want to put boarders around every div on the page so I can easily see the structure of every div on the page.

In the CSS I am going to say for every div on the page give it a boarder 1 pixel solid green. That puts a green line around every div on the page.

I now re-upload that to the server. Refresh. Now I can see what we are talking about. This hasn’t changed the structure of the boxes, they were always there but invisible.

That boarder looks about 600 pixels wide. Now I need to set them the way I want them.

Now I want to center it. To center it you do this. In the container you say margin 0 auto. That means the top and bottom margins won’t use a margin, override it with 0 pixels margin.

For the left and right use an automatic margin which will push and automatically make them equal sized.

Imagine that you have equal white space on the left and right.

So I upload it to the server and it’s uploaded.

Another thing you may want to do is to override the settings that exist here — the margin and padding happen inside the boxes or outside. The margin here, is the spacing from the green box to the parent container around it. That’s just the page. The padding is the space in the boxes. It pushes the content away. Margins are external and padding is internal.

So if you give 0 to each the padding and the margin, then there’s none. See the space here? What’s that doing? It shouldn’t be there. It’s just a default that I must override if I don’t want it. It could be either the padding or the margin I can’t tell. I need to re upload the file. So now I’ve overridden it.

But I doesn’t make sense to apply padding here. The margin should be external but it doesn’t need to push away from anything.

I’ll make the note. [On screen.] [Override body tags ... ]
That’s how I leave comments so I remember
the code.

Now I make the header taller and I need these to sit side by side then I’ll add color. First the content.

The div tags stack one over the other. Otherwise why would they be that way / it’s just the default behavior.
That’s part of our job is to get these overridden and to stick side by side. When I say that I am talking about the float properties.

This works like you saw yesterday. The div ID, left. Then I make the style. You float left [On screen.]
Then div id content. That’s left also.

That’s the first rule. Set the float property. That makes them go side by side. The second part of this is that when they are side by side you need a div that pushes stuff in the row under it.

So one more visual change so you can see. I’ll give the container a boarder with a different color. One pixel solid red. This container is red. I override the style to make it red.

Upload to the server. Refresh. You see the container is red. You see the left content and footer is side by side. But the footer should be underneath. Why’s it there? Guesses?

Student: Sizes?

Professor: Maybe. But that’s not the answer I thought of. I didn’t do the necessary part. I have to clear after I’m done with the side by side parts. So in the HTML I add a invisible box after the last thing that’s side by side. I think of these two elements as a row. When you have rows you have columns. So these are the columns in the row. The last thing should be a div.

So I make a div. [On screen.] Just get in that habit with the rows and columns put the invisible column in there. Then the CSS has special properties.

So I make a class with divs. That’s an indicator. I give them the property. Then since I’m setting the border for the divs I want this to be invisible. I must override the border so it won’t show up. It’s invisible.

Re upload to the server. That forces the footer below the two things that are floating.

Student: So when you say both you mean Both sides?

Professor: I’ll bring it up. Let’s do the clear have sides. Here’s the width and height. 20 by 20 pixels. Then the background color. Orange. So it’s an orange box. You’ll see it.

That’s where it lives. But it’s invisible most of the time. But if I said Clear That means both sides. If I just standard deviation clear left let’s see … So there you go. divs use both sides. I’ll make the footer float left too.

Imagine you had a footer with columns stacked so you must flip it.
Well, I wasn’t expecting that. But you can flip them both sides or if you just clear it left and don’t say CLEAR BOTH it doesn’t push the contents down. The just doesn’t stack anything on the left. It ignores the right side. Or if you say “clear right” it forces the stuff below on the right side down. So I just do both sides.

Student: So that’s all it is? It makes the space to the left and right …
Or you can’t go below.

Professor: Sure. That’s all it does.

Now what I need to do is get the sizes here approximate. Quickly. The container is 600 pixels. How big do I want this? In the diagram there are no sizes. This wireframe is not to indicate stuff it’s just a quick and dirty diagram. I won’t analyze the pixel value.

If it’s 600 then I make it 200 it’ll probably look ok.

So the left is 200. [On screen.] That’s the width and the content will be 700 pixels minus 200 pixels. That’s minus the padding which I don’t have.

400 minus the order on all the boxes. This is 600. This is 200 [On screen.] So 400 minus 6 equals … 394. [Content.]
That’s the formula and you can use your eye or just trial by err.

I guess we missed some pixels on the right but no big deal.

So I’ll add 1 or 2 pixels. Let’s say 396 instead.

Student: So you use the X instead of the XPX?

Professor: Oh. I didn’t see that. There. [On screen.]

So I don’t make the heights attached to the divs. You want them to be flexible. It’s ok to scroll up and down so it’s ok if it scrolls up or down. But people don’t like the right to left scroll. You don’t want the width to stretch but it’s ok to let the height stretch down.

Student: What’s the typical width?

Professor: It’s … I’ll go into a way to analyze that so I’ll hold off. There’s no answer you just look at the web. It’s usually under 1000. Any questions? At all about this?

The issues are file management and knowing where your files are. That’s critical. Starting with HTML. And writing the divs. You just put the boxes in the code. Then stetting the container with a fixed width and properties. Then you float what’s side by side. After the rows you have the clear element that uses the line break, etc.

That’s all to layout. It’s not much but it’s complicated to learn. Once you have practice then you can focus on the content and the design. That’s what we’ll talk more about today and getting granular.

Let’s move on.

I’ll get back to the question about the width of pages. If you want to see how wide a website is … let’s look at the NY Times. They have a very wide page. There’s a tool called — I can’t remember. There are many actually.

Research!

So let’s go to Google and look for “FireFox Add Ons ” We talked about how FireFox adds functionality to browsers. You can add stuff to the browsers to measure things on the page. So let’s get that one. I bet there are several. I can’t remember the name. Search for “ruler.”

Draw it out to get the pixel width of an element. I think that’s what we want. Click “measure.” Then the button says “add to FireFox.” This is why FireFox is so nice. Click “install now.” Then you see that you’ve added the measure tool. It requires you to restart to use the tool sometimes. Or it keep south window open and will reopen on the window you used before. Close tabs. Restart.

It kept all the tabs I had. I think there’s a setting in the check box. I can’t remember.

Now we should have this ruler installed. We just have to find where it is. In this case it’s on the bottom left. I’m trying to get it on the screen. There’s a ruler icon. When you click it your cursor will change to cross hairs.

We want to find out how wide the NY Times site is. We need to stretch it. I’m going to click the icon at the bottom left. Now my cursor changed. This will allow me to measure the page manually. It says 973 pixels.

Does anyone have a different number? Something like that.

That’s how wide they made their container div. That’s a pretty wide page. There are not many sites as wide as that. That’s the max.

Let’s try a site like CNN.

Female Student: You always want to measure from boarder to boarder?

Teacher: You want to measure from where you see the content is starting or ending. It’s not always a boarder.

Female Student: Would you measure to CNN.com in the left hand?

Teacher: This site in particular is two parts. The top navigation and the main content. They behave differently. They have a slightly different layout than what we have been doing.

Their main content section is about 985. It’s even wider. That’s good to know. We know it’s ok to make a site 985 wide.

Male Student: [Can't hear/can't understand.]

Teacher: There’s been a steady progression of bigger and bigger widths.

Let’s try another site. Let’s get an idea of the widths around.

Male Student: Jibjab.

Teacher: I’m sorry. This thing is really loud.

I’ve never seen this site before. Is it your birthday today? [Class laughing.]

Male Student: It has all these comic videos. You can send them as cards or just as is.

Teacher: I’m getting 963 or around there. We have a standard that’s going on. High 900 something seems to be ok.

Let’s try one more.

Male Student: Fark. That’s my site.

Teacher: Actually, this seems to be stretching the whole width of the page. This seems to have a minimum width, but no maximum. For this site I would measure the minimum width. I’ll resize until it stops moving and is no longer stretching and shrinking. This is 980. Same range.

Female Student: How do you set a minimum width.

Teacher: There’s a min-width property you can set on CSS.

There are some problems with that kind of layout. The older Internet explorer browsers won’t recognize that.

One thing they may have done on this page is that people used to put an invisible image that has a width of the size that you want. An image will never shrink further. Using an image will force this box to never go smaller.

You get the idea. 960 to about 980 seems to be our range.

Another tool we should install is Fire Bug. We installed it yesterday. Search for Fire Bug. You can also search in the FireFox add-ons page. You can add this to your browser. Find the install button.

This add-on requires the not yet released version of FireFox.

Let’s try again.

Male Student: Just Google it.

Teacher: The first website is what we used the other day. Use the big button.

This link is from the syllabus also in case you lose track and want to look back. This information is there.

You have to allow it to install stuff from this site. Click Allow.

By default there are security settings that FireFox has to prevent other sites from installing programs on your computer.

Let’s try again. After you allow it, it should install.

My computer has an older version of FireFox than your computers have. It’s not working on mine. That’s a shame because I can’t show you what to do with it.

I’ll get to it later. Install it. We will go through it then.

Male Student: There’s a version that works on FireFox 1.5.

Teacher: I’m using FireFox 2. If you go to help, about FireFox it will show you what version you have installed. That’s why mine’s not working.

For some reason my FireFox is downloading 2.0.02. These computers are frozen. Someone must have been downloading FireFox 2 when this thing froze.

We don’t need that now.

Let’s go to advanced CSS. Back to the blog. At the top of the blog is the latest post with the links to the stuff we will be covering.

You might be asking, when using margins and padding, you may wonder how to look at the code for this page? Look at the URL. [server address deleted for security]/myname/class 3.

Go to the server in the WinSCP. Look for my folder from my summer 2009 folder, class 3 folder. Go back to where you first came from when you logged in using the back button. I’m just following these folder names at the top.

Class 3. Margin and padding. That’s the folder with all these files in it. If you drag it to your own folder you will have a replica copy of my file.

That’s how to follow along.

Do you all have that? Should I do it again?

Go into one of those files. NotePad++. File. Open. Find where I downloaded that file. This is hopefully in your folder with your name on it in the margin and padding folder.

I’m going to open the style sheet called marginpadding.css. I want to exhibit a little more what the difference is between margin and padding.

I’m going to change the margin on the left side of this outer red box, the container box. If I set the margin-left to 50 pixels you are going to see the red box shift to the right 50 pixels.

I will re-upload that to the server. The box shifted because I applied a margin to the red box. Margin is the external space between the outside of the box and the thing around it.

If I apply a 50 pixel margin to the yellow box, it will move 50 pixels in to the red box. You are going to see the inner box move in 50 pixels from the edge.

That’s the margin. It’s pushing away from its container.

If I put a padding on the yellow box it will push inside. So let’s apply a padding of 10 pixels to the inner box on all sides. Actually, I’ll make it 30 pixels. That will push on all edges, the content, 30 pixels away from the edge.

We are going to refresh. It pushed away from the inside, 30 pixels away. Padding is the internal spacing. It also made the box bigger. That should be something you are aware of. It may stretch your box.

That’s the only thing I wanted to show. Margin is the external space, padding is the internal space.

Let’s move on. That was a recap of things we have seen before. Now we are going to get into new stuff. Let me just check my blog.

Centering content we saw. This is an example again. We made it obvious by using two different colors. We saw that with the layout we did. That’s there for you to play around with.

A new thing is background image. That’s the first new one. How do you apply a background to a div? Let’s pull that example up.

These are two divs, one green, one red; with two background image settings. One has a tiling background. It keeps repeating as many times as necessary to fill the space. That’s tiling the background.

The second is a non-tiling background. It only shows up once, even if it doesn’t fit the space.

That is done with background-image. In the background folder in styles you see background-image-CSS. These are the two divs we saw. The first has a background image with tiling. The other has background with repeat that indicates to not repeat.

Tiling is the default setting for the browser. If you don’t want to it to tile you have to tell it not to.

Male Student: If it fits into the div it won’t tile?

Teacher: It will still be tiling, but you won’t see it. It would if the image was smaller. If it fits perfectly you just won’t notice that it tiled. It will cut off at the edge of the div.
So it will tile unless you telae it not to using this code. Instead of “no repeat” I’ll change it to “repeat-x ” And that’s repeating horizontally across the div.

So I don’t know if you can tell — there’s horizontal but not vertical tiling. Or you say “repeat-y” and that’s the other way.
I can’t get rid of my NotePad++.

I need to close this down.

There are a few different settings you just saw. The No Dash Repeat. [No-repeat.] I’ll leave the comments for the different settings. Repeat the x the y, etc. So those are the options for background repeat. But I’ll leave up the no repeat to leave it at the original state. You should look at other sites like NY TImes. I can talk about these all I want but you should see them in practice.

And FireBug is useful for analyzing with reverse engineering.

If I right click here on FLash for example — remember the first day? Not expecting really. But you can tell what’s Flash or not when you right click. Or I right click on any image and it says “view image” or “copy image.” That’s an image tag. The IMG tag. It’s a foreground image. It’s used to place the image in the foreground. So I’ll try this logo. That’s an image.

But with the background image you won’t see that. You can tell since it will say “View Background Image.”

Another site. Cute Overload. I’ll right click the logo. That’s not background.

Student: AA.com. The top banner.

Professor: Right click … um, … there. The clouds. There’s no view image or save image. It’s just the background image. It’s huge. So they use that technique in CSS. That’s easier to superimpose things on the background. Then you can just put HTML over that. So there’s a div for the whole thing then inside the div there are the sub sections here [On screen.] These show up on top automatically.

What else? Another site.

NYU.edu. Right click on the logo. That’s a background image I think but it’s not showing up the right way. Then it’s also a link so that interferes.

It’s ok. Just browse around. But you can tell easily. If it says view image it’s using the image tag. Any questions?

Student: When you sit the address or the JPG, if it’s not right on the folder you use can you just tell it to look somewhere else?

Professor: That’s a good question. Back to the AA site.
We established this is a background image. I see view background image when I right click. You can get the address for the image on the Internet too. But if I want to use that. I can do it. So instead of using the image I had on my file systems I can use THEIR image and steal it.

They may not like it! But now I have the AA logo. Do that answer your question? As long as the address is there correctly you can use that image.

One note — some websites do this. They link to other sites and may use one of your images. If you are popular and they want to link to you, they may use an image tag and use your image. That’s bad behavior, since what they are doing, when someone loads it, it makes a hit to the AA server.

But if I had 5 million people on my site, that means AA is getting 5 million requests on their site too. That’s happened to me before and people bring down servers that way.

Student: With the HTML you can adjust the image size? Or with the CSS can I do that?

Professor: No. You should size the images correctly off the bat. Or you use the height and width properties. So you want to use Photoshop to make it the correct size.

A note about the background image property in CSS, the background image property takes one value, that being the URL value. In the parentheses it uses the file name too. It’s an odd syntax but that’s what it takes.

Then the path is relative to where the CSS file is not the HTML file. So since my CSS file lives in the sub flooder styles, there is another sub folder style that’s Images. So I have the one for the style sheets then one for the images.

So to find the image I tell it to go to the root folder then down into the images folder. So the dot dot means “go back.” That’s relative to the CSS not the HTML files, which is the usual route.

So to get to the image files you must go UP a level. That’s all.

Student: … if the HTML is the …

Professor: If you see the text it must be written in HTML.

Any questions? You will see more of this in another example. Not right away though. Creating menus using lists. That’s the next topic.

Remember the tags and lists? The three listed elements? You should see those used to create top navigation links. The most common things you see are the links at the top or on the side. You should use item tags for those. When you see the list on the left vertically they naturally stack themselves. But it’s weird to see them horizontally and it’s not natural behavior. So how do we do that?

Let’s look at this code.

First the HTML. Nothing here is new. The important thing is the unordered list of items. Then I have links listed 1,2,3… but there’s nothing special going on here.

But this is different …
I am removing the margin and the pudding from the body tag. It’s not critical. I centered the container div. I have the standard div.clear. Now I play with the list.

First I remove the bullet point. There are no bullet points here. I removed these through the combination of changing the list style position. You can look at up on … w3schools.com.

So when you see something with a property you can go to the CSS section and I advise you to take these tutorials. Go through this content. I have to fly through this but the stuff I talk about in this class is all listed here.

So we’ll go to the CSS reference section. It’s linked down from this list. It’s a set.

I click the CSS reference. See?

Here in the content area, a bunch of properties you can play with in CSS. They are divided into backgrounds and borders, sizing, fonts, lists. So list style position shows you how to place the bullet point. [List style marker.] I’ve set this to “inside.”

And shows a dictionary of usage of this property. I overrode the default then you see the different vales and how to indicate what to do with the bullet.

This removes the extra space created.

When you have the list item the positioning or spacing is effected by the bullet point. So I’m just removing the space but you don’t have to do that. It’s just a nice way I can save a width.

So just do that when you want to make a horizontal list for navigation.

I’m floating left the list items. It puts them side by side.

seSetting the list style to none moves it so you don’t see it. But this just removes the spacing that’s technically added so this removes the bullet point all together.

Now I’m aligning the text in the center and I’ll set the line height to the height of the list item So this defines the list of text. It’s just a trick. When I set the list height to the line height vertically aligns this text in the box. This is the border, the 50 pixel border. I gave it a line height of 50 but since it’s smaller it aligns it in the space. It’s sort of a hack. It doesn’t make sense really but think that the browser is reserving the height but the font is smaller so it puts it in the middle automatically.

So let’s remove it to see what happens.

Vertical aligning is difficult to do generally.

I took out the line height. I’m not sure what’s going to happen. By default it’s up at the top. If I made that 150 pixels, just to show you what would happen if it wasn’t the same size. The browser is reserving a size for this text, since the font size is only 12 point something.

By setting it the same value I can assure it appears to be in the center of the box.

I will put this next to the height properties so you can see they are always together.

That only works for vertically aligning text. It won’t vertically algin one box inside another box. You just have to play with the tags and margins and find the value that looks right.

We have a set of list items that I have given a specific width and height in the CSS and made them float left so they stack up next to each other. They have a line height the same height as the height property. That’s how you vertically align things.

Questions? Does this make sense?

I know some of you need more time with this. Some of you get it right away. Flag me down if I go way too fast.

We are going to continue down the blog. Read the post from last example. I’m going to pull up the post, static positioning.

By default, the position of any element on the page is static. That’s the default behavior. It appears, more or less, where you put it in the code. The first thing in the code is the red box. In that box is another div with the yellow box. They appear one within the other.

The browser has defaults for a paragraph. It will have some padding around it by default. It may have a margin.

If you don’t change those things, like the position of an element, it’s referred to as static. It’s where the browser will put it by default.

I will use these yellow and red boxes in all examples. I’m not changing anything here. It’s a red box with a yellow box inside of it.

In the next example I’m using relative position. This is the same HTML code, more or less. I added different text. I shifted the yellow box up, so it clips the text a bit.

This is the code for the yellow box that was necessary to do that. I shifted the top property to negative 30. That moved it 30 pixels towards the top of the page.

The red box still has static position. I modified the position property of the yellow box. You can shift things from where they would normally be in the static position.

Is that clear?

Female Student: It’s not all the way on the left because of padding?

Teacher: I may have applied some padding.

It’s the same. Whatever the default was is the same as what we are using. I haven’t changed that. It must have some padding.

Now the next example. Absolute positioning. The red box is again static. I may have centered it. I changed the position property of the yellow box. I made it absolutely positioned. The position is relative to the top left corner of the content area. The pixel coordinates are relative to top left of the content, now where it would normally sit. 50 pixels in, 50 pixels down.

An artifact of that, since the red box is statically positioned and centered, and the yellow box is absolutely positioned, the red box stays where it would normally be when I move it. The yellow box will never move because it’s relative to the top left of the screen. It’s an odd behavior. The yellow box can stretch out of the red box.

This can be used for an effect. You can stick things at certain coordinates on a page like this.

Male Student: Can you move the absolute left 50?

Teacher: You can’t change the left without specifying relative or absolute.

That’s absolute positioning. Stick something in an exact coordinate in the window. It’s important to remember it’s relative to the top left of the window.

Next we are looking at a combination of these two things. Relative positioning on the outer box and absolute positioning on the inner box. You have an unexpected odd behavior. The yellow box is absolutely positioned, like the last example.

Because the red box is relatively positioned this makes the difference. Somehow the browser thinks the absolute position of the inner box is relative to the top left corner of the red box, not of the page. Even though it says absolute it’s absolute to the red box.

I don’t know why that would make sense to the people who designed this, but it’s useful if you want to position something absolutely within a box. We can use this to still have a normal layout, where things move around together, but position something carefully inside that container div.

You won’t see this used as commonly as the other two types. It is something to be aware of that you can use this to your advantage where you want something to be absolutely positioned within another.

With relative positioning you don’t know where the browser, by default, is going to put it. By using absolute positioning for the inner box I can say where it will be.

Questions about this? The positioning stuff.

This is a position property that you can look up in the w3school site later on. This is a good indicator of how to use those things and what they are meant to be used for.

Last thing about positioning would be the Z index. Here I have three boxes. One is on top of the other which is on top of the other. You have X coordinates and Y coordinates on a graph, this is the Z coordinate. The Z index is how far at you is any element.

The red box has the lowest Z index. It’s a number system. This has a Z index of let’s say 0. The yellow is a Z index of 1. The blue is a Z index of 2. It seems the blue is on the yellow which is on the red.

Let me change those around and you will see what I mean.

You can see I set the Z index for the yellow box to be 2. The index for the blue box is 3. That’s why the blue appears to be on top of the yellow one.

If I set the reverse to be true, the yellow to be 3 and the blue to be 2, we get the reverse effect. That will mean the yellow should be visually on top of the blue. Let’s see what happens.

That’s what you get. When you have overlapping elements, which is how I positioned them to be because objects don’t normally overlap, this is the way you would think about which is on top of which. It’s a visual effect. The HTML doesn’t change. The CSS code makes it appear like one thing on top of the other.

Any element can use this. You have to change the position property. It won’t work without relative or absolute positioning.

Just like the top and left properties don’t work unless you use relative or absolute.

Male Student: The 1 would be 100 and .1 would be 10%?

Teacher: Yes.

Male Student: If a div has a background image can you use Z index to put text in front of an image?

Teacher: Yes. I would avoid doing this unless you have a really good reason and can’t do it a different way. In that case I would apply a background image and put the text in front of that.

But yes, it’s possible.

This is related to positioning because you can’t apply Z index without applying relative or absolute positioning first.

If I change this to static let’s see what happens. I changed the blue box to have a static display. It goes to where it would normally sit. Let me take the other box out too so you can see it.

Now they go to where they would normally sit. You don’t have positioning or the Z index. You can’t change the left property, top property or the Z index without changing the positioning.

That’s all for positioning. One more example I have. Using sprites. These are background images. There is a div box with a background image applied. When I mouse over the image it shifts to a different image.

If I right click on one of these it doesn’t say view background image. Let me load the background images manually. That’s what the heart image looks like. That’s the image file. There are three images in the one file. There are three separate versions of the icon.

The other is the same. Three versions of the plus sign.

Why does it show up with one version and not the other? The div is only that big. It hides the rest of the stuff below this. It’s like a window you are putting on the screen. If the background image is too big for the window it hides the rest.

When I mouse over it, I’m taking the background image and shifting it up so you see another version of the image in the window.

Is that confusing to anyone? It’s being shifted back and forth.

The way that works is like everything in CSS,
– well let me open the HTML first. These are the two divs we are looking at. There’s the div then the link or rather it’s a tag for that box. I’m focusing on the fact that there’s a background image though. The CSS looks like … [On screen.] It has a background image for these. That’s the background image property. This whole div looks like I have a div around this. That’s the score you’d see if there were a border. Then this shows a copy that sits to the left. Make sense?

I had the background image not repeating. If you mouse over these, there’s a pseudo class. I repeat the style sheet of the same div but only when you hover over it. You can specify that. That’s for both the divs. These are individual separate solicitors but since they use the same style … this changes the background position so the X coordinate doesn’t change but the Y coordinate changes up a Few pixels. So it shifts the image and exposes the next icon. One of these is 46 pixels high. If you shift it the window shows the next icon down.

Student: Where do the URLs go?

Professor: It’s just one file. This. The graphic designer stacked these three different versions of the icon.

Student: So shifts?

Professor: The background yes.

Student: Or my could all show up?

Professor: Let’s do that. Here’s the div for the first and second icons. Item 1 and 2. You see 20 pixels set for the height. Now I’ll change it to 100. That’s enough to see both I think.

[On screen.]

So you see the background image has all 3. I’m going to put a border around this now. [On screen.]

I’m putting a red border so you can see the sizes. Now each of our many divs are this big. But if I cut it off — 60 pixels for the height. Then it cuts it off somewhere in the middle. So I got the right preparations first so it cut off a certain way.

Now I’ll make it bigger. 150. Then I’ll shift it.
[On screen.]

So I mouse over it you see it shifts up and hides the top. That’s a cool effect. That’s the trick. You use one image. It’s easier in the code and easier for the graphic designer. But it’s better for the browser too. You don’t get three separate hits for each image. It’s better for the small icons. If you have these hover states it’s a very easy and useful technique. So you just design with that idea in mind.

On different page maybe I’ll just use the 3rd. It depends on what you want to do.

Saving the changes.

Ok. That’s it for the examples of what I wanted to cover today. I have a difficult assignment for the rest of the day. But any questions? I’ll press you now to do something more thoroughly than before.

In this folder for class 3. Let’s start with assignment 1 then if you finish do the assignment 2. This is a background image applied to the page. So there’s a container I created. It’s just a big container applied with a background image. I want you to use it as a canvas. This is like you are using a transparency. Use this as a reference then position these where they belong. The images are all in the images folder and I want you to do the HTML and the CSS. But this uses all the techniques you saw today. The different image tags, etc. This just putting it all together in a coherent way. This is the rest of the day and this is most important thing about web development. So just keep going.

This is something I made for BalckBook. I provided a solution but I want you to do the same thing. This is an MTV app so it’s complicated but you are using the same techniques. But start with 1. Think about how you’d code it. Think about the big picture first. How many rows, or columns, and sections.

Here’s the starting point on the server in summer 2003 class 1. There’s an HTML file there called INDEX.HTML. It’s just a container.

Then the style sheet. Main.css removes the padding and margins, etc. and appeals the background to the container so you can develop on top of the image. You can easily develop and place the things over the background so you can get the pixels right. It’s a good technique to superimpose and you can see if it’s in a right place. Like if the search box is down here you see it’s not right.

Understand?

Student: No. The last part about the positioning.

Professor: If I go to the HTML code and I put a logo up here in the top left. I start with the div to get it in the right place. I put the word “logo” in here. Then there’s the div that will have the logo in it. Then I make a style for it. [On screen.]
I give it a width of 300 pixels then 200 pixels for height. Then I give a background color so I see it.

Now, I upload it.

Now I can see it’s too big. So my div does not have the right height and width. I see it’s not right so I change the code. Clear? That’s the point I’m asking you to do. This is the background then you place something over it. So start with the big layout with the rows and columns, etc.

All the images you need are in the Images Folder. These are all the images and there are not many. You can see what they are all for too. Go to the browser assignment 1/images. You click on the images and you see these little images for icons, the logo, and that’s for the logo. But you see all the images you need. They are all there I think.

That’s the navigation items background. Then you put the text over that. But I’ll help you. When you start superimposing you will probably call on me. But let’s get strutted then we’ll do this all day.

If you are stuck please flag me down for help.

Student: Do we create an index file?

Professor: Just use this.

Go to this file. The HTML file. Start there. Then put in divs. I’d put one in the top section. The big one is the container. Then just remember to upload to YOUR folder. Not mine. It happens.

[Students working.]

Student: All the images are here in the folder?

Professor: Yes. If it’s not, let me know.

The background folder is the tiling example I showed you earlier.

[Students working.]

Student: The 3 boxes is that one div?

Professor: Good question. I think it’s one. Or it’s one div around the thing then it’s three smaller ones. But you can do that many ways.

Student: Or in real life they change colors when you mouse over them.

Professor: Don’t do that! Just keep it simple. Make the static page.

[Students working.] .

Ignore what’s appearing in the middle of the image. It’s an artifact that somehow got in the middle of the image. Don’t do that.

[Students working.]

Don’t hesitate to call me if you need any help.

[Students working.]

We can ignore that. [Alarm going off.]

[Students working.]

Its about to 1 o’clock. Take a break from your computers every once in a while. We’ll come back at 2.

[Lunch break]

Is anyone stuck? Need help?

[Students working.]

Anyone else stuck?

Student: I have a question.

[Students working.]

I’m going to make a little presentation about another issue popping up as you go. The difference between two types of contents on the page. Block objects, which are rectangular. Other objects are in line objects, not easily described.

Different elements, like divs, paragraphs, a tags, etc. behave in one of two ways. Divs are block tags. They, by default, will take up as much width as they can on the page. They will have a clear rectangular shape and space between them. They will put a big line break in before and after the code.

In line elements, the other elements, only take up as much width as the stuff inside of them. If there is only this much text in the tag it will only be that big.

They don’t have a clear rectangular shape and they don’t have a built in line break. They will just sit next to anything else you put there.

Let me show you an example of this. If I put some text in next to the div, just some plain text, I didn’t put it in a tag, it sits above the div. I am going to put some below the div too. This is just plain tex with no tags. It’s between the two expand tags.

Let me show you this code.

Text. Div. Text. Span. You can see that the text above the div tag is clearly on a different line. The text below the div is pushed down below the div, but not up from the span tag. The span tag is on the same line. We didn’t indicate anything, but the div isolated itself from the text. The span did not.

That’s the fundamental difference between block elements and in line elements.

This is a list of the common block elements [On overhead.] You come across this on your coding. Divs have built in spacing. Things like spans and A Tags do not. Input tags also don’t automatically go one on top of the other. The text field and button will be right next to each other. The block tags we have to make float. Span tags we don’t have to do that.

Some tags are rectangular in shape and have space above and below them. Other tags just take whatever shape is inside of them and don’t have line breaks before and after them.

When you deal with tags it’s important to know what kind of tag you are dealing with. Here’s the list of blocks and not.

Who asked me about the assignment?

For example, if I were going to try to make this diagram, now that you are adding text, image tag is an in line tag. It will have no problem sitting next to some div or something else. The div will have a problem sitting next to the image. You will have to fault the div. You won’t have to float the image.

The same with this. This is an image of the text SEARCH. The image and the button are all in line types of tags. You don’t need to float them. They don’t mind sitting side by side.

This is an image. That would be some text in a span tag. You would need to float these to get them to sit side by side.

I didn’t want to confuse you with this earlier, but it may help to think about what tag you want to use. That’s the next level of this project.

Male Student: Can you tell the difference between the span tag?

Teacher: If you use P or span? Is that what you asked?

Male Student: Yes.

Teacher: What is this conceptually?

Male Student: Text.

Teacher: What would you call this as far as information architecture? A header. I would try to use an H tag because that’s some kind of heading. A heading indicates what the page is about. I would make this an H1 or H2 tag that I would convert or float to sit next to the other tags.

I would use the best I can the actual heading tag.

Male Student: Can you make it part of the table?

Teacher: You can put a heading in the table. I wouldn’t use tables for layout. I would only use it for tubular cell-like data. It’s fine if you put the other content in a table though.

Did that confuse you more?

Questions?

Male Student: Next to recently opened is an image? Is that part of the header?

Teacher: No. Keep the header. Put the text. The header is in the list of block elements. H1 to H6. If you did use a header you would have to float it to get it to sit side by side.

In the CSS you can change the display property of any element. You can override the behavior of any heading.

Let’s say I had a heading up here. I am going to put some text before and after that heading to show you. By default the heading is a block element. It pushes down from anything and pushes anything after it down.

In the CSS I can change that. H1 tags have a different kind of display. I’m converting a heading from a block element to an in line element. It will now behave totally different. It will behave like a span or A Tag.

Female Student: Why wouldn’t we use the span instead of having to use the div? Are they not interchangeable?

Teacher: That’s why I didn’t want to introduce this too early. It gets tricky.

Let’s bring up the diagram again. That’s a good question.

For example, this has three things side by side. Why would I float them and not just have spans? I want them to be rectangles. I want them to have a rectangular shape, which a span doesn’t have. I’m forcing the rectangular shape.

You have to take those considerations in mind. It becomes an arbitrary choice. You get used to doing it one way or another. You can find a way to make a span have a rectangular shape, but just do it the way you are learning it.

Get used to floating rectangular things as divs side by side.

This brings up another layer of complexity. If it’s too much you can always use a div and float it next to something else. Do what you are comfortable with now, but bare in mind the two fundamental elements.

Questions?

Student: Where will you post the information?

Professor: On the blog. But if you go to the school site. [W3schools.com.] I get the CSS. When you have a question about CSS properties you should go here. There’s the reference page. Look at display properties. It should be in this list. Search for … inline.
It’s in the positioning section. It shows you the different options. They have options I haven’t mentioned. But there’s really just block in inline. Just use the first two. You won’t get bogged down with these.

That’s a big issue with laying out and how to convert the blocks. If you when want the rectangle then use the block. If not, use the float.

So I’ll post an explanation on the blog.

[Students working.]

We have a couple of minutes left. Make sure you save everything and have it backed up on the server.

I think this is a good exercise for a practical application. We will do more of this tomorrow.

We will also most likely hit JavaScript tomorrow.

[End of class.]

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.

Web Development
Monday, July 13, 2009

Let’s get started. My name is [name deleted for privacy]. This is [course name deleted for privacy].

In room 103, down the hall, there is breakfast delivered every morning. You are free to help yourselves. You are not supposed to bring it in here but as far as I’m concerned it’s ok. Hide it if someone comes in.

I want to show you a website we will be using a lot. The class blog. This is where I will be posting information about the class. Assignments, related topics, etc. You will want to read it. You should all go to this website. [blog address deleted for privacy]. Open that up in your web browser.

I’m going to assume you know nothing about Internet, but I hope you do. When I say web browser, I’m talking about Firefox which is on all of these computers. It’s a web browser that allows you to browse files on the Internet. You can open up the start menu to find it.

On the bottom there is an icon with an orange dot, that’s the Firefox icon. I will assume you know when I say web browser that I’m talking about Firefox or Internet Explorer. We will be using Firefox in this class.

Go to the blog means to put this in the browser up top and click the green arrow.

In the first section you will see there is a post. There’s a blog that I have written with basic information about the class. It has a link to the syllabus.

Is this projector difficult to read in the back of the room? I’m not sure what I can do about that. Is that better?

Please open up the syllabus for the class. I will run through some basics. Click the link. I’m going to run through the structure of the class. You can read this all here. I’m not going to read it for you, I will just highlight a few things.

This is a web building class. We meet Monday through Friday for two weeks, eight hours a day. We break from 12:30 to 1:30 for lunch.

The required text, there are none. We will be using on line materials. I don’t expect you to read at home. I’m not really assigning homework. We will use on line texts. These are recommended texts in case you need a book. I can’t vouch for them because I don’t read them, but they have been recommended to me. There are plenty of on line sources that are capable of helping you.

We will use a server called [server address deleted for privacy]. Practicing on this server will acclimate you.

We will break up grades in thirds. Quizzes are one third. Quizzes every morning on the concepts of the day before. They are meant to remind you about the topics from the day before.

There will be in class assignments. In the morning I will lecture you. The afternoon we will work on projects. I have to lecture to get the information out but it’s up to you to practice this. The idea is to do coding for half the day.

There will be final projects. They will be limited. I will ask you to start working on projects in the second week based on information from the first week. This is a very compressed version of the longer course. I don’t expect as much in depth work in the final project as I normally do.

Please ask questions of me and stop me or slow me down if I’m going to fast or you don’t understand something. If there is one person who doesn’t understand something there are many. Slow me down or stop me if you need further explanations.

We will all have blogs. You will be required to start a blog. This is not a sadistic tendency. This is to keep in touch about homework and keeping in touch individually. I can easily see how you are doing in this class.

I have this blog to communicate to you.

I won’t go through each class, but there’s an outline of each class and what we will cover. We will probably compress class one and two today.

Let’s go back to the blog. There is information about the process of web development.

First I want to go through an attendance list. Just raise your hand and say what you are hoping to learn in this class. What your background is with technology. A blurb about what you are hoping to learn.

Catherine?

Female Student: I work in publishing. I’m looking to see if I could have a different career path. I’m exploring options.

Teacher: Chong.

Female Student: I’m from a merchandising background. I’m looking to learn basics.

Teacher: Heidi.

Female Student: I worked in publishing. I got laid off in February. I’ve been programming for a decade but haven’t done web development. I want to shift my career path.

Female Student: I’m in the law school. I do content for a web site of one of the institutes and I want to see the background to understand more.

Male Student: I do Flash programming back in 2000 or 2001. I want to get back into it.

Teacher: Can you tell us about Flash? We’re not covering it here.

Male Student: I’m working at WNYC producing stories for their website. I need the technical skills.

Teacher: So you need this for your job?

Male Student: Yes.

Teacher: Jeremy.

So you know some of the HTML and things like that?

I’m going to teach an iPhone application course in 2010.

Those of you with background in HTML we will cover some of that. The first day or two will be slow for you. After that we will move quickly.

Mark?

Jenna?

Female Student: I have a communications degree. I want to further my interest.

Teacher: I can’t hear you.

Female Student: I did some electronics communications. I want to further my interest.

Teacher: James?

Male Student: I’ve been in programming for years, but more on the database side. I want to bring web development in.

Male Student: No background in Internet at all. I did one HTML class. I’m an airline pilot. I want to see what’s possible and see what opportunities are available.

Teacher: Patrick?

Male Student: I’m from California. I worked on a literacy project. We have text to speech technology. I want to set up a website to display my art and music.

Teacher: David?

Male Student: I’m from Manhattan. My last job had a web based program used for data gathering but no one in the company knew how to use it. I realized there that if I had more knowledge of the web and web design I could have streamlined more data.

Teacher: Are you in the web development class?

Male Student: Yes I am. Sorry that I’m late.

Teacher: Is there a computer free?

Female Student: No chairs.

Teacher: Can you look for some? Do you mind?

Male Student: I’m new here at NYU. I’m working on my business project website.

Teacher: Carrie Ann.

Female Student: I’m in sales and merchandising right now.

Teacher: We are not covering graphic design so much in this class. It’s a web development class. Given the time we can’t get into design so much.

Samantha.

Female Student: I want to learn to publish stories via website.

Teacher: Raise your hand if you know beginning HTML? Today we will cover everything from scratch. This is the only day we are going into the basics. From here on out we will move quickly.

Let me make sure he has a chair. I will be right back. Read the syllabus while I’m out.

Professor: Is that not plugged in?

Student: There’s no adapter for it.

Professor: I’ll just come around there. This isn’t part of my job description. [Joke/joking.] We usually have a tech guy here. So we’re having technical problems. I’ll go find someone in the building and be right back. Someone will come down and solve your computer problem. I’ll keep going with the class. You won’t really need the computer until later.

I’m running through a presentation as an overview of web development. I’ll explain the things we won’t focus on so much, too.

Here is my very rough outline of basic web development technologies. This isn’t everything but it’s the popular ones. XHTML, dHTML, JavaScript, etc., we’ll go through. I’ll post this on the blog after class so you have access to this list.

We have the problem in the corner back there.

First, I want to make sure everyone understands the Internet is composed of clients and servers. I’ll explain what that means.

A client is one of these computers in the room. Any computer that connects to the Internet is a client. Any computer with a web browser or a phone with a browser, etc., anything on the Internet is considered what I call a client. It’s the technology that connects to the Internet and retrieves data.

The server is a computer somewhere like Google. Their server is probably in Texas or California. Those are what I call the servers. Let’s say I’m surfing google.com. I send out a request and the server at Google sends back the information. So the client requests data. The server responds with the data. Does that make sense?

Clients and servers are both computers. When I check my email I’m requesting data from the email server. I want all the emails on the server to be put into my computer. There are web servers, email servers, database servers, etc. We’re focusing on web servers in this class. This becomes clearer as we go along.

Web development technologies are divided into technologies that run on client computers as well as server computers. Technologies that run on the client behave differently from the server. Any technology that runs and is processed on these computers is different from the processing on the server computers. We’ll code both kinds.

This is a short list of the client side technologies. [On screen.] And this is a server list. [On screen.] We’ll go through these.

You may have heard of these terms like ASP.net, etc. I’m trying to dispel any misconceptions about what they are and what they do.

The first client-side technology we focus on is XHTML. That’s the basic of any website. XHTML stands for [loud noise.] There’s another class up above. XHTML is extensible hypertext markup language. HTML is the same as XHTML. It’s just the current version.

Hypertext is the term used for linkages between documents. Hypertext markup language is what you use to link different documents. Hypertext is the technical term for a link. And the web is just interlinked documents.

We create these documents by using tags. Tags are bits of texts that indicate links or images, etc. Any content you see on the web has a tag that indicates that content should be on the webpage.

Look at the screen. The heading versus the body paragraph look different because of codes that indicates how they look.

You may have heard of XML. XHTML is a type of XML. I won’t go into that right now. HTML is primitive. There are a lot of things you can’t do. It’s not really a solution for all of the problems of web development. It’s meant to divide your content by concept. It allows you to say something is a heading or a paragraph, etc. It doesn’t talk about color and things like that. It’s just the structure of what is what on the page versus how it looks.

Different web browsers display HTML in different ways. Web browsers are not consistent. There are major differences in how things are displayed. That’s why web developers are employed. HTML is a buggy technology that requires a human brain to solve these tricky problems.

However, you can create websites without knowing any of this. I assume many of you have done this. You could use Dream Weaver that allows you to draw without any code. Has anyone used that program? It’s a way of coding without understanding how websites are really built. Most professionals will tell you that software is a piece of junk. It doesn’t let you easily create sites that are easy to maintain and update. It creates such bad code, that a developer that has to modify these sites, has to start from scratch. We’re definitely not using Dream Weaver in this course.

Stop me if you have questions. I’m flying through this because that’s the nature of the course.

Student: Will we have access to your presentation?

Professor: I’ll post it on my blog. I can post it right now if you want to look at it right now.

Take down this web address for my blog. We’ll be using this blog throughout the class. So you’ll want to refer to it. [On screen.] That’s the main tool I’ll use to describe things to you. [blog address deleted for privacy]. Any other questions so far?

Student: Elaborate why DreamWeaver sucks. I’ve been using it.

Professor: Why did it suck for you?

Student: I put something into it. But when I put it on the net, it didn’t look like it did on DreamWeaver.

Professor: That’s true. That’s true of your own coding, too. The code is not well written for DreamWeaver. You have to see it to understand. You’ll write code that works fine on one browser but not on another browser. Or you’ll try to change positions which throws off position of other things on your page.

The next technology is dHTML. That’s dynamic HTML. It’s not a technology. It’s a marketing term. It’s a combination of three technologies which are XHTML, JavaScript and CSS. It’s the convergence of those three things which are the core client-side technologies on the web. We’ll be discussing these. When they all work together, that’s dynamic HTML.

Maybe you’ve heard AJAX. This is a valid term for technology. It’s used in common conversation to dynamic HTML. It’s things that happen when you combine all of these technologies. I’ll show some examples but we’ll go into it later.

The next one is JavaScript. This has nothing to do with Java. It’s a marketing term to make it sound exciting and attractive. Java used to be exciting and attractive so we’re stuck with that name. It’s based on C. All C-type languages look similar. Java and JavaScript have similarities. But any C language is similar to any other C language.

JavaScript is used to interact with the user a lot. If I click something on a page, I’ll find an example. See how those lists pop up when I move my mouse? Anything that responds to an action is using JavaScript to trigger those events. Any interaction you experience is JavaScript. HTML is a static language. Nothing happens when you mouse over it. But JavaScript does that interaction.

JavaScript can respond to actions of the users. That’s the most important thing that JavaScript does. When you click something or mouse over something or type something or close a page, unload a page, etc., these are all detected by JavaScript and the page behaves in different ways accordingly.

Everything I’ve covered so far work on the client side. So they run on the computers here in the class or your phone, etc. These don’t run on the server. That’s an important distinction.

JavaScript can move XHTML elements around the page. Look at this image on the screen. XHTML is anything you SEE on the page. Any interaction with the elements like something showing up is being triggered by JavaScript. But what you see after JavaScript is triggered is an XHTML code. But it showed up because of JavaScript.

So when I first loaded, everything you saw is XHTML. When I mouse over, JavaScript is called into play that shows a piece of XHTML that wasn’t there before. That’s a differentiation between the two. When you see something, it’s probably XHTML. When something changes because of an action you take, it’s probably JavaScript.

Any questions?

The next technology is CSS. It’s client-side technology that runs on these computers. CSS stands for cascading style sheets. [On screen.] The term is a very specific term. It’s design templates that you layer on top of each other.

Student: Can I close the door?

Professor: Yes. Let me know if I have to speak up.

Everything you see here is in XHTML code. The actual fonts used for links and the colors and placement of the image is from CSS code. The XHTML code just says there’s a logo, a link and another link, it doesn’t say what they should look like. It’s the job of CSS to apply templates to indicate that links should be blue and the heading should be big, etc. Those things that indicate what each thing should look like are written in CSS code.

Is that clear?

Anything to do with design or style is usually involving CSS. Some of you who have programmed previously may have used HTML to do those things. That’s incorrect these days. They should be separated today. CSS is soley responsible for how content should appear.

Flash is very important technology that we are not covering in this class. It is used for animation mostly. If you go to any big website you will see flash somewhere. That’s flash [On overhead.] See how the animation is changing? If you right click on anything on the page this is Flash it will say about Flash player at the bottom.

If I right click on another image it doesn’t show. That’s not Flash. When you see an animation it’s probably Flash.

Flash is used for banner ads, advertisements, etc. Anything that requires sophisticated animation. Since we are not a class about creating banner ads or games this isn’t something we cover. This is something that’s important for web development, but we are not covering it in this class.

Flash can do some of the same things as JavaScript. It can interact with you. It combines some of the end results you will see in the stuff we are doing in this class.

Flash is very popular for designers and animators because it has smooth, graphic capabilities. Flash became popular because there was a problem in the web world in the early 2000s that all the browsers displayed things different.

If you code something for FireFox it will look different from another web browser like Safari or Internet Explorer. That was far worse a problem when the web was new. Flash came around to display things in the same way on all browsers. Flash is an independent application. It has its own control of how it looks.

Flash bypassed the problems that HTML and CSS had. It’s becoming less necessary to do that kind of thing.

Male Student: I would have to download that player to my computer?

Teacher: Yes. It’s a separate application.

Male Student: That’s not true with the other things we are talking about?

Teacher: These are all client side. They all display on the computers. They are not pre-processed. We need the software to run HTML, Flash, Java, etc. It happens that the web browser we use reads that software. Flash is not necessarily built in.

Male Student: I know a web designer who makes entire websites on Flash. Is there a trend towards that?

Teacher: There’s a trend away from that. If you want your page listed high up in the Google results it’s harder to get that done if your sight is a Flash site. It’s hard for Google’s robots because there is no text code. XHTML, for example, a robot can analyze the code for the page and know this page is about resignation. It’s easier for Google to discover the page. Flash isn’t written in binary code. It’s almost impossible for the robot to analyze.

Flash will always look and act the same on all web browsers. This is why it’s popular with designers. Designers want everything to look the same. They don’t want to code five different versions of their site. A designer may adopt Flash because it allows for one version. It’s generally frowned upon.

The last bit is Java Applets. Applets are like Flash animations. It does animation and other things like Flash. It does complicated design patterns. You don’t see it often on the web.

Java used to be an up and coming cool program. They have kind of been left in the dust by other technology that provide easier ways for programming. Java is looking old. We don’t focus on it at all. You see it very rarely these days. A lot of scientists know Java from back in the day they use it, but it’s not so much used in the design world.

On the server side, and by this I mean on a computer somewhere else. ASP is Microsoft server side programming language. It only runs on their servers. Those servers and Microsoft technology in general is expensive for smaller companies.

An advantage of having Microsoft is that the technology fits together. People before us figured out ways to get things to work together. There’s a smoother process. You don’t have compatibility issues because they are made by the same people.

They have a nice graphical user interface. You don’t have to write as much code. There are some advantages. We are not focusing on it because it’s very expensive.

We will learn PHP, which is very simple. This is hypertext pre-processor. It is like ASP but it runs on many different servers and supports many different kinds of databases. It’s a more flexible tool for the average person to learn. You will learn the same concepts and tricks as ASP but it’s a different language.

The reason we are using it is because it’s free. It supports any database. It’s a more flexible learning tool. It’s more commonly used with mySQL databases. It doesn’t have nice graphical interface tools.

ASP has the funds. PHP does not have the budget or inclination to go into as much development.

Database we will be using is mySQL. It’s a small database server. It is quite good. It can go up to a very large scale site with many visitors. It’s a very reliable technology.

Like PHP we are using it because it files on many platforms. It easily connects to PHP, which is what we are using to write our logic. It’s very popular. It’s a great tool. It’s widely used and perfect for our class.

PHP combined with mySQL make the core of server side application for a large number of websites. ASP and SQL are more common with large corporations. Enterprise level systems may use these technologies.

The last is JSP. These are equivalent technology. Java on the server is usually written in JSP. It does the same thing as ASP and PHP. There’s not much else to say about it.

These are what we are learning. XHTML, CSS, JavaScript, mySQL and PHP. When we run the first three we will run it on these computers here. It doesn’t run on the server. The last two only run on the server. You will never test them on the computers here. You may see the final code here, but they won’t process the final two.

There is a fundamental difference between the first three and last two.

This is my recap of each part.

XHTML creates the structure. The semantic structure. What’s a heading? What’s a paragraph? What’s an image? What text do I show on the page? The meaning.

CSS takes the code and puts on layers of design. Headings should be blue. Paragraphs should be 12 point font. Etc. The visual aspects.

JavaScript adds the interactive behaviors so when you click something something else pops up. Something you do on the page is written in JavaScript.

MySQL is used to store the data on any page. They don’t recreate this page every five minutes, the content is stored and the latest information is pulled.

Male Student: Sometimes the lead article on the left is longer than it is now. Don’t they reprogram it?

Teacher: I’ll bet you that it’s very unlikely they recode anything on this page. I’m sure it happens once in a while when something goes wrong, but they probably have different templates for the page. I think they just decide which template to use. They are not going in a recoding. It would be too time consuming. The data is coming from a database. Each article is entered into a database, it’s not entered into the page. The person who writes it stores it in a database.

We will get into the relationship between databases and sites in the second week of the course. We’ll focus on how to make things where we want them and then we’ll worry about the databases.

PHP creates templates. So the New York Times has five different versions, those are templates using PHP. The rules that a site uses is PHP. The page asks the PHP server for the information. The server responds with the PHP articles. PHP is the brains of a sophisticated web operation. We’ll discuss it more later. It probably won’t make sense right now until we go into further detail.

We usually take a ten-minute break at 10:30. So that’s in a half hour. Let me upload my presentation to the blog now that you’ve had a chance to look at the blog. You can mull it over at your leisure.

This is my blog interface. Who’s familiar with blogs? Who isn’t familiar with blogs? We’ll all be setting up a blog. That’s required. I’ll show you my blog and then we’ll go through and install your own.

I’m going to create a new post with my presentation information. There’s a log-in button down here. [On screen.] This is my interface for managing my blog. The New York Times probably uses the same thing for managing theirs. I’m adding a post. I’m running through this in case you’ve never seen any of this before.

So I’ll enter Class 1. Here’s a place I can write something for you to see. [On screen.] Now I’ll attach my document. I’m not writing any code. I can do things on the Web without writing code. I’ll attach the document. Do you want a PDF or PowerPoint? We’ll do PDF since you can probably all use PDFs.

Now I’ve linked up my presentation to the blog post. I click “publish.” When you go to my website, you should see that post. Make sure you reload the site. This is an easy tool to add information onto your blog pages. If you have any issues, I want to keep blogs to keep track of everyone and your understanding of the materials. This is a way to aggregate our performance together and help each other out, give advice, etc. It’s a powerful tool.

Now I want everyone to install blogs. You have the PowerPoint presentation up on my blog if you want to look at it.

So everyone go to blogger.com. Who’s not familiar with tabs in a Web browser? I’ll go through it anyway. See how I have two sites open on the same browser? It allows us to navigate as many sites as we want in one interface.

So open a new tab in blogger.com. Go to File, New tab. That pops open a second tab. One tab is blank. You can switch between the two by clicking on the headings. Open up a new tab and go to blogger.com.

This is the software we’ll use to create blogs. Is anyone familiar with this already? If you have a Blogger account, create another one for this class so it doesn’t mix with your personal stuff. You’re not required to submit personal information. So if you don’t want to be identified as a blogger, feel free to use data that doesn’t reflect your personal information.

Come up with a username and password. Sign up by clicking “create a blog.” You have to create a Google account to do this.

Student: Can I use my own Google account?

Professor: Sure. If you don’t want to do that, create a new Google account. So everyone create an account. I’m using a fake email address which you can always do if you want. Something@mailinator.com you can always use as a fake email address. Often companies like Google and Microsoft are selling your email data and personal information. They’re in the business of selling that information.

So I often use a fake username and password to access these sites. It’s not really “fake.” I can go to a website called Mailinator.com. It’s a useful site. [On screen.] You can create an email address that’s not your personal email. These should all be posted in the online syllabus.

At mailinator.com, there’s nothing private about it. Anyone can access any email addresses on here. There are an infinite number of email addresses. I can check for my name. No messages for me. I don’t use my name on this site. If I search for “Bob,” there’s probably a fake email address for this. It’s a shared mail resource. So I can use bob@mailinator.com. Any email sent to that address will show up in this space of mailinator.com.

When I create a Blogger account, my email address doesn’t exist. I’ve never used it before. So I’m entering that address at mailinator.com. Then I’ll check that at mailinator.com when they send me the verification email. You should all do this with your own email accounts.

I already have a blog so I don’t actually need to create a new one. Once you filled out the forms, click the “continue” button. Feel free to use fake email addresses or your real one.

On this screen you choose the title of your blog and the URL, which is your address of your blog. It has to be something at blogspot.com. Check to make sure the name is available. Once that’s sorted out, click the “continue” button.

Is everyone at this step? If you need more time, let me know. Now I’ll continue.

They have a couple different templates to choose. Pick one that you like. Click on the one you like. Click “continue.” Now your blog has been created. Click on “start blog.” You can make a first post once you’re through the process. Create a new post.

A post is anything with a title and a description. I’ll enter Post #1. Create something there just to see how it works. Then click “publish.” Once you’ve published, you can visit your blog by clicking “view blog.” Your blog looks something like this. [On screen.] That’s an easy way to create a website. Notice your address at the top is whatever you entered into the URL box.

I’ll check my mailinator address. I enter the name I used to sign up with Google. They sent me a verification email. This service allows me to do that without submitting my real email address. I click that link and it thinks I used a real email addresses. It’s a very handy service.

How many people used mailinator? If you did use that fake email address, it’s easy to forget your email address. Since you’re logging into Blogger a lot, write down the email address and password that you used for this Blogger account.

We should all have email addresses set up now. Has anyone not done that? It’s not a problem, just let me know.

Now I’ll ask you to go to my blog. Keep your blog open in a tab. This is an advantage of tabbing because you can keep several sites open at the same time. My latest post is Class 1 – Web Technologies Presentation. Click the “comments” link. Give me the address of the blog you just created. Copy the address of your blog and post it to my blog so I have a list of everyone’s blogs. You do this by leaving a comment to my post. I’ll use these links to your blogs to keep in touch.

As I refresh this, I should have 16 different blogs. Does anyone need help?

Student: Use the blog URL on the website?

Professor: Yes. If I go to anyone’s blog, up in the window at top is the blog URL. It’s an address. URL and address are synonymous. That’s what I need in the comment section of my blog. Put your name with it so I know whose blog is whose.

After we collect all of these, we’ll use Google Reader that allows us to watch each other’s blogs without checking 16 different blogs every five minutes. This Reader collects the data for us.

Student: I put it in a website. Is that ok? It’s not showing up in the comment. There was a website section.

Professor: You’re Davd?

Student: Yes.

Professor: Your name links to your website. That’s fine.

Student: How long should I wait before I try to re-post? It’s slow.

Professor: Oh, really? We all have the same IP addresses. That’s a networking aspect of the Internet. These computers are all connected to the same wire. So Google is seeing the same number for all of these posts. Just give it a minute or two. It’ll free up. We have nine so far.

While that’s digesting, we can go to google.com/reader. This is the software we’ll use to bring together everyone else’s blogs into one place. Now you don’t have to go to 16 different sites. It’s a Google product that lets you stay in touch with blogs all at the same time. It automatically pulls the data from every blog you enter and put it into one space.

I just want to make sure everyone’s blogs are listed on my site first. We have three more to go. There are 16 people in this class.

We’ll go through one by one of these links. We’ll copy and paste them into Google Reader. If you’re finished with posting, start setting up Google Reader. Go to google.com/reader. Go to subscriptions. At the bottom of the page on the left is “manage subscriptions.” Click that link.

Here is where you decide which blogs you are signing up. Sorry. I brought you to the wrong place. Google.com/reader. Click add subscription. You copy and paste each blog on my blog. They will be entered to your Google reader account. I copy one at a time, each link. I go to Google reader and paste it in the add subscription box. Then click add.

Go through the whole list. At the end you should have 16 blogs in your Google Reader. Actually, there are 17. This is a little tedious, but once we set it up once we won’t have to do it again.

For David Thomas the link is not listed, but you can right click his name and click copy link. It’s the same thing.

Male Student: Scott’s link isn’t working.

Teacher: Let me take a look in a second.

Did you copy his link? Is this the one you are having a problem with? Click his link. Copy it. Paste and put http:// in front of it. It should work. It worked for me fine. Is anyone else having that problem? It looks like it’s working.

Don’t forget to put my blog in. Copy it the same way from the top of the page. Enter [blog address deleted for privacy address deleted for privacy] as my blog.

At the end you should have 17 subscriptions. Is that right?

I think you should have 18. There are sixteen people in the room, 17 comments on the blog and then mine. So there are sixteen blogs, including mine that is 17.

When you think you are done go down to the bottom left of the page and click on manage subscriptions. That should show you how many blogs you are signed up for.

Raise your hand if you are still going. Take your time.

Once we are done and have these set up, each of you can go to google.com reader and see the latest blog everyone has put up.

It’s not showing up?

If you don’t have any new posts, your blog hasn’t had any posts yet.

Raise your hand if you are still going. Ok. Let me know when you are done.

It’s important to remember your Google user name and password. Write it down somewhere so you don’t lose it.

For those of you who are done, we are going to use a text editor called note pad plus plus. You can Google search in the text box. Search for Note Pad ++. The first link is the software we are going to install on these computers.

Click the link. Click the download tab at the top. There is a binary file. There’s a link below. That’s what we want to do. The link with NPP5.44 installer. That’s what we want. It will install the software on our computers.

It says your download will start shortly. Save that file.

We are going to do a lot of downloading and uploading in this class. If you are not familiar with this stuff you will have to get familiar.

Female Student: Which link under all files?

Teacher: The first one. NPP5.44 installer.

Some of it has the version for Mac, etc.

Female Student: Run it or save it?

Teacher: Save it.

Male Student: It said the download is empty.

Male Student: It’s on my desktop.

Teacher: I can’t show the desktop on this screen for some reason. Go to your desktop and I can’t show you how to get there. A button near the start button. The first button to the right. It’s the shortcut to access your desktop.

Another way to go is to click start, click my documents. This box will show up.

Male Student: We can’t access my documents from start.

Teacher: Is everyone having that problem? Instead of clicking my documents click on my computer. Now you should be able to get to the desktop by going to the window that pops up, and click the drop down. At the top is desktop. Click that. The file you downloaded should be on the desktop. This is the file manager for Windows. It shows you the files you have on the computer.

Somewhere there should be the NPP5.44 installer file. Double click it. Go through the installation. Click OK. You don’t have to change any settings.

When you finish it should run Notepad++. Windows comes with Notepad, which is a piece of junk. This is the same idea, but much better. It allows you to edit text files easily. It highlights texts. It understands HTML code and things like that.

Don’t use Notepad as a developer. It adds weird characters where you don’t want them. It doesn’t do any basic functions.

On a Mac BBedit is the standard software. I use Text Wrangler also. I think I have those on the syllabus as well.

If they are not there I will post them for you.

You can do this at home, the same thing we just did. It’s free software. It’s the best text editor for Windows. All of these things we are doing on the computer you can do at home to keep in touch. You have the same access to the software at home.

We are going to install a piece of software to allow us to transfer files from client to server. It’s called winSCP. Google it. We are going to run through the installation of that also. It’s a free file transfer client. When we create files we create them on the client, on these computers here. To run it on the web we need to run it on the server. We need to get the file from our computer here to our class’s web server. WinSCP is the best program available for a PC.

Download and install that like you did for the Notepad++. You can use the beta, which is not yet final, or the second latest version. Beta is not yet fully tested. Beta software is just not yet fully functional. So install 4.1.9. Install the package. Save it. Go to your desktop and run it. The window that pops up shows there aren’t downloads, but you can click “desktop” to access your desktop. Run and install the file. Click through the whole process.

Don’t restart your computer if it asks you that. You don’t need to do that right now.

For the Mac, there’s an equivalent software called cyberduck. It’s a different company but the same idea.

Does everyone have it installed? Raise your hand if you’re still working on it. Ok.

We can close the tabs for Notepad++ and WinSCP once you’ve installed the software. Now let’s transfer some files and get comfortable with all of this. There are a couple things we’ll install, but these are critical. A text editor and file transfer program are very important.

We’ll run WinSCP. I’ll just close down is stuff. In your desktop there should be a shortcut to WinSCP. Or you can go to your Start menu and click “all programs,” and you’ll see WinSCP listed in there. I can’t show that part of my computer screen for some reason. There should be a WinSCP icon that you can run the software. So click the shortcut or go to the Start menu.

The program will pop a window open like this. [On screen.] Quick access to your desktop you can click the Start menu and “my computer” and then click the desktop icon. I’ll be going through this quickly, so stop me if you have problems. Don’t feel afraid to ask me to repeat steps. Once we’re finished with the class, you should know how to get to your desktop, save things, access things. This is an important part of computer literacy.

On the desktop you have a shortcut to WinSCP or go to the Start menu and find it in the list and run it. Then you’ll have a window that looks like what is on the screen. Everyone ready?

Type [server address deleted for privacy]. Don’t use “wd.” Just type in [server address deleted for privacy]. “wd” is just for the blog. Username is [username deleted for security]. Password is “[password deleted for security]” I’ll write that on the screen. [On screen.]

Those are what you’ll need to connect to the web server. So your computers are the clients. The websites live on the server somewhere. That’s where you’ll put all your files. When you’ve edited your files, you transfer them to the server. So you access the server using the username and password. Write this information down so you always have this information.

Once you’ve entered all the information into WinSCP, make sure the file protocol is SHTTP which is secured transfer. That way people can’t intercept our info. Secured transfer makes it more difficult for people to hack into our server. Not all servers support secured transfers, so your own personal server may not be able to access it. Make sure you have the right setting.

Click “login.” That should bring us into the server.

Click “yes.” That’s fine. This is a shared server. So your computer thinks there might be a security issue, but it’s all ok. Just click “Yes.” Does everyone have left and right panes like this on the screen? There are different ways this can be configured.

Student: Mine says “searching for host.”

Professor: That means there was a problem with WinSCP. The host name was probably incorrect. Make sure you’re entering in the data as “[server address deleted for privacy].” Make sure you have the spelling correct for all the information you need to enter.

What this screen shows us is our client machine on the left and all the files on our server on the right. There’s a split pane view. This is how we analyze whether we’ve uploaded or downloaded a file. We can drag something from the server to the client or the client to the server.

Is yours working?

Student: No.

Professor: I’ll come back there. It might just be your computer.

When we drag something from the left to the right — don’t do it right now. I can drag this file over here. When I let go, it copies the file from the client to the server. That’s uploading. Uploading is copying something from the client to the server.

Downloading is when you get something from the server and drag it to the client. When you hear about uploading and downloading, that’s just sending something from the client to the server or receiving something from the server to the client. That’s just what the terms mean. Uploading is to the right. Downloading is to the left.

Double-click to [server address deleted for privacy]. That brings up a list of names. They’re former students. I want you to create folders just like this with your name. Use your first and last name as one word, lower case, no special characters.

Make sure you are clicked somewhere on the right side of the panel. Make sure you’re creating a folder on the server side, not on the client side. Make sure you have clicked somewhere in the right panel. Then go to “files, new, director.” It asks for the folder name. Type your first and last name with no spaces, all lower case.

You should then see your name listed on the right. If you don’t see your name, something went wrong. All the files I’m creating will be in my folder. Whenever you have a question of something your code doesn’t match something I did, you can always go into my folder and grab the original copy. Just don’t modify my copy in my folder. We can access everyone’s files, so there’s a risk of overwriting the files. Try to avoid that.

You can see the files I’ve created over the last two semesters. If you want to see where we’re going, we’ll follow the same basic track as last semester even though we have fewer courses. I will be putting all the files for this course in my folder called Summer 2009.

Now I want you to create your own folder. Within that folder, create a subfolder called Class 1. Click to get into your folder. Go to “files, new folder.” Create a new folder called Class 1. At the end you should have something that looks like this. [On screen.]

Once you’ve done that on the client side (the left side), go to your desktop. You can click C:local disk at the top. Desktop is an option there. Go to your desktop. Make a folder on the left side with the same thing. Use your first and last name, all lower case, no spaces. Have the same folder on the client side AND the server side.

Student: Mine doesn’t show the desktop. It’s stuck on “computer lab documents.”

Professor: Can you get to “my documents”?

Student: It says “computer lab documents.”

Professor: Can you make a new folder? So just make a folder. It doesn’t matter where the files live as long as we know where they are. The name of the folder should be the same as the one you made on the server side. We’re making two identical copies of our files. You want one folder on the client side and one on the server side. We want to reduce the number of things to think about. If we have identical files on both sides, it’ll be easy for us to see which files are on server and which are on client. You could name them differently, but that’s just more complicated.

Student: Why “new directory” versus “new file”?

Professor: Other people use these computers throughout the week, and they could easily overwrite your files. So I do that to keep everything separate. It’s a sanity thing. Just make sure one project isn’t mixed with another project. If you want to look at a file we made tomorrow, you’ll know where to look for it. Inside of the folder you created on the client side, make a Class 1 subfolder just like you did on the server side.

There’ll be the master folder with your first and last name. And in that file, you’ll have the subfolder with Class 1. Once you have that, double-click to get inside the Class 1 folder. My folder has lots of stuff, but yours should be blank. Then make another subfolder called HTMLframe. Have the same named folder on the server, too

Student: htmlframe?

Professor: Yes. Never have capital letters or spaces in your file names. There are three operating systems people deal with on the Web. Most people have Windows or PC versus Macs. Designers usually have Macs. Certain people have Unix machines. So there are three competing operation systems. To keep things consistent, we have to have a standardized way of naming the files. So the easiest way to do that is don’t use any spaces in your file names. You might have problems if you don’t follow this rule.

Inside the HTMLframe folder we are going to create a file. Finally.

Male Student: I got lost. HTMLframe is within class one?

Teacher: Top level is your name. Then class one. Then HTMLframe.

Inside htmlframe we are going to make a file and call it index.html.

Let’s go to Notepad++. The text editor we downloaded. Go to the all programs list. It should be at the bottom right. Run that. It should look like this [On overhead.] Let me know if you have problems getting to this.

Is that difficult to read in the back?

Let’s start with copying exactly from here to here [On overhead.] Ignore the first two lines. Once we do that we will add the top two lines.

This space, the indent, is a tab. It’s handy to use. Indent everything the way that I have. I will be particular about this throughout the course. You have to indent the code the correct way.

Start on line three. Ignore the first two lines. Start on line three. Copy exactly what’s here.

Male Student: Where did you find that?

Teacher: You are creating a new file. You are starting a blank document and write this. I will normally give you copies of my files first. I want you to do this once to get in the habit and get the feel for how to write this. It has to be exactly like this. You have to start being very particular. If you are not particular about grammar and punctuation you are going to have trouble coding. You need the exact characters. This code is not very difficult. There is not a lot here.

Notice that there are matching sets of tags. Remember XHTML is written using tags. That’s what they look like. There’s an html here and a slash html here. Every tag that has the word also has it somewhere else with a slash. There’s the opening html and the closing html. There’s an opening and closing for each thing. Recognize that that’s a fact and make sure everything you have that opens has a matching closing. There are some exceptions to that rule, but for now follow it.

Once you are done with those start typing in these two lines also. They are a little more complicated.

You will only have to do this once. After that we will just copy and paste.

I will scroll over once everyone has that section.

Has everyone got this bottom section? Raise your hand if you still need it.

I’m going to break the second line up onto a second line so you can copy it. It should all be on one line though. It’s ok to have it on multiple lines, as long as you don’t break any quotes. The beginning quote and end quote should all be on the same line.

Also notice that there’s no closing tag for the doctype. These are two special lines that are kind of separate from everything else.

Female Student: Is there a space between quotes?

Teacher: Yes. You can leave a line break in there. That’s fine.

What we are copying here is the basic outline of an HTML document. This will run in a browser and show some text. This is the bare minimum necessary to create something. We are going to see what this looks like in the browser in a second. You are going to want to save this in the folder we created called htmlframe. When we create a new HTML document this is tedious to write. You will get in the habit of copying and pasting it. This is the outline for a basic webpage. You may want to change some text, but the rest is the minimum necessary.

I will give you another minute to copy this, then we will test it out.

This is fine like this. Note that line breaks are not important in HTML code. You can put as many line breaks as you want. It will work the same way.

Female Student: What do we name this file?

Teacher: Index.html. Go to file, save as. Make sure it’s in the correct folder. It’s critical. Call it index.html.

All of our HTML files will have . html at the end of it. You may not see the dot but it’s always there behind the scenes. That makes sure it works the same way on all the operating systems. Remember to use lowercase and no spaces. The dot is a special character to indicate what kind of file it is.

I’m going to bring this up in the browser now.

Did anyone have a problem saving? Make sure you save to the D drive.

Open up the web browser. Get a new tab. Go to file new tab or control T and a shortcut. Go to file open. Find the file you just made. You should get something that looks like that. [on overhead.]Let me know if you don’t get something that looks like that, so we can figure out why.

We went to FireFox. Create a new tab. In the tab we open the file we just created. File, open file. Find on your hard drive the file you created. Click open once you select it.

Everyone has FireFox open? Open the document by going to file, open file. Navigate to where the file is. Open it up. Once we get the hang of navigating files things will go smoother.

Once you have that up there, we are going to go to View. Page source. That should pop open a window, still in FireFox, with the same information you had in Notepad. We know what this looks like because we wrote it. But you can do this on any page on the web.

It’s a good way to copy someone else’s code. If you want to replicate the New York Times website you can do this. Don’t do anything that violates copyrights obviously.

Now we are going to upload this file to the server. You can see the address at the top is file:/// This is a file on our client, not on the Internet. To put them on the web we have to transfer them to the server.

Go to WinSCP. You should have the two folders you have lined up next to each other. You may not see your files in there. You can click the refresh button to update the list of files in case yours isn’t showing up. You should see your file on the left, not on the right.

We are going to drag that file to the right. Drag it and drop it. Then click Copy. That’s we you transfer a file from the client to the server.

Anyone have problems?

Professor: Everyone has it worked out? Now we’ll view the same file on the server. Go back to Firefox. Go to [server address deleted for privacy]/(your name)/class1/htmlframe. Load it up on the screen. For the Internet, you usually type http:// That’s the language that the browser uses to communicate with the server. You don’t need to know that.

Change the green stuff to your own name. Hit the go button and that should bring it up on the server. I have another folder in there. It should look exactly the same. Let’s just make sure the syntax looks just like what I have in the browser bar but with your own name. If anyone has a problem, raise your hand.

We’ll take a ten-minute break. I missed it earlier. That was Helen Sapp [sp?] she has to get checks from everyone. She’ll be in Room 103. So give her a check if you haven’t already. I’m not sure how it works. But helene is expecting checks.

Student: It was on the site when you signed up.

Professor: Is it for the class? I’ve never heard of that before. They must have changed something. She’s in Room 103. We’ll reconvene in ten minutes, at 11:40.

Speaker: Two people didn’t pick up their folders. One other person?

Professor: Leave it here and I’ll take care of it.

Speaker: Have a good day, everyone.

Teacher: The information architect said this has to be the main headline because that’s supposed to attract your attention. We need a picture and a big font. There’s a teaser, it’s not the whole article. Just one line that will get you interested.

An information architect will say, we need a section that indicates the most interesting article on the site. They will also point out that you need the logo and the search engine, etc.

In an agency where you are developing sites, there is someone who has a job just deciding where different parts of the content should go.

What about these areas? [On overhead.] The two sections. They are very similar. It is some kind of template they are using. How do they interact? Do you mouse over?

Male Student: JavaScript.

Teacher: They say this image currently corresponds to an article. When I mouse over a different image it’s a different article. There is an image. There are three items in any box. There is a limit to how much information we are showing. There’s also the category title at the top. Some subsection has a title indicated at the top. This is a common layout of information.

Does this make sense? This is very easy. You know this stuff without thinking about it, but it helps to point out what you are seeing. You want to see how people are doing this on the web now. You want to see the common trends in web development.

You should be aware of what they are. You should be away of how people are displaying information. I will understand this site because I have seen 100 other sites that look like this. I just want the information as quickly as possible.

They put the logo on the top left. They put the title in the top center. They don’t want to re-invent the layout. They don’t want you to struggle navigating the site.

Male Student: There’s a new site of the BBC. There’s a news site.

Teacher: Let’s find another brand.

Male Student: CNN.

Teacher: This doesn’t look that different. The logo is the top left. Search is top right or center. Links are now underneath instead of at the top. There’s a featured piece of content on the site, an upcoming story. That’s more important than the latest top story since this is very easy to pick out on the page because of the color, they are trying to emphasize the topic.

They don’t have to worry about you not understanding the site. You know this is a teaser of some sort.

If you go down, what else do we have? The top story image. The top story title, which was next to the image on BBC, on this page it’s down below.

How many columns are in this layout? There could be many answers, but in general?

Female Student: Two. The gray line separates it.

Teacher: Down here there is more clearly two columns. You have the one on the right that’s a side bar, and the two central columns. The first is subdivided.

If you said this was a three column layout you could make that argument. The design makes it look separated. There’s no strict rule how to talk about these things.

There’s a list of the test news articles. They put that in the middle for some reason. They are giving you maybe twenty of the top news articles. It doesn’t seem to be divided into any category. It’s just a big list.

Here there are subsections. Again, they have the title of the article and a teaser of it. It uses the same template.

On the right, what would you call this stuff? Think of a name. If you had to describe the right of the page what would one word be?

Female Student: Links.

Teacher: It doesn’t seem very important. We hardly looked at it. Some of you may look at the video section, but really you can ignore the whole right column and have a functional news site. This is contextual data. This is the least important section on the page.

The stuff as you go lower and lower on the right is less and less important. This is the standard way to create a site.

I think the videos they put up in the top right. Of all the extra things they don’t really want you to look at, the videos are the most important. People do like videos. Most sites put it in a more common position than this.

Anyone else have another site?

Male Student: Bookshare.com

Teacher: This is a different kind of site. We can move past news sites. They are all the same.

What would be your first impression of the organization of stuff on this website? There’s a clear top navigation. Besides the fact that the logo is again on the top right. There’s a bar of top level categories on the page. If you are going to navigate further in the site these are the high levels of the site.

Sometimes you will see these vertically on the left. These days, they are mostly horizontal across the top.

They put a log in section here. This indicates that they are expecting a large amount of the visitors to be existing members. Otherwise, why is this at the top? It probably means most people are members, or they want you to know you could potentially be a member. That’s important for their business.

There’s also a search function. They have quick links on the right. They are also promoting a membership here. They want you to know you can be a member. You can keep track of them on social networks.

I guess this is the “pitch” for who they are so you sign up. This is all about getting you to sign up, is that accurate? There’s a “sign up today” section. The top is the navigation.

The footer is an important part of every site. Just like the header, the navigation and logo — there’s a footer with links to terms of service or legal documents. It’s a standard thing to stick on the site. This is how many columns?

Student: Two

Professor: It’s obviously two. Column one is the pitch, why you should be interested in the site. Column two is other contextual information that’s not as critical.

Next page? Anyone?

Student: EBay.

Professor: That’s hard!

Student: [Laughs]

Professor: It’s a good example of a site with a LOT of information. There’s a lot of stuff there and they need to make it easy for you to find stuff. The first thing is the logo. Top left right? Almost every site uses top left. They have easy access for logging in or signing up. They put it right at the top. Not as big as the last site we saw it’s more discrete. If you have an account you should have an easy time logging in. The search box is the most used on the site.

They have “top level” categories — they have sections, what links people use the most. They want this to be the most successful application. This is [On screen.] a promotion of a service they’re providing. Is this the add? I’m not sure.

I guess that’s add space [On screen.] This is for new users in case they’re not familiar with eBay. This is promoting products. This is a two column lay out. The larger on the left and smaller on the right. The front page looks like is a big add space as far as I can tell. That makes sense because this is about searching. The home page is where people navigate.

Down below they have a more extensive list of categories. The top level is at the top and the less important items down below.

That’s enough of that! You get the idea right? You understand how to look at the sites. This is not the job of a graphic designer. This is the job of the information architects. You’ll come up with diagrams that look like boxes. One box for each column, one box for the heading. On my blog I have examples of what I’ve made. [On screen.]

Somewhere is a link about information architecture. There’s an example of wire frame. You won’t always see them looking so clean and organized. There’s design elements, an image here for example. I indicated the text is white and background is grey. I deal with architects so I have to make this look nice. It’s really about the boxes and text. You don’t want to put a lot of effort to make this look pretty. This is an example of a standard diagram. You can see I’ve divided it to 3 columns. I’m outlining what the content will look like without going into much detail.

[On screen.]

Ok, so if we formalize the navigation items — search is a big thing. Bear in mind what you can put on your page. Search is one thing. Search goes at the top generally but not always.

Wikipedia is all about search right? You don’t have to follow these rules, you can put the search at the bottom if you want. On the pages inside they have search at the left and middle, not at the top. They moved it to a slightly less standard position. But most people put it at the top right or top center. So search is a big thing.

Logo goes at the top left usually. Log in is usually at the top left or commonly at the top right. People know where to look at it for some reason there.

Top level categories underneath the logos. You’ll see second order categories which is less important. They’re on the left. Sometimes they’re right at the top and not always below.

If you go to NY Times you have an example of horizontal navigation for top things and the left navigation for every category. It’s discrete and out of the way. Everyone knows where that stuff goes.

Go to NYU. Again similar website. Search at the top right. High level navigation is all vertical. They have a list of news article. And then the video at the bottom.

Ok, that’s my quick overview of information architecture. That’s all there is to it.

This can take weeks or months to figure out the structure of the site. What we’ll be doing is first going through the basic aspects of HTML. Then we’ll look at how to restructure pages ourselves. I think it’s a critical issue to know how to create top navigation systems, search boxes, etc.

Let’s go through now … we have 20 minutes until lunch. Let’s go through some HTML.

Questions about this?

So what we’ll do is go back to text editor and back to the index you made now we’ll play around with tags in HTML. First let’s discuss outline. The top indicates this is an XHTML this is part of the HTML language. At the end of the class we’ll go into xtml. If you want to know the tags there’s a link to a dictionary of all the tags. No one ever looks at this. It’s just there — no one needs it you’ll just copy and paste from this. If you copy this to your browser you can do that. It’s just there for really obscure reasons. One day maybe there’s a program that’ll only work from here?

Every document starts with this. This is technical stuff. This is the beginning of the HTML document. So every document opens with HTML which indicates to the browser this is HTML. Every HTML must close. So they have a slash which indicates the closing of the HTML. So far so good?

Every HTML document has two sections. The head and body section. I’ve indented those two things. So head is the next tag. The closing of the head is the next thing. I’ve lined them up so I can see them clearly.

Same with the body. It’s lined up with the ending of the body. So you can see that you closed off the ending. So those two things are required for every HTML document. What you put inside of that is less strict. The HTML, head and body are all necessary for any document. With no content this is the minimal for HTML. The title I think is actually required. So I’m wrong [On screen.] This is the minimum for a valid HTML document. You put the title of your page in there [hello world.] So I’ll put the title. I save this document now. You don’t have to type this yourselves if you don’t want to.

I upload that to the server now. Now I can refresh my page. You see if you can read [On screen.] the title. This is what shows up from the title tag. You change the title tag to change this section which appears at the top of the browser.

In the body I can put whatever I want. There’s no requirement for the body. So I put something in the body and upload and you see the text show up. Now we have the components for an HTML document and the browser knows what to do with it.

But we want to do something more sophisticated right?

I’m using the same thing I put in the title because the most important thing on the page is on HTML. There are other headings called “H2, H3.” I think H6 is the limit. So every time I change the document I’m editing it on the computer here. If I want to see it updated on the web I have to re-upload it to the server, which can be tedious. There are other ways to do this but for now I want you to use this method. H1. is biggest and H2 is smaller all the way up to 6.

I mentioned that CSS was used for styling for headings, subheadings. This decades for me that one heading is bigger than the other which is a default. It makes H1 bigger, and H2 smaller etc. You’ll change these as we go along. But for now we’ll use this.

So if I want to make a paragraph I use a Ptag. This indicates that this is a paragraph. I’ll save that and upload. [On screen.]

The browser has a built in display style for paragraphs. It assumes it should make it smaller. It has a default font that it uses. We haven’t told it which font so it will default to the font it uses.

We have headings and paragraphs. Let’s do the link.

We created another paragraph tag. Inside that paragraph I’m using a link tag which indicates to make a link. They will be taken to the address I put in here.

Let’s see what it looks like. There’s my link [On overhead.] If I click it I go to NYU.edu. This is the basic link.

Male Student: What is HREF?

Teacher: I will get to it.

Let’s do some terminology. These things I’m calling tags. H2 tag means the beginning and ending tags. I’m using one word to indicate both. You can say opening and closing tag. I say H2 to imply that.

This is the tag name. Some tags have attributes. That’s what this is an example of, it’s inside the brackets. First you need the name of the tag. What kind of tag is it? Optionally, you can put in attributes. HREF is one attribute.

Hypertext is a link. A hypertext reference references this page.

Male Student: So the text is the link?

Teacher: Yes. So inside the tag is not in the brackets, but between the opening and closing tags. You can see the opening bracket and closing bracket. Link is not inside the brackets, it’s outside. That’s how it shows up as one word. Anything in the brackets is hidden. They only see what’s outside.

Questions about that?

That shows up as the word link. We know there’s an A tag around that word.

Link tags don’t have to be in a paragraph text, I just did that to keep the page looking clean. If I didn’t put it there it would still work just fine.

Let’s see what that looks like. It’s the same in this case. To be consistent, I want to indicate on my page what’s a paragraph and what’s not a paragraph. I’m keeping the structure semantically intelligent. You can easily see a paragraph and what’s not a paragraph.

After links, the second most important thing is an image. First you find the image you like. Let’s say I want to have a donkey. I will Google search for donkeys. I can right click, save image as. Download it from the server to the client. I want it in the same folder. Everything goes into your own personal folder, always remember where you save things.

This is the same folder where my HTML file is. This is going to be donkey.jpeg. It’s just one format. You need to remember where you saved it and what type of file it is and what you called it. Always called it something with lowercase letters.

Now I will go back and edit my HTML file and say to put an image here. Now we will have something floating there.

We have a tag again. This is an img tag for the word image. It takes at least one attribute. src indicates the source of the image. This has to be in the same folder as the HTML file, otherwise we need to specify what folder to find it in.

If you look at my folder structure, I have index.html and donkey.jpeg in the same folder. Make sure you copy the files over, or you won’t see them. The image doesn’t exist on the server yet. Drag them over. You always want to make sure that your client and server look identical.

Refresh our page. Now you will see, down below, the image. That’s because I put the img tag.

This code will all be up on the server after I’m done. Don’t rush to copy it all down. But follow along as much as you can.

Female Student: You can close that with just a slash?

Teacher: I mentioned that every opening tag needs a closing. There are some exceptions.

This slash indicates closing, but it’s in the same bracket. It’s an internal closing. You are never going to put a word in an image. It’s a self contained unit. There won’t be anything inside it. Put a space and slash, that indicates closing.

You should get in the habit, when writing image tags, of only having one tag, but with the internal closing. That will not necessarily work for paragraph. A paragraph like this would indicate a paragraph with nothing in it, which is pointless.

Most websites consist of both tags. These are the core parts.

Let’s go through a few more tags. Let’s say I wanted another paragraph. I’m going to make a paragraph with line breaks just to show you how to do line breaks. Sounds easy.

I entered. It doesn’t show as line breaks. You need to use a tag to indicate the line break. The HTML doesn’t differentiate. It treats it as a space. To make it look like there is a line break you need a special tag. That’s a “br” tag.

Am I going too fast?

That’s a line break. It will tell the browser you really need a line break and didn’t accidently hit return.

One thing to note, these paragraph tags have implicit line breaks after them which are bigger than the line breaks you get with a “br” tag. These are default. It’s a double or triple line break. It’s like a margin from one paragraph to the next.

Let’s go through a list of things. Let’s say I want a list of students in a class. There’s a way to create a special bullet pointed list or numbered list. That’s using a tag called “ol” which is ordered list, which is a list of numbers. Or “ul” for unordered list, which is just bulleted.

Inside of “ol” will go “li.”

[Phone ringing]

Male Student: Sorry.

Teacher: An ordered list has a start and an end. Each LI is an element in the list. Everything inside the LI will show up. Now I’m going to show you what that looks like.

I have to now re-upload it to the server. Drag it and drop it on the other side. Refresh the browser. We will go through this process one hundred times.

Now you see the list. There’s a numbered list of items. [On overhead.] Let me put a bunch of break tags down so I can scroll it. The numbers are only there because we said this is an ordered list, an OL tag. Not a UL which would have bullet points.

Let’s make a UL. I’m copying and pasting it and changing OL to UL. Now the numbers will be replaced by bullet points. The LI tags stay the same. Now you see the unordered list.

With style sheets you can make an OL have bullet points and a UL have numbers. They are interchangeable. You can use the style guide to say which you want to use.

Running through the list of tags. A big one that many of you may know is a table. Let’s say you have a table of data, like an Excel chart, you would use a table for that. They have rows and columns. Rows are indicated with TR. Let’s say we need two rows. Now I have an empty table with three rows. These are the beginnings and endings of each row.

See how I have indented everything? That put the rows inside the table tag. If you don’t indent properly you will be overcome with tags.

Within any given row you can have cells, just like an Excel sheet. To have a heading you need a TH tag. That means the heading of that column.

So I have a heading 2. [On screen.] So this table will have two columns. The second row has data which is TD (table data).

I’m indicating which columns are which. This is going to be row 1 and copy that to make another row. This is row 2, column 1 and row 2, column 2. This looks hard now I think with the table. I’m keeping track of which row is which. It’s easy to see because it’s indicated. The columns within is when it’s harder.

[On screen.] You will get the hang of it.

So I’ll upload that to the server. We have a tabular layout now. So there’s a heading and the default browser made the headings bold. They’re lined up so the columns are under the proper headings. That’s a table.

We won’t make a lot of tables in this class. Unless you have a data chart you won’t use many tables. Maybe you’ve created websites in the past, they used to make tables to make column layouts. That’s bad coding for today’s standards. It’s uncommon to see that today for lay out. We’ll use other ways to do that that’s more flexible. This is an old fashioned way to make two columns. If you did that in the past we won’t allow you to do that now.

Sometimes you may want to show text that looks pre-formatted text like an address. It’s like paragraph but it indicates that line breaks should be maintained. If I put in “NYU School of Continuing and Professional Studies “[On screen.]

Remember I said line breaks need a BR tag? Here I’m in pre-tag I can use regular line breaks and it’ll show up on the web. Pre indicates pre formated. Every space will show up on the web browser.

Let’s see what that looks like. It will be default tab it in because I have tabs in the code. It maintained the tab and read them and literally put the code on the page. So the tab has the line breaks. The browser has different font for the PRE. You can change that but that’s the default for pretag. You don’t see them used often. People will use pretags for addresses. Try to use the tags for what they’re made for.

That’s the pre tag. Let’s say you want to make something stick out from the paragraph. If I have a paragraph. [On screen.] I’ll break this up into 2 lines. We know line breaks don’t show up on the bowser unless it’s a pre tag.

I’ll highlight the words “very important” with a tag called “strong.” So strong says to the browser that the words are important. It says “make them look more important than the rest” which means it’ll show up bold. So the browser will make it bold to look more important. You can change it with style sheets. But it’s not the default.

Student: What’s the difference between that and bold type?

Professor: There’s no bold type. Because we don’t put design information in it it’s about design intensions. We replaced bold with strong. It’s up to you in style choice.

You see the browser made it bold. So a few more things and we’re done with the HTML effects. This is easy? This is the easy part I think. We’ll get into layout and structure. But the tag list is limited. Let’s say we want a search box. It won’t work. But we’ll get it up there for now. That’s a form (search box). So form tag surrounds any form like controls like select lists for example.

The first type will be “user name.” This is a bit more complicated, not too much. Can you read that? The font is smaller. So this is a label.

I’ll show you what it looks like in the browser. The user name sits next to the search box. That’s because I indicated the word “username” is a label. The input box itself is generated because of the input tag. The attributes after the tag are inside the brackets. It takes the type, or text in this case. It’s a one line bit of text.

ID we’ll get to tomorrow when we get to Java Script. For now it’s an ID. I call it username but it could be any other word. Name should be the same thing as ID. “Name” is an older ID. It doesn’t matter which word you use as long as you’re consistent.

The “for” will indicate the username.

So remember that these three things should be the same word. I can use any word as long as it’s the same. I can call it T1 and as long as it’s the same in all three places it’ll be fine. That’s a better example because you won’t confuse the words.

These are internal things that make the browser work.

I’ll turn on the browser. The label tag has only one purpose. If I click user name it puts the cursor in the label box. If I didn’t put the label tag there it would be the same but it wouldn’t put the cursor inside when I clicked on it. You can skip the label tag if you want but it’s a nice feature.

I’ll make another one … [On screen.]

So this is a label for “password field.” This is a different ID. The password label is for [On screen.] These are the same. Just change the words for the different elements. So when I click on username it puts the cursor there. When I click on password it puts the cursor on the password. That’s the label tag.

Student: Question … T1 and T2 in HTML is that a term or random term.

Professor: That’s my words for identifier. I gave them different names to differentiate them. The attribute will have the same syntax. Something equals something else in quotes. Some have special meaning. For ID and name it’s up to you.

This is a special word “text” so the browser knows what to do to make it one line of text. If I change “text” to “Password” the browser will know to make it hidden so you don’t see my password. Now when I enter username it looks like regular text. But the password is now hidden because I used the “text = password.” This makes plain text and the other makes the password hidden.

Let’s say you want to make a drop down list. That’s called “Select.” Inside the select tag. When I say inside I mean inside the open/close. Inside the select tag is option tag. So this is a drop down list with three options. This is how you make a drop down list. You can use select tag and you’ll have options. The text you write in options will be the drop down list.

Let’s see what that looks like. I put “/select” instead of “/option.” That should be opening and closing option. This highlights for me. So it’s an easy way to make sure you properly open and close.

Student: I was wondering how you did that.

Professor: Even for the one that doesn’t have the closing tag it’ll highlight it for you. For the image tag it highlights the closing part to tell you you did code properly.

There’s line break and input. So upload that. And refresh. Now when I click the drop down list the first option is by default selected. I can change that by clicking other options.

Student: If you want a blank first option you leave it blank?

Professor: Yes. Let’s do that. So yes. You have a blank option. [On screen.] Or I can put “select” as instructions to the user. Again it’s another option.

Another type of form element you have would be a radio type. Just like with the text option you want to give it an ID and an name. We are also going to put a label on this one. Label for = then put the same word.

I skipped our lunch break. Let me finish this, then we will take our break.

We have a radio button. The type just equals something different. It’s the same tag, just different subvarieties.

If I go to the browser, after uploading that to the server, you can see that I have a radio button. I can click it will label or the button itself.

I’m going to make a couple of other radio buttons because I want to show you their function. This is going to be R2. It’s the same exact code, but I changed the word R1 to the word R2. We will now have two radio buttons.

If I click R1 and then click R2 you can see they they are both selected. A lot of times radio buttons are used to select one or the other. To do that you give them the same name. Let’s say I call this one R1 and just change the name. Then I re-upload. Now if I click R2, R1 gets deselected. Just by giving them the same name only one can be selected at a time. It’s just the name value in this case.

The ID will always be a unique identifier. Any element with the ID R2 will be the only one. Later on that would throw off the JavaScript code. It doesn’t matter for now. IDs should always be unique. They should only have the same name if you want it to be part of the same option.

I’m just going to throw together one with different names so you can see the difference.

Here you have a case of mutually exclusive radio buttons and here you have a case of not mutually exclusive buttons.

I’m almost done going through all the different HTML elements. Let me finish that before we take our lunch break, unless anyone really objects.

Another important element, as far as forms go, is the text area. It’s one word, textarea. This is used for multi line texts. The textarea input is otherwise very similar to input.

There’s the textarea tag, again. This is one thing to be wary of with text areas. See how the formatting is weird? Think of it as the pre-tag. If you don’t want tabs or line breaks you need to get rid of them in your code. Every line break and tab will show up in that box.

Now you see it more like how you would want it on a browser.

It’s ok to indent the tag itself, but anything inside the tag should not be indented.

One more form element I want to cover. The check box. Just like we have radio buttons where you select either or of a set of options, the check box can select many options.

The idea name can be the same here. It’s only radio buttons that you want different IDs.

Let’s put a label next to it. I am going to make two check boxes with different name tags. Remember to try to be consistent. The label, ID and name should all match. They should be different for each check box. You can see consistency. There are slight variations.

I’m going to upload that to the server. Refresh it. Now you have two check boxes. Because we have the label, you can click on the label itself or the check box.

That’s all the form elements. This is like the vocabulary you have from reading forms. These are the options you can use. You can use any or all of these options.

One more that I missed. The submit button. There are three variations on a button. Just like the other kinds we’ve seen, this is another version of input tag. There’s submit, which will send the data you entered. The reset button will clear the elements inside the form. The button will do nothing, unless you are in JavaScript or some other technology and tell it to do something.

Let’s look at that. If I submit the form you will see that FireFox will load the page again. It submits the data to the server. It makes a request to the server.

To reset the form click reset.

Do nothing will do nothing.

The data you did enter will be removed if you click the reset button.

Male Student: Can you go back so I can see the lines?

Teacher: There’s one last thing I want to show you before we go to lunch. These are all of the major tags you will ever see on a webpage. There’s one more that’s not as commonly used, but it might be interesting.

The iframe tag. This loads one webpage inside of another webpage. It has one attribute, called source, that brings the other webpage in. This will show you the NYU site inside our page. You need a closing tag on iframe.

This will hopefully load up another site within our site. Let me show you that. See how the little window down here has the NYU site? Styling will make it bigger or smaller, give it a boarder, etc. The idea is that you put one page within another page.

That’s it for our HTML tutorial. That’s really all there is to it. I’m sure some details of these things you will get wrong a few times, but once you get the hang of it you see they are not that complicated as long as you stick with certain rules.

That’s it for our pre-lunch talk. Take an hour break. Come back at 2:17.

Any questions before you go?

Don’t leave valuables in the room. The door will be open.

[lunch break]

I’ll get started again … so I just posted to the blog. Wd. [On screen.] There’s just more links. There’s a link to the first link up there as well as the outline of the HTML document. There are tabs there too. These are posts from last semester so they’re thorough for what the tabs do. Go through this at some point, it’ll be helpful. Any questions so far? Confident? No? Let me know if you have questions.

We’ll take a break from coding for now.

First I want to do a mock example of how you would think about the visual aspects of a website. We’re just getting warmed up, it’s the first class. What’s a website you want to make? What’s the requirements? You will diagram how you would information architecture that. It’s good to conceptualize so start getting in the habit of thinking of these things. Let’s brainstorm and I’ll make a list and you’ll diagram it. Then we’ll get back into coding.

Anyone have an idea of a website you want to make? Something not TOO complicated. Last semester we did an artist website.

Student: Musician?

[Class laughing.]

Professor: Other ideas.

Good idea! Ok. So let’s think about that. Travel diary. You have a list of all the places you’ve been with maps and photos. Ok. That sounds challenging. It’s not an artist website. So let’s do that.

Let’s start. First I’ll bring up a document to outline what we want the site to do. Microsoft Word. Let’s come up with requirements. [On screen.] Requirements for Travel Let’s think of a title. Anyone? Travel diary?

[Class laughing.]

It doesn’t have to be the most creative thing. Ok. What do you want. Pretend you’re the client.

Student: List of locations.

Professor: Ok.

Student: List of …

Professor: Let’s do them separately first.

Map of places you’ve been [On screen.] This is for ONE person right? So where you’ve been right?

Student: List of places then you can have a Java thing that …

Professor: You’re talking about design? That’s what this is about. We’re breaking it down

Student: Section for photos

Professor: Ok. So photos are organized by place? So I first get to a place and then see the photos of that place?Or are the photos on the home page? Ok, so we’ll make it photos of each place.

Anything else?

Student: Details

Professor: Diary details. Is that the same thing. Is the detail the same thing as the diary.

Student: The text of what happened in each place. The diary is attached to the map

Student: Diary then a recommend list of experiences or additional elements.

Professor: Ok. Everyone agree? Dairy then recommendations. This is a daily diary. [On screen.]

List are recommendations? Or? What else?

Student: Get like a model. So if we get a lot of people looking at the site to set up the framework for advertising.

Professor: So you want to make money on the site eventually and you want to put in framework for ads. You want ads from Google or targeted to locations or restaurants? How do you see it?

Student: Photos. Every time we go to that country you list information so if someone goes there they know of a restaurant to go to.

Professor: Like an affiliate service? How would you get a cut?

[Class laughing.]

The way some people do it is if you have a link to Amazon — Amazon tracks who links them and they discount you. I don’t think that would work for restaurants. They don’t have that equipment {tracking}. You can have ads for your destination. You can sell ads to the resort or something like that.

Let’s say “ad space for a resort ” You can sell EACH individual page. Anything else?

Student: Link to currency converter or weather ….

Professor: One second. [On screen.] Currency converter place. Link to weather. [On screen.]

So you want them to comment on Face Book not the site? Well let’s keep it about this site for now. That’s a little too confusing. In real life you want to do that. So comments. For each photo? Or the whole album? You can leave comments on each photo or the whole album. But not? Vote — whole album? Each photo? Both? On particular photos. You want comment board for each photo. Ok, what else?

Student: Comment for each log or diary entry?

Professor: That makes sense. Agree?

Ok. Other ideas? That’s it? Would you be interested in this site?

Student: I want to have an email everytime someone writes on it like FaceBook.

Professor: As the owner of the site? Yes. That’s something we wouldn’t put in the wire frame.

Student: User reviews going to the comment board? if other people want to share too?

Professor: Up to you

Student: Display it separately.

Professor: I would see this person wrote about something I write my own review.

Student: To a different resort.

Professor: I would think that’s for comments. You can have a discussion board …

Student: Like a forum

Professor: It’s complicated. We want to limit complexity for now. Other things? What about this person. They need a profile? Something about what they’re interested in? Or is this for family and friends? You decide.

Student: If you want ad space you would target at more than your family.

Professor: It’s an optimistic site. But there are people that do this so …. “about me.”

Ok? We have contact information?

Student: Video?

Professor: What about combining that? Photos AND video, they go together.

Student: I don’t know if this goes here or address it individually. Under recommendations you can put shopping.

Professor: That makes sense. Any hierarchical organization you want to figure out right away. So recommendations broken down by category.

Ok. Anything else? We have maps, photos, diary, comments for each diary entry, recommendations, currency and weather. Each thing is about individual places. So it’s about figuring out where they’re looking at then displaying the options right? So that’s YOUR job.

We have the requirements. That’s the assignment. To diagram what the page would look like. Wire frame diagram. These are the requirements. Let’s figure out how to diagram. On the computers are Microsoft Visio [sp?] do you see that in the start menu? That’s the main tool on the PC to create diagrams of things.

On a MAC there’s a tool called Omnigrafille [sp?] I mentioned it on the blog post. Information architecture [On screen.] VIsi is more powerful but is confusing. Designers don’t like it.

So what we’ll do is — you should see a screen like this when you upload Visio. So we’ll make a general diagram. So what Visio does is give you shapes here [On screen.] And you can drag one on the page and draw. First we’ll do a horizontal lay out. We’ll switch to landscape. File, page set up, landscape. That gives you more width and it’s easier to use. First if I were to make a wire frame diagram. We have a post on the website. It’ll look something like this. Lots of boxes of texts. Nothing too fancy.

So first is to grab a rectangle and drag it to the page. Put it starting at top left. We won’t worry about things looking nice. We just drag the rectangle with some padding so if things go wrong we can fix it. This is called the “Page.” It’s the outline. So we have a blank canvas now. If I want a logo in the top left I draw another diagram and type “Logo.” [On screen.] You can click on any boxes to change font, texture, color. I can change font by going to this area like in Microsoft Word. I’ll make it bigger.

The default settings are smaller than you usually want. But you can make it look very nice. So I put the word “logo” in there so my client would know where it would be. We can discuss that and have a visual reference to see if the design would work. So if I want the title I would draw a box and stretch it out and type “Title.” It doesn’t matter what terminology. You want to probably change the font.

So I won’t make a big website. I’m just showing how you would approach this. I want a left navigation.

Student: I type in box and it zooms in and out.

Professor: That’s Visio. There’s nothing you can do. If I type in this it’ll zoom in. Once I’m done I can click off the box and it’ll undo it. You can’t override that. This is why people don’t like Visio. I use Visio for all my diagrams. It does some weird things I agree. But when you get the hang of it it’s nice.

It’s a relatively expensive software. It doesn’t come with basic installation. It has many negatives for it. Many people use power point that comes with Office. And you can do diagrams there. Some people just write it on paper. It’s just boxes and text. Using this program is more for the client and for your personal organization.

Ok. This is how I would start. I would start at a high level. I draw the box for the main content. I would line them up as much as possible. From here, I would get more granule. This is the starting point. I would think “what goes in the left hand? What links are in the navigation? What links do I want? Where will the links go? Where are the search boxes? Are there images?” Remember the BBC had images. Every detail I would place in the diagram.

Do I want the heading of an article next to that? Probably, so I would draw it in. You start to get granular with these things. [On screen.]

This is article, image. So I would add more and more detail until I have the exact representation of everything going on the page. The idea that there IS an article is what I want on this paper. There needs to be a place for the title.

Forget what these things are or the image content for now. Then you would say ” I want to link to … the homepage.” Every detail is now going in the page in the diagram. That’s what I want you to do for this site. I don’t want you to make it look pretty. I don’t care about the font color, box color, etc. The important part is that you represent all the information in a diagram. So I want you to spend 2 hours working on this. So we may end class on this. If we have time in the end I’ll do some more work. Questions?

Student: Should we have photo sections?

Professor: Yep. Every page. Do it for ONE location. Don’t do 10 different locations. Let’s say for example each location has the same template.

So I’ll post the requirements to the blog and it’ll have that information so you have that reference. Raise your hand if you need attention. I’m happy to come around and help out.

[Students working.]

Professor: I called about the credit services to clear my credit.

[Class laughing.]

That list of requirements is now up on the blog.

How’s everyone doing? Is it going ok?

I can let you work on this for an hour and finish class this way or go into more information. Raise your hand if you feel like you are doing well and want to move on to something else. Raise your hand if you want to work on this. We will do more lecture.

Let’s get into CSS.

I’m going to post what I have done to my blog. Do the same with what you have done so far. I want you to see what you have done with this assignment before we do anything else.

Go to File on your Visio. Save As. I’m not sure about the easiest way to do this. Hold on a second. In Visio there’s no easy way to save.

Go to Save As. This is only going to save one page at a time. You will have to go through each page and do this. Save as Type, select PNG. It should be there somewhere. Portable network and graphics. It’s a standard format. The same way we did jpeg earlier.

Call it whatever the page name is. This is the homepage for me. I will make it home.png. That’s just for this page. I have several pages so I have to do the same step for each one. Make sure you select png.

This is my location page so I name it location.png.

Male Student: Where do we save it to make sure it’s there tomorrow too?

Teacher: That’s a good question. I can’t guarantee that anything will be here tomorrow. I know they wipe things out every night. I believe some folders are secure and don’t get wiped out. Everything we do either store on a flash drive, a server or email it to yourself. Before you leave the room today back this up somehow. Don’t just leave it on the computer expecting it to be here tomorrow.

Go through the pages you have made and save them as “png”s.

Female Student: Do we create a new folder?

Teacher: You might want to. That might be a good idea.

Once you have all of those images saved in a folder I want you to upload them into a post on your blog. An advantage to having a class with many people you can see different techniques. We can keep track of each other’s work. You can see what you do and don’t like in other people’s work.

I’m going to post mine in my blog. If you have trouble posting your work just let me know and I will come around.

Remember we have these blogs that we set up on Blogger. You have to go to your Blogger account and post your work there.

In Blogger you can click the icon here to add an image in your blog post. The little blue icon with the landscape in the background. It will ask you to locate the file. Click browse to find the file you want, the image file. You can choose the layout, if it sits to the let or right of the text. Click accept the terms of service then upload the image. That will place the image in your blog post.

You can preview that.

First of all you have exported your images and saved it on your hard drive. You go to your Blogger account. You add an image, the blue landscape icon. Click the browse button to find the image you are looking for. Select the image you want to add. Then upload the image.

If you have something selected, like just this box, it will only export that one thing. Make sure you click off the page first.

People dislike Visio for this very reason. It has a lot of quirks. If you can’t export all the images at once click off the page.

With Omnigraph, the Mac software, you can export all the images.

Female Student: It adds the pictures on top right?

Teacher: I’m not sure what you mean. Like that? [On overhead.]

Female Student: I’m adding them to the same posting.

Teacher: I want one blog post with all the images in it. One by one you import them. They should line up one by one either on top of each other or side by side.

Female Student: Can you control where they go?

Teacher: I think you can drag them.

Male Student: I already lost my Blogger password. Do I use the Mailinator address?

Teacher: If that’s how you signed up for your blog? Then that’s what you use.

After you clicked publish? You want to change something?

I posted my wireframe. It’s not the most beautiful one but it got your mind working about how to lay out a site.

Is everyone doing ok uploading your photos?

Everyone doing ok? I’ll just give you a minute to finish that.

We have about a half hour to get into cascade style sheets just a little bit in preparation for tomorrow.

Who’s still working on exporting? Another minute or two then we will move on.

Do people have questions about anything so far?

Female Student: Should we upload to the server?

Teacher: You need a backup of some sort so either send it to yourself in an email or put it on the server.

Female Student: Is the email better?

Teacher: It’s fine if you want to put it on the server, we have plenty of space.

Any other questions about anything so far?

For those of you who are waiting, let’s get Notepad++ opened up again. Re-familiarize yourself with the WinSCP. Make a new HTML file in there.

I’m going to make a new folder called CSS basics. I told you not to use special characters in your file names. Underscore is actually ok. When I want to put a multi word file together I use underscore. This is going to be CSS_basics. This is a new folder in my class 1 folder. In this folder I will save a file called index.html.

I just copied and pasted the outline of an HTML document from another file. I recommend you get familiar with doing that. I’m going to delete everything in that copied HTML. This is my blank document for this example [On overhead.]

We are going to talk about how to use style sheets to change the design of your XHTML tags. Remember that we have this idea that headings, by default, show up black with New Roman font. Each heading gets smaller from there. Paragraphs have 12 point font. We use CSS to adjust those default settings.

First let’s put something on our page. Let’s put a heading in there. And let’s put a paragraph.

Male Student: Are we using the same NotePad++ file from before?

Teacher: No. We created a new file. It lived in a folder called CSS_basics.

Keep a blank document of the basic tags somewhere so you don’t have to keep rewriting it and can just copy and paste it from that document. Store something that has nothing in the body. It will be the same frame we use in every HTML document. I call it the HTML frame.

Save this into css_basics. Save the file name as index.html.

Put a heading in there and a paragraph. We are going to upload that into the server. We will go up a level from where we were. I’m going to upload that whole folder, CSS basics, into the server. In the class 1 folder, on both the server and client, I want the CSS folder with the index file in it.

Now I’m going to access it through the web browser. Just like we had the other file up, we are going to point to the new file. Let me put it up on the screen. Your name goes in the section where it says “your name.” That’s what you lit up in the web browser.

If you have uploaded these files to the right place you should see that file show up in the browser.

Following along with me is the most important thing. I will let you know when it’s necessary to copy and pick up. It’s ok if you just watch and see what I’m doing right now. I don’t want everyone to get out of sync because of the uploading and downloading, it’s not critical.

In this file I will create a new tag we haven’t seen before. It’s a link tag. I’m going to load in a style sheet. Here’s my XHTML document and here is the pointer for the style sheet.

I’m going to break it up onto multiple lines so you can see it.

You can have it on one line, you can break it up, it doesn’t matter as far as HTML is concerned. You can see it’s a tag name, named link. There are three attributes. REL, which is what is the relationship. TYPE indicates what type of file it is. There’s a particular type of file called type/causes. HREF is the hypertext reference. We saw this before in the link tag. This is a link pointing to another file.

My blog is a good place to look this information up.

That is going to tell the browser. The browser will read the document when we load it. The browser looks at the code, when it hits this line they know we want it to look for a style sheet. It’s going to look for style.css. We need to create a file called style.css that has the style sheet.

Make a new file. Save it as style.css in the same folder. This is going to be a blank file for now. The only content we have on this page is a heading and a paragraph. We are going to change the color of the text in the heading, and we are going to change the font of the paragraph.

This is CSS language now. It’s pretty simple also. For H1 tags, bracket, give them a color, green. This is CSS code saying for every single H1 tag on the page, it gets the color green. That’s the font color.

For every paragraph, let’s give it a background color.

These are two style sheet rules. One for H1 tags and one for P1 tags. These have to be XHTML tag names. They have to be identical to the tag names we want to create the style for.

It’s ok to have it on one line like that. Perfectly fine. It’s the same with HTML.

But don’t do that in this class, unless you really have a reason for doing that like compressing your file size or something.

This should, theoretically, make the heading green and the background color of the paragraph pink. Let’s try that. We have to re-upload all of that stuff to the server. The CSS basics file. Now our client and our server are in sync again. Now refresh the page.

There it is [On overhead.]

That was really done by a simple thing. Remember the first thing we did was tell the XHTML code where to find the style sheet. In that file we tell it what to do with the different text.

There are many different properties with each tag change. Background color. Font style. Font size. There’s a huge list.

Let’s do some more and play around with CSS a little more.

Let’s say I have another heading down below that’s also a paragraph. We don’t want it to be pink, we want it to be blue. The way I showed you now [On overhead.] this applies to all paragraphs.

Let’s make another paragraph. Let’s see how we can make it different. It just has a different bit of text inside this paragraph. Let’s upload that to the server. See my second paragraph is now pink because we made the rule that all paragraphs are pink. I want to change this one paragraph.

Actually, let’s make a third paragraph and leave those two as pink. We are going to give this paragraph an ID inside the P tag. ID equals P3. It’s just the word I’m choosing. Any element can have an ID, you name it what you want. This is so I can access this paragraph separately. No two elements should ever have the same idea because you won’t be able to access them individually.

In my CSS code I will make a rule that applies only to paragraph tags that have an ID. P. Pound sign. Let’s give it a background color of blue.

That was the rule for paragraphs in general. This is a rule for only the paragraph that has an ID of P3. That’s what the pound sign means.

Let’s re-upload that. That third paragraph is now blue.

Questions so far?

Male Student: The CSS code is on a separate NotePad++?

Teacher: It’s a separate file. These are files. This is one text file. That’s another text file. We link to the CSS file from the HTML file with this link tag. It tells the browser to look for a style sheet file called style.css. When the browser loads this page we say go to this HTML page first. It sees the tag for the style sheet and loads that as well.

Male Student: How do you identify paragraph three again?

Teacher: In the XHTML we have to somehow mark paragraph three as being different. We give it the special attribute of P3. Any of them can have an ID. It’s a unique identifier. We can individually address this particular tag.

Other questions?

Female Student: Can you go back to the other file?

Teacher: These will all be on the server, if you feel you are left behind you can download it. Just go through my folder.

We are going to do something different now. There are two concepts that are related but different. The ID concept you just saw. You individually address one particular type of item.

There’s also the idea of a class. You can address not just one, but a set of tags.

I’m going to make a bunch of other paragraphs now. I’m going to make another heading just to break up the page a bit.

We have another heading saying these are now paragraphs that are going to use classes. I’m going to have three paragraphs again. Let’s make a few more. I have six paragraphs all together.

Let’s say I want to have an even/odd system. The even paragraphs have one style, the odd paragraphs have another.

I’m going to upload this to the server so we have a baseline for what this looks like right now. They are all pink. We have a style sheet saying all paragraphs are pink. So far so good?

I want to make the odd paragraphs yellow and the even paragraphs red. You know that I can attach an ID to each of these saying ID equals P1, P2, P3, etc. and give individual styles for each. But there’s an easier way, that’s classes. I can say class equals odd and give all the odd paragraphs a class equals odd tag. All the even paragraphs get class equals even.

Instead of using IDs I’m using classes to change the styles of a bunch of different elements at once.

I’m going to go to the style sheet and say all odd paragraphs have a background color of yellow and all even paragraphs have a background color of red. P dot odd have a background color of yellow. P dot even have a background color of red.

Remember, with the pound sign you tell CSS to apply the style to something with a specific ID. With the dot notation you say to only apply the style to the paragraphs with the class of equal or odd. Those can be more than one element.

Does this make sense? We override turning the paragraphs pink because we attached classes to it.

Our HTML has only changed in the sense that we attached a new attribute to certain paragraphs. The difference between the ID and the class is that IDs can only change a single element, classes can be used repeatedly on many elements.

Questions?

Female Student: Something unrelated, in my NotePad++ instead of having the cursor like that, it’s going under each of the things and it doesn’t let me insert anything.

Teacher: Let me see.

I’m going to quit there for today. Any questions about anything so far? We covered one and a half courses of material in one day.

Female Student: Can you do the last part again, starting at H2?

Teacher: In this document?

Female Student: Yes.

Teacher: We covered all the basic HTML tags. How you write them and what they look like on the screen. We covered the general structure of an HTML document. We started the basics of CSS. We also talked about information architect.

There’s a great website that we will use as our on line book for these technologies, HTML and CSS. It has HTML and XHTML. These two sections are very good introductions to HTML and go over what we did in more detail. Their CSS section is excellent. If you want to check those out tonight or at any point while I’m talking feel free.

This is our textbook [On overhead.] for this part of the class. We will use different resources for the JavaScript.

This is linked from my blog. There is a lot there. Be sure to check those out either during class or at home.

That’s it for today. Hopefully not too bad.

Male Student: Since we covered more than one class what should I read for tomorrow?

Teacher: We are still doing CSS for tomorrow. Are you looking in the syllabus?

Male Student: Yes.

Teacher: We just about combined class 1 and class 2. So I guess check out class 3. On the syllabus you will see links to the tutorials.

Tomorrow we will be in what I wrote as class 3. If you want to get a preview go through the tutorials of CSS.

That’s it.