Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.
For the best experience please use the latest Chrome, Safari or Firefox browser.
CIS 115
Programming for the Web
Tim Berners-Lee
Image Source: Wikipedia
HTML Versions
Image Source: Wikipedia
Assignments
Blog 4: The Filter Bubble
The Filter Bubble (https://en.wikipedia.org/wiki/Filter_bubble) is a phenomenon on the internet where personalized algorithms present users only with information or opinions that match her or his own thoughts. Because of this, internet users can become isolated in their own little worlds, where everything they see and hear agrees with an reinforces their own ideals and belief. For this blog post, we want you to challenge yourself a bit to see exactly what others are seeing. Here's what we'd like you to do:
Write about your experiences and what you find. Make sure you reference back to the textbooks and other websites to help you explain why this is happening.
Create your own Website!
Create a webpage that has:
Creating your own Website
Creating your own Website
Connecting to the Server
Windows Users - PuTTY
Host Name: cislinux.cis.ksu.edu
Server Security
Linux Terminal
Connecting to the Server
Mac/Linux Users - Terminal
Applications > Utilities > Terminal
SSH on Terminal
ssh <your_eID>@cislinux.cis.ksu.edu
Simple Linux Commands
Creating your own Website
Editing Files
nano <file>
cd ~
mkdir public_html
cd public_html
nano index.html
Nano Text Editor
Creating your own Website
Your First HTML Page
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
</head>
<body>
Hello World!
</body>
</html>
HTML Tags
Creating your own Website
Saving in Nano
Problems?
https://support.cis.ksu.edu/CISDocs/wiki/
Personal_Web_Pages
File Access Permissions:
Creating your own Website
HTML Tags
HTML Lists
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Cascading Style Sheets
Adding CSS to a Page
Add the following to your page header
<link rel="stylesheet" href="fancy.css" type="text/css" />
Sample CSS
a {
text-decoration: none;
padding: 0 0.1em;
background: rgba(220,212,231,0.5);
text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
border-radius: 0.2em;
}
a:hover,
a:focus {
background: rgba(189,169,207,1);
text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
}
Add Some Style