 Welcome to Computer Science E1. My name is David Malin, and this is Lecture 10, Website Development. Unfortunately, it took us 10 lectures to realize that I am not, in fact, qualified to teach this course. You will recall, perhaps, from Lecture 1 that we introduced this course in its entire slate of lectures. With this photos here, suppose it excerpt from a popular mechanics magazine in 1954 that was a mock-up, we said, of what scientists thought the home computer might look like 50 years thereafter. Well, I got a little visit from Ray Diaz this weekend, and he handed me the Manila envelope, unmarked with a bit of paperwork in it. And of course, when you meet some guy late night on a bridge and he hands you an unmarked envelope, this is never good news, right? Well, the news that he handed us is that it turns out to be a hoax. In fact, what you're looking at is a photo that was submitted to a fake photo contest, which ended up being circulated by email and the internet and other venues for the past year or two. In my defense, I will say that people far grander and smarter than I have fallen for this, and in fact, I did my own research in my own defense. We have an article here from New York City, December. Those coworkers who constantly clutter your inbox with email forwards aren't the only ones who have fallen for recent internet hoax involving a fictitious 1954 popular mechanics article. It appears two savvy software CEOs have also been taken in by the Photoshop handiwork of a Danish computer company employee. A manipulated photo of a mock submarine console passed off as a 1950s projection of the 2004 home computer was even used by Sun Microsystem's chief executive officer, Scott McNeely in his Oracle Open World keynote speech yesterday in San Francisco to illustrate how rapidly technology improves. In this past fall, Lotus founder Mitch Kapoor posted the image on his blog before later posting a correction. In fact, the photo on which this mockup is based is this, which is a photograph of the inside of a mockup of a submarine from the Smithsonian Institute. Now, I wish I could say that this is a good defense, but this news release of the fact that this was a hoax was published about 356 days ago. So even that's not a very good defense. So my props to Ray for diagnosing this and for discreetly putting me to shame here so that I could take the blame myself. But we have been duped, I have been duped, I have duped all of you. And so sadly, those two security lectures in which I pointed my finger all too many times not believing internet forwards and just deleting things you receive well it appears that I don't even practice what I preach. But we will try to forgive, we will try to forget, and we will move on tonight to an incredibly exciting lecture, all of which will, none of which will be based on emails I have received. Tonight, we will teach you Greek. And by Greek I mean something that may, might as well look like Greek to you. For instance, I'm gonna go ahead and pull up, let's say, give me your favorite website, anyone. Google, I heard, all right, so google.com. Well Google is a terribly simple site, probably doesn't take much to engineer the aesthetics of this simple homepage, but recall that in this class we've many a time gone up to the view menu of our browser, we've gone to source, and we've just very quickly glanced at what makes up this page. So in fact, there's not all that much and it's a small font I realized but that's just as well, since we probably couldn't make much sense of it now anyway. But notice that it's fairly cryptic. There's a lot of angled brackets, there's lots of slashes, but there's mentions of some keywords that we've even heard about already in this course, like HTML, and then there's a tag called body, a tag called head, and we'll revisit those today. Just to spur the conversation along towards something more complicated, let's take a look at CNN, which we've similarly looked at before. If I go ahead and pull up this page's source code, which we've done before, notice that it looks kind of the same. All these open brackets, closed brackets, and so forth, but this page is clearly much longer and you've all seen in class before CNN's webpage. There's more content certainly than Google's homepage. Well, I say that we're gonna teach you Greek tonight because by the end of class, you will know how to read and write this sort of text. Perhaps not in the length as is offered by CNN's website, but ultimately you will speak by classes in the language known as XHTML, and it isn't precisely this language that web pages today are written, and it is precisely by the end of this course that you too will have the savvy to create web pages looking like most every type of website out there today, albeit with the caveat that only with time and practice can you really produce works of beauty. With that said, who would like to learn how to speak Greek tonight? Me, all right, excellent. Well, let's motivate this discussion a little bit by first thinking about, sort of ironic that this photo looks a bit like a submarine console, isn't it? Well, let's talk about the notion of a web server. So you've been using a web server all semester long. What web server have you made use of hopefully profusely, particularly in the end of October as I recall? Yeah, Harvard.edu, specifically www.fas.harvard.edu. So just to recap some jargon, edu is what, using the nomenclature of this class? Top-level domain, Harvard.edu is what? The domain, you could call it a subdomain, but conventionally we would just call that the domain. What about fas.harvard.edu? The subdomain, and then www, the host or the host name. So there's a lot of stuff in there, but it's all hierarchical. So tonight our focus is not on fas.harvard.edu, which recall is not only a subdomain, but it's also the moniker for the SSH server to which you've been connecting. But if you are even more precise than say www.fas.harvard.edu, what you will end up doing is connecting, let's say your web browser, to the machine or the machines that comprise fas' web servers. So what is a web server? Just in layman's terms. You've all used it. What is it? Okay, it's a bank of computers. What do they do? Okay, so they hold information, it gets presented on your screen as a website. What language do these web servers speak with browsers? Okay, either HTML of some variant? In a sense, and we'll make this distinction clear tonight, when a web browser is communicating with another web browser, what is the language that we've always said they speak across the wire? HTTP, so that was hypertext transfer protocol. Well tonight we're gonna focus on the first part of that acronym, hypertext, because HTML is hypertext markup language. So it's an HTML, hypertext markup language that web pages are written, but it's an HTTP hypertext transfer protocol that they are delivered and requested and exchanged. So what is the relevance to our tail? Well, www.fas.harvard.edu is a web server, which means it's a machine, or it's a collection of machines, or more properly it's a program running on a machine, but we often just equate the notion of a server as a program with a server as a physical box. So we have here on campus at least one machine that is called www.fas.harvard.edu. Well it turns out that on this machine you all have some storage space, because in fact the hard drives used by the www web server is the same as the drive space used by your SSH accounts. So when you have SSH to fas.harvard.edu, even if you've only done this once, maybe twice in the class thinking this is not a very useful system to use, well starting tonight and starting with the newest problem set, you'll be making much greater use of your FAS accounts, because inside of your FAS accounts is 50 megabytes of storage space. You are allocated, according to your username, 50 megabytes of storage space that you can store emails in, MP3s in, lecture notes, but more to the point tonight web pages in, and graphics in, and anything you ultimately want to present on your web page. So suppose that this web server has one or more hard drives on it, they're quite large, we're talking many gigabytes, if not terabytes at this point, given that FAS supports tens of thousands of users these days, so there's going to be a sort of hierarchy to the folders or directories on this web server. And in the world of Linux, we usually call the root directory by a single character, just forward slash. In the Windows world, what do we usually call the root of a hard drive? Your C drive, when people talk about their C drive, or I say open your C drive, that usually means go double click on your C drive, which more specifically means open the default folder on your hard drive, the so-called root folder, and it's a root in the senses in that it's the origin of all other folders that you might have stored on your hard drive. But recall in the world of Windows, whenever you see C, it's usually followed by a colon, but it's also followed by a slash. In the world of Windows, it's a backslash, in the world of Linux, it's a forward slash, but the point is that they're both the same, they denote the root of your hard disk. Okay, well on FAS, there is in the root directory of the system, and I'll do a bit of simplification so that we can fit everything nicely on the board, there's at least one directory, and this directory is quite simply called home. And home denotes the folder in which everybody's home directory is stored. And again, your home directory is just your personal storage space for anything you wanna put in your FAS account, email, web pages, anything. Inside of the home directory is a bit more of hierarchy. There is, for every letter of the alphabet, a directory, the first of which starts with A, the last of which starts with C. Inside of each one of these folders is another letter of the alphabet. So we'll go down here, for instance, we'll put an M in the middle as well, but there are many other, 23 other directories in between. So beneath each one of these folders is another such hierarchy, where you have an A directory, and then you have a whole bunch of other things, and then you have a Z directory. Beneath that, you have folders for every username on the system. In other words, since my username on the FAS system is mailin, M-A-L-A-N, that means that my home directory is, of course, stored on the hard drive in the root, but more precisely inside of the root's home directory, but more precisely inside of the home directory's M folder, and even more specifically inside of the A folder inside of that M folder. In other words, inside of this A folder, among many other folders, is quite simply a folder called mailin. And again, folder and directory, these are synonymous terms. And it's finally this thing that constitutes my home directory. So when you log into FAS.harvard.edu, as you've done with Secure CRT or other programs in the past, if briefly, and if the teaching fellows had you type the command L-S to list the contents of your account, what you were seeing were the contents of this folder. What we will be doing starting tonight is creating, scary as this might be, yet another depth to this treat, but we're pretty much gonna stop here. And the directory we will be creating tonight and in sections and workshops over the next few weeks is a public HTML directory, called quite literally that. The word public followed by an underscore, followed by HTML, all lowercase. By definition, most web servers that host multiple users, as FAS does for you, have users store their web pages in a public HTML directory, which as the name suggests, is a directory for HTML that is public. The reason for this is that inside of my mail-in directory are other directories. For instance, inside of here is also a directory called mail where all of my email is stored and there might be other folders that I have created to store works like homeworks or maybe essays or letters or really any kinds of files I wanna store in my account. You don't wanna make your home directory public because that would mean everyone could access your emails and everything else so we isolate starting tonight. All of our web work to one directory called public HTML and this is true on most web servers based on Linux or Unix. The Windows world works a little differently but if you ever in the future are working with a Linux or Unix system with web pages and you have a user account on it, most likely your web pages will be stored in here but that is simply a default system configuration that most systems use but it's relevant to most systems these days. With that said, what's gonna go inside of here? Well, the stuff we saw overhead a moment ago which again I said was an example of HTML is precisely the content that is going to be going inside of this folder tonight. Specifically, if you wanna create a web page, you will be putting that web page as a text file inside of this directory. Well, let's go ahead and make this a little more real. I've just logged in via SSH to my account and I have my blinking prompt. So you've probably seen this before in section workshop or perhaps on your own. If I typed LS, you would see everything that I have in my home directory, the email directory and so forth but what I wanna do tonight is for the one time only and you only have to do this once and this is the sort of thing you don't need to write down tonight because we'll revisit this in section workshop and in an online handout but one command you will have to type tonight or at some point soon but never again thereafter is MKDUR for make directory public HTML. When I hit enter, nothing appears to happen but in the world of Linux and Unix that's usually a good thing. If you don't get an error message, something good happened. What good happened is that I can now type CD which stands for what? Change directory and then I can type public HTML and sometimes some systems will put a slash on the end of folder names. It doesn't mean it's named with the slash that's just a visual cue that that's a directory and not a file but it doesn't need to be there. If I hit enter, notice what happens. I get a new blinking prompt right after that colon but what has changed parenthetically? Yeah, you see this tilde slash public HTML and this is the reason that many weeks ago we had you when you got your FAS accounts or if you haven't done this already you will for this upcoming work we had you type a program called E1 setup which was a program that essentially reconfigured your prompt and did a few other things by reconfigured your prompt I mean it added this helpful visual cue in parentheses that tells you in what folder you are. Because when you don't have windows and icons and menus to click on it's just a blinking cursor and that's not all that informative as to where you are on your system but in parentheses with all of the work you'll do in this class on your web pages in parentheses will you see your current location. Suffice it to say for tonight that if you're not in that public HTML directory you're in the wrong place. So you're not gonna have to be moving around a lot but what you won't be able to do is put web pages anywhere other than this directory so that is a good thing if you see a blinking prompt after public HTML. Well here we go, I have a blank prompt if I type LS nothing happens which is a good thing in a sense because no error happened but there also seems to be nothing in this directory. LS lists the files in the current directory it's the UNIX equivalent of the DIR or Dur command if you use that in the world of DOS or Windows but it's in this directory that I need to now create a file. The program that we will use in this course to create web pages is perhaps the simplest there is on a Linux system it's called Pico think little text editor to run Pico you simply at the blinking prompt type Pico all lowercase and hit enter. Think of this as the Linux equivalent of notepad from Windows or simple text on Mac OS. So now I have again a blinking prompt but now I'm in an environment where I can hit enter I can type around and so forth this is actually a text editor I could now save that as a file to the local hard drive print it email it whatever but the point is that it's a very simple text program on the bottom of this program cryptic as it might look for the next moment are a list of menu options so you've all probably forgotten at least once that you can't use the mouse really when you're SSH to FAS and you can click all you want in the screen but nothing actually happens the most you can maybe do is highlight which may or may not be useful so what this carrot symbol suggests is the control key so what this is saying is if you want to exit Pico you will hit control X and if I do that now you'll see what happens you get a prompt saying somewhat cryptically save modified buffer and then it tells you parenthetically that saying no would be bad it's like saying no you don't want to save but at this blinking prompt if you simply say yes you will be asked for a name of the file if you haven't provided one already so I could say myfirstfile.txt and then I could hit enter and save the file you can always in Pico hit control C to cancel whatever you're doing and then you can go back to your typing and editing what we'll be doing in this class is not writing cryptic looking stuff like this which is clearly nonsensical but the other cryptic looking stuff that we called HTML and so let's with this program whip up our first webpage which you've actually seen me do before this isn't going to be a perfect webpage but it will be a webpage in 30 seconds this will be done our first webpage okay the last thing I hit was canceled just so I wouldn't actually save and quit but what I'm going to do now is this I am going to save this file and to save a file you can hit control O to for output and it's saying what file name to write well the only reason it's asking me this is because I didn't specify a file name when I first started the program but what is the name of the default file for a homepage on a web server in index.html so we've seen this before recall our demonstration from weeks ago that we can visit cnn.com and get the days news or we could visit cnn.com slash index.html and also get the days news the reason being if you don't specify a file name most web servers assume you mean the default file which usually is index.html so I'm going to say save this as index.html I'm going to hit enter and now it says wrote how many lines were in the file how do I get out of this program control X exits so now I'm back at my blinking FAS prompt as we'll call this or the blinking linux or unix prompt well now what I can do is go over to my web browser and visit www.fas.harvard.edu slash tilde whatever my username is and I log in as mail in so I'm going to type mail in and then enter and what you see is well where is the text we typed exactly it's terribly small terribly ugly but at least it works right that's at least the start as you've often felt in section if it works at least that's a good thing so notice that we see high exclamation point but I also thought I typed hello in this file where do you see hello exactly so it's a little small for this screen right now but in the very top left of the screen it says hello exclamation point dash Microsoft Internet Explorer and that is the so-called title of the page well where did we see that well in the file I wrote notice that high exclamation point appears in the body and hello with an exclamation point appears in the title so just using some intuition here that's why it appeared as it did in the web page and this is perhaps the simplest of web pages you might ever write because in a nutshell every web page must have a head and a body which this page does it's terribly uninteresting the content we put in that head and the body but it did get the job done and so what we've just done with respect to this picture is added one other thing which is not a directory but is a file a very simple text file called index dot html and I'll draw it with an ellipse to denote the fact that it's not a directory but instead a file well that's it html what do you think okay so not so hard when you see it in fairly simple context and the thing about html is that yeah it might look remarkably daunting if we set out to say we're going to make this by the end of tonight but the fact of the matter is by the end of tonight will have introduced most of the building blocks that are inside of this file so that using some very simple heuristics some very simple building blocks you can build up what currently is an incredibly simple page into something much more interesting now this the making of web pages is something that is far more fun and interesting to do in a hands-on sense and so in lecture tonight what I'll try to emphasize is the concepts and the overarching ideas but it is not important tonight I think if you walk out the door and can enumerate for us all of the various tags and markup that exists in html with which you can make web pages that is the sort of knowledge that you can put by your side with a reference book or the handout or more to the point in the upcoming sections in workshops you'll work with a computer in front of you in a teaching fellow by your side or in the front of the classroom and you'll actually learn this stuff by doing it and I think it's a those context or at home working off the lecture videos or the section handouts that this will really sink in so tonight our goal is a conceptual one and will launch now into a discussion of what you can and cannot do with html and why I'm sometimes saying html why I'm sometimes saying ex-html but there's one last detail we need to mention with respect to this hierarchy most likely at some point in the semester that remains you will get you didn't see what I just typed you will get the following error you'll have just made a web page a file ending in dot html you'll then go to your web browser and you will refresh the browser so that you can see the changes you've just made and you'll get this message forbidden that's kind of scary right if all of a sudden you're being forbidden access to your very own content but that's usually to be expected because the first time you create a file usually by default only you have permission in a technical sense to look at it if you want to make it truly public it's not sufficient on most systems just to put it in this directory you also have to change its permission settings if you will you need to change it's like the equivalent of saying uh... getting the properties of a file by right clicking on a file in windows and choosing properties you can change who can see a file in that regard well on these linux systems what you'll type in this class is a very simple command fix web files which for now think of as a beautiful black box that when you executed it fixes all of these permission problems in short what it does is it makes sure that everything in your public html directory is viewable via the web so in short if you ever get an error message like this you can most likely fix it by running this command fix web files which normally is not so slow which really should not be so slow and in the tradition of julia child pulling a baked cake out of the oven your problem will go away okay will take a look as to why that was taking so long but it will work and then if you go back and refresh then you will be granted access to your web page again so with that said with the hierarchy of the f as system enumerated and with our emphasis on the fact that in this course you'll connect to your home as a you'll connect by ssh to f as you'll type what command to move into here cd public underscore html from there you'll be sitting in your public html directory as though you double clicked on it and opened it every file you then create in that folder will then be sitting at this level and provided you run fixed web files it will be viewable on the web in fact suppose i do this if i very quickly make a new file called new dot html if i very quickly whip up another title let's see new close title close head and i'll explain what i mean by open and closing all these things in just a bit body just to spice it up this time i will say green but it's no fun if all i do is say green i'm actually going to go up and add a little something crazy here which says okay i'm gonna save and quit i'm going to go up here and not type index dot html because that's the first file this time i'm gonna say i specifically want not the default file but rather new dot html there we have it my ever so slightly better web page that's green because we changed the background color so with that said now let's try to provide some of the building blocks unless there are any questions on the structure of a web server anything at all alright so here we go x html html let's say is a lazy man's version of x html html is of course the language in which web pages are written html was invented by tim bernersley some years ago in fact the inventor of the internet the inventor of the worldwide web is the inventor of the worldwide web in the sense that he invented the language in which web pages are written initially html was meant as quite literally a markup language a means by which researchers and academics and others could very easily post information on the internet without using other protocols that existed at the time like gopher and ftp i mean we all know that perhaps the easiest view of the internet for many of us comes by way of a web browser it's point click it's visual you don't have to log in it's not something more uh... cryptic looking like secure effects and so forth in short it's just easy it's an easy way of accessing information on the internet well that's all html was meant for html was not meant in the beginning to start creating works like this and websites of yet more complexity html evolved over the years to support what we'll call tonight new tags that facilitated different features blinking different colors things flying around on the screen bats fluttering about on a web page on halloween and all these sorts of things did not exist in the early eighties and thereabouts these have been more recent enhancements and so in fact what we discussed tonight is what's called html version four or really x html one point no because i said a moment ago that html is sort of the lazy man's version of x html and x html to be more precise is the language in which good web pages are written or rather web pages are written by good people shall we say a lot of web pages today are still written in html but as you'll see tonight and even through experience html is much looser and much lazier about being clean with one's code think of html ultimately as a language in which you can write sentences and forget things like periods and commas and syntactical details that fundamentally don't really get in the way of getting the point across but they certainly leave your work looking a little less clean as it might this then is a sample x html page and you have this is a printout in tonight's lecture notes it is incredibly similar to what we just did with just a few additional lines and the reason that i didn't type the first three lines into our demonstration is because i can never remember the syntax precisely myself and this is a lot those first three lines to memorize but technically every web page written in x html as it should be for this course's purposes needs to start with those three lines we have facilitated the process by which you can output those lines with a special command on f as that you can type it spits that stuff out and then you do the rest simply to save time and i'll demonstrate that in a moment but beneath that so-called doc type element is the stuff that we already introduced tonight right we have this so-called html tag we have this head tag this body tag a title tag and we have slightly different text but the idea is the same in fact if i pasted this content into my index dot html and refreshed describe verbally if you would what that web page would look like the title of that web page would now be hello comma world and the text in the body of the web page would be hello comma world in short every web page written in x html which stands for extensible hypertext markup language so it's html but with extensible in front of it must start with that and in fact it must have every one of these tags i said earlier that every web page must have a head and a body this page does as well but even to be more precise every web page must start with an html tag must then have a head tag must have a title tag must then have a body tag but i'm omitting some other tag so even though i haven't quite defined it what do you get the sense of tag is yeah a tag define something it's like a container and anytime you open a tag in x html you have to close it and the syntax that the world decided upon is that this tag we would call an open tag because it starts with an angled bracket has a key word and then a closed bracket hence it's an open tag we call this thing here though a closed tag because it has that same keyword with an open bracket closed bracket but a forward slash in front of it so perhaps needless to say to open a tag you just write the tag's name but to close the tag you simply write the tag's name with this forward slash as simple as that and the rule as this example suggests is anytime you open a tag in this language you must eventually close it moreover you have to do it in reverse order for instance if i open the tags html head title i must then close them in the reverse order the most recently open tag must be closed first so that you have a sort of symmetry or balance so notice open open open close title close head open body close body close html so you close things in the reverse order so that again things are balanced or symmetric let's take a look at a slightly different example i just hit the key i changed slides but this thing looks almost exactly the same what is changed the body tag has changed ever so slightly so this is still the body tag and we usually call tags by their keyword that begins them even if there's stuff after the tag's name so body is now really not just the tag but it's the name of the tag we notice we have a space here and then this thing called bgcolor equal sign quote unquote and then inside of that this cryptic looking strain well let's tease these things apart bgcolor is an example of something known as an attribute an attribute it's like a feature or characteristic of a tag more specifically an attribute typically controls the behavior or the display of a tag so you saw this a moment ago if briefly bgcolor stands for what? background color easy questions tonight so background color so what we're saying is set the background color equal to quote unquote something the rule on xhtml is that every attribute must have an equal sign after it and then the value of the attribute as they say must be flanked by quotation marks either a pair of double quotes or a pair of single quotes it is fine however to include some extra white space in here for instance i could have said bgcolor space equals space quote unquote and then that cryptic looking strain in short xhtml doesn't really care about white space so much but we try to keep things clean and this looks pretty clean isn't really necessary to add some spaces here but let's hone in on this value here this value we saw earlier it stood for green but why in the world does this make the background color green okay good you're on the right track i'll steal some words and rephrase so these are hexadecimal codes hexa stands for sixteen so the hexadecimal system means that you can use up to sixteen different digits well let's relate this to other base systems we've used we've talked about decimal in this in this world right what is the decimal system use what digits right zero through nine use this everyday binary uses zeros and ones hexadecimal uses what perfect zero through nine for the first ten and then eleven twelve thirteen fourteen fifteen sixteen but in reality i shouldn't have said it that way this is ten eleven twelve thirteen fourteen fifteen because we started counting at zero even though f is the sixteen okay well that seems to be out of the way hexadecimal okay sure colors but why does zero zero which is like nothing followed by ff which sounds like a lot it's two of the highest values possible in fact ff recall from our discussion of monitors actually denotes two hundred fifty five though if you're not quite sure why don't worry so much tonight but then zero zero which is again not much of anything so what does zero zero then ff then zero zero denote exactly red followed by green followed by blue have you ever heard this acronym before rgb even if you haven't think back maybe ten or fifteen years ago when maybe in school or at work you had those projector screens which you might connect a vcr to those projector screens were not these you know tiny little two thousand dollar devices that we have today but rather these big monsters that the kids would sit in front of these my friends and i would sit in front of in history class when we would watch vhs movies because what those projectors had was a circle a circle and a circle which was a red lens a green lens and a blue lens rgb because with those three colors if you unite the color schemes as a single focal point you can essentially create any color you wish so what happens here is that the first two digits in any such number scheme denote how much red you want these two digits to note how much green you want and these two digits to know how much blue you want so if you don't want any red give me no red if you don't want any blue give me no blue if you want a lot of green use the highest possible value two f's and with this scheme you can come up with any color pretty much and in fact how do you know these colors well it's pretty easy to figure out what the code is for red what would the code be for pure red right ff zero zero zero zero blue would be zero zero zero zero ff what would peach be right it gets a little tricky and so this is when you start googling around for uh... color charts or you look at the back of one of the recommended textbooks in this course and you look at the colorful pictures that tells you pictorially what color maps to what code you'll find to when we'll play with this perhaps later that a lot of web browsers do understand some basic colors you don't well i didn't have to write quote-unquote sharp zero zero ff zero zero i could have just written quote-unquote green because green is a pretty simple color i could have written blue i could have written whites black purple yellow any of the most basic grade school colors but if you want to get a little more advanced than that and get a particular shade of yellow or a lighter shade of red then you have to turn to color codes usually and you can look those up and in fact photoshop has a means and you can play with this in section it has a very pretty color wheel that you can click on and choose the color you want and it will tell you the hexadecimal code for that particular color value so that's another neat way of doing it correct if you're not using hexadecimal number do not put the number sign you just put quote-unquote green but if you are using hexadecimal numbers put the number sign exactly the pound sign indicates that you're about to use a hex code people say hex instead of hexadecimal often incidentally okay so just to recap very simple example but this time we have a body tag being modified by one attribute the value of which is dollar uh... number sign zero zero ff zero zero which denotes green and clearly that attribute is significantly changing the behavior of the body tag because it is making it in fact green you'll notice at the bottom of a lot of tonight's slides those small on your printouts does tell you where on the web you can access these very examples so you could of course retype these into a web page but we've already made them all accessible on the course's website so if for your own reference and for our use tonight we go to lectures and we scroll down to lecture ten and go to the demos link for markup you'll see a whole bunch of files and the one relevant to that example just a moment ago was bgcolor dot html and so we can see the results without without having to type it up ourselves and the first example was called hello dot html and it was even simpler but we're working our way up we're working our way up to some slightly more interesting examples and here's one such example clearly more content here you tell me what do you think this web page will look like hello world will be in the middle here and and in blue not in a tiny font and size seven whatever that means that's a pretty good start in fact let's try to do this verbally now from top to bottom so the top three lines have to be there they should never change and in fact you'll probably never have to type them will help you generate them to save you time this you do have to type or at least it must be there you have to have a head you have to have a title what you put in between the title tags open and close is entirely up to you based on what you want the top of the page to say close the head open the body here's a new tag take a guess what might div stand for division that's exactly right the div tag implies a new division of the page what that means exactly will entirely depend on the attributes we put on it and the content we put inside of it so let's see what's gonna happen here so in this division or part or portion or segment of the page call it what you wish we are going to align everything in the center what other values might we put here so simple left right center so a lot of the times this will be common sense but a lot of the times it suffices again to look at a little cheat sheet that such as those will provide to you or in a reference book or eventually it will just sink into memory what is a lot what's next well notice for instance that i've all this time been doing this nice little indenting that kind of tells you what's inside of a currently open tag none of this white spaces it's called none of the spaces are tab characters none of the carriage returns I've inserted by hitting enter none of them are strictly necessary html ignores white space beyond one individual space so all of the indentation and the so-called pretty printing that I've done in this example is purely for human readability it is easier to read this code then it would be for instance to read that code this is the same code we had before in new dot html I've added some color just so that it's easier to see the different tags this time but that is new dot html I stripped out a lot of the new lines I'm going to go ahead and save it I'm going to go back to my web page and type in tilde mail in slash uh... new dot html and incidentally whenever you're accessing a specific users home directory in a browser you put that tilde right before the username hit enter what changed I saw a head shaking which is good nothing but if I look at the source in IE refreshing hit refresh if I look at the source in IE the source has changed but the fact that I removed some of that white place really reveals to us that it was superfluous html the browser was ignoring most of it and as an aside this is a good opportunity to point out a common mistake many students when first learning this sort of stuff will write their web page in for instance pico in this environment they'll save it maybe go back to their blinking prompt they'll then refresh the page to see what it now looks like then just out of curiosity they'll view the source as we did and they'll see this and then they'll decide oh you know what I want to go ahead and say green with more exclamation points and maybe they'll go up the file and save and then they'll refresh and then be a little bit confused I'm sort of making fun of it here but talk to me in more technical terms about why what I just did was incorrect sorry well I was in a notepad which is the text editor and it was clearly the source for the same web page right so what is happening when you go to internet explorer or any browser browser views source menu is what you're looking at is the copy of the html that was transferred to your browser via http I then change that copy sure but unless you actually change the original on the server you're making no real effect on your web page so it's important of course to keep that distinction clear silly as it might be now when you're banging your head against the wall late at night trying to understand why these changes aren't showing up it could be something as simple as that well let's continue with our tail here we have left off where we said we have a division of the page that is to be centered and fortunately with html a lot of it you can just learn by example you don't need to take a course on html you don't need to read a book really on html you really just need to look things up when you need to know them or you can infer by examples take a guess what these three lines are doing exactly it's saying the size of the font it's saying the style or face of the font and it's also saying the color of the font the name of this tag is of course what font and that is a tag that's defined you can't make up your own tags in html right you couldn't just say this is my uh... david tag and david's bg color attribute will be blue you actually do have to stick with the predefined tags in the language but font is one of them among the allowed attributes in html or xhtml or color for this tag face for this tag and size for this tag for whatever reason size is defined in xhtml to be a relative notion seven means really big one means really small everything in between is relative to those so we don't mean seven point because if you think about microsoft word for instance seven point is tiny and one point is just unreadable this is relative seven is actually pretty big on a web page one is small but readable okay blue of course is the color of the web page i could replace this with though the number sign followed by what good zero zero zero zero zero ff for all blue face so in the face tag in xhtml you can actually list one or more fonts if you have it so what's your favorite font for instance garamond is a nice font and in fact it is the courses on official font used in all of the printed handouts what else exist verdana aerial helvetica times times new roman courier these are all popular fonts that most computers have but you want to be careful because some of you have fonts that i don't have and that other users don't have so just because you have a font on your computer and the web page looks fantastic on your machine while you're developing it if you specify for instance the scary halloween fonts name here that you happen to download last year to make some poster well the web page will look great and look scary on your machine but on someone else's machine that doesn't have that spooky halloween font the browser will just pick some random font and it will probably look pretty ugly so typically what people do is they don't specify a specific font unless it is one that is so popular and omnipresent like times or courier or aerial or verdana or helvetica that is pretty much known to be on any computer they don't use this at all or they more generally say make this a sans serif font or a serif font what's what do we mean by a sans serif font right sans is without serif means little cute tails for instance on a font so a sans serif font would be something like a font that would draw a t like this a serif font would might draw the t something like that a little more pizzazz to it a little more frills particularly on the corners or edges so in this way I'm guaranteed to get sort of a very cold clean looking website with no frills and that's usually a useful thing because for instance on the courses website we do mention sans serif for the font in which everything appears because at this font size which is relatively small we don't want to make it get more unreadable by having little frills on the font so that might be the motivation or you can leave the font face specification off altogether let the browser decide but the default font for most browsers is what do you think it is times for most computers which tends to be kind of ugly on computers if only because it is the default and too many ugly websites make use of it most folks will move to something like a sans serif font or helvetica aerial verdana anything that looks a little cleaner than that particularly at smaller sizes but we're not quite done yet we just said that all of this stuff in between the open font and the closed font tag which is hello world should be blue without frills and in seven points in seven relative size what do you think this tag is it's a break a line break it doesn't suffice an x html to just hit enter when you want to insert a new line consider after all what happened when i deleted all of the carriage returns before it made no obvious effect in fact let's go one step further with index dot html notice it looks like this notice that i had this empty line there before and yet when i visited the page for my index dot html there's no blank line and actually this is not great because there is some default blank space there but you would think if i did this there would be more i'm gonna save with control o refresh nothing happens in fact if i go to the other extreme and not using line breaks but rather spacebar characters and say dog cat save it refresh you see dog space cat to be expected if i go in between here and do this you might think okay well that'll put cat on the right hand side of the page but again x html ignores anything more than a single white space so i could even go in here and say that which just looks ridiculous but in the web pages view it looks the same ergo we need some way of forcing line breaks to appear and the means by which you can do this in x html is by saying b r save refresh now we have our intended line break indeed so with some features of x html it doesn't really make sense to have an open tag and a closed tag consider after all how would you break up the notion of a line break into a starting point in a closed point it's more of an atomic notion it's either there or it's not and so what this open bracket b r slash closed bracket means insert a line break immediately it's sort of a dual open tag closed tag all together you could and you would not be incorrect do this b r and then closed b r but this just looks kind of silly and it kind of suggests room for mistake because if you wrote something like hello in here what does it mean to start a line break say hello and then end the line break where conceptually would the hello actually appear so it wouldn't really make sense and so what most people do is use these so-called atomic elements or tags that are simultaneously opened and closed but you'll notice i did something curious a moment ago i actually left a space in here even though i didn't in this example both are correct and it is a good idea in fact to get into this habit leaving a blank space before the slash in any tag that is both simultaneously opened and closed in other words it's a good thing to include that space why do you think this might be it's a bit of a stretch to guess it but what might be the reason it could be a useful way to search because you could hit control f for instance in your program and look for that specific sequence which might facilitate that sure might be easier to read which is a valid reason when you're in this environment writing cryptic looking stuff more readable the better you might be tempted to use a backslash but that would actually be incorrect and could not and should not appear in the document and so the real reason though none of those were bad slightly more technical it's because with older browsers which some people might still have there's no such thing in their world as a tag called b r slash old browsers know about a tag called b r so if one is writing a web page in this relatively newer language called x html and you use tags like this which are correct for new browsers that support x html but they will confuse potentially old browsers that see b r slash and say I know about a b r tag but not this b r slash tag and the default behavior for most browsers if they don't understand something is just to ignore and that would be a bad thing in the context of a web page you're writing because if you want the line break to be there you don't want a web page to ignore it and so the safe way to avoid ignorance on the part of old browsers is to put the space so that even when they encounter this slash which in the world of older browsers makes no sense older browsers did not support these tags that were both opened and closed simultaneously but the browser will see open bracket b r okay that's a b r tag I know to insert a line break then the browser will proceed I don't know what this slash is it'll ignore it but it will have already produced the line break so this is in short a very good habit to get into well finally with this example we have a line break followed by a little more text from little old and then this cryptic looking thing take a guess what do these three lines collectively achieved for us they do this is the means by which this is a representative example with which you can create hyperlinks in a page specifically hyperlinks via which you can email someone so the link we're about to describe is of course going to be in blue which I wrote as a hex code this time it's going to be in the same uh... simple type font font size is going to be two which means it'll be relatively smaller it's gonna say from little all and then this is called the anchor tag it's just quicker to write a instead of anchor which is why they chose this convention there's an href attribute which stands for hyper reference aka hyperlink the value of this hyperlink is defined in this case to be mail to colon which is kind of like our url syntax right protocol colon slash slash but in this world in htx html there's no slash slash you just say mail to colon the email address that you want the link email and then you put in here whatever you want the link to appear as this is the destination of the link this is the aesthetics of the link this page is called mail to dot html which if i pull that up on our system from tonight's lecture demos you will see the results of this page which quite simply are that page it's a very plain looking font no frills starts off really big font size seven then has a line break some small text font size two it says from little old and then it's quite small but notice that this is a link if i hover over it what do you see down here the value of the link just says mail to colon username at fs.harvard.edu if you click on this link your email program will launch it's not configured on this av machine here but if you did have an email program configured like outlook or eudora you would then get a new mail message and you could email username at fs.harvard.edu relate this back to our security discussion recall when you receive emails that are written in html or xhtml you can often be duped like i have been recently into thinking that a link goes somewhere that it doesn't because the link says one thing but it leads elsewhere think now about how you achieve this you include in such spams or phishing attacks an anchor tag with an href attribute that really goes to www.bankofthevest.com but then what would you put here to trick the person into thinking it was a legitimate url bankofamerica.com or even bank of the west.com because even if it says it aesthetically the destination is actually going to be and we'll see after break how you create not mail to links but literal hyperlinks from one web page to another let's go ahead and take a five minute break alright we are back let's get our hands dirty with some of these new tags and topics that we've looked at we now have a blinking prompt what i'm going to introduce now is a special command that we have configured your accounts with on fas so that you don't have to type out that cryptic looking three line dock type element as we called it the command that you can type for this class's purposes after you've connected to fas and cd into your public html directory is quite simply a command called xhtml if you only type xhtml you will not get that message nor should you or need you commit this command to memory if you just type xhtml you'll get essentially an error message saying wait a minute to use this program you have to type xhtml followed by a file name what this program xhtml is is just a quick and dirty way of creating the template for a new file so what i'm going to do is call this three dot html because it's my third web page we're creating tonight enter and now notice that our program tells you the framework for an xhtml document has been placed in three dot html for you be sure to set its file permissions appropriately if i type ls to list notice that three dot html now exists if i type pico and then three dot html that's like loading pico and opening three dot html and look how much of the work has been done for me the upside then is that all you need to now do is change the title to whatever you would like by typing my title here and then you can change the body however you wish and it's in the body that will play around for the next minute or so with some of these new tags in the title tag incidentally you can just have text you can't change the font in the title you can't make things bold you can't change the color it's just the title of the page pure text what do you want to do what do we want this web page to look like test my skills you like your page blue so how do we make a blue page gotta be more specific oh the last two okay better but still there we go okay we need that and is this font big enough to see in back tonight readable yeah okay all right good we now have a blue web page so let's oh before we get more contributions i'm gonna save it with control o oh thank you number sign save it i'm gonna go back to my web page here i'm gonna go to mail in slash three dot html okay we're on our way next contribution large letters i'm gonna give you a new trick for large letters if you want large bold letters you can use the heading tags h1 through h6 h1 will look like this refresh it's big and bold if i change it to h6 and refresh now it looks like this so much smaller and i think we're quickly realizing that a big bold blue page is not ideal when you're using black text so i think we should fix this so let's use maybe not each one how else could we make text big font size equal what's big seven is the biggest okay closed tag now i have to counterbalance it with the appropriate closed tag now i can refresh better what would look better on blue we could cut back on the blue just to make things more fun what else could we do to make more of a contrast okay how do we make this white letters go back to font yep more specific good so color equals white what's that so that works does it matter if i put color equals quote unquote white here or here no the order of your attributes and values does not matter you just have to separate them by at least one space so that the browser can distinguish one from the other i'm gonna save this refresh better with page what next would you like to do whoo whoo put a picture alright let's go ahead undo this uh... we need a picture so let's go to google let's go to google images what do we want a picture of a cat okay we will take of the like the sleep cat alright so we will take this picture quite adorable and let's see actually i'm gonna show you one way of doing this which is not in general the ideal way but it's simpler and we won't have to get into fdp tonight notice that the url of this picture is clearly what's in the web browsers page so i'm just gonna copy that url i'm gonna go back to pico and i'm gonna put my image in here by using the new image tag which for short hand is just img the source for this image src which is the valid attribute is going to equal that url which i just pasted in the notion of inserting an image is similar to the notion of inserting a line break it's either there or it's not so i'm gonna simultaneously close this element notice that we kind of lost track of it and there's a dollar sign there well that's pico's way of scrolling you to the right if i want to scroll back to the beginning just hit to the left and you'll scroll that line back to the left okay so if i scroll to the right i'll get the end of it scroll to the left to get the beginning i'm gonna save this i'm gonna refresh my own page which recall was this blue thing error why is that pages blue but we seem to have a broken link we're missing some piece of the code but what's probably actually happening here is that most people don't like you taking their images and so what was most likely happening is that the web page is noticing that wait a minute someone from the f as web server is trying to reference this cat on my server i'm not going to let them capture that file via http so you would typically need to do some other mechanism either if you have permission downloading the file locally then copying it to your f as account using what program to use to transfer files and ftp or s ftp program like secure effects so that you would then copy the image the jpeg into your public html directory let's assume for the moment that we did do that what you would then do is not use a whole url like this but if the file happened to be called one of not of that cat if the file happened to be called cat dot jpeg you would simply say that the source of the image is cat dot jpeg but we'll defer to section or the workshop the manual process of uploading the files but you've probably done this at least once in the past perhaps for the photoshop section uploading photos perhaps or for some other means but we have tutorials on this but including an image is relatively as simple as that so let's assume for the moment that it is in fact there and you know what we can cheat a little bit so that we are not completely boring today we can go to for instance our own website okay in the last tf to touch his nose will be the one nominated for this which is roman what i'm going to do is it's not as easy with internet explorer you can do this with other browsers figure out what the picture is called but i happen to know that this photo is called roman dot jpeg so if i want to link to it directly what i can actually do is if i know the url at which it is located if i know the url i know it's at http w w w dot f a s dot harvard dot edu slash i think it's in images photos staff roman dot jpeg see if i got that right and i did a big hand for roman so there we have it we've embedded a graphic for which we have permission of course in inherent in any kind of use of images that you find on the web or issues of copyright and so forth but i'm gonna assume for the sake of tonight that i have roman's permission to put uh... his photo on our web page here but let's place it up a little more we have yet to include in a web page the notion of a link well we saw a moment ago how to make links to email addresses and that's all fine and good but there are a lot of people in the world today that use not eudora or outlook but like webmail hotmail gmail and unfortunately those mail to links don't work well for people who have web based email accounts because they only trigger local software someone that uses gmail clicks on a mail to link it's not gonna load gmail log them in and then prompt them over with a window they would rather have to manually copy the the email address load gmail login and then pasted it not as ideal so let's focus for now instead on the notion of just a link which will be also with the anchor tag also with the href attribute but what's your favorite web page to what you want to link here what's that hint hint was that me hint hint http how about dub dub dub dot bank of the vest dot com notice that you must include for href values the http colon slash slash you must be formal about it close quote close angle bracket what do i put next for a hyperlink whatever you want it to be aesthetically so we could say click me close anchor save enter let's go back to that page refresh and it's there so you'll see this discussion in the current problem set if you choose a blue background and you have a hyperlink which by most browser's defaults are blue doesn't work out so well and you'll often see incidentally on web pages that are trying to improve their search engine rankings that there's going to be often a whole lot of irrelevant or bogus text that's in there but it's invisible in the sense that it's the same color as the background right if you include many more keywords in your website but don't necessarily display them a search engine like google will find them but a human won't be bothered by them but a quick and dirty trick to see all such text is just either to highlight everything on the page by clicking and dragging or just hitting control a which or command a on a mac which and most os's will highlight everything usually making everything apparent so there's our link we could click it doesn't look so good the easiest way to fix this for now hideous as this might be is to do something like just changing the background color so we can see everything okay it's ugly but now we can still see the click me not because of the photo if we click the link now we go to bank of the best dot com which looks like it's been shut down and replace with the default page now so there you have it a hyperlink that goes to a particular websites well let's see how we might exercise some additional control particularly over not just the color of the background not just the color of text but maybe also hyperlinks as well here we have our fourth example in style dot html and i think it's useful to note at this point that though we're writing these pages in x html it's for legacy reasons that the open and closed tag that begin and end the page are still called html all web pages end for tonight's discussion in dot html but the language that you're writing them in for this class is called x html unfortunately there's a lot of leftovers from the previous language so with that said here we have the head tag title tag body tag all pretty boring by this point but we have a div tag again in this time it's gonna get a little more interesting i'm incorporating into this demonstration the notion of css or cascading style sheets which is a counterpart language to x html which allows you to more precisely control the aesthetics of your web page so in fact by the end of tonight you'll have under your belt not only a bit of x html but also this other language called css cascading style sheets which again are a way of controlling yet further the aesthetics of a page with far more power than you could with just x html alone you are using css anytime you are writing the value of a style attribute so notice we have on this div tag a style attribute ergo everything between this quote and that quote is what's called css properties written in css so a property is sort of the synonym or the analog in the world of css to x html's attributes so you control the behavior of tags with attributes you control the aesthetics of a page with css properties what kind of properties well what this says here is that here's a division of the page put this division in the following style all text should be aligned in the center the color of all text should be blue the font family to be used is again sans serif the font size to be used is specifically thirty six point so already here you see the greater power that css gives you no longer you confined to using relative sizes like one through seven which are entirely browser dependent you can say specifically display the following text in thirty six point pt properties are clearly separated by semicolons you don't use equal signs to assign a value to a property rather you specify a colon so the syntax is a little bit different but still relatively straightforward once you close the quote there and you can or cannot have the semicolon it will still work either way close bracket put your text close the division this of course inserts a line break here comes another division this division will have the following style centered text blue text sans serif again but a smaller font twenty six points smaller in fact inside of this is the same text as before a link that allows you to click on it to email username at f as the results of this page then are style dot html it looks pretty much the same but i have more specifically exercise control over the size of this text so i've achieved with css would i pretty much achieved with x html but i could have been much more precise in fact just to be a little silly here we could for instance if i wanted to copy this page and as an aside a wonderful way frankly of learning x html and css is to go to websites you like and if they're not overwhelming in complexity view the source and then start learning from their own source code copy little parts of it tinker with it understand how it works because most any web page you visit exposes its source code whether or not you can make use of the images and so forth are again a matter of copyright but simply learning from the examples and then already seeing on the website itself what it looks like is a wonderful way of learning the stuff so i'm gonna temporarily just copy that so i can paste it more quickly into my page tonight i just pasted it in i'm going to just to make the point change the top part not to just thirty six point but to one hundred twenty eight point which is absolutely something you could not do with just with just x html going back to my own page which is here we're going to go to four dot html and it's really big but precisely the point in excellent question question is how can you create not just necessarily vertical divisions of the page with line breaks but maybe horizontal divisions sort of two columns perhaps although this terribly quickly because it takes a little getting used to but behind the scenes of most web pages are one or more tables tables of course are things that in the world of computers often have columns and rose cells similar to excel in fact if we want to for fun here if i connect to the you want to count on f as and i edit the x html that we're using which is actually more complicated than a typical page since we generate the pages automatically what i'm going to do is scroll down to the very top of the page used by you want there's a lot of code here it's the website is you may have seen in one of the links is written in a language called pearl and some other languages that dynamically generate the code so that we ourselves rarely edit the x html on the website manually rather we change one line of code that regenerates the website to update the lectures page section page and so forth but here we have something familiar we have an html tag we have a head tag we have a title tag and this is in fact the title of the e1 websites web pages computer science e1 understanding computers and the internet if we scroll down you will see a body tag it's a little tough to read i know in purple this will be brief and notice bg color is all f's that's a good question now what does all f's to know it does mean white so all zeros would mean black the absence of all colors all want all f's means the presence of all colors which in the color spectrum gives you white light well we have a table elements here and it's this new tag that i'll very quickly introduce and i'll introduce it by way of example in this table tag which you can learn more about in section or any reference book or cheat sheet we provide there's often a body attribute a border attribute currently it's set to zero if i change it to two save the file and refresh our own courses website what you will see is in an otherwise invisible table that we use to control the layout of the banner we have essentially for that banner multiple images all wash but squished next to each other to create the illusion of one banner but it's really several pieces this is how we rotate the banner without changing for instance the john harvard part we lay things out as you suggested as an a or a cat and a dog or a left and a right by having a two-column and in fact the rest of the site similarly has a table behind the scenes if i scroll down to the next instance of a table we have one down here which i will also change to have a border refresh the page and now you see the rest of the you on website with tables that are effectively invisible invisible in the sense that they have a border of zero you can really begin to refine the layout of your page in ways that x html doesn't with the examples we've done thus far allow you to do and i defer the specifics of this not because it's hard but because there's a lot of balance that you need to maintain to get it right but it is relatively easy and it's with again the table tag so let me change this back in case anyone logs in and sees our now hideous websites while we're here in class i change those back to zero refresh the webpage and it's back to its old self css revisited we saw css a moment ago as the value of what tag rather the value of what attribute the style attribute the style attribute can be applied to a lot of different tags as you will eventually see the div tag is one of them in this context though we are using what's called a more explicit style sheet it's a style sheet in the sense that we are enumerating top to bottom a whole lot of properties and property a whole lot of properties and values the other place in other words that you can put css is in the head of your document thus far the only thing we've been putting in the head is this title elements and that's great because it's useful but it suggests not we haven't seen any other use for this but you could also either before or after your title tag put not a style attribute but a style tag the value the attribute for it should be type equals quote unquote text slash css though if you omit that attribute and value most browsers will assume you're about to write in the style known as css beneath that you can put the same kinds of stuff that we saw earlier but in this kind of style sheet you can override the default behavior of tags in the document for instance notice this we've seen this single character before what is the a denote the anchor tag so with this line of text inside of the so-called style sheet that is between the open style and closed style we are overriding the default behavior for the anchor tag specifically we are specifying that all anchor text should be decorated with none we'll see what that means in a moment the font weight to be assigned to all anchor tags is bold and the color is blue think back now to the default behavior for most browsers most links are blue and underlined what we're saying here is that okay leave them blue make them bold but don't decorate them with an underline so if i load this page which is called css dot html what we will see then is the following hello world from little old me but notice what's ever so slightly different the underlining is gone under the me there's no underlining under me but notice this is new too if i hover over it notice what happens and we do this on the e1 website right when you hover over these links they don't become bold because they already are bold but the line does appear which is not standard behavior but it's a little different little aesthetically interesting so how are we achieving this well when we hover over this text what's having an effect is the css we've defined for the hover property of the anchor tag so we are saying yeah by default make anchor tags look like this which we described a moment ago but in the event someone is hovering over such a tag make it look like this the only difference is the color becomes red and the decoration becomes underline we can make this yet more explicit by doing something like this now if i go into this file i'm just gonna copy the source so that i can play with it in my own account i'm gonna load five dot html paste in that code and what we'll do is when you hover over this link now we're gonna really make it jump out at the user font size is now seventy two point right save and you'd be surprised how many websites actually do things like this so now i'm gonna go back to my account mail in slash five dot html looking pretty good hovering over it hideous but doable and this is the the implication here is don't do this but to give you a better sense of the actual power you can exercise using css and it's a lot to absorb certainly the first time you see it x html and its attributes and tags and css and its properties and values but again this is meant to be a cursory over it to be tonight of some of these concepts a teaser if you will of what you can do in the future well questions on some of the aesthetics we've seen because that's about all of the tags i'm going to introduce you to even though there are many more none of which are particularly hard we're not quite done yet though we have some other fun stuff coming your way let me pause though if there are any questions on what you have seen as far i forgot that one in fact yes so also in this style sheet there's another bit of syntax you don't have to fully absorb tonight but just try to remember that it exists if in a style sheet you start a line with dot and then choose some arbitrary string like my style what you can do is sort of pre define a style that you want to use elsewhere so what this means is that anywhere in this document that the word my style appears in a certain way it that text will become centered and blue in a sans serif font well where do we use that scroll your eyes down here and we seem to be making use of my style as the value of a new attribute called class so class and style are the two attributes in x-h-t-mail with which you can deploy css we saw use of style in the previous example when we overrode some of those properties but now if i want to reuse some css you can define it up top as a class which now this is and then you can reuse that stuff not by just copying and pasting it but by saying you know what put this text in the my style class but this text also in the my style class which means what can you do more easily given this approach as opposed to just copying and pasting the same stuff as the value of say the style attribute change things you can change one line of code and change your entire website and in fact what the e1 website makes use of which you'll see if you look at the source code to our site sometime even though some of it's a bit cryptic looking there is a file reference there called actually the source code real quickly at the top another way of linking to style sheets is not to pace them into the document itself but to say use the style use the css from this file the line i've highlighted those small suggest that there's a file called styles dot css we can pull that direct file up by going into the css directory styles dot css it looks ugly in notepad here but suffice it to say look at it in the better context these styles sheets that e1 makes use of are these we have a file in which we've defined several classes we have an announcement class we have a header class we have a subheader class and notice the first two which are perhaps the most real or appreciable is the anchor and the a hover properties and i know it's tough to see in some of this color and you can look at this certainly at your leisure but what we noted earlier is that when you hover over a link on the e1 website what suddenly appears the underline and we achieve that if i can even reach by saying for the hover property of the anchor tag that the decoration should become underlined whereas by default if you look at the very first line there's no decoration and that's how we achieve that result well there's this notion in x html of well-formedness and this is a useful thing to tuck away in your mind so that's you write what is ultimately correct code we've been doing this all along tonight writing well-formed x html without actually saying what it is all x html tags the names thereof must be written in lower case that is a component of the pages being well-formed not only the tag names but all tags and attributes in lower case that must be the case moreover and we did say this before all values of attributes which i'm abbreviating with at trs in quotes either a pair of double quotes or a pair of single quotes and finally and this too we did say before all tags are balanced in other words when you open a tag you must eventually close it and like we said earlier you must close it symmetrically most recent one you opened must be the most the soonest one you close so part of well-formedness of course is that you not use tags like this why is this a non well-formed tag it's an uppercase which is obvious and it's not closed so the correct one would be that or that or give me one more or that though this is a little strange the best way the best one is probably door number two so that's what it means to be well-formed one other piece of jargon with x html validity a page is said to be valid if it can this is going to be a scary sentence a page is said to be valid if it conforms to a dtd or document type definition what does that mean a web page is valid x html if you've only used the tags and attributes that x html actually supports for instance there is in years past a tag called blink which was a tag that if you put hello in a blink tag you can guess how ugly your website would be you'd have hello hello hello hello uh... microsoft i believe and let's keep eventually put their foot down and removed support for this tag all together and in fact it'll only one of them at one point supported them though it would be a curious experiment to see if we go into maybe our fifth document here scroll down to hello world and let's just for kicks if internet explorer does like this these days link let's go back to five dot html and fortunately support remains disabled this would be an example of even though this might work in some browsers particularly older browsers it is well-formed because it's in lower case and you have symmetry in the open and closure of the tags it would not be valid because it's not a legitimate and in fact i need to go fix something that i seem to say every year and then always correct myself on let's try to do it in the same lecture this time the fact that all tags are in lower case is a requirement for validity so i just fix this to be valid a page must only use pre-defined tags and attributes but more over those tags and attributes for x html happened to be defined in all lower case that is what their specification the language known as x html defines the tags and attributes as all lower case a page can be well-formed and is well-formed if no matter what tags and attributes are in the page the attributes at least have values flanked with quotes and all tags are balanced so i need to retract what i just said here this is now well-formed because even though blink and close blink are nicely balanced those are not valid tags according to the x html spec the nice thing though is that you yourself don't need to constantly believe constantly be looking up in a book if some tag exists or some attribute exists what you'll be able to do for instance is include a link on your page or visit a website that allows you to with a single click check if your web page contains valid x html or valid css in fact at the bottom of the e1 website have always been these two links sort of the w3c's the worldwide web consortium which we've mentioned in the past endorsement of our web page well all that really means is that if we haven't messed up the web page in recent days if you click this link the page will automatically be analyzed for correctness if you click this link it will automatically have its css uh... validated checked for correctness i am not going to click them on them during lecture because too often i've messed up the web page before class and we have a big glaring not valid x html and since i've already not practiced what i preached once tonight i think we won't do that demonstration but perhaps the most uh... overzealous student will race home and see if we do have some mistakes there but we'll conclude tonight with some features not of static web page development which is what we've been focusing on but more dynamism because notice what we've been doing all night every time we want to make a change what have i been doing in just very real terms every time i propose that we change a feature of the website what do we do right we go into that dot page we edit the source code as it's called we save it we go back to the browser we refresh well consider a simple example suppose you wanted to embed on your web page the current date that would be quite the burden to take upon yourself to wake up or to be awake at midnight every night so as to update your web page and change the date for the next day even worse suppose i had a clock on it i mean that does not scale very well but there are abilities in the design of web pages to dynamically change the content of your website one means by which you can do this is something called ssi or server side includes these are a feature of certain web servers particularly those running on unix or linux that allow you to embed what look like tags whose results are generated the moment someone visits the page that is to say if you embed these two lines in your eight x html on the web server what you'll see when a big user visits your page is the date and time that your page was last modified without having to change it yourself if instead you paste into your x html you can inform the user what their ip addresses if you paste this into your web page you can inform them what the current date is if you paste this into your web page you can tell them what browser they are using if you paste this in you can actually include the contents another file all together so if you want to have some common footer for instance on every one of your web pages just like with css you don't want to paste that footer into every html page again and again because updating it then becomes a pain so rather you can use server side includes ssi tokens as these things are called to say at this point in my file my x html file load the contents of footer dot html and automatically paste them here so that if you ever want to change the footer of your page the copyright information the border at the bottom you just change it in one place we can see the results of these things by visiting ssi dot html in ssi dot html you see an example of all the stuff we just looked at this is just a summary of what each of these tokens do what i'm going to do is click the blue link at the top which is going to show you what happens if you include these tokens in your own x html pages so notice this is the before what you have in your lecture slides if you actually load these tokens into your x html and then let a user visit your web page you see this all of those tokens upon being visited by a user change into what they should be doing we just realized that my laptop here tonight has this ip address notice what it used to be say there it used to just generically say this but when you actually visit a web page containing that tag it actually tells them their ip address kind of boring here but kind of scary if you flank that ip address with hey i just logged your ip address and know where you're coming from moreover you could say i also know that you are using a windows xp using internet explorer 6.0 now it's a little cryptic as many things have been tonight but this string here this phrase is known by computer people in the world to mean windows xp which is little more than windows nt version 5.1 msie 6.0 is ie6 and then mozilla compatible just means it supports the standard that certain other browsers support we clearly have a date of september twentieth which means not the current date but the date of last modification so if it's useful to your web viewers to know when this page was last updated so that they can immediately leave it if nothing has changed since they last visited train i think we've determined you can simply embed that token rather than manually recording when you last updated the page and of course now we visited this page at seven twenty those are ssis and the fas web server does in fact support those it's not the only way you can create dynamic effects on a web page using something called dhtml you can combine xhtml with css with a language called javascript which we'll see in a couple of week or twos time which is a programming language and how many of you roughly around halloween visited the one website and saw those flying bats okay so those of you who saw the flying bats that was an effect a dynamic effect created by dynamic html dhtml which is just the collective use of these three technologies two of which we've discussed tonight the other of which will discuss in the future yet another way of creating dynamic web pages is to use something called cgi common gateway interface we're diving now into verbally more uh... the realm of the slightly more technically savvy sort of seasoned web masters and web developers cgi is what the e1 website uses to dynamically generate its pages so that we do not again update xhtml very often we use a web interface to change the page and send announcements we use a web interface to change grades and so forth everything is done dynamically we don't manually change files because it's simply easier to use certain tools that we've developed instead of manually changing code this is just a snippet of what the index file actually looks like for the e1 website very unlike the html files we've seen tonight but cgi again is just a technology with which you can dynamically produce output asp is another one and i'm intentionally rattling these off because we will not be spending time in class this class on cgi asp's these are topics that you can learn in something like computer science e12 at the extension school is uh... web development and so forth but this is just a quick glimpse at what's called an active server page which is a microsoft technology and it's essentially the windows equivalent of cgi where cgi tends to be used more on unix and linux computers you might have heard of jsp's java server pages these are just like these other examples we've seen just tools with which you can dynamically generate web pages but these are written in the language called java you now speak greek we'll see you next week