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

How the Web Works: Lecture 2

Abhinav Sharma
January 27, 2010
Education
1
44

How the Web Works: Lecture 2

This talk was designed for a class (98-135) taught at Carnegie Mellon University in Spring 2010.

Abhinav Sharma

January 27, 2010
Tweet

More Decks by Abhinav Sharma

See All by Abhinav Sharma
How the Web Works: Lecture 5
abhinavsharma
1
69
How the Web Works: Lecture 6
abhinavsharma
0
44
How the Web Works: Lecture 7
abhinavsharma
0
43
How the Web Works: Lecture 8
abhinavsharma
0
110
How the Web Works: Lecture 9
abhinavsharma
0
59
How the Web Works: Lecture 3
abhinavsharma
0
32
How the Web Works: Lecture 1
abhinavsharma
2
120

Other Decks in Education

See All in Education
CompTIA Security+ SY0-601 Resumo
mariliarochas
2
2.6k
東工大 traP Kaggle班 機械学習講習会 2024
abap34
2
320
Introduction - Lecture 1 - Web Technologies (1019888BNR)
signer
PRO
0
4.9k
HCI and Interaction Design - Lecture 2 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
820
Kindleストアで本を探すことの善悪 #Izumo Developers' Guild 第1回 LT大会
totodo713
0
130
Flip-videochat
matleenalaakso
0
14k
小学生にスクラムを試してみた件～中学受検までの100週間の舞台裏～
ukky86
0
340
Medidas en informática
irocho
0
300
SQL初級中級_トレーニング【株式会社ニジボックス】
nbkouhou
0
20k
勉強する必要ある？
mineo_matsuya
2
1.7k
(2024) Couper un gâteau... sans connaître le nombre de convives
mansuy
2
150
Human Perception and Cognition - Lecture 4 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
710

Featured

See All Featured
Six Lessons from altMBA
skipperchong
27
3.5k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
KATA
mclloyd
29
14k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
How GitHub (no longer) Works
holman
310
140k
Become a Pro
speakerdeck
PRO
25
5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Code Review Best Practice
trishagee
64
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k

Transcript

  1. None

  2. Lecture 2 HTML & CSS

  3. Waitlist 12 Students 6 Spots Uh-Oh But Probabilistically....

  4. Office Hours After Class | Email

  5. Languages

  6. HTML CSS PHP MySQL Javascript Java

  7. HTML CSS PHP MySQL Javascript Java

  8. HTML CSS PHP MySQL Javascript Java

  9. HTML CSS PHP MySQL Javascript Java

  10. <html>

  11. Disclaimer

  12. Ask Questions!

  13. None
  14. None

  15. HTML Markup Language for Webpages .html files Has styling abilities

    too (color, font, layout) But we’ll avoid them and favor CSS

  16. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>

  17. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>

  18. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>

  19. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>

  20. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>

  21. <html> <head> <!-- This is a comment Title, CSS, JS

    goes in <head> --> <title>Page Title</title> </head> <body> The Actual Content </body> </html>

  22. <body>

  23. Body Contains Page Content

  24. Types of Elements Inline: Continue where they left off. Block

    Level: Adds a newline before/after

  25. Line Breaks

  26. Line Breaks DONT MATTER

  27. Paragraph <p>This is a long paragraph.</p> For paragraphs of text

    Block Level Useful for multi-paragraph texts Usually overridden by CSS

  28. Headings <h1>Awesome Website Name</h1> <h2>Semi-Awesome Website</h2> Simply headers on a

    page Different sizes: h1, h2 Block-level Elements Usually Overridden with CSS

  29. Links <a href=”page.htm”>Link Name</a> Links one page to another Can

    be relative or absolute Inline <a href=”calendar.php”>Calendar</a> <a href=”www.google.com”>Goo</a>

  30. Images <img src=”pic.jpg” alt=”Oops, Backup” /> Embed images on Page

    Inline Alternative text if image fails Notice how the tag closes!

  31. Images <img src=”pic.jpg” alt=”Oops, Backup” /> Embed images on Page

    Inline Alternative text if image fails Notice how the tag closes!

  32. Images <img src=”pic.jpg” alt=”Oops, Backup” /> Embed images on Page

    Inline Alternative text if image fails Notice how the tag closes!

  33. Blank Line <br /> Don’t use <p> for this! Notice

    how the tag closes!

  34. Lists <li> ... </li> Block Level Useless on their own

    Must go with <ul> or <ol> Usually overridden with CSS

  35. Ordered Lists <ol> ... </ol> Automatic Numbering

  36. Ordered Lists <ul> ... </ul> Automatic Bulleting

  37. Div <div id=”main”> ... </div> <div class=”button”> ... </div> Block

    Level Defines parts of a page Commonly Nested Assign IDs and Classes for CSS

  38. Div <div id=”main”> ... </div> <div class=”button”> ... </div> Block

    Level Defines parts of a page Commonly Nested Assign IDs and Classes for CSS

  39. Span <span> ... </span> Similar to DIV Inline Also used

    with CSS

  40. <table>

  41. <table> <table> ... </table> Represent Tabular Data Structure the webpage

    CSS Favors Tableless Designs Good idea, but don’t be obsessed!

  42. <tr> <td>Hi</td> <td>Yo</td> </tr> <tr> <td>How</td> <td>You</td> </tr> <tr> <td>I’m</td>

    <td>Goo</td> </tr> <table> </table>

  43. <tr> <td>Hi</td> <td>Yo</td> </tr> <tr> <td>How</td> <td>You</td> </tr> <td> <td>I’m</td>

    <td>Goo</td> </tr>

  44. <td>Hi</td> <td>Yo</td> <td>How</td> <td>You</td> <td>I’m</td> <td>Goo</td>

  45. Hi Yo How You I’m Goo

  46. <form>

  47. User Web Server

  48. User Web Server I want to send you data!

  49. User Web Server I want to send you data! Remember

    POST? Now use it!

  50. <form> ... input fields ... submit button </form> Fields to

    enter values into Text Boxes Radio Boxes Check Boxes... Submit button POSTs input data to another page. which is then processed using PHP, etc... Forms

  51. <form method="POST" action="target.php"> ... input fields here ... submit button

    </form>

  52. <form method="POST" action="target.php"> <input type="text" name="login" /><br /> <input type="password"

    name="pass" /><br /> <input type="submit" value=”Submit Query”> </form>

  53. <form method="POST" action="target.php"> <input type="text" name="login" /><br /> <input type="password"

    name="pass" /><br /> <input type="submit" value=”Submit Query”> </form>

  54. Other Input Types

  55. Radio Boxes

  56. Check Boxes

  57. Drop Down

  58. Text Area

  59. <head>

  60. Head Declares a Name (Title) Controls Behavior (Javascript Code) Styles

    the Body (CSS Code) Contains page information (Meta Tags)

  61. <title> <title>My Page Title</title> Specifies Page Title Shows on top

    of browser Shows on Google result Important to Search

  62. <title> <title>My Page Title</title> Specifies Page Title Shows on top

    of browser Shows on Google result Important to Search

  63. <link> Not a hyperlink! Links to other documents <link rel="stylesheet"

    type="text/css" href="style.css" media=”screen”> Usually CSS files Can specify “back” and “next”

  64. <link> Not a hyperlink! Links to other documents <link rel="stylesheet"

    type="text/css" href="style.css" media=”screen”> Usually CSS files Can specify “back” and “next”

  65. <meta> Contains extra metadata Can specify HTTP headers <meta name=”key”

    value=”val”> | <meta http-equiv=”key” content=”bar”>

  66. <meta> Contains extra metadata Can specify HTTP headers <meta name=”key”

    value=”val”> | <meta http-equiv=”key” content=”bar”>

  67. <script> Contains Javascript <script type=”text/javascript” src=”js/script.js”> <script type=”text/javascript”>/* raw js

    code */</script>

  68. <script> Contains Javascript <script type=”text/javascript” src=”js/script.js”> <script type=”text/javascript”>/* raw js

    code */</script>

  69. Can link to a CSS file (yes, there’s multiple ways)

    Can specify CSS inside HTML <style> <style type=”text/css”> /*raw css*/ </style> <style> @import url </style>

  70. Can link to a CSS file (yes, there’s multiple ways)

    Can specify CSS inside HTML <style> <style type=”text/css”> /*raw css*/ </style> <style> @import url </style>

  71. <style> Can link to a CSS file (yes, there’s multiple

    ways) <style type=”text/css”> /*raw css*/ </style> <style> @import url </style> Can specify CSS inside HTML

  72. <style> Can link to a CSS file (yes, there’s multiple

    ways) <style type=”text/css”> /*raw css*/ </style> <style> @import url </style> Can specify CSS inside HTML

  73. Phew!

  74. None

  75. Let’s Build It!

  76. None

  77. css

  78. Styling Language Easy English Syntax W3C .css File Control Multiple

    Pages What is CSS?

  79. page.html

  80. page.html Label the Parts

  81. page.html Doors Windshield

  82. page.html Doors Windshield <div id=”windshield”> ... </div> <div class=”door”> ...

    </div>

  83. CSS Selectors Selection (HTML) Styling (CSS) Tag ID Class <h1>,

    <p> h1 { color: blue } <div id=”windshield”> </div> #windshield { color: blue } <div class=”door”> </div> .door { color: blue }

  84. car.html red.css Why CSS? + =

  85. car.html blue.css Why CSS? + =

  86. car.html blue.css Why CSS? + = Isolates Design & Content

  87. How to use CSS? Inline Embedded External <p style=”color:blue”>Hello</p> <style>

    #helloWorld { color:blue } </style> <link rel=”stylesheet” href=”blue.css” />
  88. None

  89. Resetting Defaults Browsers apply a default style ex. Bullets for

    <ul> <li> We reset these with reset.css Then we apply our style.css Find reset.css online http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css

  90. Resetting Defaults

  91. Resetting Defaults

  92. Resetting Defaults

  93. Resetting Defaults

  94. Select the Body | Select Default Font | Color Styling

    the Body

  95. Styling the Body body { background-color: #060808; font-family: "Lucida Grande",

    "Arial", sans-serif; color: #F2EDEB; }

  96. Margin & Width Width of the Content | Centering with

    Margins

  97. Margin & Width Width of the Content | Centering with

    Margins

  98. Margin & Width Width of the Content | Centering with

    Margins

  99. #page_wrap { width: 820px; margin-left: auto; margin-right: auto; } 820

    pixels

  100. Centering, Margins

  101. Centering, Margins

  102. Centering, Margins

  103. #logo { text-align: center; margin-top: 20px; margin-bottom: 15px; } text-align

    on images is bad! Lookup absolute and relative Try the Mini for more....

  104. Navigation Bar Inheritance | Change Block-Level to Inline | Border

  105. Navigation Bar Inheritance | Change Block-Level to Inline | Border

  106. Navigation Bar Inheritance | Change Block-Level to Inline | Border

  107. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }

  108. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }

  109. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; } Inheritance Unordered Lists inside #nav

  110. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }

  111. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }

  112. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; } Convert <li> to inline element

  113. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }

  114. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; }

  115. /* navigation */ #nav { left: auto; right: auto; bottom:

    10px; margin: 0; padding: 0; width: 850px; border-top: 1px solid #3B0014; border-bottom: 1px solid #3B0014; } #nav ul { list-style: none; text-align: center; height: 45px; margin: 0; padding: 0; } #nav ul li { display: inline; margin: 0; padding: 0; } Border Margin Padding

  116. Content Margin Padding Border

  117. Effects! Multiple Selection | Effects

  118. Effects! Multiple Selection | Effects

  119. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }

  120. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }

  121. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; } Top, Right Top, Right, Bottom, Left

  122. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }

  123. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }

  124. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; } Removes Underline

  125. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }

  126. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; }

  127. #nav ul li a { margin: 0 8px; padding: 5px

    10px; color: #c95622; font: bold 14px/45px 'Trebuchet text-decoration: none; } #nav ul li a:hover, #nav ul li a:active { border: none; color: #fff; } #nav ul li #current a { color: #BBBBBB; } Multiple Selection Conditional Effects

  128. Looking Good! Rounded Corners (CSS3) | Float

  129. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; }

  130. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; }

  131. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; } New Feature (CSS3) Irregular Implementation

  132. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; }

  133. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; }

  134. /* Main */ #main { width: 800px; padding: 25px; background-color:

    #161616; margin: 20px auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #main #right_image { margin-top:40px; margin-bottom: 50px; margin-right:20px; padding-left:10px; float:left; } Float

  135. Almost There Using Classes

  136. Almost There Using Classes

  137. Almost There Using Classes

  138. .content_text { font-size: 14px; font-family: 'Lucida Grande', 'Helvetica', Arial, Sans-Serif;

    line-height: 1.5em; margin-top: 10px; margin-bottom: 10px; }

  139. .content_text { font-size: 14px; font-family: 'Lucida Grande', 'Helvetica', Arial, Sans-Serif;

    line-height: 1.5em; margin-top: 10px; margin-bottom: 10px; }

  140. .content_text { font-size: 14px; font-family: 'Lucida Grande', 'Helvetica', Arial, Sans-Serif;

    line-height: 1.5em; margin-top: 10px; margin-bottom: 10px; } Line Spacing

  141. One Last Thing #footer { text-align: center; margin-bottom: 30px; color:

    #BFB8BD; font-size: 11px; }

  142. One Last Thing #footer { text-align: center; margin-bottom: 30px; color:

    #BFB8BD; font-size: 11px; }

  143. One Last Thing #footer { text-align: center; margin-bottom: 30px; color:

    #BFB8BD; font-size: 11px; }
  144. None

  145. http://reference.sitepoint.com/css

  146. Thank You

  147. Announcements

  148. S.O.S. Mini Project 2

  149. S.O.S. Mini Project 2 Highly Recommended if you’re here today

  150. Week 3 Week 4

  151. Photo Credits http://teresacentric.com/images/headbody.jpg http://thesuspiciousmind.com/wp-content/uploads/2009/08/body_outline2009-03-31-1238504214.jpg http://3.bp.blogspot.com/_4WqvfgHNn0g/Sbuk83YCLlI/AAAAAAAADQc/TPfidmxBsis/s400/Pigeonhole_Principle_Drichlet_Box_Drawer_Pigeons.jpg http://lh5.ggpht.com/_uvgFyH0uVeM/Rmkelro5nzI/AAAAAAAAAuU/FrQvjYQdb-M/web_hand_mouse_www_click.jpg

  152. None