Hi everybody. Mount Rose Highway is closed right now, so I can't make it up to campus – no class for today. Sorry! And stay safe, if you have to be out on the roads today.
AND ALSO, A REMINDER: before next class, I want you to have written/collected elements for the webpage you'll be designing for this class. As a recap, here's what I'd like to see:
Your website's main image (you can google it - this is for reference, not something we're going to "publish")
The URL (or title) of the site
Your site headline (plus a font selected – https://www.dafont.com is a great resource)
A short intro paragraph explaining what your site is "about." More than three sentences is probably too much. But it's important to establish a "voice" in those sentences.
We will start to weave together these elements in a future class.
Please post these things (either as a word doc with the image embedded, or as a zipped folder with all off the elements included) to the google drive:
https://drive.google.com/drive/folders/0BwMLOeZY_KN0ZzJMZmtBVXhCYXc?usp=sharing
Wednesday, February 27, 2019
Monday, February 25, 2019
Some media references - Facebook and Misonformation
https://www.independent.co.uk/life-style/health-and-families/health-news/fake-news-health-facebook-cruel-damaging-social-media-mike-adams-natural-health-ranger-conspiracy-a7498201.html
https://www.cbsnews.com/news/misinformation-online-helps-fuel-measles-outbreak-experts-say/
https://www.fastcompany.com/90223904/facebook-deletes-alternative-health-pages-as-the-war-on-fake-news-escalates
https://www.nytimes.com/2019/02/23/health/pinterest-vaccination-searches.html
https://www.cbsnews.com/news/misinformation-online-helps-fuel-measles-outbreak-experts-say/
https://www.fastcompany.com/90223904/facebook-deletes-alternative-health-pages-as-the-war-on-fake-news-escalates
https://www.nytimes.com/2019/02/23/health/pinterest-vaccination-searches.html
Wednesday, February 20, 2019
Group 2:
Nick, Jamie, Gabby, Alex
Nick, Jamie, Gabby, Alex
2. Explain the difference between HTML and CSS, and explain the ways they relate to each other. Compare the way you can use "inline styling" and the way you can activate an external style sheet. Give at least two examples of CSS styling.
HTML is the actual content of the page like written text and images, while CSS creates the style/design of a website, like layouts, and visual effects. Inline styling uses a specific HTML tag to style a specific page element. You can activate an external style sheet through a separate CSS document:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML is the actual content of the page like written text and images, while CSS creates the style/design of a website, like layouts, and visual effects. Inline styling uses a specific HTML tag to style a specific page element. You can activate an external style sheet through a separate CSS document:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2 examples of CSS styling:
Element Selector:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Border color:
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
Today: questions
You'll be working in groups today to answer these questions:
REVIEW QUESTIONS
1. List out some of the basic HTML tags that usually make up a page. What are some of the most common tags, what do they control, and what are a few useful ways you can style them?
2. Explain the difference between HTML and CSS, and explain the ways they relate to each other. Compare the way you can use "inline styling" and the way you can activate an external style sheet. Give at least two examples of CSS styling.
3. Explain how images can be included in web pages. Compare the use of an image that you are hosting yourself, and an image that is hosted on some other site. Give at least two examples of ways images can be styled on a web page, and show the coding behind those styles.
4. Explain how fonts can be used and styled on web pages. How can you prioritize fonts on a webpage. Explain at least five properties of fonts that can be customized through CSS.
5. How can you use a font that a user might not have installed on their own computer?
5. How can you use a font that a user might not have installed on their own computer?
References for Today (2/20)
Using list elements to make a nav bar:
http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/
After I've gone over this page, take the source code from the finished example, then paste it into a blank text edit file, and save it as an html page to your computer. Edit the css for the page, and make the following stylistic changes:
http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/
After I've gone over this page, take the source code from the finished example, then paste it into a blank text edit file, and save it as an html page to your computer. Edit the css for the page, and make the following stylistic changes:
1. change the names of all the nav buttons, and make them all external links to actual websites.
2. change the font face in the nav bar.
3. change the color of the nav bar, including in the "hover" state.
4. change the dimensions of the padding on the nav bar.
Wednesday, February 13, 2019
For those who made it to class...
By Monday, have a word doc or a folder with:
Your website's main image (you can google it - this is for reference, not something we're going to "publish")
The URL (or title) of the site
Your site headline (plus a font selected – https://www.dafont.com is a great resource)
A short intro paragraph explaining what your site is "about." More than three sentences is probably too much. But it's important to establish a "voice" in those sentences.
We will start to weave together these elements in a future class.
Your website's main image (you can google it - this is for reference, not something we're going to "publish")
The URL (or title) of the site
Your site headline (plus a font selected – https://www.dafont.com is a great resource)
A short intro paragraph explaining what your site is "about." More than three sentences is probably too much. But it's important to establish a "voice" in those sentences.
We will start to weave together these elements in a future class.
Tuesday, February 12, 2019
Wednesday, February 6, 2019
Links for Wednesday (2/6)
Please upload your poem/song lyric html pages to this google drive folder:
https://drive.google.com/drive/folders/0BwMLOeZY_KN0ZzJMZmtBVXhCYXc?usp=sharing
TAGS WE'LL BE LOOKING AT TODAY:
The "href" tag:
http://www.w3schools.com/tags/att_a_href.asp
The "img" tag:
http://www.w3schools.com/tags/tag_img.asp
Styling images with CSS:
https://www.w3schools.com/css/css3_images.asp
Here's a downloadable zipped file with css and an image to play with:
https://www.dropbox.com/s/1gudsccl0v5wlhs/image-styling-css.zip?dl=0
Here's a paragraph from a story we'll be talking about today -- and creating some hyperlinks with, today or Thursday, as well:
I said out loud: I must flee. I sat up noiselessly, in a useless perfection of silence, as if Madden were already lying in wait for me. Something--perhaps the mere vain ostentation of proving my resources were nil--made me look through my pockets. I found what I knew I would find. The American watch, the nickel chain and the square coin, the key ring with the incriminating useless keys to Runeberg's apartment, the notebook, a letter which I resolved to destroy immediately (and which I did not destroy), a crown, two shillings and a few pence, the red and blue pencil, the handkerchief, the revolver with one bullet. Absurdly, I took it in my hand and weighed it in order to inspire courage within myself. Vaguely I thought that a pistol report can be heard at a great distance. In ten minutes my plan was perfected. The telephone book listed the name of the only person capable of transmitting the message; he lived in a suburb of Fenton, less than a half hour's train ride away.
Here's the wikipedia page for the story, which contains a link to the full text of it.
Lastly, here's a link on aligning elements - optional for you to look at (we will go into this more in depth at a future date):
https://www.w3schools.com/css/css_align.asp
https://drive.google.com/drive/folders/0BwMLOeZY_KN0ZzJMZmtBVXhCYXc?usp=sharing
TAGS WE'LL BE LOOKING AT TODAY:
The "href" tag:
http://www.w3schools.com/tags/att_a_href.asp
The "img" tag:
http://www.w3schools.com/tags/tag_img.asp
Styling images with CSS:
https://www.w3schools.com/css/css3_images.asp
Here's a downloadable zipped file with css and an image to play with:
https://www.dropbox.com/s/1gudsccl0v5wlhs/image-styling-css.zip?dl=0
Here's a paragraph from a story we'll be talking about today -- and creating some hyperlinks with, today or Thursday, as well:
I said out loud: I must flee. I sat up noiselessly, in a useless perfection of silence, as if Madden were already lying in wait for me. Something--perhaps the mere vain ostentation of proving my resources were nil--made me look through my pockets. I found what I knew I would find. The American watch, the nickel chain and the square coin, the key ring with the incriminating useless keys to Runeberg's apartment, the notebook, a letter which I resolved to destroy immediately (and which I did not destroy), a crown, two shillings and a few pence, the red and blue pencil, the handkerchief, the revolver with one bullet. Absurdly, I took it in my hand and weighed it in order to inspire courage within myself. Vaguely I thought that a pistol report can be heard at a great distance. In ten minutes my plan was perfected. The telephone book listed the name of the only person capable of transmitting the message; he lived in a suburb of Fenton, less than a half hour's train ride away.
Here's the wikipedia page for the story, which contains a link to the full text of it.
Lastly, here's a link on aligning elements - optional for you to look at (we will go into this more in depth at a future date):
https://www.w3schools.com/css/css_align.asp
Sunday, February 3, 2019
Class Canceled for snow Monday (2/4)
I’ve been tracking the weather and it shows no signs of letting up. I’m going to abide by the current winter storm warning and stay off the roads tomorrow - so I’m canceling class for Monday. We’ll pick up with our html poems/lyrics on Wednesday. Stay safe, everybody.
Subscribe to:
Posts (Atom)