Announcements

Message from the registrar -

“The course is full. If you are not an INFO senior you are highly
unlikely to get off the waitlist and should look for another class.
The class is offered again this coming fall open to 300+ students.”
Any ?’s → courses@cis.cornell.edu

Class Prep has been extended until the EOD today Thu 1/25.

Be sure to complete the Dev Env Setup Guide before lab on Fri.
Topics > Introduction to Websites

Why do we go to websites?
How to create a website
Languages used to build webpages
How web projects are organized
How the browser accesses a web server
Participation Activity
 Q: Why do we goto websites?

Reflection: Your last website visit

Take a moment and think about the last website your visited.
Answer the following questions:
1. Why did you visit the site? What was your goal for visiting the
site?
2. Were you able to accomplish your goal?
3. If you were able to accomplish your goal, what about the site
made that possible? If not, what prevented you?
 A: Why do we goto websites?

Was your success (or lack of) with your goal related to...?
1. The website being built with React?
2. The website being designed with Figma?
3. The website contained the content you were looking for?
It all starts with Content

"Content is King"
- Bill Gates, 1996
Web Page > Core Components
Content + Design + Code

Content is the
purpose for web pages
Code

Design organizes
Design content
Content

Code defines how the

content will be
displayed
How to Create a Website

1. Design the website

2. Code the website
 1 - Designing a Website

1 - Identify the website's audience.

2 - Understand the audience's goals. (Not your goals.)

3 - Assemble/create content to address the audience's goals.

4 - Organize content into web pages. (Websites have multiple pages.)

5 - Plan the website's design.

6 - Evaluate the site's design. Does the website address the

audience's goals?
2 - Coding a Website

For each webpage in the website:

1 - Structure the content in HTML.

2 - Style the content with CSS using your design plan.

3 - Add interactivity with JavaScript to enhance the user's

experience with the content.
Web Page > CODE Stack
Languages of Web Dev

HTML → Content
CSS → Styling and Layout
JavaScript → Interaction
HTML > Structures Content
Adds Content and Structure to a Webpage

HTML → HyperText Markup Language

→ Content
Text | Images | Video | Audio

→ Structure
Navigation | Header | Paragraph | Footer
HTML > Tags
A markup language is all about Tags

HTML → HyperText Markup Language

HTML is all about tags

Structure content by wrapping it in tags

<tag> content </tag>

Example > Content Structured in HTML

There are many many tags to include and structure content.

Tags > Lots and Lots

There are many many tags to include and structure content.

<h1..6> to make 6 different size headers
<p> to structure paragraphs
<img> to include images
<a> to make links
<ul>,<ol> to make bulleted or numbered
lists
CSS > Presentation
Adds Style and Layout to HTML

CSS → Cascading Style Sheets

→ Style
fonts | colors

→ Layout
positioning | layout
CSS > Rules

CSS → Cascading Style Sheets

CSS is all about creating styling rules

These rules are then applied to the HTML elements (tags)
JS > Interactivity

JS → JavaScript

→ Interactivity
Every time a web page does more than just sit
there and display static information for you to
look at — displaying timely content updates,
interactive maps, animated 2D/3D graphics,
scrolling or expanding content, pop up
windows — JavaScript is probably involved.
JS > Scripting Programming Language

JavaScript is a scripting or programming language that allows you to

implement complex features on web pages.

JavaScripts allows you to dynamically access HTML elements and CSS rules
and add or change content and how its displayed.
Static Website > Collection of Pages

A static website is collection of webpages

The HTML code for each page is stored in a separate file
The CSS and JS code for webpage’s are also stored in their own
files
All these files are organized into a web project folder
Web Project > Organization

All 3 types of code are

stored in separate files
HTML is at root level
CSS & JS code & media
files are stored in
sub-folders
page.html
css/style.css
js/scripts.js
images/image.jpg
All these files are
stored on a web server
Client (browser) ← → Server (web
server)
How the browser access web pages and its content from a web server

HTTP → Hypertext Transfer Protocol

Browser Address Bar → https://domain.com/index.html

How the Browser renders a Web Page

Browser makes a HTTP request of an HTML file

HTML page references JS + CSS + Media When the server returns the HTML Page
1. Browser requests the HTML page;
CSS Server returns the HTML page
2. Bowser loads HTML and begins to
HTML JS process the HTML code
3. Browser then requests CSS; server
returns file with CSS
Media
4. Browser then requests JS; server
returns file with the JS
5. Browser then requests Media; server
returns the file that is the image
6. Bowser then renders the page
combining > HTML + CSS + JS + Media
How the Browser renders a Webpage

HTML Pages reference or link in the CSS + JS + Media files

index.html
…

<head>

<link rel="stylesheet" href="css/style.css"> css/style.css

<script src="js/scripts.js"></script> js/scripts.js

<head>

<body>

<img src="images/image.jpg" alt="image"> images/image.jpg

</body>
 Anatomy of a Webpage

<!DOCTYPE html> The browser refers to a web page as a “document”.

<html>
<head>
The <head> section
<meta charset=”utf-8”>
tells the browser
<title>Page Title</title>
additional
<link rel=”stylesheet” href=”css/style.css”>
information about
<script src=”js/scripts.js>
HOW to display the
</head>
page.
<body>
<h1>This is the Body of the Page</h1>
The <body> section
<p>Anything within the body of a web
tells the browser
page is displayed in the main
what content to
browser window.</p>
display ON the
</body>
page.
</html>
Homework > What to do next

Attend Lab1 on Friday

Lab1 is due Sun 1.29 11:59PM → work to complete in Lab!

Look for Lecture Prep on Mon AM

Lecture Prep is due Tue 11AM before class
Class Participation

Go to canvas -> Class 1/26 -> See the Participation section

Take the Quiz