If the Internet is magic, this class will give you superpowers! The actual process for getting up and running is amazingly simple. We’ll start with an intro to the course and hit the ground running with our first xHTML page. (Insert magic wand and glitter here!) We’ll also set up our blogs so we can see our progress throughout the class.
Make sure to bookmark some amazing online resources:
First, The Animated History of the Internet
- Discuss key terms (many definitions provided by wikipedia and the w3consortium)
- ARPANET: The ARPANET (Advanced Research Projects Agency Network) developed by ARPA of the United States Department of Defense, was the world’s first operational packet switching network, and the predecessor of the global Internet. First link was established in 1969.
- The first message ever to be sent over the ARPANET (sent over the first host-to-host connection) occurred at 10:30 PM on October 29, 1969. It was sent by UCLA student programmer Charley Kline and supervised by UCLA Professor Leonard Kleinrock. The message was sent from the UCLA SDS Sigma 7 Host computer to the SRI SDS 940 Host computer. The message itself was simply the word “login.” The “l” and the “o” transmitted without problem but then the system crashed. Hence, the first message on the ARPANET was “lo”. They were able to do the full login about an hour later.
- Packet Switching: Packet switching, now the dominant basis for both data and voice communication worldwide, was a new and important concept in data communications. Previously, data communication was based on the idea of circuit switching, as in the old typical telephone circuit, where a dedicated circuit is tied up for the duration of the call and communication is only possible with the single party on the other end of the circuit.
- Analogy of buffet
- TCP/IP: is the set of communications protocols used for the Internet and other similar networks. It is named from two of the most important protocols in it: the Transmission Control Protocol (TCP) and the Internet Protocol (IP), which were the first two networking protocols defined in this standard. Today’s IP networking represents a synthesis of several developments that began to evolve in the 1960s and 1970s, namely the Internet and LANs (Local Area Networks), which emerged in the mid- to late-1980s, together with the invention of the World Wide Web in 1989.
- HTML: an acronym of HyperText Markup Language, is the predominant markup language for Web pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as links, headings, paragraphs, lists, and so on —and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of tags, surrounded by angle brackets.
- XML: The Extensible Markup Language (XML) is a general-purpose specification for creating custom markup languages.[1] It is classified as an extensible language, because it allows the user to define the mark-up elements.
- xHTML: can be thought of as the intersection of HTML and XML in many respects, since it is a reformulation of HTML in XML. (will talk about differences when coding)
- HTML5: ext major revision of HTML (Hypertext Markup Language), the core markup language of the World Wide Web. It aims to reduce the need for proprietary plug-in-based rich Internet application (RIA) technologies such as Adobe Flash,Microsoft Silverlight, and Sun JavaFX.
- W3C: The World Wide Web Consortium is the main international standards organization for the World Wide Web (abbreviated WWW or W3). It is arranged as a consortium where member organizations maintain full-time staff for the purpose of working together in the development of standards for the World Wide Web.
- Routers: an electronic device used to connect two or more computers or other electronic devices to each other, and usually to the Internet, by wire or radio signals.
- Servers: the term typically refers to a computer which may be running a server operating system, but is also used to refer to any software or dedicated hardware capable of providing services.
- Local host: The computer on the local network that is hosting your files (the computer that you are working on)
- Remote host: The computer on the external network that is hosting your files (mysite.pratt.edu)
- DNS: The Domain Name System (DNS) is a hierarchical naming system for computers, services, or any resource participating in the Internet. It associates various information with domain names assigned to such participants. Most importantly, it translates domain names meaningful to humans into the numerical (binary) identifiers associated with networking equipment for the purpose of locating and addressing these devices world-wide. An often used analogy to explain the Domain Name System is that it serves as the “phone book” for the Internet by translating human-friendly computer hostnames into IP addresses. For example, www.example.com translates to 208.77.188.166.
Range of Interactivity
- Complexification.net
- Type Flash
- PaperRad
- Learning to Love You More
- We’ll talk about the range of interaction available.
- Why learn HTML/Programming now? Why make things interactive?
Let’s Begin!
Start by making a folder on your computer to hold all of your files. Name it something like “my_website” with lowercase letters and NO SPACES!
- Add your Doctype declaration
- What is this thing? The Doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
- Do we really need it? Yes! We are writing xHTML, and this page will not be considered valid xHTML without it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Then add your html tag
- It includes the xml namespace: xmlns=”http://www.w3.org/1999/xhtml” XML Namespaces provide a method to avoid element name conflicts.
<html xmlns="http://www.w3.org/1999/xhtml" > Once we code the rest of the page,
It should look like this:
<html xmlns="http://www.w3.org/1999/xhtml"><!--Our html tag encloses the whole page!--><head> <!--The Head: Contains your page title and other interesting information about the page that may not be visible--><title>Hello World!</title><!--Page Title--></head><body> <!--The Body: Where all of the content goes that will be visible in the browser window-->RAARRRR!</body></html>
That’s all it takes for a basic page. Let’s save that in my_website as index.html, which is the default file name for our homepage.
Now is the fun part. We can start adding text to the body of the page, but we’ll want to mark up the text tags to change the way that it looks and the way that it functions. Some of the tags that we will use will be inline, some will be block level tags. What’s the difference?
Inline tags
These are meant to be enclosed in other tags and do not interrupt the flow of text.
- To boldface text
<strong></strong><b></b>
- To italicize
<em></em><i></i>
<span>These are helpful for creating inline styles</span>Break tag: <br/>
Block level tags
These are used to enclosed blocks of text and add a line break before and after the tag.
<p>To create a paragraph</p>- Header tags
<h1>Most important header</h1>
<h2>2nd in command</h2>...<h6>The runt</h6>
Lists (see below)
Lists
This is how you would create an ordered list:
<ol>
<li>bear</li>
<li>rabbit</li>
<li>wolf</li>
<ol>
which looks like this:
- bear
- rabbit
- wolf
And an unordered list:
<ul>
<li>cloud</li>
<li>air</li>
<li>river</li>
<ul>
which looks like this:
- cloud
- air
- river
FTP Upload
- login to my.pratt.edu
- go to “file storage” (when the menu pops up, click “allow).
- open public_html on the right.
- navigate to your helloworld.html page on the left, select on the file.
- click the arrow in the middle pointing right.
YOUR HELLO WORLD PAGE SHOULD LOOK LIKE THIS.
Some More Tips
- .html and .htm are different, but both are fine. Just be consistent: Pick one and stick to it!
- capital letters are different from lowercase, so HelloWorld.html and helloworld.html are two different files.
- Don’t put spaces in your file names. Use an underscore (_) or a dash (-) instead.
Assignment:
- Sign up on wordpress for your own blog.
- Using the Hello World page that you created the first day and the tags that you have learned, create an online resume. Post it to your my.pratt.edu webspace. Test it to make sure that it works.
- Reading A List Apart: In Defense of Eye Candy. Write a paragraph response to the reading before next class on your blog including an example from the internet that proves or disproves one of the points.
- Post a comment on the end of this page with your blog address and the link to your resume.
- Order “Don’t Make Me Think” and one of the other reference books from the list above or buy them at a bookstore.
- If you don’t have Dreamweaver at home, download the following:
For Mac:
For PC:
My resume is posted here: http://mysite.pratt.edu/~hngo/resume.html
My blog is here: http://blogs.huongngo.com/prattim2010
here is my url for my blog,
http://aeneasmiddleton.wordpress.com/
P.s. I will finish the web page “hello world” this week..
My Blog Link: http://jomamas.wordpress.com/
MY Blog http://pipopanonymous.wordpress.com/
My Resume
file:///Users/phillipdelmoral/Documents/res.html
Link to my resume…
http://mysite.pratt.edu/~amiddlet/HelloWorld-Aeneas.html
just kidding heres my resume
http://mysite.pratt.edu/~pdelmora/res.html
My Blog: http://prattkid.wordpress.com/
My resume: http://mysite.pratt.edu/~kmcconne/KellyMcResume.html
My resume again
http://mysite.pratt.edu/~pdelmora/res.html
Here is my resume with CSS format
http://mysite.pratt.edu/~jsoto3/soto-resume.html
hello…
really good article. Ready to hear more next week,my blog http://www.punepages.com/blogs/14680/helpful-in-concealing Many Thanks….
really good article…
I have spent a bit of time going through your posts, more than I should have but I must say, its worth it! http://blue071.speedywap.net/?p=5 many Thanks….
very helpful…
I preferred to thank you for this good article. http://wxhtg.blogfreehere.com/ I by all odds liked every little bit of it…
Great…
You did a great job! http://deandreaa.kvepp.com/2011/06/19/elie-tahari-hits-and-misses/…
quality post…
I have spent a bit of time going through your posts! http://daysi.blogage.de/entries/2011/6/17/Hairstyle-inspiration-for-long-textured-hair ,i had a good read….
Great One…
I must say, its worth it! My link!http://nantz071.blogturk.org/ ,thanks haha…
Great…
love your blog, http://gina11.blog-libre.net/ ,Thanks again….
very helpful…
I preferred to thank you for this good article. http://pcztew.blogs.sapo.pt/ I by all odds liked every little bit of it…
Websites worth visiting……
[...]here are some links to sites that we link to because we think they are worth visiting[...]………
RSS feed for comments on this post. / TrackBack URI