html/css web blog example

HTML workshop checklist

1. background image 1280 x 1000 pixels2. personal headshot 320 x 380 pixels3. twitter account to create a widget4. 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




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




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;

}


#wrapper {

width: 800px;

margin: 0px auto;

}


#wrapper {

width: 800px;

margin: 0px auto;

background-color: rgba(204, 204, 204, .8);

}


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


}

Now, let’s style #bodieHead

#bodieHead {

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



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



}


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

}

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.

2. 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%

2. 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

Technology