Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML & CSS

Jerry Hu
January 26, 2014
Programming
7
360

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
Tweet

Other Decks in Programming

See All in Programming
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
Jakarta EE meets AI
ivargrimstad
1
530
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Jakarta EE meets AI
ivargrimstad
0
390
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
860
Some more adventure of Happy Eyeballs
coe401_
2
190
今インフラ技術をイチから学び直すなら
yuhta28
1
140
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
GenU導入でCDKに初挑戦し、悪戦苦闘した話
hideg
0
170

Featured

See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Scaling GitHub
holman
458
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Embracing the Ebb and Flow
colly
83
4.4k
The Invisible Side of Design
smashingmag
296
50k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Fireside Chat
paigeccino
31
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
The Invisible Customer
myddelton
119
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k

Transcript

  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