I'm Owen. I have been using the Internet for a long time. I started like many people my age by uploading animated Gifs to a Geocities page, and then to my own site. I recently graduated from a Master's program at NYU called The Interactive Telecommunications Program where I studied art and technology. Before that I was a musician, and I helped people make websites as a side gig.
Tell me about you!
The Internet is a "network of networks" or lots of different computers and servers connected by standardized communication protocols. People started building computer networks in the 1960s and 70s. The ARPANET was one of the first such networks, which sent messages between academic labs in California. The ARPANET was a combination of several computer networks linked in order to increase computing power and decentralize information storage. This was motivated in part by the US government concerns for security in case of something like an atomic bomb destroying the information in one set of computers or network. Academic institutions proposed different solutions. This was all done across phone lines, bits and bytes transferred as 0 and 1. Much of the work involved was creating standards that different computers could understand and interpret to make communication with electronic signals possible. Many of these standards, like File Transfer Protocol, which we will cover in a later class, still exist, while others have been replaced as electronic technology has become more sophisticated. ARPANET made things like FTP, remote login and email possible. Once Email was standardized, developers created mailing lists that could send messages to groups of people at one time. One of the first such mailing lists was about science fiction. This was controversial. Eventually ARPANET became outdated, around 1990, but it laid the groundwork for a lot of what we know as the Internet today.
This barely scratches the surface, but Wikipedia is a good place to start if you want to learn more.
There are many ways to look at the history of the Internet, and lots of different contributors. For example, the development of message boards on BBS systems is pretty fascinating: Another Wikipedia Link.
In terms of more practical things that you will need to know...
HTML stands for HyperText Markup Language. We're skipping a lot of info, but its important to understand that HTML is simply a way of packaging content that can be interpreted by browsers. Much like the standardized protocols that gave rise to ARPANET and the Web, there are standards and conventions for HTML that allow us to make simple pages which display information the same way in a variety of devices.
A browser is a piece of software, a program just like Photoshop or Word, that renders information downloaded from the web. Browsers use a Request-Response model of communication. One computer sends a message to another computer and waits for a response. Once the browser has downloaded the data for structure, text, style and media in a document, it renders the content to your screen.
The information that is received comes from a "remote" server or computer. The documents that are on your computer are "local" files. We will primarily be working with local files as we learn how HTML and CSS work, but we will talk about how to upload data to the web.
HTML and CSS are used for what's referred to as "front-end" development. This means that it changes the things we see in the browser window. "Back-end" development refers to the code that is used to supply information to those pages. We'll talk about that more in a later class. Strictly speaking, HTML and CSS are not programming languages - they are more like grammar rules that are used by browsers to make sense of the data they are receiving.
HTML is used to describe the basic structure, document type, and layout of a page. CSS supplements HTML by describing styling, colors, sizes, and other attributes that make designing a page easier. We may also talk a little about JavaScript, which is a web based programming language that lets us add some functionality to webpages. We're going to start today by going over the basics of HTML.
What editor should I use?
File structure
Like other markup languages, HTML uses brackets like this: < > to divide content and tags. Tags tell the browser what to do with the content. The first tag we need to write is the HTML tag, which declares the type of document.
This is standard with HTML5. In the past you had to write more characters describing the specific HTML type that you are referencing. There are some advantages and disadvantages to this, basically transitional HTML versions still work with outdated code. We're not going to worry about that.
We're going to go through the basic tags now.
Tags are necessary for the browser to find content, and also to interpret that content. Search engines use tags to display information about what is on the site. So tags describe style but are also good for Search Engine Optimization, which will look at h1 tags and understand that it is a header.
Now that we understand some HTML, lets take a look at a website and see how we can inspect the structure.
Make a simple web page. Make it about you, or a project you are working on. Just text for now.
Hypertext is one of the most important aspects of the Internet. It allows pages to be linked to one another. The idea of hypertext goes back to Borges and early computer scientists and thinkers. Douglas Engelbart created the model of hypertext that is used today.
Making a hyper link is very simple.
Wrap a piece of text or media with the
You can also reference other parts of the same page using the a tag
There are some important attributes to hyperlinks. the "target" attribute tells the browser to open the linked page in the same window or a new window. It sits right inside the a tag:
Using hyperlinks, we're going to create a few different pages for our website and link them together.
Before we talk about that, let's go over images.
Images can be added easily using the img tag and the src attribute.
You can add attributes like width to style the images, but this is more often done with CSS.
Photoshop is useful for image compression and editing. Fireworks is a image editing program that is specifically used for web and does more sophisticated compression.
Use the alt attribute in the img tag to specify the name of the image and source.
Build new pages on to site with images and hyperlinks.