Introduction to HTML and CSS Dennis Schwartz - - PowerPoint PPT Presentation

▶
introduction to html and css
SMART_READER_LITE
LIVE PREVIEW

Introduction to HTML and CSS Dennis Schwartz - - PowerPoint PPT Presentation

Nov 24, 2023 333 likes •690 views

Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Introduction to HTML and CSS Dennis Schwartz Anita-Borg-Celebration JS Workshop TUM Munich March 2016 Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf Reminder

slide-1
SLIDE 1

Dennis Schwartz Anita-Borg-Celebration 2016 @dschwartz_pf

Introduction to HTML and CSS

Dennis Schwartz

Anita-Borg-Celebration JS Workshop TUM Munich March 2016

slide-2
SLIDE 2

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

Reminder

anita-borg-celebration-munich.biojs.net/materials

slide-3
SLIDE 3

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

HTML

Hypertext Markup Language

slide-4
SLIDE 4

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

slide-5
SLIDE 5

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<html>

slide-6
SLIDE 6

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<html> <head> <body>

slide-7
SLIDE 7

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<html> <head> <body> <title> <link>

slide-8
SLIDE 8

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<html> <head> <body> <title> <link> <div> <img>

slide-9
SLIDE 9

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<html> <head> <body> <title> <link> <div> <img> <div> <h1> <p>

slide-10
SLIDE 10

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<html> <head> <body> <title> <link> <div> <img> <div> <h1> <p> … … …

slide-11
SLIDE 11

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<html> <head> <body> <title> <link> <div> <img> <div> <h1> <p> … … …

slide-12
SLIDE 12

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<html> <head> <body> <title> <link> <div> <img> <div> <h1> <p> … … …

slide-13
SLIDE 13

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<html> <head> <body> <title> <link> <div> <img> <div> <h1> <p> … … … Document Object Model (DOM)

slide-14
SLIDE 14

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

Let’s code!

slide-15
SLIDE 15

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

CSS

Cascading Style Sheets

slide-16
SLIDE 16

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

CSS

Cascading Style Sheets

Making it look pretty!

slide-17
SLIDE 17

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

Demo

slide-18
SLIDE 18

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

CSS Files

slide-19
SLIDE 19

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

CSS Files

body { background-color: #d0e4fe; } h1 { color: orange; text-align: center; } img { margin: auto; width: 50%; border: 3px solid #73AD21; padding: 30px; }

slide-20
SLIDE 20

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

Selector Types

Element Selectors

p { color: red; }

Id Selectors

#answer { color: red; }

Class Selectors

.red-text { color: red; }

slide-21
SLIDE 21

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

Element Selectors

HTML CSS

slide-22
SLIDE 22

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<p>What is the meaning of life and everything?</p> … … <p>The answer is 42!</p>

Element Selectors

HTML CSS

slide-23
SLIDE 23

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<p>What is the meaning of life and everything?</p> … … <p>The answer is 42!</p>

Element Selectors

HTML CSS

What is the meaning of life
 and everything? The answer is 42!

slide-24
SLIDE 24

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<p>What is the meaning of life and everything?</p> … … <p>The answer is 42!</p>

Element Selectors

p { color: red; }

HTML CSS

What is the meaning of life
 and everything? The answer is 42!

slide-25
SLIDE 25

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<p>What is the meaning of life and everything?</p> … … <p>The answer is 42!</p>

Element Selectors

What is the meaning of life
 and everything? The answer is 42!

p { color: red; }

HTML CSS

slide-26
SLIDE 26

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

Id Selectors

HTML CSS

slide-27
SLIDE 27

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<p>What is the meaning of life and everything?</p> … … <p id=“answer”>The answer is 42!</p>

Id Selectors

What is the meaning of life
 and everything?

HTML CSS

The answer is 42!

slide-28
SLIDE 28

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<p>What is the meaning of life and everything?</p> … … <p id=“answer”>The answer is 42!</p>

Id Selectors

What is the meaning of life
 and everything? The answer is 42!

#answer { color: red; }

HTML CSS

slide-29
SLIDE 29

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<p>What is the meaning of life and everything?</p> … … <p id=“answer”>The answer is 42!</p>

Id Selectors

What is the meaning of life
 and everything? The answer is 42!

#answer { color: red; }

HTML CSS

<h4>Says who?</h4>

Says who?

slide-30
SLIDE 30

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

Class Selectors

HTML CSS

slide-31
SLIDE 31

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<p>What is the meaning of life and everything?</p> … … <p class=“red-text”>The answer is 42!</p> <h4 class=“red-text”>Says who?</h4>

Class Selectors

What is the meaning of life
 and everything?

HTML CSS

The answer is 42!

Says who?

slide-32
SLIDE 32

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

<p>What is the meaning of life and everything?</p> … … <p class=“red-text”>The answer is 42!</p> <h4 class=“red-text”>Says who?</h4>

Class Selectors

What is the meaning of life
 and everything? The answer is 42!

.red-text { color: red; }

HTML CSS

Says who?

slide-33
SLIDE 33

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

Let’s code!

slide-34
SLIDE 34

Dennis Schwartz @dschwartz_pf Anita-Borg-Celebration 2016

Next up: JavaScript