HTML workshop blog template

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/evanHead.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: 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;
}

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/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=”evanHead”>
</div>
</div>
</div>

Now, let’s style #evanHead
#evanHead

{
width: 320px;
height: 380px;

}

Now, let’s style #evanHead
#evanHead
{
width: 320px;
height: 380px;
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=”evanHead”
</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
#evanHead {
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 #evanHead
#evanHead

{

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

</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 workshop blog template

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML workshop blog template

Similar to HTML workshop blog template (20)

More from Evan Hughes

More from Evan Hughes (20)

Recently uploaded

Recently uploaded (20)

HTML workshop blog template