Tweet
Tweet

Slide 1

Slide 1 text

HTML&CSS

Slide 2

Slide 2 text

Hi, I’m Jerry Hu

Slide 3

Slide 3 text

HTML: Hyper Text Markup Language

Slide 4

Slide 4 text

HTML: IS NOT A PROGRAMMING LANGUAGE

Slide 5

Slide 5 text

http://www.y ಠ

Slide 6

Slide 6 text

CSS: Cascading Style Sheet

Slide 7

Slide 7 text

CSS: IS NOT A PROGRAMMING LANGUAGE

Slide 8

Slide 8 text

STRUCTURE

Slide 9

Slide 9 text

This is the main heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 2nd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails

Slide 10

Slide 10 text

title of the page

This is the main heading

subdetails

!

2nd heading

subdetails

!

3rd heading

subdetails

HTML

Slide 11

Slide 11 text

title

main heading

subdetails

!

2nd heading

subdetails

!

3rd heading

subdetails

This is the main heading ! subdetails subdetails subdetails subdetails ! 2nd heading ! subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails HTML

Slide 12

Slide 12 text

TAGS!

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

#hashtag

Slide 16

Slide 16 text

subdetails

Slide 17

Slide 17 text

ATTRIBUTES

Slide 18

Slide 18 text

English

Slide 19

Slide 19 text

English

ATTRI. VALUE

Slide 20

Slide 20 text

Français

Slide 21

Slide 21 text

content

Slide 22

Slide 22 text

MORE TAGS

Slide 23

Slide 23 text

This is the main heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 2nd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails

Slide 24

Slide 24 text

This is the main heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 2nd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails

Slide 25

Slide 25 text

2nd example

This is the main heading

subdetails

!

2nd heading

subdetails

!

3rd heading

subdetails
subdetails

HTML

Slide 26

Slide 26 text

2nd example

This is the main heading

subdetails

!

2nd heading

subdetails

!

3rd heading

subdetails
subdetails

HTML

Slide 27

Slide 27 text

words

Slide 28

Slide 28 text

WHATS

Slide 29

Slide 29 text

content

Slide 30

Slide 30 text

LINKS

Slide 31

Slide 31 text

YouTube

Slide 32

Slide 32 text

YouTube

Slide 33

Slide 33 text

YouTube DISPLAY LOCATION

Slide 34

Slide 34 text

“Rick

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

“Rick

Slide 37

Slide 37 text

“Rick

Slide 38

Slide 38 text

Images: ! Links: text

Slide 39

Slide 39 text

INLINE vs BLOCK

Slide 40

Slide 40 text

This is the main heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 2nd heading ! ! ! ! ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails

Slide 41

Slide 41 text

tangent 1

This is the main heading

subdetails

!

2nd heading

subdetails

!

3rd heading

subdetails
subdetails

HTML

Slide 42

Slide 42 text

tangent 1

This is the main heading

subdetails

!

2nd heading

subdetails

!

3rd heading

subdetails
subdetails

HTML

Slide 43

Slide 43 text

COMMENTS

Slide 44

Slide 44 text

tangent 2

This is the main heading

subdetails

!

2nd heading

subdetails

!

3rd heading

subdetails
subdetails

HTML

Slide 45

Slide 45 text

CLASS & ID

Slide 46

Slide 46 text

3rd example

This is the main heading

subdetails

!

2nd heading

subdetails

!

3rd heading

subdetails

HTML

Slide 47

Slide 47 text

CLASS VS ID

Slide 48

Slide 48 text

Slide 49

Slide 49 text

DIVIDES CONTENT

Slide 50

Slide 50 text

4th example

My Webpage

—->

Welcome to my webpage

!

2nd heading

subdetails

!

3rd heading

subdetails

HTML

Slide 51

Slide 51 text

4th example

My Webpage

—->

Welcome to my webpage

!

2nd heading

subdetails

!

3rd heading

subdetails

HTML

Slide 52

Slide 52 text

This is the main heading ! welcome to my webpage ! 2nd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails subdetails subdetails subdetails subdetails

Slide 53

Slide 53 text

IS A BLOCK ELEMENT

Slide 54

Slide 54 text

MEET

Slide 55

Slide 55 text

IS AN INLINE ELEMENT

Slide 56

Slide 56 text

GROUPERS:
is a block
is inline

Slide 57

Slide 57 text

Questions?

Slide 58

Slide 58 text

HTML&CSS ^This thing^

Slide 59

Slide 59 text

“ html’s bae ”

Slide 60

Slide 60 text

STRUCTURE

Slide 61

Slide 61 text

{CSS} STYLES

Slide 62

Slide 62 text

REMEMBER: CLASS AND ID

Slide 63

Slide 63 text

4th example

My Webpage

—->

Welcome to my webpage

!

2nd heading

subdetails

!

3rd heading

subdetails

HTML

Slide 64

Slide 64 text

4th example

My Webpage

—->

Welcome to my webpage

!

2nd heading

subdetails

!

3rd heading

subdetails

HTML

Slide 65

Slide 65 text

#slogan { font-family: cursive; color: green; font-size: 12px; } CSS

Slide 66

Slide 66 text

#slogan { font-family: cursive; color: green; font-size: 12px; } SELECTOR PROP. VALUE DECLARATION CSS

Slide 67

Slide 67 text

#NOONECARES

Slide 68

Slide 68 text

#slogan { font-family: cursive; color: green; font-size: 12px; } CSS

Slide 69

Slide 69 text

4th example

My Webpage

—->

Welcome to my webpage

!

2nd heading

subdetails

!

3rd heading

subdetails

HTML

Slide 70

Slide 70 text

body { background-color: rgba(86,98,111,1); } #header { font-size: 20px; } #slogan { font-family: cursive; color: green; font-size: 12px; } #content { font-family: sans; } .title { font-size: 15px; } .post { font-size: 12px; font-family: serif; } CSS

Slide 71

Slide 71 text

#header, .post { font-family: serif; } CSS

Slide 72

Slide 72 text

Demo

Slide 73

Slide 73 text

{CSS} MAKES LOOK GOOD

Slide 74

Slide 74 text

USING IT

Slide 75

Slide 75 text

! ! Title ! ! ! ! HTML

Slide 76

Slide 76 text

! ! Title ! /*styles go here*/ ! ! ! HTML

Slide 77

Slide 77 text

! ! Title ! /*styles go here*/ ! ! !

Slide 78

Slide 78 text

RULES

Slide 79

Slide 79 text

YOLO

!

SWAG SWAG SWAG

!

#YOLOSWAG #OBEY

HTML

Slide 80

Slide 80 text

* { font-family: Helvetica, Arial, sans; } h1 { font-family: “Cooper Black”; } i { color: green; } i { color: red; } b { color: pink; } p b { color: blue !important; } p b { color: violet; } CSS

Slide 81

Slide 81 text

p#intro { font-size: 12px; } p { font-size: 10px; YOLO ! SWAG SWAG SWAG ! #YOLOSWAG #OBEY YIELDS: CSS

Slide 82

Slide 82 text

* { font-family: Helvetica, Arial, sans; } CSS

Slide 83

Slide 83 text

LAST FIRST SPECIFICITY !IMPORTANT

Slide 84

Slide 84 text

INHERITANCE

Slide 85

Slide 85 text

body { font-family: Helvetica, Arial, sans; color: #efefef; padding: 20px 10px 5px 10px; background-color: gray; } #page { border: 1px solid #efefef; background-color: #111; padding: inherit; } CSS HTML

Aplannr

Aplannr is a drag and drop planner app

It won best in state in a competition

Slide 86

Slide 86 text

INHERITS FONT FROM

Slide 87

Slide 87 text

! ! ! Aplannr! ! ! Aplannr is a drag and drop planner app! ! ! It won best in state in a competition

Slide 88

Slide 88 text

FONTS&COLOR

Slide 89

Slide 89 text

serif sans mono light medium bold normal italic condensed regular

Slide 90

Slide 90 text

1em based on size of “m” 12px based on pixels 12pt based on standard 100% based on 16px font

Slide 91

Slide 91 text

Questions?

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

HEIGHT & WIDTH

Slide 94

Slide 94 text

HAS WIDTH & HEIGHT

Slide 95

Slide 95 text

#article { border: 1px solid #efefef; background-color: #111; height: 100px; width: 100px; } CSS

Slide 96

Slide 96 text

#article { border: 1px solid #efefef; background-color: #111; height: 100px; width: 100%; } CSS

Slide 97

Slide 97 text

#article { border: 1px solid #efefef; background-color: #111; height: 100px; width: 75%; } CSS

Slide 98

Slide 98 text

CAN HAVE WIDTH & HEIGHT LIMITS

Slide 99

Slide 99 text

#article { border: 1px solid #efefef; background-color: #111; height: 100px; width: 75%; min-width: 200px; max-width: 500px; } CSS

Slide 100

Slide 100 text

OVERFLOW

Slide 101

Slide 101 text

#article { border: 1px solid #efefef; background-color: #111; height: 100px; width: 75%; min-width: 200px; max-width: 500px; overflow: hidden; } CSS

Slide 102

Slide 102 text

#article { border: 1px solid #efefef; background-color: #111; height: 100px; width: 75%; min-width: 200px; max-width: 500px; overflow: scroll; } CSS

Slide 103

Slide 103 text

HEIGHT & WIDTH

Slide 104

Slide 104 text

SPACING&POSITIONING

Slide 105

Slide 105 text

! ! ! Aplannr! ! ! Aplannr is a drag and drop planner app! ! ! It won best in state in a competition

Slide 106

Slide 106 text

body { font-family: Helvetica, Arial, sans; color: #efefef; padding: 20px 10px 5px 10px; background-color: gray; } #page { border: 1px solid #efefef; background-color: #111; padding: inherit; } CSS HTML

Aplannr

Aplannr is a drag and drop planner app

It won best in state in a competition

Slide 107

Slide 107 text

PADDING IS IN RED

Slide 108

Slide 108 text

MARGIN IS IN BLUE

Slide 109

Slide 109 text

Lorem ipsum: ! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum: ! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Slide 110

Slide 110 text

#article { height: 300px; width: 500px; margin: 10px auto 10px auto; padding: 8px 2px 8px 2px; } CSS

Slide 111

Slide 111 text

#article { height: 300px; width: 500px; margin: 10px auto 10px auto; padding: 8px 2px 8px 2px; } CSS N E S W

Slide 112

Slide 112 text

#article { height: 300px; width: 500px; margin: 10px; padding: 2px; } CSS

Slide 113

Slide 113 text

#article { height: 300px; width: 500px; margin: auto; top: 0; left: 0; padding: 2px; } CSS

Slide 114

Slide 114 text

#article { height: 300px; width: 500px; position: absolute; margin: auto; top: 0; bottom: 0; padding: 2px; } CSS

Slide 115

Slide 115 text

MARGIN: OUTSIDE PADDING: INSIDE

Slide 116

Slide 116 text

THAT’S ALL FOLKS

Slide 117

Slide 117 text

HTML&CSS