Words of a Part-Time Professor on the First Day of Class as Transcribed by a Hearing-Impaired Student’s Personal Transcriptionist

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.