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 →
[email protected]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
