Web Fundamentals

Taught by Alexandra Ackerman
Code available at https://github.com/newschool-webfundamentals
Presentations available at newschool-webfundamentals.github.io

Agenda

  • Warm up
  • Introduction to the web, your text editor and HTML
  • Use HTML to create your first webpage
  • Go over homework

Warm up

Divide into three groups. Discuss a question for 3 minutes then have someone present it to the class.

  • What is the difference between HTML and HTTP?
  • What is a URL and what happens when I visit one?
  • What does a web browser do and how does it relate to the previous questions?

Class goals

Understand how the world wide web works

Read and write HTML, CSS and JavaScript

Create your own captivating websites

Today you will

  • Be able to explain how the web works
  • Write very basic HTML
  • Build and host your first website using GitHub Pages

Brief takedown of how the Internet works

We've been interested in communicating over space and time for hundreds of years.

First transatlantic communications cable was completed in the summer of 1858, running under the ocean between Ireland and Newfoundland

First big test message from Queen Victoria to President James Buchanan took 17 hours and 40 minutes to deliver.

Internet today: 350~ cables spanning 550,000 miles

The Internet is a collection of standalone computers (and computer networks in companies, schools, and colleges) all loosely linked together, mostly using the telephone network.

The World Wide Web is an extremely common application used online and it uses http to navigate across different websites.

1960s-1980s The Advanced Research Projects Agency Network (ARPANET) jumpstarts communication via computers

Brief history of the Word Wide Web

  • 1980: Tim Berners-Lee was working for CERN and wanted researches to be able to share and read documents
  • 1984: Built program for CERN that linked documents together using "hyperlinks"
  • 1990: Proposal for creating WWW for everyone, which links web pages (documents) together
"In those days, there was different information on different computers, but you had to log on to different computers to get at it. Also, sometimes you had to learn a different program on each computer. Often it was just easier to go and ask people when they were having coffee…" - Tim Berners-Lee

How does it work?

When you visit a url on your browser, it requests a response from another machine.

The machine returns a document of some type (HTML, CSS, and JavaScript files). Your browser displays that content.

Webs pages are files filled with code that the browser knows how to display.

Webpages act like electronic versions of the documents we see in everyday life.

Documents all have a structure. Think about a newspaper–how is it structured?

  • Headline
  • Byline
  • Body or paragraph text
  • Subheadings
  • Images
  • Blockquotes

Webpages are structured the same way. There is a hierarchy of information.

HTML is the code used to describe the markup of pages so that the browser knows how to display the content.

The content that lives on a webpage sits between angled brackets, we call these elements. They display different elements of a webpage.

These elements are made up of tags. Most elements have an opening tag and a closing tag.

These tags are like containers and tell the browser information about what is in between the tags.

Head & Body

A webpage is made up of a head and a body. A head element contains information about the page, such as a title. A body element displays its contents to the browser.

Head

The metadata and resources

Body

What the user sees.

For now, this is what you need to remember

I'm going to go into HTML in-depth next class. For now, let's focus on the basics:

  • How to create a HTML file on your computer
  • How to edit and save a HTML file with your text editor
  • How to upload that file to GitHub so that it becomes a real website

If you haven't done so already, download a free text editor. I recommend Sublime Text, Atom or open Thimble in your browser.

Text editors do exactly what they say, they edit plain text files. Just like Word or any other document editing program, you can create new files by clicking "File > New file"

Create an HTML file by adding the ".html" extension. It's common for the default page on a website to be named "index.html"

To start, try adding text into your HTML file and save it.

If you open this file in a browser, it displays like a very basic website.

Great, now that we have our first web page, let's put it online.

What's GitHub?

GitHub is like these things, but for code

GitHub hosts "repositories", or "repos", which are places where all of your files and folders of code are stored.

You can add a new file by clicking "Create new file"

You save your file by "commiting" it with a message.

Commits are snapshots of the changes in your code. They are saved versions of your work. You can see what has changed in a file between commits.

Make sure that your repo is named "username.github.io" to make use of GitHub pages, which will automatically create a website for your index.html webpage.

Now it's your turn:

  1. Create a folder for your website
  2. Add an index.html file to your folder
  3. Add some content to your file using your text editor
  4. See how your web page looks in your browser
  5. Add the index.html file to your username.github.io GitHub repository
  6. View your website live!

Let's go over homework