Transcript Project Polymath

Lecture 1: Introduction to HTML and Dreamweaver.

Mission: To start a university that trains polymaths (“renaissance
people”).
 Resulting in more polymaths than ever existed in history: “Thousands of
da Vincis”.
 Ultimate goal: new polymaths provoke a profound acceleration of
progress in the arts and sciences (“Second Renaissance”).

501(c)(3) nonprofit based in NJ.
 Please consider making a tax-deductible donation.
▪ We need your support to continue offering these courses.
▪ We offer them freely to you, but they come at great cost to us.
 These courses directly build the curriculum of our university.
▪ We wish to continue offering existing courses while bootstrapping new ones.
▪ As we offer more, we will begin structuring degree programs around them.

If you like this course, tell your friends! They can still register.

This is our first course offering.
 It consists of 10 weekly lectures in basic web design.
 You may follow at your own pace.
 If you are enrolled in the course on our site, you will receive webspace to
experiment with for the duration of the course.
▪ This webspace is temporary and will be destroyed 15 weeks following the beginning
of the course.
 Alternatively, you may register and host your own website. Today’s
lecture will walk you through this process.

The success of this course will govern when / if we offer another
course (likely on graphic design or e-commerce).
 We may also offer a course on advanced web design which will follow
from where this one left off if there is interest.

Taught by Michael Barnathan







Adjunct Professor of Computer Science, Monmouth University,
2008 - Present.
Founder of The Polymath Foundation.
Ph. D., Computer and Information Sciences from Temple University,
2009 (expected).
Master of Science, Computer and Information Sciences from
Temple University, 2007.
Bachelor of Science, Computer Science (math minor) from
Monmouth University, 2006.
> 15 years of development and web development experience.
I’m here to help you. Email me with any questions about
the course or the material.
[email protected]



I am assuming an audience with no
previous web development experience.
If you find this course too easy or too
difficult, please email me.
The pace can be adjusted if enough
people find it too easy / too challenging.

What is a website?

Where does a website “live”?

What happens when you navigate to one?

How does your browser know what to show?
▪
▪

How do we interact with websites?

“Browsing”: viewing text and images.
“Navigating”: Links.

“Posting”: Forms.


Raw HTML.
Graphical editors.

Content-management systems.


How can we create websites?
▪

HTML: the language of the web.
CSS: controlling the appearance of HTML elements.
Google Sites / Drupal / Wordpress / Wikis.
Creating a sample site in Dreamweaver / Visual Web Developer Express.

Setting up your webspace.

Writing, uploading, and visiting a simple “hello world!” site.

Websites are online locations.
 They have addresses ("www.google.com”).
They have the Internet
on computers now?
 You can easily visit if you know the address.

Their locations are abstract.
 These locations don’t correspond to anything in the
physical world.
▪ Clearly there is a computer somewhere hosting the website.
▪ But it could be in New York or Tokyo; it wouldn’t make any
difference.
 There is no “geography of the web”: you can go
anywhere instantly, but only knowing the right address.

When you connect to a website, a lot goes on behind the scenes:
1.
You navigate to projectpolymath.org.
2.
Your system asks your Internet Service Provider: “What is the address of projectpolymath.org?”
Your ISP looks it up in a database called DNS, which returns a numeric IP address for the site: 67.205.48.18. This
address identifies the computer (“server”) hosting projectpolymath.org.
Your system asks a router “send a connection request to 67.205.48.18”
The router doesn’t send the request directly, but finds another router which can deliver the message closer.
The request is forwarded from router to router, each router determining the best route to forward the request.
The connection request eventually reaches the site. The site can either accept the request or refuse the connection.
3.
4.
5.
6.
7.
8.
9.
10.
11.

1.
If the host is running web server software, it is programmed to accept web connections.
2.
If the web server is not running for any reason, the connection will be refused.
The response is sent back to your system (through the routers). Your system sends back acknowledgement (always
through the routers!) that the connection was established.
Finally, your system and the site can communicate. Your system sends a request to get the page in a language
called HTTP (Hypertext Transfer Protocol). The web server understands HTTP, so it responds with the source code
for the webpage you requested (as well as some header information about the page itself).
The page’s source code is in a language called HTML (hypertext markup language), which your web browser
understands (by the end of this course, you’ll understand it too!) The browser renders the raw HTML code, turning
it into a graphical document that is finally displayed on your screen.
In the course of rendering, the browser may also make additional requests for images and other resources required
to display the page correctly (potentially going through all of these steps many times).
This all happens in a matter of seconds!
“Connect”
216.52.220.146
67.205.48.18
DNS
67.205.48.18
157.130.12.49
“Accepted”
projectpolymath.org
GET index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Project Polymath: Plans for a New
Interdisciplinary University</title>
…

Thankfully, we need not understand all of this to write web
pages!
 It’s important to note that the pages do exist on a physical
machine, though:
 The webpage that is sent back to the user is a file on the server’s
hard drive.
Transferring the file from the server to your system is called
downloading.
 To publish a web page, you will need to learn how to transfer
files from your system to the server: uploading.




Browsing:

Reading information on a site and viewing content.

Usually static – the content you see is the same that another would see.


No changes are made to the content.
Most common operation.

Following links to cross-reference and pull in related information.

No changes are made to the content, but the address of the page being viewed will change.


“Submitting” data to a website (for example, a search query or a comment on a blog).
Usually dynamic – the content that is returned (for example, search results) may vary on the content
you submitted or external factors.

Changes may or may not be made to the content with your action.
Navigating:
Posting:
▪
▪

Changes made: wikis, blogs, webmail. Different results if viewing the content a second time.
No changes made: search, filtering, viewing comments.
HTML alone will allow you to create forms, but not process them.
▪
▪
Submitted forms are processed on the server itself, which returns results to be rendered by the browser.
Server-side scripting languages, such as Perl, Python, PHP, Ruby, or ASP, are used for this purpose.
▪
These are advanced techniques that we will cover only briefly.
▪
If there is demand, we may offer a subsequent course on these advanced techniques.

For viewing websites:

At least one of these major web browsers:
Mozilla Firefox







You may also find the Firebug website debugging extension useful.
Opera
Safari
Internet Explorer
Warning: Your websites may appear differently in each browser, thus it is important that you test
them in as many browsers as possible. It is worth downloading all four for testing purposes.
For creating websites:

This class will be taught primarily using Adobe Dreamweaver, one of the leading graphical web
design tools.




This is not a free product, however (though there is a free 30 day evaluation).
We will therefore discuss alternatives as well.
We will also use a free editor offered by Microsoft, called Visual Web Developer Express, in
conjunction with a free FTP client called FileZilla.
If you’re feeling adventurous, you can edit the HTML code of your pages by hand in any text editor,
including Windows Notepad. These editors do not have a design view.
<html>
<head>
<title>Test</title>
</head>
<body>
<p>Hello world.</p>
</body>
</html>
HTML (Hypertext Markup Language) is the
programming language used to create web pages.
 In this course, we will use a variant of HTML called
XHTML 1.0 Strict.
 HTML allows you to structure a page around your
content using tags.
 A tag is a block of text enclosed within angle
brackets: <html>
 Each opening tag must have a closing tag, which
has the same name but a slash in front: </html>


In XHTML:

Documents must open with an <html> tag and close with a </html> tag.



There is often a comment tag called a “doctype” above it, however, identifying the page as an XHTML document.
All tag names must be lowercase.
The last tag opened must be the first one closed:
Valid:
Invalid:
<1>
<2>
<3>
</3>
</2>
</1>
<1>
<2>
<3>
</2>
</3>
</1>

There may or may not be text (or additional tags) between opening and closing tags: (e.g. <p>This is
text</p> and <p></p> are both valid).

If there is nothing between an opening and closing tag, they can be combined into one tag by
adding a slash at the end (e.g., <img src=“temp.jpg” /> does not require a </img> tag).






Attributes are parameters defined inside of a tag, separated from the tag name with a
space. A tag may contain multiple attributes, separated by spaces.
Attributes have names and values.
They are specified in the form: name=“value”
Each tag has a predefined set of attributes.
For example, the <img> tag is used to insert an image into a page.

However <img> alone is useless! We need to specify the image to include.

The “src” attribute of the <img> tag allows us to specify the location of an image to include.

For example, <img src=“http://www.projectpolymath.org/images/projectpolymath.png” /> will
display the Project Polymath logo. Note the closing tag shorthand.
▪
“src” tells the browser where to find the image to include. If you browsed manually to that address, you would see
the same image in your browser.
▪
<img> also has an attribute called “alt”, which is text that will display if the image isn’t found.
Certain attributes are common to all tags, such as “class” and “id”. We’ll discuss these later.





For a page to be both valid and useful, it must have at least the following
tags:

<html>


<head>
<title>

<body>

It is usually incorporated into the title of the browser window itself.

The title tag must be inside of the <head> section.
<html> is a section covering the entire page.
<head> is a section inside of <html> containing information about the
page itself, such as its title, author, and keywords.
The text between the <title> and </title> tags is the title of the webpage.
<body> contains the actual content of the page as it will be displayed to
the user, including text, links, images, and other elements.




Your sites will almost certainly contain text, which will be organized into paragraphs.
You can’t just create a new line in the rendered HTML by creating a new line in the code.

HTML ignores line breaks and will not render more than one space character “ “ in a row.

You can also manually insert a line break into an existing paragraph of text using the <br /> tag, but
this is seldom necessary and <p> should be preferred.
You can create paragraphs using the <p> tag. <p> denotes the start of a paragraph (skip a
line) and </p> denotes its end.
Links are created using the <a> (“anchor”) tag and the “href” attribute. Just as “src” told
the browser where to find an image, “href” tells it where to go when a link is clicked.

To create a link, surround the content you want to link with an <a> tag:
▪
▪
<a href=“http://www.projectpolymath.org”>This is an example link</a>.
<a href=“http://www.google.com”><img src=“http://www.google.com/intl/en_ALL/images/logo.gif” /></a>








<html>
<head>
<title>Hello World Example</title>
</head>
<body>
<p>Hello world.</p>
</body>
</html>






One of the most valuable resources available to you as a web
developer is “View Source”.
This allows you to see how other sites work.
Browsers receive the raw HTML code from the server and
render it.
However, they also store the source code of the page.
You can view the source code of any page by right clicking it
and going to “view page source” (the exact link name will vary
by browser).
If there’s a tag or attribute you don’t understand, look it up!
You’ll be surprised how quickly you can learn this way.

We’ll now look at how to create a simple page in:
 Dreamweaver
 Visual Web Developer Express

And how to upload that page to the course webspace in:
 Dreamweaver
 FileZilla

Here is a link to each program on the web:
 Adobe Dreamweaver
 Visual Web Developer Express
 FileZilla

Now is a good time to pause the presentation and install the
programs you wish to use.
Assuming you’re properly signed up on our website, you should have
received an email with instructions on accessing your course webspace.
 It will be valid until 15 weeks from today, after which it will be deleted. Keep
local copies of whatever you upload there.
 If defamatory, illegal, copyright-infringing, harmful, or hateful material is
posted on your webspace, you will lose it. By using it, you agree to take
responsibility for anything you upload to it.


To upload files to your webspace, you will need to use FTP: file transfer
protocol.

Programs that can upload to FTP servers are collectively known as FTP clients (a client
is a program that connects to a server).
Dreamweaver has one built-in.

If you don’t have Dreamweaver, we recommend a free client called FileZilla.



You can use the course’s webspace or you can use your own.
Creating your own website entails:

Hosting: Configuring a web server to serve your files to visitors.
Domain registration: If using a “myname.com” address, this name will need to be registered with a domain registrar.

GoDaddy

Network Solutions
1&1


Popular domain registrars:




DirectNIC
Prices vary widely (but are generally billed yearly) and a domain registered in one place is the same as a domain
registered anywhere else. Thus, it makes sense to use the cheapest reputable registrar.
Popular web hosts:






GeoCities: Free but limited, Yahoo! places their ads on your page.
Google Sites: Free, limited ability to customize.
Microsoft Office Live: Free, limited ability to customize.
DreamHost: $6/month, many features (we use them ourselves; enter in coupon code “PROJECTPOLYMATH” for a $25
discount on a yearly hosting package).
NearlyFreeSpeech: Price depends on site traffic, many features.
Which web host to use is a more important decision than which domain registrar to use. This is the company that will
maintain the systems that your website runs on. If their systems are slow, so is your site! If their systems go down, so
does your site! Different hosts offer different features and prices can vary widely.
▪
For this course, make sure your host supports at least FTP and SSH (“secure shell”). You may also wish to ensure that your host
supports PHP, CGI, and MySQL for future expansion (or if you want to use Wikis, blogs, or other web applications on your site).
Register with a web host.
If applicable, register a domain.
1.
2.

Domains are allocated on a first-come-first-served basis.

Your first-choice name may not be available.
Common extensions (“TLDs”) are .com, .net, .org, .biz, and .info. Each TLD is separately registered;
registering myname.com will not prevent someone else from registering myname.org.

Associate the domain with your hosting account.
The host will give you “name servers”. These point your domain to the hosting
company’s systems.
3.
4.


5.
6.
They’re used in the DNS database that maps names to IP addresses.
Domain registrars usually have control panels that allow you to set the nameservers of the
domain. Set them to exactly what your web host tells you.
After about 24 hours, your site will be live.
Your login information will be given to you by the host. You’d then upload to it just as
you would with the course webspace, but with the host’s login information, not ours.
If you have any questions about the process, feel free to email me.

Another option is to use a blog, or “weblog”. Blogs allow you to focus on content rather
than design.


Procedure:

You write an “article” which you wish posted.
You hit a “publish” button.

The article goes live and people can comment on it.

It’s that simple!

Wordpress

Movable Type


Blogger
Livejournal

Orkut



If you’re primarily recording information and wish the information to be made available for
comments, blogs may be a useful format.
The two most common blog applications are:
You can host blogs on your own site (once your hosting is set up, Wordpress and Movable
Type have installers that will walk you through it), but there are also companies that will
host your blog for you:
Wikis are websites that anyone can edit.
 Every page on the wiki has an “edit this page” button…
 And any random person can come along and change the text
of it.

 This works surprisingly well on large collaborative projects, such
as Wikipedia.
 Vandalism is common, but it is quickly found and removed by
legitimate editors.
The most popular Wiki system is MediaWiki.
 One company that hosts Wikis is Wikia.
 Be aware that you have very little control over your own
content on a wiki. Anyone can change it.




Experiment at creating web pages.
If using Dreamweaver, look up tags in the
“reference” panel.
Try changing things graphically and see how
they affect the code that the editor produces.
 Changing the text color, background, font, size…
 Inserting numbered or bulleted lists…
Here are some questions to get you thinking.
 You can answer these (or talk to students, ask other
questions, or just chat) in our discussion forum.


If any computer can host a website, what’s stopping you from
using yours?
 What are the pros and cons of this approach?
Why must every opening HTML tag be closed?
 Why don’t we need to close attributes too?
 Different web browsers are one challenge to creating sites
that look the same on many systems. What are some others?
 What skills must you use to create a functional website?



Next time we’ll discuss style sheets.

These allow you to customize the appearance of the HTML elements you’ve entered.

You can color, position, align, size, and border elements using style sheets.

RGB color notation: #rrggbb

HTML color names: red, darkblue, white, etc.
Units of measurement:
We’ll also discuss how to represent colors and margins.

▪
▪
px
em
▪
%
We’ll extend our “Hello World” page with formatting.
 That will allow us to begin getting creative with design.


Should you have any questions or comments, you can post them to our
discussion forum or email the instructor. Thanks!
A Nonprofit Organization of New Jersey, USA