Computer Science E-75: Building Dynamic Websites Lecture 0: DNS, HTTP, XHTML, and CSS Scribe Notes Lecturer: David Malan January 28, 2008 Introducing the course and DNS, HTTP, XHTML, and CSS
This course is about building dynamic websites. What is the first thing you need? Domain name To get a domain name, you need a registrar Because of shady practices, go with a reputable registrar Godaddy (godaddy.com) is one that we know and use To buy one, first do a 'domain name search' "imgonnagetana" dot com It is available! for $9.99 .org, .net, .mobi, .tv are all available Domain name registrars often recommend similar ones that you may (or may not) like better Make sure that you do not fall prey to all of their up-sells! All you really need is a domain name, and no other service TLD = Top Level Domain .com, .net, .gov, .edu, .org are all common ones Some are restricted .edu - education institution .gov - government .mil - military .net, .org, .tv, etc ec are NOT restricted Check the registrar (such as GoDaddy) to see if your TLD of choice is restricted Next, you need a web host! It is a place to "put" the domain name so that you can start putting content You would traditionally find one by Googling for "Web host" There are MANY staggering number of options They differ in price and quality David Malan once had "malan.net" and found a cheap, $12/year, email option so that people who emailed david@malan.net would have their email forwarded to his actual email address Problem is that there was no service level agreement, so he frequently didn't get email One reputable web host that we've had experience with is Dreamhost 500GB of storage space, 5TB of bandwidth, unlimited MySQL databases, unlimited email accounts, etc etc. for $5.95/mo (price at time of this writing) We will go over many of these in the coming lectures We went a different direction for the web host. What happens when in a typical transaction when going to a webpage? Your local computer wants to get to cs75.net. How? Your local computer contacts a DNS server, says that it wants to find cs75.net DNS server returns the IP address of the cs75.net IP address is a unique number that identifies a server on the Internet. A unique number similar to a mailing address, except that it is on the Internet and not an actual mailing address You can actually have multiple names that point to the same IP address. This just means that multiple domains (cs75.net, imgonnagetana.com) point to the same server. the server then returns the appropriate webpage for the requested domain The name servers for our class is ns1.cs75.net and ns2.cs75.net. This means that when you buy your domain name, you tell GoDaddy that all requests for your domain name should go to ns1.cs75.net and ns2.cs75.net and those servers will tell the requesting computer where to find your website As part of the registration process, you will have to give GoDaddy (or your registrar) contact information should someone need to contact you concerning your site. This is public information Part of a "WHOIS" server You can make the data private, where GoDaddy would act as the contact information (essentially a third party that will forward any contact to you), but this service is usually a few dollars extra Question: Why not just refer directly to your site? Why use Name Servers? This way, you can change the server more easily if your server's IP address changes, you just have to change the name server If your server goes down you can bring another one up DNS is multi-level You get more flexibility. this allows you to do: Question: Why do you have to have two name servers? Just in case one goes down, you have a backup We're cheating, though, ns1.cs75.net and ns2.cs75.net are the same computer Question: The name server (ns1.cs75.net) is not an IP address? There are multiple levels (a hierarchy) in DNS So, GoDaddy has to resolve the IP address of the name servers before it can contact them Our host is a "Virtual Private Server" ServInt is our host provider for cs75.net Our virtual private server has these specs: Dual CPU quad core (Clovertown Intel) 16GB RAM RAID 10 SAS storage array zero downtime Since this is a virtual machine running on an actual machine, the host provider can actually move all of our software to a different computer if the one that it is currently running on is broken If we never told you it was virtual, you probably never would have noticed We are going to provide you with a username and a password for you to log in to our virtual private server so that you can manage your domain. Check out cs75.net and panel.cs75.net We are using a control panel known as "DirectAdmin" It is a graphical user interface (GUI) that simplifies the process of managing a website A welcomed alternative to the past when you had to do a lot of configuring with arcane UNIX commands There are other panels available cPanel Plesk Perhaps one of the #1 and #2 panels available. cPanel, frankly, is somewhat confusing .... You'll get 500MB of space on the server for your website Unlimited MySQL accounts malanrouge.com. is an A-type record. IP address: 64.131.79.130 An A-record is defined as the IP address for a domain C-name (Canonical name) are essentially aliases This way, you can have www as a Cname that points to malanrouge.com. In the end, it is the same (they have the same IP address) but now you only have to change one IP address (one A-record) rather than multiple You might imagine that this would have a very slight performance hit. instead of one lookup, you have to do two (first the cname, then the A record to which it points) You can use nslookup in a Unix shell to find the IP address of a domain name nslookup malanrouge.com returns 64.131.79.130 nslookup supernews.malanrouge.com returns cnn.com's IP address because supernews is a cname to cnn.com You can also force one domain. There are tricks that we will teach you later on that allow this to happen Its possible with Apache, the webserver that we are using Question: How is it that all of the domains can point to the same server and the same webpage doesn't show up? Virtual Hosting The ability of servers today to host multiple webpages on one server When a server receives a request for a webpage, the domain is included. The server is then able to look up the webpage for the appropriate domain and serve that page to the user DNS has different types of records A - the IP address of the server Cname - alias MX - the server that processes the mail for that domain NS - settings for the name servers |
563px-An_example_of_theoretical_DNS_recursion.svg
|
Image from en.wikipedia.org/wiki/Domain_name_system Next, we need to put our webpage up on the server There is a "Files" section in DirectAdmin that lets you directly upload xhtml files This allows you to skip using SFTP and other such tools to upload your files to the server Demo: upload a couple of files (index.html and malanrouge.jpg) to the malanrouge server malanrouge.com now shows a webpage! SSH - Secure SHell With the username and password you're getting from cs75.net with which to manage your domains, you will be able to SSH into the server It allows you to connect to another system remotely and control it by executing commands within a text-based screen. Mac: use Terminal PC: PuTTY Connect to cs75.net (or your domain, since they point to the same IP address it doesn't matter which you type) Type in your username and password Commands: ls - "list" shows files in the directory cd [folder] (e.g., cd public_html/)- "change directory" you can dive into the file system with this vi - text editor Prerequisites: prior programming experience is assumed We're sure the students in the course span the range of experience, but don't worry if some things are a little difficult! We assume you know what loop, condition, and a functions are. Even having done a little javascript, that should be fine. Those less comfortable may have to work a little harder, but arguably you will have a better return What about no programming experience at all? If you are the personality type to pick things up quickly, you should be fine. Expectations attend or watch all lectures implement four assigned projects design & implement a final project Lectures full lecture list: cs75.net/lectures/ PHP - a programming language that lets you create dynamic webpages webpages are dynamic if they change based on a user or the time of day or whatever you have in your warehouse SQL - database software that you can query against Javascript - not the same as Java! Ajax - Asynchronous Javascript And XML Ajax does not use XML as much lately, so it's now lowercase rather than a strict acronym If you've used Google Maps, you have used an Ajax webpage! Mashups Combine bits of different webpages Correctness is emphasized So be sure to test your webpage in as many browsers as you can! We certainly will be looking at your site with a variety of browsers You may find cross-platform correctness annoying, but it is a reality web developers must face. Take a look at the syllabus cs75.net/syllabus/ for more information Question: What if we just go directly an IP address? Only shows "Apache is functioning normally" Because it is a virtual server, and it doesn't know which domain to show 64.236.16.52 (cnn.com) Shows the actual cnn website Is not a virtual server Question: if you already have a domain name can you use it? Its simplest if you get a new one, but if you don't want to go that route that's fine. You can change hosts to us if you'd like. Note that we won't be hosting your site past the end of the course How do we fill our site with XHTML? You've probably heard HTML. XHTML/HTML are the languages of which webpages are written. They are markup languages, not programming languages In the end, its largely aesthetic in presentation. For example, to make something bold, you would use the following markup: <b>I am bold!</b> Here is an example of an actual XHTML page (from malanrouge.com) <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"www.w3.org—xhtml1-transitional.dtd">
<html xmlns="www.w3.org—xhtml">
<head>
<title>Malan Rouge!</title>
</head>
<body bgcolor="#000000">
<div align="center">
<img alt="" src="malanrouge.jpg" />
</div>
</body>
</html>
In XHTML, for any element that is open you must close. <b> (open) </b> (close) You have to close tags even if they are singular. For line breaks, as an example, it doesn't make sense to have an open tag and an end tag, so you would use the following: <br /> A tag is between the < and the > signs The basic structure: <element attribute="value"> XHTML requires that values are in quotes Element names and attributes must be lower case We recommend just copying and pasting the above code (specifically, the first lines) In the body tag, what would the bgcolor attribute do? Changes the background color of the webpage The value is 6 digits. The first two represent the color Red, the next 2 are Green, the last 2 are Blue. The two digits are in hexadecimal. 00 is the lowest value (black) where FF is the highest value. Pure red, then, would be #FF0000 White would be #FFFFFF Black is #000000 If you are unfamiliar, there are many tables online that can help you out. A div element is a conceptual divider in which content can go An img element represents an img the src attribute tells the server where to find the image <img alt="" src="malanrouge.jpg" /> If we remove the last /, it is an error of validity CSS - Cascading Style Sheets Allow you really fine tune the aesthetics of your webpage, far more than XHTML allows <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"www.w3.org—xhtml1-transitional.dtd">
<html xmlns="www.w3.org—xhtml">
<head>
<title>Malan Rouge!</title>
</head>
<body bgcolor="#000000">
<div align="center" style="background: #ff0000; border: 10px #ffffff solid;">
<img alt="" src="malanrouge.jpg" />
</div>
</body>
</html>
Would show the same webpage with a red background and a 10 pixel white border around the div. Remember that a div is as wide as the webpage (unless otherwise specified) and as tall as the content it holds. We do not expect works of art in this course. We do expect correctness and cleanliness If your site is horrifying ugly, that's ok. As long as it is valid and correct You can take the CSS from your XHTML attributes and put it into a separate section in the XHTML or even in a different file <head><style type="text/css">
<!--
body { background; #fff; }
-->
</style>
</head>
this is making the background white If you type only 3 hexadecimal characters, it duplicates each one. It saves 50% of the keystrokes! Green, then, would be #0f0 (this is the same as #00ff00) <head><link href="styles.css" rel="stylesheet" type="text/css" />
</head>
allows you to separate the css file, so you can make a global change to your site without having to do a find/replace in every xhtml file you have HTTP The protocol to speak when requesting webpages What is your browser really sending when you are requesting a webpage? Literally: GET /index.html HTTP/1.0 Host: malanrouge.com /index.html is the file, HTTP/1.0 is the version of HTTP in use You can use a program called Live HTTP Headers (find in the software section of cs75.net) This program logs everything that happens behind the scenes when requesting a webpage All sorts of information is sent. What kind of browser and computer you are using Information of the server is returned A separate HTTP request is made for every file One was made for index.html, and then another for malanrouge.jpg Validity There are ways of checking if the code you have written is syntactically correct with respect to the definition of XHTML/HTML and CSS Cross-Browser Issues Firefox Internet Explorer Safari You'll notice that some of your webpages, although it looks perfect in one browser, may look completely wrong in another. It is up to you to check as many browsers as possible and correct all errors The staff use quite a variety of browsers: IE, Firefox, Safari. You will want it to look correct for all of us! Yahoo! UI Library (YUI) YUI Reset CSS resets everything so that it levels the playing field so that, in theory, a page can look the same across major platforms and browsers Forms Use forms to ask users to enter in some information This will allow our webpages to be truly dynamic! Project 0 is out now. Take a look!