The document provides instructions for creating an HTML blog layout and styling with CSS. It describes adding div elements to structure content areas like headers, articles, and a Twitter widget. CSS code is provided to style each div by setting widths, colors, borders etc. Styling techniques like floats, margins and shadows are demonstrated. The goal is to create a multi-article blog layout with formatted text, images and embedded content.
💚😋 Saharanpur Escort Service Call Girls, 9352852248 ₹5000 To 25K With AC💚😋
Blog HTML example for IML 295
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. 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. 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. 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. 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. Here’s what the HTML code looks
like:
<body>
<div id=”wrapper”>
Hello World!
<img src=”images/evanHead.jpg” />
</div>
</body>
7. Here’s what the corresponding CSS
code looks like:
#wrapper {
width: 800px;
}
8. Here’s what the corresponding CSS
code looks like:
#wrapper {
width: 800px;
margin: 0px auto;
}
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. Now let’s style our <h1> tags on CSS
h1
{
font-family: futura, arial, san-serif;
}
13. Now let’s style our <h1> tags on CSS
h1
{
font-family: futura, arial, san-serif;
font-size: 48px;
}
14. Now let’s style our <h1> tags on CSS
h1
{
font-family: futura, arial, san-serif;
font-size: 48px;
color: #ffffff;
}
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. 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. Now we must style our “header” div
#header {
width: 700px;
}
20. Now we must style our “header” div
#header {
width: 700px;
margin: 0px auto;
}
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. 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>
25. Now let’s create a Twitter Widget
•
Google “Twitter Widget”
•
Click
•
Log-in
26. Now let’s create a Twitter Widget
•
Click “Create New”
•
Establish specs
•
Save and create
•
Copy code
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. Now let’s style our Twitter Widget
•
The code looks like craziness, so sometimes
Google is your friend…
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!
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. Now We Can Work On Blog Articles
•
How do you think we start this process?
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. 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. Add content to articleOne div
<div id=”articleOne”>
<img src=”images/futurityNow.jpg” />
copy text from wiki here
</div>
39. Now we need to style articleOne
•
Where do we start?
40. Now we need to style articleOne
#articleOne
{
width: 700px;
margin: 0px auto;
}
41. Now we need to style articleOne
#articleOne {
width: 700px;
margin: 0px auto;
background-color: rgba(230, 230, 230, .8);
}
42. Now we need to style articleOne
#articleOne {
width: 700px;
margin: 0px auto;
background-color: rgba(230, 230, 230, .8);
border-radius: 20px;
}
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. 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>
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. We Need to Get to FuturityNow
•
Can do this using a class
<img src=”images/futurityNow.jpg” class=”futurity” />
49. Now Let’s Style class=”futurity”
On CSS stylesheet:
.futurity {
float: left;
}
50. Now Let’s Style class=”futurity”
On CSS stylesheet:
.futurity {
float: left;
margin-top: 15px;
}
51. Now Let’s Style class=”futurity”
On CSS stylesheet:
.futurity {
float: left;
margin-top: 15px;
margin-right: 15px;
}
52. Let’s add a class to our first PP
•
First paragraph:
<p class=”paragraphOne”>
content
</p>
57. Let’s create articleTwo
•
Under the </div> for articleOne, but inside
the <div id=”wrapper”> create:
<div id=”articleTwo”
</div>
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. Paste content into <div id=”articleTwo”
1. Paste Prezi embed code and paragraph into
div:
<div id=”articleTwo”>
Prezi code
text text
</div>
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
66. Let’s add a few more details
•
space between article two and the wrapper?
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. Let’s add a few more details
•
drop shadows on the articles?
69. Let’s add a few more details
•
drop shadows on the articles?
•
Add to the article divs
box-shadow: 5px 5px 5px #333333;