HTML/CSS Web Blog Example

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

content area
2. then we need to add an attribute to each
<div> </div> tag so we can call each out
separately on our CSS doc

content area
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/bodieHead.jpg” />
</div>
</body>

Here’s what the corresponding CSS
code looks like:
#wrapper {
width: 800px;

}

code looks like:
#wrapper {
width: 800px;
margin: 0px auto;
}

code looks like:
#wrapper {
width: 800px;
margin: 0px auto;
background-color: rgba(204, 204, 204, .8);

}

code looks like:
#wrapper {
width: 800px;
margin: 0px auto;

border-radius: 20px;
}

Now let’s add more content
1. change “Hello World” to the name of our
blog: Web, Digital Media, and Creative
Culture
2. Wrap our blog title in <h1> </h1> tags
<h1>Web, Digital Media, and Creative Culture</h1>

Now let’s style our <h1> tags on CSS
h1

{
font-family: futura, arial, san-serif;
}

h1

{
font-size: 48px;
}

h1

{
font-size: 48px;
color: #ffffff;
}

h1

{
font-size: 48px;
color: #ffffff;
text-align: center;
}

h1

{
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=”header”>

<img src=”images/bodieHead.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=”bodieHead”>
<div id=wrapper”
<div id=”bodieHead”>
</div>
</div>
</div>

Now, let’s style #bodieHead
#bodieHead

{
width: 320px;
height: 380px;
background-color: rgba(230, 230, 230,

.8);

}

Now, let’s style #bodieHead
#bodieHead

{
width: 320px;
height: 380px;
background-color: rgba(230, 230, 230,

.8);
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=”bodieHead”
</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…


•

•

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!

#twitter-widget-0
{
width: 340px;
height: 380px;
}

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
#bodieHead
{
width: 320px;
height: 380px;
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 #bodieHead
#bodieHead

{

width: 320px;
height: 380px;

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=”bodieHead”

</div>
Twitter
</div>

</div>
</div>

Add content to articleOne div
<img src=”images/futurityNow.jpg” />
copy text from wiki here
</div>

Now we need to style articleOne

•

Where do we start?

#articleOne

{
width: 700px;
margin: 0px auto;
}

#articleOne {
width: 700px;
margin: 0px auto;
}

#articleOne {
width: 700px;
margin: 0px auto;
margin-top: 40px;
}


•
•

•

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>

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;
}

On CSS stylesheet:
.futurity {
float: left;
margin-top: 15px;
}

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;
}

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?


•

space between article two and the wrapper?
#wrapper

{

width: 800px;
margin: 0px auto;
padding-bottom: 15px;
}


•

drop shadows on the articles?


•

drop shadows on the articles?

•

Add to the article divs
box-shadow: 5px 5px 5px #333333;

HTML/CSS Web Blog Example

More Related Content

HTML/CSS Web Blog Example