Post on 16-Jan-2015
description
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
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>
</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.
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?
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;