• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Blog HTML example for IML 295
 

Blog HTML example for IML 295

on

  • 475 views

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.

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.

Statistics

Views

Total Views
475
Views on SlideShare
268
Embed Views
207

Actions

Likes
0
Downloads
1
Comments
0

2 Embeds 207

http://xwiki.usc.edu 192
http://storm.usc.edu 15

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Blog HTML example for IML 295 Blog HTML example for IML 295 Presentation Transcript

    • 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
    • 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 • • • • •
    • 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
    • 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
    • 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>
    • Here’s what the HTML code looks like: <body> <div id=”wrapper”> Hello World! <img src=”images/evanHead.jpg” /> </div> </body>
    • Here’s what the corresponding CSS code looks like: #wrapper { width: 800px; }
    • Here’s what the corresponding CSS code looks like: #wrapper { width: 800px; margin: 0px auto; }
    • Here’s what the corresponding CSS code looks like: #wrapper { width: 800px; margin: 0px auto; background-color: rgba(204, 204, 204, .8); }
    • 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; }
    • 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>
    • Now let’s style our <h1> tags on CSS h1 { font-family: futura, arial, san-serif; }
    • Now let’s style our <h1> tags on CSS h1 { font-family: futura, arial, san-serif; font-size: 48px; }
    • Now let’s style our <h1> tags on CSS h1 { font-family: futura, arial, san-serif; font-size: 48px; color: #ffffff; }
    • Now let’s style our <h1> tags on CSS h1 { font-family: futura, arial, san-serif; font-size: 48px; color: #ffffff; text-align: center; }
    • 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; }
    • 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>
    • 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>
    • Now we must style our “header” div #header { width: 700px; }
    • Now we must style our “header” div #header { width: 700px; margin: 0px auto; }
    • 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
    • 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>
    • Now, let’s style #evanHead #evanHead { width: 320px; height: 380px; background-color: rgba(230, 230, 230, .8); }
    • Now, let’s style #evanHead #evanHead { width: 320px; height: 380px; background-color: rgba(230, 230, 230, .8); border-radius: 20px; overflow: hidden; }
    • Now let’s create a Twitter Widget • Google “Twitter Widget” • Click • Log-in
    • Now let’s create a Twitter Widget • Click “Create New” • Establish specs • Save and create • Copy code
    • 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>
    • Now let’s style our Twitter Widget • The code looks like craziness, so sometimes Google is your friend…
    • 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!
    • Now let’s style our Twitter Widget #twitter-widget-0 { width: 340px; height: 380px; border-radius: 20px; }
    • 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
    • Try using the float #evanHead { width: 320px; height: 380px; background-color: rgba(230, 230, 230, .8); border-radius: 20px; overflow: hidden; float: left; }
    • Take a look... • Do we need to do anything else? • If so, what?
    • 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; }
    • Now We Can Work On Blog Articles • How do you think we start this process?
    • Now We Can Work On Blog Articles • • create a new div on index.html. we can call this div “articleOne” <div id=”articleOne”> </div>
    • 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>
    • Add content to articleOne div <div id=”articleOne”> <img src=”images/futurityNow.jpg” /> copy text from wiki here </div>
    • Now we need to style articleOne • Where do we start?
    • Now we need to style articleOne #articleOne { width: 700px; margin: 0px auto; }
    • Now we need to style articleOne #articleOne { width: 700px; margin: 0px auto; background-color: rgba(230, 230, 230, .8); }
    • Now we need to style articleOne #articleOne { width: 700px; margin: 0px auto; background-color: rgba(230, 230, 230, .8); border-radius: 20px; }
    • 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; }
    • 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>
    • <div id=”innerArticleOne”> <div id=”articleOne”> <div id=”innerArticleOne”> <img src=”images/futurityNow.jpg” /> copy text from wiki here </div> </div>
    • Let’s style innerArticleOne #innerArticleOne { width: 670px; margin: 0px auto; }
    • 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>
    • We Need to Get to FuturityNow • Can do this using a class <img src=”images/futurityNow.jpg” class=”futurity” />
    • Now Let’s Style class=”futurity” On CSS stylesheet: .futurity { float: left; }
    • Now Let’s Style class=”futurity” On CSS stylesheet: .futurity { float: left; margin-top: 15px; }
    • Now Let’s Style class=”futurity” On CSS stylesheet: .futurity { float: left; margin-top: 15px; margin-right: 15px; }
    • Let’s add a class to our first PP • First paragraph: <p class=”paragraphOne”> content </p>
    • Let’s style <p class=”paragraphOne”> .paragraphOne { padding-top: 15px; }
    • Format the other paragraphs p { text-align: justify; }
    • Look at what we’ve done...
    • Let’s create articleTwo • add another <div></div> • what do we call it?
    • Let’s create articleTwo • Under the </div> for articleOne, but inside the <div id=”wrapper”> create: <div id=”articleTwo” </div>
    • 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.
    • Paste content into <div id=”articleTwo” 1. Paste Prezi embed code and paragraph into div: <div id=”articleTwo”> Prezi code text text </div>
    • Format content 1. change Prezi width tp 100% 1. add <p></p> tags around paragraph
    • Styling articleTwo • • Since articleTwo is similar articleOne, we should roughly do the same things: Add <div id=”innerArticleTwo”></div>
    • innerArticleTwo <div id=”articleTwo”> <div id=”innerARticleTwo” Prezi code text text </div> </div>
    • 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
    • Styling articleTwo • • • View your site We need to add margin or padding to the Prezi How do we do this?
    • Styling articleTwo iframe { margin-top: 15px; }
    • Let’s add a few more details • space between article two and the wrapper?
    • 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; }
    • Let’s add a few more details • drop shadows on the articles?
    • Let’s add a few more details • drop shadows on the articles? • Add to the article divs box-shadow: 5px 5px 5px #333333;