Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

HTML & CSS

Jerry Hu
January 26, 2014
Programming
420
7

HTML & CSS

Learn the basics of HTML and CSS. Talk by Jerry Hu. Some examples taken from HTML & CSS by Jon Dukett.

Jerry Hu

January 26, 2014

Transcript

117 slides

  1. HTML&CSS

  2. Hi, I’m Jerry Hu

  3. HTML: Hyper Text Markup Language

  4. HTML: IS NOT A PROGRAMMING LANGUAGE

  5. http://www.y ಠ

  6. CSS: Cascading Style Sheet

  7. CSS: IS NOT A PROGRAMMING LANGUAGE

  8. STRUCTURE

  9. 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

  10. <html> <header> <title>title of the page</title> </header> <body> <h1>This is

    the main heading</h1> <p>subdetails</p> ! <h2>2nd heading</h2> <p>subdetails</p> ! <h3>3rd heading</h3> <p>subdetails</p> </body> </html> HTML

  11. <html> <header> <title>title</title> </header> <body> <h1>main heading</h1> <p>subdetails</p> ! <h2>2nd

    heading<h2> <p>subdetails</p> ! <h3>3rd heading</h3> <p>subdetails</p> </body> </html> This is the main heading ! subdetails subdetails subdetails subdetails ! 2nd heading ! subdetails subdetails subdetails subdetails ! 3rd heading ! subdetails subdetails subdetails subdetails HTML

  12. TAGS!

  13. <p>

  14. </p>

  15. #hashtag

  16. <p>subdetails</p>

  17. ATTRIBUTES

  18. <p lang=“en-us”>English</p>

  19. <p lang=“en-us”>English</p> ATTRI. VALUE

  20. <p lang=“fr”>Français</p>

  21. <tags>content</tags>

  22. MORE TAGS

  23. 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

  24. 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

  25. <html> <header> <title>2nd example</title> </header> <body> <h1>This is the main

    heading</h1> <p><i>subdetails</i></p> ! <h2>2nd heading<h1> <p><b>subdetails</b></p> ! <h3>3rd heading</h3> <p>subdetails<br />subdetails</p> </body> </html> HTML

  26. <html> <header> <title>2nd example</title> </header> <body> <h1>This is the main

    heading</h1> <p><i>subdetails</i></p> ! <h2>2nd heading<h1> <p><b>subdetails</b></p> ! <h3>3rd heading</h3> <p>subdetails<br />subdetails</p> </body> </html> HTML

  27. <nested> <tag> words </tag> </nested>

  28. WHATS <br />

  29. <tags>content</tags>

  30. LINKS

  31. YouTube

  32. <a href=“youtube.com”>YouTube</a>

  33. <a href=“youtube.com”>YouTube</a> DISPLAY LOCATION

  34. <img src=“images/rick.jpg” alt=“Rick Roll” title=“Rick Rolling U.” />

  35. None

  36. <img src=“images/rick.jpg” alt=“Rick Roll” title=“Rick Rolling U.” />

  37. <img src=“images/rick.jpg” alt=“Rick Roll” title=“Rick Rolling U.” width=“1024px” height=“768px” />

  38. Images: <img src=“r.jpg” /> ! Links: <a href=“link”>text</a>

  39. INLINE vs BLOCK

  40. 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

  41. <html> <header> <title>tangent 1</title> </header> <body> <h1>This is the main

    heading</h1> <p><i>subdetails</i></p> ! <h2>2nd heading<h1> <p><b>sub<img src=“r.jpg” />details</b></p> ! <h3>3rd heading</h3> <p>subdetails<br />subdetails</p> </body> </html> HTML

  42. <html> <header> <title>tangent 1</title> </header> <body> <h1>This is the main

    heading</h1> <p><i>subdetails</i></p> ! <h2>2nd heading<h1> <p><b>sub<img src=“r.jpg” />details</b></p> ! <h3>3rd heading</h3> <p>subdetails<br />subdetails</p> </body> </html> HTML

  43. COMMENTS

  44. <html> <header> <title>tangent 2</title> </header> <body> <!—-comment about code—-> <h1>This

    is the main heading</h1> <p><i>subdetails</i></p> ! <h2>2nd heading<h1> <p><b>subdetails</b></p> ! <h3>3rd heading</h3> <p>subdetails<br />subdetails</p> </body> </html> HTML

  45. CLASS & ID

  46. <html> <header> <title>3rd example</title> </header> <body> <h1>This is the main

    heading</h1> <p class=“subdetails” id=“t”>subdetails</p> ! <h2>2nd heading<h1> <p class=“subdetails” id=“m”>subdetails</p> ! <h3>3rd heading</h3> <p class=“subdetails” id=“b”>subdetails</p> </body> </html> HTML

  47. CLASS VS ID

  48. <div>

  49. <div> DIVIDES CONTENT </div>

  50. <html> <header> <title>4th example</title> </header> <body> <div id=“header”> <h1>My Webpage</h1>

    <!—-<img src=“r.jpg” title=“me”/>—-> <p id=“slogan”>Welcome to my webpage</p> </div> ! <div id=“content”> <h2 class=“title”>2nd heading<h1> <p class=“post”>subdetails</p> ! <h3 class=“title”>3rd heading</h3> <p class=“post”>subdetails</p> </div> </body> </html> HTML

  51. <html> <header> <title>4th example</title> </header> <body> <div id=“header”> <h1>My Webpage</h1>

    <!—-<img src=“r.jpg” title=“me”/>—-> <p id=“slogan”>Welcome to my webpage</p> </div> ! <div id=“content”> <h2 class=“title”>2nd heading<h1> <p class=“post”>subdetails</p> ! <h3 class=“title”>3rd heading</h3> <p class=“post”>subdetails</p> </div> </body> </html> HTML

  52. 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

  53. <div> IS A BLOCK ELEMENT </div>

  54. MEET <span>

  55. <span> IS AN INLINE ELEMENT </span>

  56. GROUPERS: <div>is a block</div> </span>is inline</span>

  57. Questions?

  58. HTML&CSS ^This thing^

  59. “ html’s bae ”

  60. STRUCTURE

  61. {CSS} STYLES <HTML>

  62. REMEMBER: CLASS AND ID

  63. <html> <header> <title>4th example</title> </header> <body> <div id=“header”> <h1>My Webpage</h1>

    <!—-<img src=“r.jpg” title=“me”/>—-> <p id=“slogan”>Welcome to my webpage</p> </div> ! <div id=“content”> <h2 class=“title”>2nd heading<h1> <p class=“post”>subdetails</p> ! <h3 class=“title”>3rd heading</h3> <p class=“post”>subdetails</p> </div> </body> </html> HTML

  64. <html> <header> <title>4th example</title> </header> <body> <div id=“header”> <h1>My Webpage</h1>

    <!—-<img src=“r.jpg” title=“me”/>—-> <p id=“slogan”>Welcome to my webpage</p> </div> ! <div id=“content”> <h2 class=“title”>2nd heading<h1> <p class=“post”>subdetails</p> ! <h3 class=“title”>3rd heading</h3> <p class=“post”>subdetails</p> </div> </body> </html> HTML

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

  66. #slogan { font-family: cursive; color: green; font-size: 12px; } SELECTOR

    PROP. VALUE DECLARATION CSS

  67. #NOONECARES

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

  69. <html> <header> <title>4th example</title> </header> <body> <div id=“header”> <h1>My Webpage</h1>

    <!—-<img src=“r.jpg” title=“me”/>—-> <p id=“slogan”>Welcome to my webpage</p> </div> ! <div id=“content”> <h2 class=“title”>2nd heading<h1> <p class=“post”>subdetails</p> ! <h3 class=“title”>3rd heading</h3> <p class=“post”>subdetails</p> </div> </body> </html> HTML

  70. 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

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

  72. Demo

  73. {CSS} MAKES <HTML> LOOK GOOD

  74. USING IT

  75. <html> ! <head> ! <title>Title</title> ! <link href=“styles.css” type=“text/css” rel=“stylesheet”

    /> ! </head> ! <body> <!—-Content—-> </body> ! </html> HTML

  76. <html> ! <head> ! <title>Title</title> ! <style> /*styles go here*/

    </style> ! </head> ! <body> <!—-Content—-> </body> ! </html> HTML

  77. <html> ! <head> ! <title>Title</title> ! <style> /*styles go here*/

    </style> ! </head> ! <body> <!—-Content—-> </body> ! </html> <btw this is a css comment HTML

  78. RULES

  79. <h1>YOLO</h1> ! <p id=“introduction”> SWAG <i>SWAG</i> <b>SWAG</b> </p> ! <p>#YOLOSWAG

    #OBEY</p> HTML

  80. * { 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

  81. p#intro { font-size: 12px; } p { font-size: 10px; YOLO

    ! SWAG SWAG SWAG ! #YOLOSWAG #OBEY YIELDS: CSS

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

  83. LAST FIRST SPECIFICITY !IMPORTANT

  84. INHERITANCE

  85. 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 <div id=“page”> <h1>Aplannr</h1> <p>Aplannr is a drag and drop planner app</p> <p>It won best in state in a competition<p> </div>

  86. <h1> INHERITS FONT FROM <body>

  87. ! ! ! Aplannr! ! ! Aplannr is a drag

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

  88. FONTS&COLOR

  89. serif sans mono light medium bold normal italic condensed regular

  90. 1em based on size of “m” 12px based on pixels

    12pt based on standard 100% based on 16px font

  91. Questions?

  92. None

  93. HEIGHT & WIDTH

  94. <div> HAS WIDTH & HEIGHT </div>

  95. #article { border: 1px solid #efefef; background-color: #111; height: 100px;

    width: 100px; } CSS

  96. #article { border: 1px solid #efefef; background-color: #111; height: 100px;

    width: 100%; } CSS

  97. #article { border: 1px solid #efefef; background-color: #111; height: 100px;

    width: 75%; } CSS

  98. <div> CAN HAVE WIDTH & HEIGHT LIMITS </div>

  99. #article { border: 1px solid #efefef; background-color: #111; height: 100px;

    width: 75%; min-width: 200px; max-width: 500px; } CSS

  100. OVERFLOW

  101. #article { border: 1px solid #efefef; background-color: #111; height: 100px;

    width: 75%; min-width: 200px; max-width: 500px; overflow: hidden; } CSS

  102. #article { border: 1px solid #efefef; background-color: #111; height: 100px;

    width: 75%; min-width: 200px; max-width: 500px; overflow: scroll; } CSS

  103. <div> HEIGHT & WIDTH

  104. SPACING&POSITIONING

  105. ! ! ! Aplannr! ! ! Aplannr is a drag

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

  106. 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 <div id=“page”> <h1>Aplannr</h1> <p>Aplannr is a drag and drop planner app</p> <p>It won best in state in a competition<p> </div>

  107. PADDING IS IN RED

  108. MARGIN IS IN BLUE

  109. 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

  110. #article { height: 300px; width: 500px; margin: 10px auto 10px

    auto; padding: 8px 2px 8px 2px; } CSS

  111. #article { height: 300px; width: 500px; margin: 10px auto 10px

    auto; padding: 8px 2px 8px 2px; } CSS N E S W

  112. #article { height: 300px; width: 500px; margin: 10px; padding: 2px;

    } CSS

  113. #article { height: 300px; width: 500px; margin: auto; top: 0;

    left: 0; padding: 2px; } CSS

  114. #article { height: 300px; width: 500px; position: absolute; margin: auto;

    top: 0; bottom: 0; padding: 2px; } CSS

  115. MARGIN: OUTSIDE PADDING: INSIDE

  116. THAT’S ALL FOLKS

  117. HTML&CSS

Other Decks in Programming

See All in Programming
Lambda durable functionsでHuman in the Loopを楽に…楽に……
har1101
2
300
高橋メソッドでCVE解説シリーズ 〜CVE-2026-112816〜
hakkadaikon
0
250
社内AIエージェント「Askワンバン」における コストチューニングの取り組み
t0yohei
0
170
仕様駆動開発入門 (何を作るかを先に決めて渡す) | 目指せ Kiro マスター 05
inariku
PRO
2
140
AI Augmentation Techniques with Liberty
ivargrimstad
1
460
Web Framework Benchmark Battle 2026, Any%
a_matsuda
3
3.2k
PumaからFalconに移行したRailsアプリケーションでの実践
falcon8823
0
380
Kawaiicon: Kubernetes, it's no longer cool, but let's secure it anyway!
barnbarn
0
130
Python Lambdaにおけるテストしやすい設計とAI支援の活用 / Designing Testable Python Lambda Functions with AI
kitano_yuichi
1
320
Claude Code ハーネス Deep Dive – 君はどこまで制御する？ -
takateeen_knj
6
5.6k
Apple Intelligenceとオンデバイス時代の到来
yahir0
0
240
Rails初心者がパスキーを実装してみて大変だったこと
ktombow
0
180

Featured

See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
470
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
350
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
2
520
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
800
Bash Introduction
62gerente
615
220k
Build your cross-platform service in a week with App Engine
jlugia
234
19k
Producing Creativity
orderedlist
PRO
348
41k
Believing is Seeing
oripsolob
1
280
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
580
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
23k
The untapped power of vector embeddings
frankvandijk
2
2k