Course Overview
CS 396: �Introduction to Web Development
Winter, 2022
Announcements & Roadmap
Outline
Outline
What Can a Browser Do?
In web dev, browser’s are also referred to as “the client.” They’re the consumer of web resources. They have a few jobs:
5
What Can a Browser Do?
Browsers have several different jobs...
6
What is a Website?
A website as a program – written using HTML, CSS, and JavaScript – that your browser downloads from a server that corresponds to a web address (URL)
Your browser then interprets the program it just downloaded “on-the-fly”
Web Server
Sends / receives static or generated files (HTML, CSS, JavaScript, JSON, Images).
Web Browser�(a) requests instructions �(b) interprets instructions
Browser makes a request to a url
Server sends data and files
Languages your web browser understands
HTML
CSS (Cascading Style Sheets)
JavaScript
Also understands select data formats including:
8
Let’s take a look at these three types �of files working together�
lecture03/01-simple-carousel
Note in the carousel example:
Links ~ References�Links to scripts & stylesheets are analogous to importing references / dependencies in a ‘traditional’ programming language
HTML ~ Content�Defines # of slides and their content
CSS ~ Style�Styles the slides (yellow, centered, etc.)
JavaScript ~ Interactivity: Sets up timer; responds to rendering dynamic elements on-the-fly)
lecture03/01-simple-carousel
Activity: Tinker with each technology
11
lecture03/01-simple-carousel
Reminder: Languages your web browser does NOT understand
Languages other than HTML, CSS, and JavaScript. This includes:
12
How a browser interprets files
Here are the steps that a browser follows to render an HTML page to the screen:
13
Using the Browser Inspector
Like with all programming, you will encounter errors as you develop your websites. The Browser Inspector is the very best resource that you have to help you resolve issues. It can help you...
14
Chrome Browser Inspector
Outline
Intro to HTML (Hypertext Markup Language)
HTML is a way of creating web documents using “markup tags”
How the Browser Interprets HTML
HTML File
<html lang="en">�<head>� <title>DOM Example</title>� <meta name="author" content="EECS 130">� <link rel="stylesheet" href="main.css">�</head>��<body>� <main>� <h1>Hello!</h1>� <p>Welcome to this webpage.</p>� </main>�</body>�</html>
<html>
<title>
<head>
<body>
<link>
<main>
<h1>
<p>
Hello!
Welcome to this webpage.
<meta>
Invisible section
(for metadata)
Visible section
(for document elements)
Lots of elements can go inside of the body element
19
Body
<body>
</body>
Image�<img src="??" />
YouTube Video
<iframe src="??"></iframe>
Hyperlink
<a href=”??”>my link</a>
Containers
<div></div>
<span></span>
<nav></nav>
<article></article>
<header></header>
<section></section>
<footer></footer>
Table
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Important Rules of Thumb
1. Avoid spaces, capital letters, and special characters when naming files
When creating new HTML files, it is important to follow the naming conventions listed below:
21
2. Most tags have an opening tag and a closing tag
<h1>My Title</h1>
But some don’t:
You’ll eventually figure out the rules as you continue building web pages. You can also consult the HTML Reference to learn more about the rules of each individual tag.
22
3. The browser ignores whitespace
The browser ignores whitespace:��<h1>My Title</h1>�
...is interpreted the same way as...�
<h1> My
Title
</h1>
23
4. Make your code readable by indenting and using line breaks
Make your code readable by indenting and using line breaks. Please don’t do this:��<main><p>Welcome, <strong>Leonard</strong></p><ol><li>item 1</li><li>item2</li><li>item 3</li>�</ol></main>
4. Make your code readable by indenting and using line breaks
Instead, do this:��<main>� <p>� Welcome, <strong>Leonard</strong>� </p>� <ol>� <li>item 1</li>� <li>item 2</li>� <li>item 3</li>� </ol>�</main>
5. Attribute syntax
Attributes are always followed by an equals sign and values are surrounded by quotation marks.��<img src=“my_image.jpg”>
26
No space between attribute, equals sign, and quotations
6. Last in, first out (LIFO)
Correct��<p>Welcome, � <strong>Leonard</strong>�</p>��
Incorrect��<p>Welcome, � <strong>Leonard</p>�</strong>
27
7. Use comments to help you understand your code
<!-- Welcome Section -->�<section>� <p>� Welcome, <strong>Leonard</strong>� </p>� <ol>� <li>item 1</li>� <li>item 2</li>� </ol>�</section>
8. Know the difference between relative and absolute links
29
A note on learning HTML
Outline
Document Object Model (DOM)
(n.) a way of representing a document, like a web page, in a way that can be understood by a human and by a computer. Typically, a DOM is created using HTML. Declarative languages like CSS are used to style it, and programming languages like Javascript allow us to change it.
Allows you to programmatically manipulate elements and styles on a web page using CSS and JavaScript
Open your console and type: �> document
DOM Representation
HTML
<html lang="en">�<head>� <title>DOM Example</title>� <meta name="author" content="EECS 130">� <link rel="stylesheet" href="main.css">�</head>��<body>� <main>� <h1>Hello!</h1>� <p>Welcome to this webpage.</p>� </main>�</body>�</html>
<html>
<title>
<head>
<body>
<link>
<main>
<h1>
<p>
Hello!
Welcome to this webpage.
<meta>
Outline
CSS: How you make your websites look nice!
35
CSS Files: Style & Layout
How to include a stylesheet in your HTML
External stylesheets are stored in a separate *.css
Anatomy of a Stylesheet
body {
color: black;
padding: 1em;
}
.title-bar {
padding: 5px;
font-weight: bold;
}
#profile {
background-color: #ddd;
}
Stylesheets are comprised �of rulesets
38
Anatomy of a Ruleset
body {
color: black;
padding: 1em;
}
39
selector
property
value
declaration
Specificity and the Cascade
Specificity and the Cascade
Selectors allow you to target elements in the DOM
CSS and JavaScript can both target elements within the DOM using different kinds of selectors.
Types of Selectors: Most Important Ones
43
Selector | Example | Description |
.class | .intro | Selects all elements with class=”intro” |
#id | #firstname | Selects the element with id=”firstname” |
* | * | Selects all elements |
element | p | Selects all <p> elements |
MEMORIZE THIS SLIDE
Types of Selectors: Also Useful
44
Selector | Example | Description |
element, element | div, p | Selects all <div> elements and all <p> elements |
element element | div p | Selects all <p> elements inside <div> elements |
element > element | div > p | Selects all <p> elements where the parent is a <div> element |
element + element | div + p | Selects all <p> elements that are placed immediately after <div> elements |
element~element | p ~ ul | Selects every <ul> element that is preceded by a <p> element |
...
1 <body>
2 <div class=”title-bar”>
3 <h1>Welcome, Malik</h1>
4 <img id=”profile” src=”images/pic.png” />
5 <hr>
6 </div>
7 <div>Right
8 <ul>
9 <li>list item 1</li>
10 <li>list item 2</li>
11 <li>list item 3</li>
12 </ul>
13 </div>
14 </body>
...
body {
color: grey;
}
h1, li {
text-transform: uppercase;
display: inline-block;
color: #999999;
}
.title-bar {
padding: 5px;
background-color: #EEEEEE;
}
#profile {
width: 100px;
float: left;
margin-right: 20px;
}
...
1 <body>
2 <div class=”title-bar”>
3 <h1>Welcome, Malik</h1>
4 <section>
5 <p>text text text</p>
6 </section>
7 <p>123 456 789</p>
8 </div>
9 <p>blah blah blah</p>
10 <div>Right
11 <p>abc def ghi jkl</p>
12 </div>
13 </body>
...
div p {
color: red;
}
div > p {
color: red;
}
.title-bar p {
color: red;
}
More Selector Resources
https://cs396-web-dev.github.io/winter2022/css-reference/selectors/
The Box Model
48
References:
The Box Model
Block-Level Elements
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
Inline Elements
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
CSS & Layouts
Layouts are the hardest thing about CSS for many reasons:
53
Layout Tips
Flexbox Resources
Some resources:
CSS Grid Resources
CSS Grid allows you to assign containers to specific places on your web page. It is often used to configure the main layout of a page
Some resources:
Outline
Lab 1: Box Model
Open 02-box-model and create this card �(from Lab 1):
Using Flexbox: Suggested Strategy
�Parent Container�Put the display into “flex mode” display: flex and then use the following properties to align the child items:
Child Container
Apply sizing to the child container as needed.
Flexbox: Practice 1
Open lecture03/03-flexbox. Can you create the following layouts?
1
2
3
Flexbox: Practice 1 Cont’d – Using Media Queries
Make it so that #1 is for Desktop screens, #2 is for Tablet, and #3 is for Mobile
1
2
3
Flexbox: Practice 2 (Lab 1)
Open 04-flexbox-media-queries and create these screens:
Desktop
Tablet
Mobile
Flexbox: Practice 3: Navigation Bar
Open 05-nav-bar, and try to make the following: