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

Lecture 15: HTML & CSS

Tim Berners-Lee

Image Source: Wikipedia

HTML Versions

Image Source: Wikipedia

Assignments


Blog 7: TBD

TBD

Creating your own Website

Creating your own Website

Connecting to the Server
Windows Users - PuTTY

http://www.putty.org

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

Visiting your Webpage

http://people.cis.ksu.edu/~<your_eID>

http://people.cis.ksu.edu/~russfeld

Problems?

http://support.cis.ksu.edu/UserGuide/
PersonalWebPages

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>

  1. Item 1
  2. Item 2
  3. Item 3

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

http://w3schools.com/css/