SLIDE 1
HTML/CSS Basics Forrest Huang CS160 Summer 2019 Week 1 // - - PowerPoint PPT Presentation
HTML/CSS Basics Forrest Huang CS160 Summer 2019 Week 1 // - - PowerPoint PPT Presentation
HTML/CSS Basics Forrest Huang CS160 Summer 2019 Week 1 // He/His/Him // 2nd Year Ph.D. HCI + ML Teach Computers to Draw // Office Hours: 0900-1100 Tu 310 Jacobs ( ) // Sections and Logistics // Web Programming/Languages // HTML 101 for
SLIDE 2
SLIDE 3
// He/His/Him // 2nd Year Ph.D. HCI + ML Teach Computers to Draw // Office Hours: 0900-1100 Tu 310 Jacobs ( )
SLIDE 4
for today
// Sections and Logistics // Web Programming/Languages // HTML 101 // CSS 101 // Chrome Dev Tools // Survey
SLIDE 5
It is a place to learn and experience practical tools which will help you in your projects, and help you reinforce and build upon ideas covered in classes. First 2 weeks: Fundamentals
SLIDE 6
Summer classes require a lot of work Many assignment in this class don’t have “right” answers
SLIDE 7
SLIDE 8
feel free to stay, but please
SLIDE 9
If you finish an exercise early, feel free to help others
SLIDE 10
SLIDE 11
SLIDE 12
SLIDE 13
SLIDE 14
Focused on formatting and presenting front-end UI-elements Turing-Complete! https://tinyurl.com/rule110
SLIDE 15
SLIDE 16
Try and get as close to a static version of https://www.youtube.com
SLIDE 17
<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Imports, like CSS --> </head> <body> <!-- Visible Content --> <p>My first paragraph.</p> </body> </html>
SLIDE 18
<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Imports, like CSS --> </head> <body> <!-- Visible Content --> <p>My first paragraph.</p> </body> </html>
SLIDE 19
<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Imports, like CSS --> </head> <body> <!-- Visible Content --> <p>My first paragraph.</p> </body> </html>
SLIDE 20
<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Imports, like CSS --> </head> <body> <!-- Visible Content --> <p>My first paragraph.</p> </body> </html>
SLIDE 21
<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Imports, like CSS --> </head> <body> <!-- Visible Content --> <p>My first paragraph.</p> </body> </html>
SLIDE 22
https://tinyurl.com/cs160-sum-html
SLIDE 23
// HTML tags start with <> and end with < /> // HTML tags specify the type (p, h1) and optionally attributes (href = “ ”) // divs and spans are the two main types of containers // Whitespace is (mostly) ignored
SLIDE 24
// Whitespace <br> - Linebreak - Non-breaking whitespace
SLIDE 25
// Open https://tinyurl.com/cs160-sum-html, Create a fork // Build the following start to a fun-fact page, for your neighbors! (in pairs)
SLIDE 26
SLIDE 27
<li id=”rutabaga” style=”color: green;”>I love rutabagas.</li>
SLIDE 28
SLIDE 29
ID: Value is unique to that specific element on that page (also used for relative linking) Class: Value can be shared with elements
<li id=”rutabaga” class=”fun-fact”>I love rutabagas.</li> <li id=”roger” class=”fun-fact”>My favourite tennis player is Roger Federer.</li>
SLIDE 30
ID: Value is unique to that specific element on that page (also used for relative linking) Class: Value can be shared with elements
<li id=”rutabaga” class=”fun-fact”>I love rutabagas.</li> <li id=”roger” class=”fun-fact”>My favourite tennis player is Roger Federer.</li>
SLIDE 31
ID: Value is unique to that specific element on that page (also used for relative linking) Class: Value can be shared with elements
<li id=”rutabaga” class=”fun-fact”>I love rutabagas.</li> <li id=”roger” class=”fun-fact”>My favourite tennis player is Roger Federer.</li>
SLIDE 32
HTML:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"/> </head>
mystyle.css:
.fun-fact { color: green; }
SLIDE 33
<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Imports, like CSS --> </head> <body> <!-- Visible Content --> <p>My first paragraph.</p> </body> </html>
SLIDE 34
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" type="text/css" href="mystyle.css"/> </head> <body> <!-- Visible Content --> <p>My first paragraph.</p> </body> </html>
SLIDE 35
.class: .fun-fact #id: #rutabaga Element: span First Nested Second: ul li
.fun-fact { color: green; }
SLIDE 36
https://tinyurl.com/cs160-sum-css
SLIDE 37
SLIDE 38
SLIDE 39
https://tinyurl.com/chromedt-demo
SLIDE 40
For more detailed instructions on how you could make a personal website: https://tinyurl.com/personalw-medium
SLIDE 41
for today
// Sections and Logistics // Web Programming/Languages // HTML 101 // CSS 101 // Chrome Dev Tools // Survey
SLIDE 42
SLIDE 43
https://tinyurl.com/cs160-su19-sec1
SLIDE 44
rutabaga
SLIDE 45