Intro to Web Development

Welcome!

Let's get to know each other.

A bit about myself
Introduce yourself. Share what you hope to learn in this class.

A few guidelines:

We are here for you!
Every question is important
Help each other
Have fun 🎈

A few safety tips...

Never save your password on a shared computer.

Closing a tab does not sign you out of a website.

About this class

Discover how websites are created
HTML fundamentals
CSS fundamentals
Create and publish a website

Slides are available at:
http://bit.ly/2G6TClz

Today

Brief history of the Web
What happens when we request a website
Anatomy of a Website
Write some HTML!

History of the Internet

1957 - First satellite in space
1958 - ARPA (Advanced Research Projects Agency) is formed
1969 - ARPAnet sends the first computer-to-computer message
- "LOGIN"
1991 - Tim Berners-Lee creates the World Wide Web

In 1957, Russia launched the very first satellite into orbit. This set of what was called the "race for space" as America realized that while we had been focused on building bigger cars and TVs, other countries were exploring space. Not wanting to be left behind, the U.S. government created a division called ARPA (Advanced Research Projects Agency). This agency focused on creating technologies like rockets, weapons and computers. In the 1960s - ARPA began creating a network of computers that could talk to each other, known as ARPAnet. In 1960 - ARPAnet sent it's very first message, "LOGIN". This was the beginnings of what we now call the Internet. In 1991 - Tim Berners-Lee, a computer programmer in Switzerland, had the idea "computers are now able to send information, but what if they could also request information?" With this idea, Tim published the first website.

The Web's First Website

You can visit this site at: info.cern.ch

Browsers

Requesting a website

To request a website, we use the brower's Address Bar.

Requesting a Website

Let's act out requesting a website.

Actors Needed:

Browser
Internet Service Provider
Domain Name System
Router
Google

Requesting a website

Browser -> ISP -> Router -> Google

Google -> Router -> ISP -> Browser

Materials: - Browser Material - Envelope that reads: From: 65.30.200.101 (user's IP Address) Website Name: www.google.com Website IP Address: - Piece of paper that reads: Message: Homepage - ISP Material - Piece of paper that reads: Internet Service Provider (ISP) - DNS Material - DNS List www.boston.gov - 107.154.103.58 www.google.com - 172.217.11.46 - Material to return files to User - Envelope that reads: From: 172.217.11.46 (www.google.com) User IP Address: - Piece of paper that reads: HTML - Piece of paper that reads: CSS Steps: - Browser passes paper to ISP - ISP asks the DNS to add the IP address - DNS adds the IP Address - DNS passes back to ISP - ISP passes off to the router - Router sends paper to Google server - The router knows how to forward the request along until it reaches its destination. - Google receives the request (paper) - Google server adds HTML and CSS files to blank envelope - Google server adds the user's IP address in the "To" field - Google server passes envelope to router - Router sends envelope to ISP - ISP passes the envelope to the browser - Browser opens the enveloper and renders the html and css files When I enter an website's address in the browser's address bar and press enter, my computer is going to send a request to the computer's Internet Service Provider. My request includes three pieces of information, my IP address, the name of the website I'm requesting and any additional information about my request. The Internet Service Provider is going to look at the website name and using something called DNS (Domain Name System) to translate the website name to an IP address. You can think of DNS as looking up a person's number in a phone book. Just like my computer has an IP address, all other computers have an IP address. The reason we type in a website's name instead of an IP address is because IP Addresses hard to remember. Similar to how when you call a friend, you don't type in your friend's phone number each time, you open your Contacts app and click on their name. Website names serve the same purpose as it's easier to type in "www.google.com" instaed of a series of numbers. For example, I can go to Gooogle by typing in their IP address (demo: ping google.com and copy IP address). How the DNS finds a website's IP address is similar to using a phone book. Just like we would flip through a phone book, find the person we're looking for and see their phone number, the DNS will find the website we're looking for and see their IP Address. So the Internet Service Provider knows the website's name but the internet (in this case, represented by the Router) knows how to find other computers by their IP address, not by the website's name. Before the ISP can pass the request, the ISP needs to add the website's IP Address. To do this, the ISP looks to the Domain Name System for help. The DNS system will look up the website name and find the IP address. The Internet Service Provider will then use their access to the internet to pass on the request. The internet will read the information that's in the request and deliver the request to another computer. The receiving computer will generate a response and send it back through the internet to the user. That response will include two files, an html file and a CSS file. The response can include other files but for this class, we're focusing on just the HTML and CSS files. Internet connections are established by delivering electronic pulses, lightwaves in fiber optic cables and radiowaves.

Building a Website

The browser expects to receive two important files, an HTML file and a CSS file.

Image from codercv.com

What is HTML?

HTML stands for: Hypertext Markup Language

Hypertext - refers to links on a webpage

Markup - informs the browser how to present text

Language - set of rules so others can understand

Why do we use HTML?

HTML allows us to tell the browser important information about our content.

Image from Markup by ShowMe

How to Write HTML

Image from internetingishard.com

Let's Write Some HTML!

Image from internetingishard.com

Install Chrome and Atom

Visit https://atom.io

Visit https://www.google.com/chrome

Open Your Text Editor (Atom)

Steps to create our first HTML file

File -> New File -> Save As -> index.html

Basic HTML Page

            
              <!DOCTYPE html>
              <html>
                <head>
                </head>

                <body>
                </body>
              </html>

<!DOCTYPE html>

            
              <!DOCTYPE html>
              <html>
                <head>
                </head>

                <body>
                </body>
              </html>

This line tells our browser which version of markup language to use. In this class, we are using HTML5.

<html></html>

            
              <!DOCTYPE html>
              <html>
                <head>
                </head>

                <body>
                </body>
              </html>

After the <!DOCTYPE html> the <html> tag is used to define the beginning and end of our HTML file. Everything we write will live between these two tags.

<head></head>

            
              <!DOCTYPE html>
              <html>
                <head>
                </head>

                <body>
                </body>
              </html>

The head contains information that is for the browser. This information is not visible to the user.

<body></body>

            
              <!DOCTYPE html>
              <html>
                <head>
                </head>

                <body>
                </body>
              </html>

The body contains the content we want the user to see. Everything in the body is visible to the user.

Let's Code

            
              <!DOCTYPE html>
              <html>
                <head>
                </head>

                <body>
                </body>
              </html>

View your website in a browser

Open Chrome

File -> Open File -> index.html -> Open

So... where is it?

Woman searching with hand above her eyes

is for Paragraph

Paragraphs help us format our content in a readable fashion.

is for Paragraph

Let's add a paragraph to our website.

            
              <p>This is a paragraph</p>

<h> is for Heading

There are 6 heading tags that we can use. The number next to each heading tags indicates it's importance.

<h> is for Heading

Let's add each heading to our page.

            
              Heading 1
              Heading 2
              Heading 3
              Heading 4
              Heading 5
              Heading 6

is for Emphasis

Empahsis makes the word italicized.

Let's add a paragraph and add tags to one word.

            
              <p>This <em>word</em> has emphasis.</p>

Nesting HTML Tags

All elements "nest" inside one another.

Nesting is when you place HTML tags inside other HTML tags. It's important that whichever tag opens first closes last.

is for the Bold

Strong makes the word bold.

Let's add a paragraph and add tags to one word.

            
              <p><strong>Bold</strong> and daring.</p>

<a> is for Adventure!

Okay, I made that one up...

'a' is for Anchor ⚓

But links do help us venture to other websites.

Example of an HTML link:

            
              Google

<a> is for Anchor! ⚓

Let's add a link to our page.

            
              Boston

<img> is for Image!

The image tag is used to add images to our site.

Supported image formats include:

jpeg/jpg
png
gif
svg

<img> is for Image!

The image tag is a "self-closing" element.

Example image tag:

<img> is for Image!

Let's add an image to our page.

Waffle with berries, taken by Joseph Gonzalez

Image from Unsplash

Clickable Image

To turn an image into a link,
we'll use nesting to place our image inside a link tag.

is for Line Break

The line break tag creates a line break in text.

Line breaks are useful when writing an address or poem.

Roxbury Innovation Center
2300 Washington St
Boston, MA 02119

is for Line Break

            
              
                Roxbury Innovation Center

                2300 Washington St

                Boston, MA 02119

Lists

Lists can be used to organize any lists of items.

Image from Girl Develop It course

<ol> is for Ordered List

Creates a list of items, shown as a numbered list.

First item
Second item
Third item

<ol> is for Ordered List

Let's add an ordered list to our page.

            
              
                List item one
                List item two

<ul> is for Unordered List

Creates a list of items, shown as a bullet-point list.

First item
Second item
Third item

<ul> is for Unordered List

Let's add an unordered list to our page.

            
              
                List item one
                List item two

Coming up next class...

Styling our web page with CSS

Intro to Web Development

Welcome!

A few guidelines:

A few safety tips...

About this class

Today

History of the Internet

The Web's First Website

Browsers

Requesting a website

Requesting a Website

Requesting a website

Building a Website

What is HTML?

Why do we use HTML?

How to Write HTML

Let's Write Some HTML!

Install Chrome and Atom

Open Your Text Editor (Atom)

Basic HTML Page

<!DOCTYPE html>

<html></html>

<head></head>

<body></body>

Let's Code

View your website in a browser

So... where is it?

<p> is for Paragraph

<p> is for Paragraph

<h> is for Heading

<h> is for Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<em> is for Emphasis

Nesting HTML Tags

<strong> is for the Bold

<a> is for Adventure!

<a> is for Anchor! ⚓

<img> is for Image!

<img> is for Image!

<img> is for Image!

Clickable Image

<br> is for Line Break

<br> is for Line Break

Lists

<ol> is for Ordered List

<ol> is for Ordered List

<ul> is for Unordered List

<ul> is for Unordered List

Coming up next class...