 All right, welcome to computer science e1. This is our lecture on website development So it's tonight when you will learn officially how to make stupid annoying things like this This is more of an image than anything. In fact, we can tie this together to our discussion of past weeks What is this thing most likely that you see on the screen here? Think back to our multimedia lecture Yeah, so they appear to be animated gifs So the last when we spoke of our when we did our multimedia lecture Recall that we talked about various file formats and one of them was jiff another was jpeg But one of the salient features of jiff was that it supports animation unlike a number of the other ones And so what I just did in my browser, this is Firefox, but you can do this on Safari or Internet Explorer I simply went and chose view source and what you see here is perhaps fairly and it might look a little cryptic But at least it's there's a pattern here that you can begin to infer interesting things from here We have a number dot gf We have some mention of width and height and so it's collective with these lines of code So to speak that this little thing is in fact implemented This is apparently the hipper version then came out years ago. So this is what's called generally HTML hypertext markup language and HTML is the language in which web pages are written So realize that we've sort of been building on top of things here over the past several weeks We talked in our internet lectures weeks ago about TCP IP and that was sort of the language that computers speak on the internet to get data from points a from point a To point b irrespective of what kind of data that is for the most part and then we talked briefly about HTTP and we said stuff about port 80 and HTTP hypertext transfer protocol being the Protocol the language that web browser and web server speak just to transmit web pages back and forth But tonight we build ever so slightly higher on top of that and talk about what it is specifically that web browsers and web servers are exchanging wind with each other so specifically they're exchanging text files those text files happen to end by convention in dot HTML or dot htm or similar file extensions And so tonight we start talking about what is inside those files and the language in which those files are written is HTML and it's after tonight's lecture and the next coming the coming week section the upcoming problem set and ultimately the final project in Which you will learn how to write this sort of stuff realize that HTML has grown more sophisticated over time and if we go to something Like cnn.com and I do the same trick of going to my view menu and going to the page source screen You'll see that this source code seems a little more complicated than the dancing hamsters So this already should strike you as a little bit overwhelming but here too there are patterns So we'll learn today a lot of the fundamental constructs that underlie html so that even though you won't walk out of here tonight an expert certainly in making web pages because this really is an Art that you learn through practice and by reading up on it looking how other people implemented things You'll find that there are patterns here even though this might look like Greek to you tonight You'll see that with some basic building blocks You'll be able to start inferring from other people's source code how they implemented their web page and by course's end in your final project You'll be implementing your own website And it might not be the most beautiful thing in the world my first website was a train wreck But it was it I had this very weird sense of gratification because you're actually putting something out there on the internet You're gonna do that for your final project for 995 you're gonna buy your own domain name and actually be out there on the internet and it's all thanks to html with the wave of my hand Nothing happened so html how do we go about implementing websites? That was my segue it didn't work So let me go ahead and do this And even though websites are obviously something that live on the internet We can actually talk about them using even the simplest of text editors because if an html page a web page is really just a text file All you need is something like notepad or wordpad or Microsoft Word or text edit any program that can edit dot txt Files text files can certainly edit dot html files because they're one in the same with just a different file extension And so what we'll begin tonight by looking at are some of the basic constructs that underlie webpages And then start to build on top of that and do ever so slightly more interesting if just as ugly Webpages so with that said because a web page is just a text file You still have to tell the web web browser what it's about to see And so the very first thing that comes in a web page is what's called the html tag So as you're about to see everything that makes up a web page is Essentially boils down to tags and a tag is simply an open-angle bracket Followed by some keyword followed by a closed angle bracket and each of these tags or elements So to speak tells the browser to do something now this particular tag the html tag says hey browser Here comes a web page written in html And what do you think the last tag the second tag in this file says notice that it's slightly different with the forward slash in there Yeah, end html So there's gonna be a symmetry to writing webpages if you tell the web browser to start doing something you eventually are gonna have to Tell it to stop doing something and you're gonna see that you have to maintain some kind of symmetry So you have to close tags so to speak in the opposite order in which you open them And that will make more sense in just a moment because inside of the html tag In any web page you need at least two other tags one is called the head For the web pages header so to speak and the other is really the juicy part which is the body of the page Now notice I've gone ahead and indented just by hitting the spacebar a couple of times We'll see that html web browsers. They don't care about white space They couldn't care less if you have white space or not but for a human It's so much more readable if you maintain some kind of symmetric indentation And it's a matter of style and it's something we'll certainly expect in your own work because it makes it much easier for us The humans to read your own code. So let's take a look now at what can go inside the head So inside the head for tonight's purposes pretty much just one thing at least for now and that is the title So if I want to call this my first web page It suffices just to write in between the start tag for title and the end tag for title Whatever you want the title of your page to be and now down here the body of my page. I'm going to say To do because I still have to get around to implementing this Okay, so that's it. All right, and actually let me go ahead now go up to the file menu Save as and you know what even though it wants to save in this format I'm going to tell it specifically save this as a text document a dot txt by default because again It's just a text file even though by convention We're going to give it a different file name and you know what I'm going to go ahead and name this Index because it's going to be my first page. I'm going to call it an index dot html and hit enter And if I go ahead and show you my desktop now notice that I have this file index dot html All right, so that's it notice though. There's kind of a familiar icon perhaps. What does this file look like? It's associated with Yeah, Firefox, so if you're not familiar Firefox is just another freely available browser Does the same thing is ie same thing is safari chrome their whole bunch of options these days? So notice what happens if I double click this page It is going to go ahead and launch my browser in this case Firefox and notice here is my terribly Underwhelming web page the body of course says to do where is that title exactly? Yeah, so the way up there in the top So the title apparently refers to the head apparently refers to everything above the body the stuff at the very top of the page Well, let's make this slightly more interesting, but again. I make no claims of beauty here. All right, so let's see inside the body Let me do something a little more interesting. I'm going to say Welcome to my home on the web Let's see now. I'm going to go down a couple lines and say my name is David All right, I'm going to save this just by going to the file menu or hitting control s I'm going to go back to my browser and just as you might reload a page on the internet to actually refresh its contents for Whatever reason same deal here. I made a change to that file Even though it's on my desktop, but I need to actually reload it and tell my browser to do that Usually you cook some kind of icon or hit f5. So I'm just going to click this icon explicitly There seems to be a problem. Why is this slightly inconsistent with what you might have expected a moment ago? Yeah Yeah, so even though there's some meta data here, so to speak the tags that really aren't meant to be shown I do seem to have some nice Line breaks and some indentation but again HTML or browser specifically they ignore all of this to be clear If you want your browser to do something you need to tell it to do something by way of tags So if you want a line break you actually have to use what's called the line break tag So I'm going to go ahead and indent the same open bracket Br is the the jargon for line break and then this one's going to look a little weird But it soon will make a good sense I'm going to put my forward slash inside of the element itself and then close the bracket All right now. Let's see what the difference is here. Let me reload in my web browser and okay So baby steps, but now it's at least behaving as we expect because this tag says hey browser put a line break here now thought question why do you think this br tag Has this sort of fundamentally different syntax than the other tags which have an open tag and a closed tag What's going on here? Do you think? What's that? Oh, no. Oh, okay. Why? There is a space there and I'll explain that is a follow-up question, but good. I good. I Why might I have done this? Yeah Yeah, exactly. It's kind of a conceptual thing What would it mean to start a line break put something in the middle of it and then finish the line break? Right like you're either moving stuff to the next line or you're not there's no kind of limbo state So for any kind of functionality that really doesn't have the notion of starting and stopping But rather starts and stops all at once like a line break It's just and it's something atomic it either is there or is not you need to open and close the tags Simultaneously so actually I could have done this But the someone decided years ago. This just looks kind of stupid why bother this kind of mess Especially since it's technically an error to put anything in between there for this tag because again It makes no sense conceptually and so the world decided. Let's have a shorthand notation for that like this And now to your question earlier. I actually did very carefully put a space here. It's not strictly necessary but because we And in the world of computing and software development There's this constant tension between implementing new features and moving ahead while simultaneously being backwards Compatible so to speak and so not all of us in this room probably are running the very latest and greatest versions of browsers and Years ago there were some browsers that didn't understand this particular Syntax and so the world decided you know what just to hedge Against some old browsers getting confused in other words if an old browser saw this with no spaces It might think oh, this is the br slash tag But what does that mean the space just means it's still the br tag But most old browsers would just ignore that slash because they don't understand it But they did at least understand the first two letters br Okay, so what is David talking about? We have there is actually a name for for all of these things that David is talking about and it's well-formed in this and It's how well you are forming the HTML or X HTML in your page So just the general form here whereas David showed some specific examples I just want to show just start building upon some general forms here So let's say that we have an element name or a tag name called foo So we have two ways that we can open and close this tag name the first way up here Is this first line where you can obviously open it with some angle brackets and then immediately close it with a slash foo The other way as David was just talking about with br is to do foo space Slash and then you end the tag So now there are some ways there sometimes when you need to pick one over the other Just like David was talking about with the line break It doesn't make sense to have content in between the two tags So you might as well just have the one this sort of singular the singleton element that you have However, there are other tags that exist which would make sense to flank some text for example Let's say you want to bold some text You would want to mark in in a let's see in an X HTML page. You could say This word is bolded for example And now if we were just to if this was actually a properly Designed page with proper HTML elements. We would just see in plain text. This word is bolded. However Of course, I just want to bold one word. So I would use the strong tag To bold just this one word and as you can see now We have actually put some content in between the two tags So along these same lines every element that you open you must close So this is it's just it's good practice and you must do it in order to In order to make a page well-formed and therefore make it valid. So for every All of these types you've opened such as the word strong here or that the tag strong You must close it here as well so David gave an example on how to start a web page and that was an HTML page As we as technology progresses we are moving now and we are seeing more and more of this adaptation of HTML called X HTML and it's really essentially it looks the same It's essentially the same thing the major difference is that it's just much more strict And so when we're talking about X HTML, we are talking about Just adding some extra tags at the beginning of the page and maintaining this well-formatness It's more strict in terms of its validity and its well-formatness for all of these tags So this is just the template for an X HTML page And we will put these pages up on the on the websites that you don't have to write down Quickly all of the text that's here But you can see that something unusual is Happening at the very top of the page here and it's called a dock type we are declaring a dock type at the top of this page and There's a variety of reasons that we do this, but The primary reason is that we tell web browsers by giving it a specific dock type here How we are going to be designing our page and how strict or how Or how loose it should be when translating the page From the markup or this this text that we see here into actually displaying it on screen So for many of our purposes or pretty much all of our purposes using this X HTML 1.0 Transitional is fine That you don't really have to do anything you can literally copy and paste all of this stuff and adapt it to your needs Specifically change the title and change the content of the body There are others that exist The the other major one that comes to mind is strict and it is what it sounds like it is whereas transitional is more of this This transitional declaration of this transitional dock type between HTML and X HTML strict does strict is more strict and so you must be more careful with The elements that you use and being sure that everything is is well-formed and valid And we do actually have some tools that can help us determine Which pages we have written are well-formed and which ones are valid and we will actually get to those just a little bit later But I certainly wanted to show just this initial template Do you have something yet? Oh, yes question Yes. Oh Yeah, it scrolls to the right a little bit so you can't see the full the full part You can see that as soon as I scroll to the right a little bit now on this third line You can see where that tag closes. I put this on separate Separate lines just to make it more clear many times you will actually see all of this on one line It's just that with the text being so large to show it on on the projector I just figured it would be better to split it into separate lines You can pick either way whichever way you want if it looks cleaner to have it all on one line That's certainly fine But pretty much all of the examples that we'll show will have these split onto separate lines But don't let them confuse you like David said Browsers ignore the white space so as long as there are some there's some space between it Then it will be able to to figure it out Okay, so let's see if we can't make this thing a little uglier. Yeah, all right, so here we have Same Example as Dan was showing a moment ago But what I went ahead and open that file up is not in wordpad, which really isn't conducive to writing webpages But another free shareware program called text pad. I downloaded it from text pad comm This is on a Windows machine and what I did was I opened Dan's sample file and we'll make these available on the course's Website so you can play with them, but same here. This is called one dot html I went ahead and opened it with a browser and it simply looks like this Here what's Let me change one thing here. Well, that's weird Let's go ahead and see what we can do with this thing so here we have Okay, Firefox was misbehaving a little bit Let's see if we can enhance this thing a little bit So we have here our same example of tags starting and ending and notice the symmetry which I alluded to earlier So the html tag is open first But that means it's going to be closed last inside of that is a head tag opens But then there's a title tag, but then the title tags closed then the head tag is closed So notice the the balance there and so when Dan mentioned this word well form it nests earlier Well form it nests boils down to details like these when you open a tag You close it in the proper order and you are using the proper syntax within those tags Now what do I mean by that? Well, what's a nice thing we could do This is really not very colorful being on a white background black text Let's see if we can't spice this up a little bit And it turns out you can by modifying the behavior of these tags using what are called attributes So notice that I've just moved my cursor inside the body tag and I hit a space and what I'm going to add is the vg Color attribute so to speak and then I'm going to put an equal sign and then a quote mark and inside this quote mark is Going to go something let's say hideous like yellow close quote So an attribute is by definition a property that modifies the behavior of a tag in this case Bg color take a guess as to what this is hinting at Yeah background color right so people computer scientists Especially like to be succinct as much as possible rather than say background color bg color gets the job done an Attribute is followed by an equal sign and then a value in either single quotes or double quotes So long as you're consistent it doesn't matter But that too is a feature of what Dan called well form in this if you have an attribute and a value therein It has to be quoted with single or double quotes If I now go back to my browser and reload Now we got something going on here because that body tag is now telling the browser Hey browser here comes the body of my page, but that body should be have a bg color of yellow So Let's take a look then at this general form just to continue adding on to this well form in this idea So the first couple lines here was when we had an element or a tag with no attributes And the the last two lines are when we do have attributes So all we are saying is that if we have an element foo with an attribute bar We have to put the value of that attribute in double quotes or in quotes such as this bass and You have to it's you pretty much just have to follow this Exactly, so you have your element name a space the attribute equals and then in quotes bass This may sound silly, but for a long time HTML didn't require this so you could have You could even have something like or many in many pages You will see something like the attributes being in all uppercase for example, and that is not proper It must be in all lowercase, and I believe Sometimes you could see some attributes without any quotes, and that certainly is wrong as well So just be sure that you follow this sort of same idea or this general form, and you will certainly be fine Let's see so one last thing that I wanted to mention before I handed it back to David So we're talking a lot about well form in this, but there's another idea That is not required like well form in this is but it certainly will help you out And that is it is this idea of pretty printing and it's what we have done here We've tried to make it pretty or make it look obvious as to the structure of the file by using Indents and line breaks to our advantage. So for example whenever we have Nested an element so you'll see that this head is within the HTML element as soon as we have nested this head element We indented one one tab to the right from this head elements and then if you can continue with this pattern so that it becomes obvious what is nested in what and Just to reiterate what David said every time you open a tag you must close it But it must be closed in the reverse order. So for example having title here title must be closed before head is closed because it came after so Just to hammer this home. I can't do this. I can't swap the two This becomes invalid it becomes malformed because now the web browser doesn't know it's just ambiguous It's not as clear as closing these tags in the same order in the opposite order rather as they were opened All right, so my job here tonight is to do the ugly stuff So how can we make this this even worse? Well, let's see what functionality we can add to this So just having this text in the upper left hand corner not terribly interesting So what if I wanted to at least center this thing? Well, it turns out there is a center tag that will get the job done Notice I'm opening the center tag then I'm closing the center tag and then just to be anal per dense Discussion of pretty printing which has great value because it is humans ultimately that are often writing this stuff At least in the sense we'll be doing it in the course I'm going to go back and re-indent that part just to keep things clean now I'm going to go ahead and reload and okay now. It's a little more interesting. Let's toss another tag in there There are what are called heading tags and the one such tag is the h1 tag And its purpose in life is to give you the heading number one which by default on most browsers means big and bold It's it's pretty much as vague as that, but I need to close it as well So before open bracket slash h1 and we'll see now that this should in fact be a little bigger and bolder And it in fact is now unfortunately H1 doesn't give me that much control because there's h1 There's h6 if I now reload you get small and bold But these days now that the web is matured well beyond what it was in the mid 1990s when frankly a lot of web pages Looked like this my own home page included things have gotten much more precise And you have a lot more fine-grained control over fonts and sizes and colors and all of that these days And so we can ourselves even with some simple tags start to do exactly that So rather than just center it and use this heading tag I'm going to actually say give me a font whose color will be just to be hideous still red Close bracket and now what do I have to fix still in this example? There's a bug here, so to speak. Yeah, so I have to go over here It's not an h6 element anymore. I need to close the font But here's an interesting point even though I have an attribute now on the font tag. You don't close Attribute so you don't copy and paste the whole tag It suffices just to tell the browser the name of the tag that you want to close Which is why I might say open bracket font color dot dot dot but to close the tag to stop it I just say open bracket slash tag name. Keep it simple. So with this modification now I do have red text although pretty small But if I go in here and just as you might think there's color what might be the attribute that controls size And there's really not that much to web development at least on first pass I'm gonna choose a size of six which actually doesn't refer to font size per se It's another relative idea like h1 meant big Unfortunately, no one really thought to have consistency in the mid 90s And so h1 is big where h1 is really big whereas font size equals six is really big So one is big here, but six so it's backwards But so be it just a little something you have to memorize reload now. It's getting a little bigger Unfortunately, the world eventually realized that we don't think in of fonts in terms of relative values like one two three four five And if you've ever played around with like your view menu and gone to the let's see the Pay where's this style here zoom Well, there's a menu option somewhere in most browsers that allow you to control the font size I guess it's zoom and Firefox. Well, that's all about relativity You can just crank up the relative weightings of these things in terms of font size but we can actually be a little more specific and What I'm gonna do is scroll back make a little change here and use something a little more general Which you'll start to see in more sophisticated examples So again for now just little teasers of what's possible here instead I'm gonna call this a division of the page so a div tag here div tag here and Now nothing really has changed. I've sort of taken a step back But with the div tag can I now have a style attribute? And this is where there's a lot of power in web page design now and we're not going to dwell on this just yet We'll come back to this in a little while But using what's called CSS or cascading style sheets Can you be terribly precise as to the display of your graphics? So let me let me tease you with just this for now. I'm gonna say font hyphen size I'm gonna be really crazy here and say colon 72 point which is a familiar value from like Microsoft Word and whatnot And I'm gonna say font family Like typeface of aerial which you might be familiar with because right now We're using what looks like Times New Roman by default. So I've made this change It's scrolling off the screen, but it's really all I did was add that div and the style attribute Let's reload now and now not only do we have a Sarah a sans-sera font aerial We also have a very precise size. So again, baby steps are doing more interesting things Okay, so let's take just a quick step back and go through some of these things in a little bit more detail Break it down. Just a little bit more. Can you switch back to your text pad? Please notice that we have the bg color equals yellow So this is a very specific color and you'll notice as you're trying to create a web page that there's not actually a large selection of Colors you can't do bg color chartreuse for example or something like that You you have just some of the major colors available to you when defining them as words But there is actually another way to define a color and that is to define a numerical value for the color itself So this is going to look a little crazy, but it is essentially the same thing All we are doing is defining a color. We'll define and we'll show you how this breaks down in just a second So notice that this is a very similar example. We've done body bg color equals, but now instead of a word for the color We're using a set of numbers and you'll notice that it's it begins with a pound sign And then we have six numbers and characters or six numbers or characters that follow it and so this is a number that It's it's in hexadecimal format So what that means is that rather than being binary, which is zero or one rather than being decimal Which is zero through nine hexadecimal counts in one digit all the way to 16 So that means we have zero one two three four five six seven eight nine then it goes to a B C D E and F So F is just a higher value than nine is basically all you have to all you have to know about this So notice that we have six numbers here or six Digits here and this is actually divided into three pairs So all I've done is just put some spaces here. It's not valid anymore But I'm just doing this to show you just as an example And what and all we are doing here is defining numerical values for red green and blue colors So the first pair defines red the second pair defines green and the last pair defines blue So if we have zero zero, that's the complete absence of a color in this so it when we say zero zero for red What does that mean? There's no red at all in this color. That's right So F F remember that I said that in hexadecimal we go from zero to F F F means what for green? Yeah full green so what about zero zero for blue No blues so what color would we expect this to be? Yeah green so if I save this let me just fix it and then go back to Firefox and go to two dot HTML You notice that we have a green background and so now you don't necessarily have to Define these colors on your own But you certainly can have fun with them and just try random collections six Characters from zero to F and just see what kind of color you get But many times when you're dealing with programs that give you color for example photoshop Or in on the Mac you have a digital color meter. You can actually See you'll notice that here all I'm doing is that as I move my mouse around It tells me values for red green and blue and we can change it to 8-bit hex value now you'll see that in these sets of numbers here on the right it Tells us exactly the color that is defined by the color underneath my mouse pointer So when I have all F's over sayings that we have all red all green and all blue So that when combined would give us the color white and that's exactly what we see So if you were using a program such as photoshop or or this digital color meter or a variety of other Programs and if you see this hex value for a color that you like then you can certainly use it Just remember the value. So how would I input white then as the body background color? So right six F's So switch back here So now I have six F's so that means that I've defined all white So we can clearly do even we've been doing extremes here from zero all the way to F But we can do something in the middle as well So what do you think would be the color of six C's I heard somebody say something? Yeah, gray exactly So we have a somewhat light gray So as we lower the numbers the darker the gray becomes so let's do all eights for example Becomes a darker gray So all this is is really just to not scare you. That's that's not the intent here It's just to make you more familiar with what this crazy number actually is all it is It's just defining a set of colors or one color rather by three pairs of Values one for red one for green and one for blue and if you do the math because each Character here goes from zero to F which means that each character has a representation of 16 different values or Right so 16 different values. We actually have for two of these here 16 times 16 is what? 16 squared anybody So 256 values so by having Two characters here that can go from zero to F each We are defining 256 different values. And so this sounds familiar. What else does 256 sound like? That's right. It's a bite. So we are defining one bite of color information When we are talking about each of these so all we're doing is just making essentially 24-bit color because we have three bites And there's eight bits in a bite. So we are making 24-bit color here That's all that is relatively simple. I hope It's so we've got the ability to have colors We have the ability to change the background the font face the font style We've certainly given those thought to making all of this pretty but let's see if we can introduce a couple other building blocks What is pretty commonly found in webpages these days? So links photographs, okay, so let's go with photographs then links here So I know that I'm familiar with the google images for instance. So let me go to google.com here Uh go ahead and search for you know what we should do. Let's go to image search Let's see uh quote unquote Then arm and aris See if we can't have some fun with this. There we go. There's some fun. All right. How about this guy here? Unfortunately, I'm on the same page, but never mind that. All right. Let's go ahead and do this You probably know or if you don't now you shall know that if you right click on an image That's in most any web page. You can usually choose some option like save image as So i'm going to go ahead and do that in my browser. There it is save image as I'm going to go ahead and choose that option navigate my way to the desktop or whatever I want to put this thing And then i'm going to save it So I save this to my e1 folder on my desktop right now And if I go ahead and open that yep, there it is There is dan alan dot jpeg if I double click that i'll actually see it in whatever program opens jpegs by default So we've seen jpegs before talked about them a few weeks ago Let's see if I can't integrate this into a web page So I've got my little mess here the recall that this currently looks like this So let me go ahead and simplify this a little bit I'm going to rip out this code because right now I don't care so much about the font text I'm going to go with the simpler h1 dan Armand aris close h1. I want to put this image now on another line So i'm going to go ahead and do a line break technically the h1 tag though gives you a line break But i'm going to be consistent with the past lesson there and now I need to insert an image So what do you think the name of the tag is for an image? Yeah, so succinctness kind of rains here. So it's not image per se. It's just img that gets the job done And that's what you need to type and then you need to tell the browser the source of the image What is the file you want to put here as an image? And so i'm going to say src for source again shorthand notation, but it's required to type that Equals quote-unquote something well the something i'm going to put in between those quotes should be what presumably? Yeah, so dan alan dot jpeg is the his the name of his photo now an image does that have the notion do you think of starting and stopping? Not really it's kind of there or it's not much like a line break So i'm going to go ahead and do that trick with the inner slash mark and just say start and stop All within the confines of this image i'm going to go ahead and save this file go back to my browser hit reload And there we go dan armandara's and actually this is a really nice time We didn't dwell on this too much, but you might recall in our multimedia lecture We mentioned that images are all modeled as rectangles and jpegs don't support transparency whereas jifs do well The implications of that is that it's kind of difficult to embed a white background dan armandara is on a yellow background because you actually see the rectangle Shining through and the solution to this is not terribly easy We have to resort to a jiff or do some other bit of trickery or go into photoshop and make the whiteness around dan's head Itself yellow so that it's still a rectangle, but you just don't notice But this is perhaps an interesting tie-in with one of the implications of all images being modeled as rectangles. Yeah Ah excellent question So this file is called one dot html at the moment And it's the file that dan started us with that i have a copy of But because i put the image in the same folder in which the html page is The browser assumes you're using a relative path so to speak and in the absence of specifying something explicit Like c colon backslash whatever it just assumes that the image in the quote marks is in the same folder As the actual html page. So it just knows to actually look there Now there are of course other attributes and today is not so much about teaching you every little tag and attribute that exists Because we'll point you toward in section in the problem set Resources online best way to teach yourself this stuff frankly is either to pick up a book Or just look at the any number of tutorials available online and you learn as you go. Well, there are things like with Equals quote unquote and you know what I would like to see dan a little more clearly or a little more blurry But a little bigger. So how about 300 percent dan armandara's i'm going to go ahead and do the same thing with height So height equals 300 percent of dan armandara's I've not paid for this software just yet because it's shareware. I'm going to continue my evaluation of it Now i'm going to go to my browser click refresh and wow Look at that there. That is a huge dan armandara's but we can see What ironically dan called dithering a few weeks ago when we talked about multimedia you blow up an image too much and Whoa, does it get? Ugly shall we say Let's add one enhancement to this. Let me go ahead and scroll back I'm sure I'll get bitten by this Eventually, let's scroll back to this and you know what I'd actually like to include an image in this page So I was rather a link in this page. So this is sort of the nature of hypertext, right? This is why html was largely created in the first place was to link this page that page It's just as easy as these other basic constructs if I want to have a link Such as click here to visit my home page I'm going to say something like click here to visit my home page But now I need to actually make that text hyperlink link to something. Well, the tag for this is Unfortunately, not as obvious as you might think but it's an anchor tag with a being the tag's name So anchor this link here href for hyper references. Where do you want to link to? Um, I think dan's current url Go to your photos website what uh No, it's it's in a state of flux. So let's do photos dot dan alan dot net. I guess okay So this is dan's current uh website and notice what I've done a href equals quote unquote And then the url to whatever the web pages that I want to link to but i'm kind of missing something Even though it's scrolling off the page here. What am I missing? Yeah, so if you've ever been to a website where there's not much quality assurance You might see that the whole page has become one huge hyperlink And that's simply because someone has forgotten to close a tag somewhere So we can actually replicate this in just a moment But for now i'm going to close this safely so close anchor go back to our page click reload and look at that It's it's still not pretty to be sure but notice this link here if I hover over it Just like we discussed in our security talks You see the url to which the hyperlink is going to take you and if I actually click this link now I'm going to get whisked away to that particular point But we can be even fancier you can make anything a hyperlink if I want to make dan's head a hyperlink You know what i'm just going to go ahead and copy the same tag because I want it to do the same thing I'm going to go up to his image tag and instead of putting text in between the anchor tag start and end I'm instead going to leave his image there if I now save that reload Notice I get a blue border around the image just like you get a blue line under the link And so now I could click either his photo or that link and end up at the same place Now just to emphasize the bug or the mistake that I suggested was relatively easy to make Suppose that this page actually had some additional text So this is some additional texts and just to make this point. I'm just going to do this a bunch of times Okay, that's going to be one long paragraph Okay, notice there's no line breaks because I've omitted. What for my source code for my html code All right the br tag or something to that effect, but that's okay I just wanted some filler material there because I wanted to demonstrate that if you're a little careless or just make an accidental mistake like this It's very easy to omit a single character But let's see what the effects are in firefox. Notice that I've removed the forward slash I'm going to go back and reload and now nothing seems to have happened. That's so bad yet So that seems okay What if I remove this thing all together now make the problem even worse because I've completely forgotten to tell the browser Stop hyperlinking this text and I go back over here reload And now you get this one huge hyperlink which might look a little confusing But if you again you think about what these tags mean Start making this a hyperlink if you don't tell the browser stop It's simply not and this whole thing now becomes one huge link Okay, so let's take another step back and look again at this photo just uh Well not not at the photo per se but at this image tagged and just a little bit more detail Uh, we had a question a little bit earlier about Locating the actual image in a directory So let's say that we want to clean up our images Let's say we have a lot of photos that we want to put on one web page and we want to organize Um our web page a little bit by having like a special images folder for example So what I've done is I have downloaded an equally embarrassing photo of david Put it into the images folder and I want to link to it And so you'll notice that I have a collection of files here one through three And some other ones that we're going to get into in just a little bit And I'm working on this one dot html and you'll notice that Rather than referencing in this image source mail in dot jpeg I have to type in the name of the directory that it is in so it was in images images slash mail in dot jpeg and one of the easiest mistakes to make Is to pluralize something one someplace and not do it someplace else So if for example, I decided for whatever reason when I was writing the web page That it was going to be in a folder called image It wouldn't find it because clearly this folder image does not exist So make sure as a troubleshooting step that you have the path absolutely correct And so remember that this was a A relative path which just means that the web or the web server knows where to find the image based on relative to where this document is So just because like I said before This file is in some folder and there is an images folder in there It can find that images folder in that same directory and find the file in there So if I open it up here, you'll notice that I gave david some more flattering dimensions as well I think your photo is much less flattering much less flattering. That's why I said I gave you flattering dimensions. Yes If I just put Mail in so removed images slash like that. So I'll save it and then I'll try it again You notice that it does not find it the image actually disappears and different web browsers when it can find a An image will react differently. I think internet explorer will actually give you like a little broken document sign Firefox Well, it really depends on the context of the page as well But in this case you can see that we actually have no indication that the image should be there at all We could probably add a border by using a border attributes and see if that helps Yes, you can see that we have something we can see that something should be there, but it doesn't exist So if I fix this Source tag to include the photo in the images folder, you can see that now We have our images back and so A david mentioned before the idea that you can use Percentages or points in order to size something, but you can also use pixels Which is perhaps most useful with images because you may know exactly how large your images in terms of pixels But maybe not in terms of points or some of these other units. So you can use the px unit to define pixels So, uh, I think I made this twice too wide. So if I wanted to make it correct I would make it the original size of this image 64 by 76 pixels and I can see that it it Well, it looks more correct. Maybe not better Back to you. Whoops Questions on html tags attributes thus far. Yeah Yeah, it's it's a good question. I did. Um, I'm a little anal frankly when it comes to that I'm not try by convention to alphabetize my attributes so that when your pages get more complicated I mean part of it's a little ocd. I'll admit Um, but another part of it is when your pages get a little more complicated And you're just trying to find things and check if you omitted something It helps me as a heuristic to see is it there if it's not alphabetized then I know it's not You know, I do it a little bit differently. I actually group them by Categories of attributes. So like what you saw over here. Oh, let's see. Do I still have it up? Um, like what you what you saw here was that I had a section for the source And then I had over here a section for dimensions So the width and the height was defined just a little bit later Of course, it doesn't it doesn't matter the order and you may have a preference to do it one way Or another The space in between the attributes like such as here Yeah, it doesn't matter. You can have as many spaces as you want just by convention You will almost always see just one space Let's see. I don't know if Validators will get angry if you put them on separate lines, do you know if that's that's fine You can hit return as many times as you want So again, the browser will ignore white space here as well Just so long as you have at least one space between One attributes value and the next then you will you should be okay Um, so there is actually a third example that just builds upon All of the stuff that we have seen before and so We have this in the body. We have this idea of a div or a division that is contained within The web page and we have we can set An alignment for that div you can see that we've done a div align center, which would do Exactly what it sounds like just to line this division in the center We have some text here where we have defined some font color And here you can see we have a new attribute called face, which is essentially just What type of font that it should use and generally speaking you want to use Not a very specific font when you're defining fonts in your web page because Many computers do not have the same fonts as your computer might have so there are a lot of safe ones Aerial for example is relatively safe. I think alvettica is also safe times new rome and a lot of computers have these But once you start to go outside of these half dozen or so safe fonts You're really reaching into territory where your web page will look very different from one Computer to another because they just won't have the same font as you will so When using when defining specific face, we're just saying the type of font that we want to use Which is generally better practice because then you can you can try to make your page look as closely To what you want is possible without you know getting too much into Into all of these details such as who does everybody have the same sort of font And clearly we've defined a size attribute here as well And then after a line break we have to find again a font color. What color is this? pound zero zero zero f f Blue that's right. So we have no red no green and all blue. So it's that this is exactly the same as defining blue up there The advantage of course is if we wanted to have a more complex color than just the simple ones that the browsers can provide You'll notice that here we have a face, but also a size that is slightly smaller And here I just want to show you something Pretty neat about this one example that you haven't yet seen So this hopefully is not any surprises. We have the large text that's blue the small text That's blue and I'll make it just a little bit bigger so you can see what's going on But you'll notice that I have a link right here But in the very far left corner of the web browser it tells me where this link is going And it says it's pretty tough to read But so I'll zoom in a little bit and it says mail to colon. No, this is not going to work Is it? No as soon as I move the mouse off it you can't read it. So I'll show you here on the link we have an href that points to mail to colon username at fast dot harvard dot edu So when you define a link this way the only difference from a regular link is that within this href We have a mail to colon notice. There's no spaces. There's no capitalization anywhere Now we are just defining an email address So if I click on this it brings up my email and we can you'll see that I am sending an email now To username at fast dot harvard dot edu. So when you need to embed Let's say a contact link to yourself or Send an email link to someone you would use this mail to trick in your hyperlink Any questions on any of that stuff? Okay, I think we will take a quick five minute break and when we come back we will keep talking about xhtml Hi, okay. Welcome back everybody. So as you know, we have a holiday coming up very quickly And just a quick announcement if you haven't seen it on our website We actually do not have lecture a week from today. So the the I believe it's december 1st the first day following the Thanksgiving weekend Don't bother coming because we won't be here and the same goes for section as well Normal section schedule should resume after that. So sections you will have on on thursday And then of course we will have lecture the following monday So just wanted to go over Some stuff really quick that david alluded to in the first half. So If you take a look at this example This was just the example that we had just shown with the the mail to link and some of the font colors and some of this other Relatively fancy stuff that we have now But this is starting to look like quite a mess already even for a very very basic web page And so you can tell that we have to find some attributes for this font that are very similar for both sets So the first top and the bottom and the bottom part have both sans seraphases and also blue color. So is there some way that we can standardize this or maybe Set up these attributes in a different way And one of the things that david mentioned before was this idea of css or cascading style sheets So this is another standard which is separate from xhtml But is usually involved with it because it's almost always embedded in web pages or Embedded in some way into a web page And it is a way of defining styles for text or for blocks of text or for these divisions That you have on the screen and so notice that we've changed the text from this font Into and we put it into a div or this division for the page and we are defining a style attribute The value of this style attribute is just the css and css itself defines A set of properties that is associated with everything Within that particular element. So here notice that we have a few things We want to align the text as being in the center We want to make the color blue And we want to make the font family notice that it's slightly different from from The xhtml attributes in that it's named font family rather than than font face We want to make it sans seraph and also finally we want to make the font size 36 point So now you'll notice something just slightly different here So this is all within the double quotes defined in the style attribute So this is all one value and we have here we define A value or we define one of the attributes Followed by a colon Followed by the actual value for that attribute itself So we have the text align followed by a colon followed by center defining where that Text will be aligned all of these things are separated by semicolons So If we scroll down just a little bit we have almost exactly the same thing Div style with the text aligned in the center the color blue font family sans seraph But this time the font size is slightly different. It is 10 points now rather than 36 point So Is there some way that we can abstract this even more some way that Sure, this looks I mean it may look a little bit more confusing But is there some way that now we can Pull these two styles out And define them elsewhere so that we can simplify The xhtml and indeed we can you'll notice that now there's some new tag that we're going to define in the head tag And it is called style we give it a type of text slash css So notice that it's just a new element called style and in it we have an attribute called type whose value is text css And we define some of these styles and you'll notice some stuff looks very familiar So we have a text align colon center Color of blue a font family of sans seraph But there are some new things involved here and we have we are Placing all of these attributes into a collection of attributes and we are giving it a name That is what these Curly braces are doing for us. It's we are separating all of these different Attributes all of these separate css attributes into different Names so we have here a dot my style and then with open curly brace We define a set of css properties The text align in the center the color of blue font family of sans seraph Then in the next set we have an a Text decoration none font weight bold etc etc. We'll come back to these these two in just a second But I want to focus for now on this period my style So if I scroll down a bit and we look at the body Notice that and I really want you to notice that this style is in the head It is not in the body is in the head before you define The actual text or any of the markup that is within the body of the page itself Um, what is this stuff right here this angle bracket exclamation point dash dash and then at the very end dash dash Angle bracket. What does this stuff do for us? any ideas Yeah Right. Yes. So it looks similar to up above though the the reason might be slightly different. This is what is called an html comment So whenever you have let's say you had some text In an html comment here. So we do angle bracket exclamation point dash dash you'll notice that this text editor that i'm using Actually changed the the color of the text afterwards to be gray The reason for that is that if I put in some comment here And then close the comment with dash dash angle bracket This text will not actually show up in the page if we load it in a web browser So i'll keep it on this page for now so that we can I can show you in just a minute But all it is Is that it is telling older web browsers or or new web browsers follow this as well That the code inside this or the text inside this should not be shown On the page so for old web browsers that may not support css we put it inside of these html Comments so that this text does not show up at the top of a page somewhat unexpectedly So this is just a uh a compatibility thing and really all you have to do just like many of the other examples Is just copy paste this and put your css inside of it. Yes Wouldn't anything up here not show up anyway So that's what you would expect but some web browsers Might do it anyway There's a lot of web browsers out there and they're all programmed very differently some might follow the Some might follow the uh the convention of putting everything inside the body But many times web browsers, uh, you didn't have to create a well formed page at all You could omit all of these tags and just put text in a file And it will still show the text on the page So this is really just so just because it's in the head doesn't necessarily mean that a web browser is going to Not show it on the page. So this is just an extra protection For us or for rather for the users of our Web page so that they don't see even if they don't see this text even if they're using very old web browser So many times you'll see this around and not only with css, but with some other Code or some other text that we can embed inside of a web page itself But let's focus again on this dot my style. You'll notice that if I scroll down here I have changed all of that long style attribute into Class equals my style on this div So what we are telling this element is that we want to use a css class that we've called my style And all of the attributes that are defined within it So the web browser knows to go back up here Find my style you'll notice that there's a period before it and that defines that it's a class Almost always you will use this this period. So We have the period my style and now we have that same Attributes that we had defined before the text the line in the center The color is being blue and the font family being sans serif So now you notice that very there's We've taken out that common code Or that common markup and put it elsewhere But now we've just reserved this font size, which is the only thing that's changed between these two divisions We've only defined the font size as being new now. So if I save this Load up the web page, which is css one dot html You'll notice now It looks smaller and that's because I had zoomed in before if you remember I made the text larger on the previous page But now it looks exactly the same and we have simplified our The body of our web page just a little bit by pulling out all of the style Or as much of the style as we can putting it into a class and moving it elsewhere So There's one last thing or Well, really quickly before I go to this one last thing You'll notice that I have this some comment text in here. It does not show up in this web page So this is just to solidify the idea that putting some text in this comment does not show it in the web page however a user could still view the page source and Well, it should be there Oh, I was modifying css two. Okay Right css two dot html Okay, so now I refresh this I view page source and you'll see that it has The comment in here. So even though it is not on the page itself A user could still see the comment by going into the page source So don't so don't think you're going to put some big secret In an html page comment because someone would still be able to see it So quickly now, there's just one last thing that I want to show And that that is these last two sets of css properties You'll notice that I have an a and a colon hover But I don't have a period before them without the period We are saying that we want to modify the style of an element So we are modifying this the style of the element called a And the second one Is modifying the style of the element called a when our mouse is hovered over it So now all we are saying is that for a link When our mouse is not over it, we don't want we have we want no text decoration Which as you can see below means that we don't want an underline And that we want the weight the font weight to be bold So now by doing this we are changing the way That a link appears on our web page So rather than being underlined but have the same font weight You'll notice that You notice that the hyperlink doesn't have an underline and is now bold But if I move my mouse over it You'll notice that it is now underlined And so this is a style that is very popular on web pages nowadays And it may be not necessarily have a higher font weight But maybe it's slightly different color And as soon as you put your mouse over that link You'll notice that it is underlined And in fact our very own Web page uses that similar technique where links are underlined But and are differentiated by color rather than by Having them be underlined to begin with some people consider this a little bit cleaner You can of course use this css to design your web page in any way you want And css can actually get very very complicated very very quickly But in this way you can define styles for your web page So you can abstract the content from your web page from the actual style itself So that later you can go back and just change the style sheet To change how that content appears on screen Without having to change the markup Or without having to change all of these style elements Or all of the attributes that exist in all of the elements on the web page Yes Does the comment syntax only work when it is outside of a tag? So are you referring to commenting out say an attribute? Yes Right So it's it's probably just the way that my Text editor is behaving It doesn't necessarily indicate anything about how the web browsers behave when they see it So I use a text editor called text wrangler And it tries its best to properly color these elements and the attributes for me so that it makes it very easy So for example, it colors all of the elements blue all of the attributes Like a purple and all of the values of those attributes in orange just to make it more obvious On the markup that we are talking about why it doesn't make this gray is probably is Less clear, but it could just be Because it is inside of the head. It's just ignoring That aspect it could only be doing it in the body, but it doesn't necessarily say anything about how Web browser would react to it. Like I said, it's just it's just specific to this one text editor So before we turn our attention to things server side Which after all is where we want to be when we're writing web page is a quick word on the upcoming problem sets It will have you implement your first web page and to keep things simple What we're going to have you do is implement things client side So you too in the problem set will direct you toward this We'll just fire up on your mac or pc something simple like notepad or text Edit or anything that comes for free with your existing computer And what we'll ask you to do is whip up your first web page In a dot html file and then ultimately submit that and it's going to be a little underwhelming at first because you're not Actually going to be out there on the web But what this is is a step toward the final project which for the course recall is to again Procure your own domain name whether it's in dot com or a dot tv or any other Sort of a vanity vanity domain that you might like to get and actually put your final project out there on the real Worldwide web and we'll introduce you to the means by which you can do that over the weeks to come In fact, what we've done proactively for the course is signed ourselves up for a dreamhost dot com account There are web hosts out there that are a dime a dozen these days But among the more popular ones is this one called dream host and we'll talk a little bit about What it means to host your website through someone else But just as a teaser notice that what you'll be getting Is a veritable laundry list of e1 topics by way of this account So we're going to give each of you a username and password on this server that we're paying for access to not all that much It's quite remarkable what you get these days for not much money But notice that you'll be getting not only a place to put your websites ultimately But pop and smtp access you'll be able to have emails in your own domain So david at my personal domain dot com and the like You'll be able to have the ability to filter email to have web mail to do dns things So again, if you skim this list, there's a lot of nice synergies with the rest of the course So more on that in just a little bit But tonight's also been throwing a good amount of material at you and we've only scratched the surface of what some What you can do with html or x html and css But that's largely because the stuff really is best taught Hands-on by way of practice. I think it's very dry to have a couple of people tell you about html It's much more fun, frankly It's much more creative to sit down and sink your teeth into this yourself But in addition to some online resources, which will point you toward for this next problem set Know that this is one of the books that's recommended in the course of syllabus And even if you didn't procure any of the others you might find this kind of thing valuable Especially if you're the type who likes who drives comfort from having a nice textbook by your side While working on the computer. This is one of the books that we recommend The other one that we recommend in the syllabus that's on point looks a little like this We uh, I would suggest personally going to something like amazon and not paying even $23.09 But go find something used on these websites. In fact the previous example I think it might not even be available on amazon, but you can get it from Four cents on upwards. Um, that's that doesn't mean these are bad books It just means that there are there's a glut of them out there But another one that's really good if you'd like to jot this down if you think you would likely take the plunge and get some book Say from amazon This one is called html your visual blueprint. That should be enough to find it on the web This I like too because pretty much every page in the book is how to do x how to do y And it really just tells you how you can do something similar to what we've been doing tonight on making something colorful Making something big making something bold Now to motivate our transition now from things client side because both dan and I have been whipping up examples on our own pcs and max Opening them in a browser and showing you web pages but web pages that no one else in the world can access So we're going to transition in a moment to things server side. I thought to motivate this. I would do some sleuthing Uh, I think we've talked about this site before. This is the way back machine It's a wonderful resource that for years has been trolling the internet and making copies of websites out there My own personal home page included so what I did was I searched for my own home page back from when I was a student And found this excerpt from 1997 my web page apparently that that time looked a little something like this So this is a moment in time from 1997 Unfortunately, you can't go Further than this because I was trying to be clever and I had some what are called server side programs running So that when you type your name into and then hit proceed I think it logged people's names to like a file on my server so that I could see who was coming to my site Uh, it was just this was me with way too much free time But apparently I was doing the whole initials thing. So I didn't have a vanity domain But I certainly was vain at the time um, then fast forward to 2001, uh, which was the link I clicked And this was frogman dot student dot harvard.edu my alter ego I had a my own linux server sitting in my dorm room And I apparently kept this site up for a couple years after graduation This was one of those annoying websites where before you can even reach the website You have to click the damn enter button which only serves to annoy people, but I thought it was cool Uh, if you go ahead and click this you will see that something I scanned in using if we want to tie in multimedia here A scanner connected to a mac at the time I scanned it in as a jpeg and what I scanned in Was a calendar That was muppet themed that I think I had gotten for christmas that year and I just thought it was funny Uh, so I was frogman or my computer was frogman So here is kermit dressed as batman of course and I'm not going to uh click these links here on camera But apparently there was an exhibition of all the little web projects I had done at the time and a whole bunch of other stuff as well So you can have great fun with this stuff Frankly even pulling up real websites that you've heard of just to see what they looked like some number of years ago But the point that we're trying to make here is that there's Utility of html far beyond what we've been doing thus far because the magic comes In when you put this stuff up on the internet and clearly it's here to stay So a little something now about how you get yourself up on the internet and uh, how you get it there to stay So when you design your web page you most likely will want to do it in a similar way that we have been doing Where you do it locally on your computer before you upload it to a server So remember when we talked back when we talked in our our networking lecture about the idea of servers And clients where we have a web server that operates on some computer Over the internet and we as clients point our web browsers to that server We request a specific page from that server that web server fetches that page and it sends it back to us and so Many times what you would do in the real world is you would use something like what's called an sftp program Where you essentially have a you would have to connect to a specific server So i'll connect to mine just for good measurement. Let's see if I can remember my password It's been a while since i've touched it you log in and remember that we talked about ftp and sftp And uh, these are file transfer protocols where what you would do is you connect to a server and you are able to transfer files Back and forth from them Let's see. Oh good. So here we go And normally you would upload all of these files to a particular Folder and so you can see here that I have a file called index dot php And if I actually were to Edit this file it it looks not at all like the html that we've been doing that's because what I've been using on on mine and this is uh also used in the um On our website on computer science one dot org is we don't have a set of static pages like what we've been showing Where you define all of the content in the page You upload that page and that page never changes as long as you access that page without modifying it It always has the same content where uh, there does exist different types of pages of dynamic pages such as this php file, which is Basically an oversimplification of I mean these five lines of code was really just meant to be like wow It's so simple. It's actually a lot more complicated, but um What php allows you to do is it's a separate language. That's uh very different from xhtml It's more of a programming language than a markup language like xhtml And it allows the server to do some processing on on its end before it sends the web page So when somebody accesses index dot php the server reads this file it processes it Constructs the web page based on the instructions that it was given and then sends the completed web page Back to the user so dynamic web page is very very useful in that way because you don't actually have to modify The web page itself. Maybe you have just a couple of files for example that uh, you would want to modify but Sort of beyond the scope But it certainly it's beyond the scope of this of this class But it is an interesting look at what you can get into as you progress in your studies of xhtml and web pages So anyway after you upload your files, you'll notice that you have a collection of files and a collection of folders And um, you'll notice that there's something all the way over here, which looks pretty funny, which is permissions So when you upload files to a server you usually have a username on that server And you usually have a folder that's been reserved for you for you to upload your files and your web page And you must define a set of permissions and they are Exactly what it sounds like it defines the permissions So you can define who has access to each of these files And uh, we can devote Literally half an hour or an hour to talking about permissions But basically what you need to do is give permissions That allow the world to read your file. So Really all you want to do let's see if I can find a good example of this maybe under Styles I have a styles.css file, which is just uh, it's uh, Remember what I talked about? CSS style sheets before you can actually remove them from the xhtml page and put them in a separate file Include it differently and I didn't demo that but just know that it's possible And you'll see here that we have a permissions set of six four four and you'll notice that there's Three r's in there and that basically just says that um, we can Read so people that are not myself me being the owner of this file Other people can read this file, which is very very important because Other people would need to be able to read this file to be able to open it and for their web browsers to parse it So many times you will get an error of let's say, um, I'm sure many of you are aware of this error 404 not found. There's also another very common one 403 The 403 is an error that usually indicates a permissions problem where Your file just doesn't have the right permissions for everybody to view it So this is just a very very high level discussion about it and without going into the nitty gritty Hopefully Through dreamhost you'll find that it is a lot easier There's actually a web page that you can go to where you can upload your files And set the permissions there Usually though when you upload these files the server is pretty smart about setting The correct permissions to begin with but most likely Permissions is a is a topic that we'll have to go over in in sections just because of time Let's see so I wanted to show you just a concrete example. So we've We've shown lots of really basic examples about web pages But just to show you that you actually know enough now to be able to look at the source of actual web pages I thought it would be fun if we actually viewed the source of the course website web page So let's take a look. So just at the very very top You should probably recognize this we've defined the doc type and it has its very very long thing You notice that it is an xhtml 1.0 transitional just like I had shown in example one from that that template that I recommended that you use We have an html tag a head tag We have the title over here it's computer science e1 understanding computers and the internet We have some other tags that we didn't really go over meta And some links this link tag is how I actually can Define an external style sheet, but we don't really have to go into that then of course we have the body and several divisions You'll notice that these divisions Are very very simple. We have one called the page and in it We have title computer science e1 understanding computers and the internet which actually represents This text up here So we can just keep going. We have a header with A link and an image and we can actually view this image if we wanted to Copy the source and just paste that source at the end Oops, we have an extra tag here. You can see that now. We're just looking at the image That's at the top directly So all of this stuff you can find and hopefully you will be able to read and parse This web page on your own just by opening it and reading it and realize that A lot of the style that exists in this page the colors for example the layout Is defined in the style sheet that's external, but this really shows Some of the power of css that you can Just separate the content from the page like I had mentioned before from the style So we can take a look at the style sheet as well, which will Perhaps not look as familiar just because we haven't gone over css As much as xhtml, but you'll notice that We have a lot of the same sorts of properties that we had mentioned before where we had The body so we want to define some styles for the body. We want to define some styles for links For visited links for links that we hover over and just a variety of things here So you can certainly take a look at all of these and as soon as we go to A web page that is much more complex something like cnn.com for example, which is usually a bad idea to bring up in in class because everybody starts reading it You'll notice that they also follow exactly the same Basically templates that we have they have a dock type, but theirs is of html 4 transitional rather than xhtml 1 transitional They have some meta tags. They have some link tags, but if we keep going we should eventually find Oh boy, I passed over it Well, they have a head tag in here as well And you can certainly look around and just try to figure out how People have designed each of these particular web pages and it's certainly very very powerful and it feels It's really really fun. I think when as soon as you start to learn a little bit about this You can go to major websites and try to figure out how they work or how they have been able to lay them out in a particular way and it's fun to emulate designs and until You are comfortable enough where you can design your own web page and have it Look very very Individual or unique without hopefully being terribly ugly So again in the first half we talked about Well formanness and validity So although there isn't a very good way to test well formanness directly We can't actually test for the validity of a web page with an online tool And so the w3c The web consort the worldwide web consortium actually has a validation service where we can give it A web page and we can try to see if it's valid. So When you go there, it's validator.w3.org You can see the url up top there validator.w3.org you can input the url of a web page Or you can upload a file directly and test its validity So the first the first thing we can do is try computer science 1.org and see if we have written a valid page So you type in the url you hit check And usually this green thing Means that you have done well. So it says that this document was successfully checked as xhtml 1.0 Transitional so let's see if we can try Something else like cnn.com and see if they were able to make it Valid usually big websites don't actually bother validating all of their stuff And so you can see that they actually have errors in their document We when you have errors in your web page and undoubtedly you might have some To begin with you can just scroll down a little bit and try to figure out what these errors are So for example on line 10 column 103 it gives us an error net enabling short tag car short tag Yes, this is something dealing with html 4 specifically Let's see Required attribute type in a script tag is not specified. So this is an error that looks more familiar. Remember when we were talking about the Well, there is this is the script tag, but this is very similar like style tag where we have to define the type Attribute for it. And so they're telling you that you are missing an attribute in this element So this can be a very very handy tool to do it so One of the big questions that inevitability and inevitably comes up is that well cnn web page loads and looks okay on my on my Computer, why do I have to bother? Validating this stuff if you've been cnn Can't get it right. Well the point is that you try to do a better job than what they can do and If your web page is valid Then you are More likely to get your web page to look right and to look the same across as many browsers as possible Usually very large companies such as this use tricks CSS tricks or little html tricks to try to make sure that they're very complicated They're very complicated designs appear the same on every web page and usually this will cause A validation error such as this even though it will look correct And this goes back to the idea that not all browsers are created equally some treat code differently than others and so Large companies know this and they will try to get around this by using hacks which frankly are Really stupid and and and it's unfortunate that they are sometimes necessary on such complicated designs But when we are talking about web pages for ourselves that are relatively simple that do not have very complicated layouts You generally want to make sure that they are valid and indeed that will be one of the requirements of the final project and of Perhaps some of the questions on the problem set is to make sure that you can Validate and that you can verify the validity of a web page and correct it as necessary So if you're working on a web page locally You don't have to necessarily give it a url. You can also do this validate by file upload Where we can find one of these files that we are working on Let's just say our very basic one one dot html We can click check And we have errors. So Let's see it actually deals with the Okay, so right here the second area is the required attribute alt is not specified So this was because I modified the file with an image tag and they're saying that one of the Attributes that is required in an image tag is this alt attribute Which basically just defines a description or an alternate text the place In in the in the place of an image if that image for whatever reason is unable to load So we could just say this is david mail So anyway, the validity Of a page can be very important. It can point out errors that you may not have necessarily Known that you make that that you made or that You didn't know would be errors and it will point out things such as improper nesting of of elements Maybe you accidentally capitalized some attributes or something like that. This will help make sure that You not only have properly Designed web pages, but that you maximize your points on each of these assignments Right, so let's tell a story here and try to put this stuff somewhere That's actually on the internet and see if we can't tie together Our internet lectures at the same time. So if you could click over to me This is uh, just my little text editor here I'm going to whip up a page really quickly. So I'm going to go ahead and copy what dan did here I'm going to go ahead and give myself a black background for now. I'm going to close the body I'm going to close the web page and I'm just going to leave it at that There's really not much going on here and I'll just say hello All right, I'm going to save this on my desktop as index dot html Similar to how we began our story because as we've said earlier in our internet lectures The default name for many web pages on the internet is index dot html Even if you don't see it in the url and you just visit cnn.com recall that what we saw a few weeks ago When you visit cnn.com slash index dot html was in fact the home page because that's what the file Is actually called so i'm going to adhere to that convention I'm going to go ahead and save this file on my desktop and now i'm going to go ahead and try to tie together Those discussions from before recall this command ns lookup. What did this stand for? ns lookup What did this stand for anyone? Yeah name server so name server lookup So what i'm going to go ahead and do is i'm going to do a little check I actually let me roll back ever so slightly because we've talked about them before it's kind of a it's a Tar pit of upselling unfortunately, but go daddy is one website among the most popular from which you can buy domain names So a year or two ago I went to this website and I entered into there start a domain search mail in rouge.com because I wanted to buy that domain name and what you'll see now is that I can no longer buy this because I actually sprung For the 995 to buy this little vanity domain And you'll see that the dot-com is taken. I Do I own them dot net? I might own the dot net and dot org I don't think I own the dot info since who uses dot infos these days But this suggests that the url is taken. Um, you can try to back order it all you want. I'm not going to give this one up So What did I then do then well? I needed to tell go daddy at the time Who is going to be hosting mail in rouge.com in other words? I didn't want to run my own server But I was perfectly happy to run my website on the courses server because I use it every semester for demonstration purposes So I followed the appropriate links on go daddy's site And there are similar links on other registrar sites from which you can buy domains and I simply told go daddy that the dns servers that are responsible for my Websites domain name and ip address all that magic from several weeks ago is going to be in this case ns1.cs75.net And ns2.cs75.net So those are just the domain names of two of my courses one of my courses dns servers But I had to tell go daddy that go daddy informs the rest of the world by way of the dns system And thereafter anytime anyone's browser Anytime anyone's mac or pc tries to look up mail in rouge.com using a name server program They'll get back the ip address on which mail in rouge.com is hosted And I bring this up now because these are precisely the same steps You're going to follow yourselves towards semester's end when you go ahead and procure your own domain name You're going to tell go daddy or whomever you buy it from the name servers are x and y Which we will provide to you based on where we're physically hosting everyone's websites at the time And then a couple hours or a couple days later if someone types a similar command for your own domain name.com or.net or whatnot They'll see the ip address of the courses servers Because one of the really nice features of web servers these days is you can have many different domain names All hosted on the same server by way of special software Now what this means for me is that I can go ahead and connect to the server with that ip address And I can then go ahead and upload files to that server. So in fact, let me go ahead and do exactly that I'm going to go ahead and whip up really quickly a web page that I want to put on this server I'm going to go ahead and learn take um Apply dan's lesson from earlier rather than type in black. I'm going to be specific and use those hexadecimal codes. So black was what? Yeah, so six zero so the absence of all colors So fairly straightforward there and the only thing i'm going to do in here is embed an image one that is Prefab so the source of this is going to be called mail in rouge dot jpeg Which is a little something I whipped up in advance with way too much free time as you'll see and that's it I'm going to leave it at that. So that is a file called index dot html I currently saved it on my desktop right here with this icon here I have this other image mail in rouge dot jpeg which is similarly on the desktop And even though this will look a little different when we provide you with the specifics of the server that we ultimately choose for the courses Websites this year. It will be dream host what you'll have access to is something very similar in spirit to this So this you're going to have access to a web panel so to speak and this web interface is going to allow you to upload files Whether jpegs gif html files from your local desktop Whether it's a mac or pc to the server on which we're hosting all of the students domain names So i'm going to do this here. There's a lot of stuff here, which isn't useful now These are just random files that are currently in my account on the course of server But what I am going to do is uh conduct three steps The first is i'm going to create a directory inside of which i'm going to put all of my web files And by convention that folder on many web servers is called public html And as the name implies this means this is where all public html or xhtml files are going to go All right, so when I click this create button This web panel is going to create this directory for me So notice now it appears in the top in the middle of these rows And I need to do one other thing and again these particular steps will differ depending on the server on which you're actually hosting your website But it's representative of the same process Notice how i'm going to scroll down here And point out the following So we won't spend much time on this now But know that associated with files and folders on a web server are these notions of permissions And you need to tell the server Let everyone access this file let everyone access this directory or the opposite only let me access it Now nicely enough this web panel has used this special code 755 which for tonight's purposes just means Uh let everyone access this folder and that's in contrast to say my email folder Which I obviously don't want the whole world to have access to so know for now that that numeric code means Give everyone access to this folder. I'm going to go ahead and go inside this folder simply by Uh clicking on it and notice now there's nothing in there and that makes sense because I just created it And now i'm going to go ahead and upload a file Specifically the two I created so i'm going to browse to my desktop and i'm going to go ahead and select index dot html And then i'm going to browse to my desktop and select mail in rouge dot jpeg I'm going to click upload files And i'm being informed that the upload was successful and let me do a little sanity check now inside this panel I'm being told that inside this public html directory are two files index dot html and mail in rouge dot jpeg And there's some more stuff being told to me on the screen You know when did I modify the file? But the point for now is that these two files are here and they too have their own numeric codes That because their files the number is a little different But it too just signifies let the whole world see these files The end result of all of this is that because i configured the dns servers through godaddy To tell the world that the ip address of my server is what it is Which is the same server i'm currently connected to when i now proceed to type in mail in rouge dot com What file am i actually going to be pulling up? Index dot html which by convention and by configuration of the server must live in a directory called public html And unless i messed up somewhere or something's misconfigured on the server when i go ahead and hit enter i'm going to get Precisely that page which is all black and here's again the little thing i spent way too much time on photoshop with Is my particular logo and i obviously it's not quite perfect right i could have centered it I could have taken a little more care to uh configure it But this is kind of impressive right not this but the fact that in just two three minutes I was able to whip up a little web page with a simple free text editor You know plop in a jpeg that Probably took three hours and then upload those files to a server after creating a empty directory Making sure its permissions are fine and then clicking save essentially I'm literally out there on the internet and one of the takeaways we hope for you tonight is that You know the bar is not all that high once you have some of these basic building blocks in mind So with all of this stuff in mind, are there any questions about xh2ml css dns Yes Yes certainly so everything that your browser can read and see you can read and see as well So let's say that you like the design of e1's web page for example and you wanted to Collect all of the bits of information that are used to put it together so first thing obviously is the source of the of the page itself and so um, you could then copy the entire xh2ml As it's presented from the server Uh, but like I alluded to before none of this actually contains any of this style that's associated with this page this is just Definition for the content itself So if I wanted to get this style as well, you know that styles can be defined with css So I look up here and find the link tag that deals with the style sheets And you can see that I have a couple of here. I have a couple of style sheets here One exists in a folder called styles In styles.css so I can copy That that that uh that path style slash styles.css And put it directly into the same url. The reason that this works is that It had made the assumption by making it, uh, Let's see by going to the web page At computer science one dot org. There's a slash. There's no index dot php or index dot html There's no file afterwards. So I can type in the folder In here so styles and then styles.css is the file Within the styles folder here on the web page Now I can hit enter And I get the actual styles page itself So this is one of the style sheets that's associated with this web page And now you can see all of the styling for that markup or for that xhtml that existed Before so now by copying these two pages the the styles.css and the Xhtml over here on this source you can recreate essentially the page minus all of the images and such You'll notice that there is another style sheet and Particularly large web pages do have multiple style sheets The idea here was that we further separated the styles styles.css contains the actual Let's see the actual definitions for the layout so when That styles.css defines the boxes the size of the boxes that contain this Text here and that contain the navigation along the left for example But does not actually contain any of the color information So if you liked the color you would further have you would have to go a step further and grab The css that's output by this php file. So I'll just copy that do the same thing I did here Paste it hit enter now we get return from this php file A set of colors that's associated here And so you you'll notice that this is all in that hexadecimal format And the the numbers are a little bit funkier than what we were looking at before but this defines the color for that So by putting all of these these three style sheets or these two style sheets and the xhtml page together You can recreate the style of the page yourself As the pages get more complicated you have to do a little bit more work trying to put together all of the style sheets And everything but it is very very possible and doable to do from from your own From your own computer to download all of these things. So there are no limits You can download all of the the images as well And really go to town plagiarizing someone else's work Clearly that's not the intent But if you wanted to just you know emulate their their style to begin with then that is a good way to start Any other questions Am I working on the website of MIT? No, I'm I'm not though They do take submissions for images and such and And when I when I was attending MIT many years ago, they they did I did submit a few and those were Input but I don't have anything to do with the the web page there. They actually have um for a long time they uh Well, no, I don't want to get into too much information about it. I was going to complain about it But they they're doing a pretty good job now. So Yes Do I put the do I make the cascading star sheets completely separate with the html? So in this case, I tried to completely separate the style sheet from the html Because I have in the background On this web page. There are a couple of things going on first. There's the there's a There's some code that actually gets the content that should be put on the page and that's displayed and then there's a separate PHP files that define the color or the themes that exist So if you remember you've probably seen different colors and images that exist um On this web page and so by separating out the content from the color In that way, then I can actually completely I can make it a lot easier on myself when I want to change just the color and not the content And so yes, that's I do completely separate in this case Uh, the the content or the x html from the css as much as possible at least Shall we end where we began? Let us do that What oh do I have to yeah, happy Thanksgiving. We'll see you in two weeks