Blog HTML example for IML 295
-
Upload
evan-hughes -
Category
Investor Relations
-
view
556 -
download
0
description
Transcript of Blog HTML example for IML 295
![Page 1: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/1.jpg)
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
![Page 2: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/2.jpg)
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
![Page 3: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/3.jpg)
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
![Page 4: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/4.jpg)
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
![Page 5: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/5.jpg)
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>
![Page 6: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/6.jpg)
Here’s what the HTML code looks like:
<body>
<div id=”wrapper”>
Hello World!
<img src=”images/evanHead.jpg” />
</div>
</body>
![Page 7: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/7.jpg)
Here’s what the corresponding CSS code looks like:
#wrapper {
width: 800px;
}
![Page 8: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/8.jpg)
Here’s what the corresponding CSS code looks like:
#wrapper {
width: 800px;
margin: 0px auto;
}
![Page 9: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/9.jpg)
Here’s what the corresponding CSS code looks like:
#wrapper {
width: 800px;
margin: 0px auto;
background-color: rgba(204, 204, 204, .8);
}
![Page 10: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/10.jpg)
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;
}
![Page 11: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/11.jpg)
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>
![Page 12: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/12.jpg)
Now let’s style our <h1> tags on CSS
h1 {
font-family: futura, arial, san-serif;
}
![Page 13: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/13.jpg)
Now let’s style our <h1> tags on CSS
h1 {
font-family: futura, arial, san-serif;
font-size: 48px;
}
![Page 14: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/14.jpg)
Now let’s style our <h1> tags on CSS
h1 {
font-family: futura, arial, san-serif;
font-size: 48px;
color: #ffffff;
}
![Page 15: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/15.jpg)
Now let’s style our <h1> tags on CSS
h1 {
font-family: futura, arial, san-serif;
font-size: 48px;
color: #ffffff;
text-align: center;
}
![Page 16: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/16.jpg)
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;
}
![Page 17: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/17.jpg)
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>
![Page 18: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/18.jpg)
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>
![Page 19: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/19.jpg)
Now we must style our “header” div
#header {
width: 700px;
}
![Page 20: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/20.jpg)
Now we must style our “header” div
#header {
width: 700px;
margin: 0px auto;
}
![Page 21: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/21.jpg)
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
![Page 22: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/22.jpg)
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>
![Page 23: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/23.jpg)
Now, let’s style #evanHead
#evanHead{
width: 320px;
height: 380px;
background-color: rgba(230, 230, 230, .8);
}
![Page 24: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/24.jpg)
Now, let’s style #evanHead
#evanHead{
width: 320px;
height: 380px;
background-color: rgba(230, 230, 230, .8);
border-radius: 20px;
overflow: hidden;
}
![Page 25: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/25.jpg)
Now let’s create a Twitter Widget
• Google “Twitter Widget”
• Click
• Log-in
![Page 26: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/26.jpg)
Now let’s create a Twitter Widget
• Click “Create New”
• Establish specs
• Save and create
• Copy code
![Page 27: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/27.jpg)
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>
![Page 28: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/28.jpg)
Now let’s style our Twitter Widget
• The code looks like craziness, so sometimes Google is your friend…
![Page 29: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/29.jpg)
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!
![Page 30: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/30.jpg)
Now let’s style our Twitter Widget
#twitter-widget-0 {
width: 340px;
height: 380px;
border-radius: 20px;
}
![Page 31: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/31.jpg)
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
![Page 32: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/32.jpg)
Try using the float
#evanHead {
width: 320px;
height: 380px;
background-color: rgba(230, 230, 230, .8);
border-radius: 20px;
overflow: hidden;
float: left;
}
![Page 33: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/33.jpg)
Take a look...
• Do we need to do anything else?
• If so, what?
![Page 34: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/34.jpg)
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;
}
![Page 35: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/35.jpg)
Now We Can Work On Blog Articles
• How do you think we start this process?
![Page 36: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/36.jpg)
Now We Can Work On Blog Articles
• create a new div on index.html.
• we can call this div “articleOne”
<div id=”articleOne”>
</div>
![Page 37: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/37.jpg)
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>
![Page 38: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/38.jpg)
Add content to articleOne div
<div id=”articleOne”>
<img src=”images/futurityNow.jpg” />
copy text from wiki here
</div>
![Page 39: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/39.jpg)
Now we need to style articleOne
• Where do we start?
![Page 40: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/40.jpg)
Now we need to style articleOne
#articleOne{
width: 700px;
margin: 0px auto;
}
![Page 41: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/41.jpg)
Now we need to style articleOne
#articleOne {
width: 700px;
margin: 0px auto;
background-color: rgba(230, 230, 230, .8);
}
![Page 42: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/42.jpg)
Now we need to style articleOne
#articleOne {
width: 700px;
margin: 0px auto;
background-color: rgba(230, 230, 230, .8);
border-radius: 20px;
}
![Page 43: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/43.jpg)
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;
}
![Page 44: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/44.jpg)
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>
![Page 45: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/45.jpg)
<div id=”innerArticleOne”>
<div id=”articleOne”>
<div id=”innerArticleOne”>
<img src=”images/futurityNow.jpg” />
copy text from wiki here
</div>
</div>
![Page 46: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/46.jpg)
Let’s style innerArticleOne
#innerArticleOne {
width: 670px;
margin: 0px auto;
}
![Page 47: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/47.jpg)
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>
![Page 48: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/48.jpg)
We Need to Get to FuturityNow
• Can do this using a class
<img src=”images/futurityNow.jpg” class=”futurity” />
![Page 49: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/49.jpg)
Now Let’s Style class=”futurity”
On CSS stylesheet:
.futurity {
float: left;
}
![Page 50: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/50.jpg)
Now Let’s Style class=”futurity”
On CSS stylesheet:
.futurity {
float: left;
margin-top: 15px;
}
![Page 51: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/51.jpg)
Now Let’s Style class=”futurity”
On CSS stylesheet:
.futurity {
float: left;
margin-top: 15px;
margin-right: 15px;
}
![Page 52: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/52.jpg)
Let’s add a class to our first PP
• First paragraph:
<p class=”paragraphOne”>
content
</p>
![Page 53: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/53.jpg)
Let’s style <p class=”paragraphOne”>
.paragraphOne {
padding-top: 15px;
}
![Page 54: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/54.jpg)
Format the other paragraphs
p {
text-align: justify;
}
![Page 55: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/55.jpg)
Look at what we’ve done...
![Page 56: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/56.jpg)
Let’s create articleTwo
• add another <div> </div>
• what do we call it?
![Page 57: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/57.jpg)
Let’s create articleTwo
• Under the </div> for articleOne, but inside the <div id=”wrapper”> create:
<div id=”articleTwo”
</div>
![Page 58: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/58.jpg)
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.
![Page 59: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/59.jpg)
Paste content into <div id=”articleTwo”
1. Paste Prezi embed code and paragraph into div:
<div id=”articleTwo”>
Prezi code
text text
</div>
![Page 60: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/60.jpg)
Format content
1. change Prezi width tp 100%
2. add <p> </p> tags around paragraph
![Page 61: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/61.jpg)
Styling articleTwo
• Since articleTwo is similar articleOne, we should roughly do the same things:
• Add <div id=”innerArticleTwo”> </div>
![Page 62: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/62.jpg)
innerArticleTwo
<div id=”articleTwo”>
<div id=”innerARticleTwo”
Prezi code
text text
</div>
</div>
![Page 63: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/63.jpg)
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
![Page 64: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/64.jpg)
Styling articleTwo
• View your site
• We need to add margin or padding to the Prezi
• How do we do this?
![Page 65: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/65.jpg)
Styling articleTwo
iframe{
margin-top: 15px;
}
![Page 66: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/66.jpg)
Let’s add a few more details
• space between article two and the wrapper?
![Page 67: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/67.jpg)
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;
}
![Page 68: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/68.jpg)
Let’s add a few more details
• drop shadows on the articles?
![Page 69: Blog HTML example for IML 295](https://reader033.fdocuments.in/reader033/viewer/2022061219/54b8af2f4a7959f3638b4594/html5/thumbnails/69.jpg)
Let’s add a few more details
• drop shadows on the articles?
• Add to the article divs
box-shadow: 5px 5px 5px #333333;