* Lecture 10: Website Development
* Welcome back!
* This is milk & cookies night, and also website development.
* In 2 hours you will all know how to make websites.
wedge Let's take an arbitrary website
* fas.harvard.edu
wedge weatherchannel.com
wedge has today's forecast, but even MORE dramatic than the weather is the source.
* Go to the View menu, click on "Source"
* It shows the source code, so to speak, of the underlying webpage
* This is known as HTML
* There is a language of sorts known as Cascading Style Sheets (CSS) that defines layout
wedge Websites! What are they?
wedge A bunch of files that you download
* but this sounds like email, how is this different?
* viewable by anybody (public aspect)
* we will learn how to make use of the world wide web (the service that exists on the Internet) by making a webpage
wedge First, lets backtrack a bit to computer security
wedge What can you do about malware?
* anti-spyware software
* anti-virus software (AVG, Norton Antivirus, etc)
wedge What about your router?
* People can packet sniff (particularly with wireless connections that do not use any wireless security), revealing everything you do online
* You can protect yourself by enabling the wireless security, and by being sure you use the secure version of the websites you visit (using HTTPS vs HTTP, secure connections to your bank for example, will ensure your data is encrypted and more difficult to crack)
wedge Wireless security:
* WEP is the least secure. With a few minutes its easy to figure out the key and gain access to the wireless network
* Turn on Automatic Updates on your machine.
wedge "Be careful at the coffee shop"
* Don't be paranoid, but do be careful when you log in to a public computer or use a public wireless network
wedge Passwords
* use secure passwords
* don't reuse them across all services for which you register
* Shred or smash the data when you sell your computer (free software, such as Darik's Boot and Nuke)
wedge Don't assume you are anonymous when you are on the web.
* Just by looking through logs, we can find out IP addresses, date and time of visit, what was requested, etc.
* Its fine to be spooked by lectures 8 and 9, but don't be so scared that it becomes a hindrance to your productivity.
* Back to the web.
wedge Webservers
wedge What is it?
* Holds information in the form of files, and they are served to users that visit it
wedge Population incarnations of webservers:
* IIS - Internet Information Services by Microsoft
* httpd - by Apache
* It doesn't really matter what server you're running on, for the most part, because all provide the same basic set of features
* It is a service that is provided by a particular computer that is set up to run these services
* So on the hard drive of this computer it might be set up like so:
wedge / (the root directory, equivalent of your C: drive on your PC, it is denoted by this forward slash)
wedge malan (a folder inside the root)
* public_html (anything thats in this folder is publicly accessible as a webpage)
* diaz (a folder inside the root)
wedge You may recognize a webpage in the form: www.fas.harvard.edu/~malan
* the server translates this to finding the /malan/public_html/ folder and starts serving webpages from that
wedge Unlike past years, you do not have to use FAS.
* many of you elected to purchase and use your own domain, www.somedomain.com
wedge Realize a couple of things about webpages:
* its not that hard
* even if its a bit self serving, such that you have lots of photos of yourself, there is a certain coolness factor to it
wedge Where do you begin, how do you setup a website?
wedgeI You need a domain name that's not taken.
* You can use services such as godaddy.com to find a domain
wedge Now you own a domain name, what does that mean?
* You've registered your domain name with an authorized authority for a year
* The name is registered to the powers that be (this process is invisible to you)
wedgeII. Next you need a host.
wedge This can be daunting, there are a number of hosts on the Internet
* we use dreamhost.com, but you can find others and some ridiculous deals due to the extreme hosting competition that exists on the Internet.
wedge At the time of lecture, the hosting service provider we use offers 400GB space for $20/month (and increases weekly by 2GB) with 4TB (4,096GB) of bandwidth. It also includes email addresses
wedge Small tangent about email services:
* POP - Copies email from the server to the computer. Most of the time the email is then deleted off the server. This may be a poor choice if you are checking your mail from multiple computers, as you will have different emails on different computers. Even if you check the option to not delete the message after it is deleted, you can get discontinuities between your computer, the server, and other computers when checking your email.
* IMAP - maintains synchronicity between your client and your server. Not only will the email you download be on your computer and the server, but when you delete or move a message on your computer, the client tells the server to delete or move the same message. This way you can check your mail from anywhere and it will always be the same.
* This service also allows us to host an infinite amount of domain names. This is how we can be a host for all of the domains of the students in the course.
wedge You will receive an email back from us with login information to your account on our host.
* When you login to the server, you will see a folder with your domain name. It is in this folder that we will be manipulating files for your website.
wedgeIII. What do you need to do now to link the domain to the host?
* Log in to your domain company's site and use the domain name control (it will have various names and titles)
* Use the "name servers" option
* Type in the name servers of your host. In the case of the final project for this class, use ns1.dreamhost.com, ns2.dreamhost.com, ns3.dreamhost.com
* This is telling the world that any request for a domain should be referred to one of the servers at dreamhost.com.
* From here, Dreamhost will return the IP address that your website resides on
* These name servers are also known as DNS (Domain Name Server). The sole purpose of a DNS is to return the proper IP address for a given domain name.
* Because of virtual hosting, and because of DNS, multiple domain names can point to the same server (which has a given IP address). The web server then knows, based on which domain name was requested, which directory to serve the webpages from.
wedge Using 'nslookup' from the command line you can find the IP address for a given DNS.
* So, in the case of our webserver, seamus.dreamhost.com, it returns
wedge With DNS, malanrouge.com can also point to
* Disclaimer, some servers CAN have multiple IP addresses, such that the same physical machine (seamus.dreamhost.com) can be reached via two IPs e.g.,, and
* It may not also match if the host that you connect to upload your files is not the same physical box that people connect to when visiting your website. This would be possible because different computers can have different services enabled.
*IV. You can then log in to your host and upload your webpage.
wedge A basic webpage example.
* <?xml version="1.0" encoding="UTF-8"?>
"-//W3C//DTD XHTML 1.0 Transitional//EN"

<title>This is Malan Rouge!</title>
<body bgcolor="black">
<img src="malanrouge.jpg" />
wedge This code will look like this when opened in your web browser:
Picture 1
Picture 1

* The first three lines you must always use. Don't bother remembering it, just copy paste.
* You can save this file, as 'test.html' for example, and upload it to your public_html directory by dragging it in your FTP program.
wedge How do you make a webpage the default page?
* Generally, just name it "index.html" and it will show up as the default page
wedge XHTML
wedge eXtensible HyperText Markup Language
* Its not a programming language, but you can markup content, and make things look bold/big/small/blue/red/etc and can include images.
wedge many websites are written in a less robust language known as HTML, which just does not have the same constraints as XHTML, but we will use it because its a superior language from the computer's perspective.
* You can cut a lot of corners with HTML that XHTML will not allow you to do, which can allow for discrepancies
* Part of the development process means you need to develop them with all of the major web browsers in mind, because browsers interpret many things differently
* To begin your XHTML document, copy the first four lines from the example above.
wedge <?xml version="1.0" encoding="UTF-8"?>
"-//W3C//DTD XHTML 1.0 Transitional//EN"

<title>This is Malan Rouge!</title>
<body bgcolor="black">
<img src="malanrouge.jpg" />
wedge Note a few things:
wedge Everything we start, we end: <title> and </title>
* note the difference, the end includes a forward slash: /
* HTML does not require end tags, which is where a computer can get confused (XHTML DOES require a tag to end)
* these commands are known as 'tags'
wedge Any webpage you must start with <html> and end in </html>
* perhaps ironic that you must use an 'html' tag for XHTML, but there it is
* Within the HTML tag your document must contain <head> and <body> tags
wedge After <html> is <head>
wedge within <head> is <title>
* Title will define the title of your webpage
* close the head: </head>
wedge Open the <body> tag, which defines the body of the webpage
* Anything you type in here, for example "Welcome to Malan Rouge", will show up as text on your webpage.
* Note that you can define attributes of certain tags, such as "bgcolor", which you might correctly assume defines the background color of the body of the webpage.
wedge An attribute modifies the behavior of a tag
* It comes in the form: name=" "
* Where the name tells the browser which attribute you are using, and you define what the value of the attribute is within the quotes
* So then, the general tag form is: <tag attribute="value">content</tag>
wedge Note that, for this particular attribute (bgcolor), there are a fixed number of colors that you can define. Black, red, blue, etc. Colors such as "rouge" would not be understood. In this case, you would have to use a color picker (either via Photoshop or a webpage) and find the hexadecimal color code and use that for the bgcolor value.
wedge Hexadecimal colors come in the form: #_ _ _ _ _ _ (6 digit number, each digit can go from 0-f, meaning, 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f - hexadecimal means that it can count 16 values)
* A hexadecimal color number comes in 3 pairs, such that the first two define the Red value, the next two define Green, and the last two define Blue (RGB)
* So, if you just want red, use the largest values for red and no values for blue and green: #ff0000
* Green would be: #00ff00, blue: #0000ff, the rouge-ish color picked in lecture: #aa5961
* There are many many tags in XHTML and many attributes for all of them. It is not unreasonable to use XHTML tutorials, reference, or books, in order to make it easier on you to know which tag you would like to use.
wedge Any requests for sample webpages?
wedge "Import a penguin and write a haiku about it!"
* Well, setting the bar a bit high but lets use the Linux penguin
* We'll want to center our image in the middle of the page, so we would use the <center> tag.
* To define the image, we would use this tag: <img src="http://url_of_the_image/" />
* [...]
<body bgcolor="white">

<img src="http://www.home.unix-ag.org/simon/penguin/penguin-flat.png">

* Note that the image is NOT on our host - its on http://www.home.unix-ag.org/. So, we are using someone else's bandwidth to show our image. This is not usually considered proper netiquette, so as long as we can insure we are within intellectual property rights, we can download the image file, and upload it to our OWN website (using a local reference instead) and therefore not use someone else's bandwidth.
* [...]
<body bgcolor="white">

<img src="penguin.png">

wedge These snippets of code would look like this:
Picture 2
Picture 2

wedge Other useful tags:
* h1 - defines very large text, its a header
* h6 - much smaller header text
wedge font - define attributes for fonts
wedge Some attributes:
* face - change the font you want to use (keep in mind that the font must be installed on the client's PC otherwise it will not show up, so use common fonts or use a list of fonts to define back-up fonts that are acceptable)
* size - change the size, in values of 1 through 7 (relative sizes)
* color - define the color of the font
wedge ex:
* <font face="Arial" size="6" color="blue">This is ugly text</font>
* This is ugly text
wedge a - 'anchor' tag, use this for links with the 'href' (hyper reference) attribute
wedge ex:
* <a href="http://weatherchannel.com/">The Weather Channel</a>
* The Weather Channel
wedge So consider this example:
* <a href="http://abadguyswebsite.com/">http://paypal.com/</a>
* It appears to be a link to paypal.com but it is actually a link to abadguyswebpage.com! This is how common phishing attacks work.
wedge How can you make an image a link?
wedge XHTML is all about nesting things.
* Consider this: <a href="http://abadguyswebsite.com/"><img src="penguin.png" /></a>
* Note the img tag. It doesn't have an end tag! Note that you still MUST close every tag, but there is a shortcut for tags such as img such that you can just end the tag in a forward slash, which considers the tag closed.
wedge Consider these two examples of code:
* <?xml version="1.0" encoding="UTF-8"?>
"-//W3C//DTD XHTML 1.0 Transitional//EN"

<html><head><title>Malan Rouge!</title>
</head><body bgcolor="white"><font face="Arial, Verdana, sans-serif" size="6" color="blue">This is ugly text that leads to <a href="http://abadguyswebsite.com"><img border="0" src="penguin.png"/></a></font></body></html>
* <?xml version="1.0" encoding="UTF-8"?>
"-//W3C//DTD XHTML 1.0 Transitional//EN"

<title>Malan Rouge!</title>
<body bgcolor="white">

<font face="Arial, Verdana, sans-serif" size="6" color="blue">This is ugly text that leads to

<a href="http://abadguyswebsite.com"><img border="0" src="penguin.png"/></a></font>

wedge Note that BOTH of these look the same! It looks like this:
Picture 3
Picture 3

* Web browsers ignore white space. You MUST explicitly define line breaks and carriage returns with the <br /> tag or, no matter how many spaces you type, the browser will ignore it.
* We, however, encourage and use pretty printing. This is the method we used above (by tabbing tags on separate lines) to make the markup more legible.
wedge CSS
wedge Cascading style sheets
* We're not going to go too much into it, but just give you the building blocks to use it
* They allow for styling, aesthetic refinement, and layout.
* You define them by using a <div> tag with a "style" attribute in XHTML
wedge <div style="text-align: center; color: blue; font-family: sans-serif; font-size: 36pt;">Hello, world!</div>
* Notice that the attributes of CSS appear in the value of the style attribute, and do not use quotes to define values.
* CSS allows for a lot of things, such as allowing the style of text to change when the mouse is hovered over it (for example, a link could be underlined when the mouse is over it and not underlined when it is not).
wedge Dynamic webpages
* Places such as google use their servers to create XHTML on-the-fly in response to an input (for example, when you search for something in Google, the servers create the results page)
wedge Types:
* CGI - generate webpages dynamically (the course's website uses this)
* Server side includes