Blog HTML example for IML 295

966 views
795 views

Published on

This PowerPoint will help you create a simple template for a blog using HTML and CSS. You can copy and paste the styling for each article.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
966
On SlideShare
0
From Embeds
0
Number of Embeds
254
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Blog HTML example for IML 295

  1. 1. HTML workshop checklist 1. background image 1280 x 1000 pixels 2. personal headshot 320 x 380 pixels 3. twitter account to create a widget 4. an image for a blog post 300 x 200 pixels
  2. 2. Put your directory folder onto the desktop should contain: index.html style.css image folder (with images) everything should be linked and working you can download my example if you don’t have one of your own • • • • •
  3. 3. To create the blog we must define a content area 1. we do this on the html document using <div></div> tags to wrap content
  4. 4. To create the blog we must define a content area 1. we do this on the html document using <div></div> tags to wrap content 2. then we need to add an attribute to each <div></div> tag so we can call each out separately on our CSS doc
  5. 5. To create the blog we must define a content area 1. we do this on the html document using <div></div> tags to wrap content 2. then we need to add an attribute to each <div></div> tag so we can call each out separately on our CSS doc 3. <div id=”wrapper”> stuff here </div>
  6. 6. Here’s what the HTML code looks like: <body> <div id=”wrapper”> Hello World! <img src=”images/evanHead.jpg” /> </div> </body>
  7. 7. Here’s what the corresponding CSS code looks like: #wrapper { width: 800px; }
  8. 8. Here’s what the corresponding CSS code looks like: #wrapper { width: 800px; margin: 0px auto; }
  9. 9. Here’s what the corresponding CSS code looks like: #wrapper { width: 800px; margin: 0px auto; background-color: rgba(204, 204, 204, .8); }
  10. 10. Here’s what the corresponding CSS code looks like: #wrapper { width: 800px; margin: 0px auto; background-color: rgba(204, 204, 204, .8); border-radius: 20px; }
  11. 11. Now let’s add more content 1. change “Hello World” to the name of our blog: Race, Class, and Gender in Digital Culture 2. Wrap our blog title in <h1></h1> tags <h1>Race, Class, and Gender in Digital Culture</h1>
  12. 12. Now let’s style our <h1> tags on CSS h1 { font-family: futura, arial, san-serif; }
  13. 13. Now let’s style our <h1> tags on CSS h1 { font-family: futura, arial, san-serif; font-size: 48px; }
  14. 14. Now let’s style our <h1> tags on CSS h1 { font-family: futura, arial, san-serif; font-size: 48px; color: #ffffff; }
  15. 15. Now let’s style our <h1> tags on CSS h1 { font-family: futura, arial, san-serif; font-size: 48px; color: #ffffff; text-align: center; }
  16. 16. Now let’s style our <h1> tags on CSS h1 { font-family: futura, arial, san-serif; font-size: 48px; color: #ffffff; text-align: center; text-shadow: 5px 5px 5px #333333; }
  17. 17. Now let’s add more formatting tags • To create nice margins, the easiest way is to create another container inside of our <div id=”wrapper”></div>
  18. 18. Now let’s add more formatting tags <div id=”wrapper”> <div id=”header”> <h1>Race, Class, and Gender in Digital Culture</h1> <img src=”images/evanHead.png” /> </div> </div>
  19. 19. Now we must style our “header” div #header { width: 700px; }
  20. 20. Now we must style our “header” div #header { width: 700px; margin: 0px auto; }
  21. 21. Things are looking good, but... • We must add some formatting tags This time wrap a <div></div> tag around your headshot and call it something contextual
  22. 22. Adding a <div id=”evanHead”> <div id=wrapper” <div id=”header”> <h1>Race, Class, and Gender in Digital Culture</h1> <div id=”evanHead”> <img src=”images/evanHead.png” /> </div> </div> </div>
  23. 23. Now, let’s style #evanHead #evanHead { width: 320px; height: 380px; background-color: rgba(230, 230, 230, .8); }
  24. 24. Now, let’s style #evanHead #evanHead { width: 320px; height: 380px; background-color: rgba(230, 230, 230, .8); border-radius: 20px; overflow: hidden; }
  25. 25. Now let’s create a Twitter Widget • Google “Twitter Widget” • Click • Log-in
  26. 26. Now let’s create a Twitter Widget • Click “Create New” • Establish specs • Save and create • Copy code
  27. 27. Paste embed code into index.html <div id=”wrapper”> <div id=”header”> <h1>Race, Class, and Gender in Digital Culture</h1> <div id=”evanHead” <img src=”images/evanHead.png” /> </div> paste twitter embed code here </div> </div>
  28. 28. Now let’s style our Twitter Widget • The code looks like craziness, so sometimes Google is your friend…
  29. 29. Now let’s style our Twitter Widget • • I found this one thread that says I can style the widget by using the ID twitter-widget-0 on my CSS. Let’s try it!
  30. 30. Now let’s style our Twitter Widget #twitter-widget-0 { width: 340px; height: 380px; border-radius: 20px; }
  31. 31. There’s still more to be done! • • When we look at it the browser, it’s stacking rather than displaying side by side. Let’s change this
  32. 32. Try using the float #evanHead { width: 320px; height: 380px; background-color: rgba(230, 230, 230, .8); border-radius: 20px; overflow: hidden; float: left; }
  33. 33. Take a look... • Do we need to do anything else? • If so, what?
  34. 34. Take a look... • Add a right-side margin to #evanHead #evanHead { width: 320px; height: 380px; background-color: rgba(230, 230, 230, .8); border-radius: 20px; overflow: hidden; float: left; margin-right: 40px; }
  35. 35. Now We Can Work On Blog Articles • How do you think we start this process?
  36. 36. Now We Can Work On Blog Articles • • create a new div on index.html. we can call this div “articleOne” <div id=”articleOne”> </div>
  37. 37. Placing the articleOne <div> <div id=”wrapper”> <div id=”header”> <h1>Race, Class, and Gender in Digital Culture</h1> <div id=”evanHead” <img src=”images/evanHead.png” /> </div> Twitter </div> <div id=”articleOne”> </div> </div>
  38. 38. Add content to articleOne div <div id=”articleOne”> <img src=”images/futurityNow.jpg” /> copy text from wiki here </div>
  39. 39. Now we need to style articleOne • Where do we start?
  40. 40. Now we need to style articleOne #articleOne { width: 700px; margin: 0px auto; }
  41. 41. Now we need to style articleOne #articleOne { width: 700px; margin: 0px auto; background-color: rgba(230, 230, 230, .8); }
  42. 42. Now we need to style articleOne #articleOne { width: 700px; margin: 0px auto; background-color: rgba(230, 230, 230, .8); border-radius: 20px; }
  43. 43. Now we need to style articleOne #articleOne { width: 700px; margin: 0px auto; background-color: rgba(230, 230, 230, .8); border-radius: 20px; margin-top: 40px; }
  44. 44. Now we need to style articleOne • • • How do we create margins? Create a <div></div> within article one to create nice margins and borders (it’s easy!) Call this <div id=”innerArticleOne”></div>
  45. 45. <div id=”innerArticleOne”> <div id=”articleOne”> <div id=”innerArticleOne”> <img src=”images/futurityNow.jpg” /> copy text from wiki here </div> </div>
  46. 46. Let’s style innerArticleOne #innerArticleOne { width: 670px; margin: 0px auto; }
  47. 47. Let’s Format The Article • Let’s add <p></p> tags to each paragraph <p> Fuchs, Christian. Internet and Society: Social Theory in the Information Age. New York: Routledge, 2008. 105-18. Print </p>
  48. 48. We Need to Get to FuturityNow • Can do this using a class <img src=”images/futurityNow.jpg” class=”futurity” />
  49. 49. Now Let’s Style class=”futurity” On CSS stylesheet: .futurity { float: left; }
  50. 50. Now Let’s Style class=”futurity” On CSS stylesheet: .futurity { float: left; margin-top: 15px; }
  51. 51. Now Let’s Style class=”futurity” On CSS stylesheet: .futurity { float: left; margin-top: 15px; margin-right: 15px; }
  52. 52. Let’s add a class to our first PP • First paragraph: <p class=”paragraphOne”> content </p>
  53. 53. Let’s style <p class=”paragraphOne”> .paragraphOne { padding-top: 15px; }
  54. 54. Format the other paragraphs p { text-align: justify; }
  55. 55. Look at what we’ve done...
  56. 56. Let’s create articleTwo • add another <div></div> • what do we call it?
  57. 57. Let’s create articleTwo • Under the </div> for articleOne, but inside the <div id=”wrapper”> create: <div id=”articleTwo” </div>
  58. 58. Let’s grab content for articleTwo 1. grab Prezi embed code - ideally your own, but any will do for this example. 1. grab a paragraph of text from a reading response.
  59. 59. Paste content into <div id=”articleTwo” 1. Paste Prezi embed code and paragraph into div: <div id=”articleTwo”> Prezi code text text </div>
  60. 60. Format content 1. change Prezi width tp 100% 1. add <p></p> tags around paragraph
  61. 61. Styling articleTwo • • Since articleTwo is similar articleOne, we should roughly do the same things: Add <div id=”innerArticleTwo”></div>
  62. 62. innerArticleTwo <div id=”articleTwo”> <div id=”innerARticleTwo” Prezi code text text </div> </div>
  63. 63. Styling articleTwo • • On CSS, copy the code for #articleOne and #innerArticleOne Paste below and change the name to reflect the divs you created: #articleTwo & #innerArticleTwo
  64. 64. Styling articleTwo • • • View your site We need to add margin or padding to the Prezi How do we do this?
  65. 65. Styling articleTwo iframe { margin-top: 15px; }
  66. 66. Let’s add a few more details • space between article two and the wrapper?
  67. 67. Let’s add a few more details • space between article two and the wrapper? #wrapper { width: 800px; margin: 0px auto; background-color: rgba(204, 204, 204, .8); border-radius: 20px; padding-bottom: 15px; }
  68. 68. Let’s add a few more details • drop shadows on the articles?
  69. 69. Let’s add a few more details • drop shadows on the articles? • Add to the article divs box-shadow: 5px 5px 5px #333333;

×