Week 1: Hello World

Today’s Plan

  • Welcome
  • Play
  • What is Social Software?
  • What is this class?
  • HTML / CSS
  • HW

Polling

Wall of Text

Visit our new space: Wall of Text

You can find more info on walloftext here

HTML Tutorial

In-class minimal website created on Glitch.com

  1. To use Glitch.com, you’ll want to create an account!
  2. Create and sign into your account, Create New Website.
  3. On the left side, click on index.html
  4. You can start with this code, or delete everything in the file and begin from scratch.

Basic html tags

Start your index.html file with: ````<!DOCTYPE html>```

<html></html>

the whole page will be enclosed inside these tags

<head></head>

Your title and important metadata goes inside here. For example, your style or link to external stylesheet.

<body>All my page content</body>

The content of your page gets nested inside here.

<h1>A headline</h1>

there are smaller headings from h1 to h6

<p>A paragraph.</p>

Each paragraph should be enclosed in these tags.

<strong></strong>

bolding

<em>text to italicize</em>

Italics

<a href="https://url-to-go.com">text to link</a>

A link to jump somewhere else

<img src="yourphoto.jpg">

An image you want to display. No closing tag.

<br>

Force a line break.

<!-- comments begin and end with -->

HTML Comments / notes for yourself

Starter code from class:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My plain website
    </title>
    <style>
    
      </style>
    
  </head>
  <body>
    <div class="the">
      
     <h1>
      Important info!
    </h1>
    <h2>
      slightly less important but still freaking important!
    </h2>
    <h3>
      somewhat important?
    </h3>
    </div>
    <p>
      I am a <em><strong>para</strong>strong graph</em> of important info. 
     I am part 
          of
                    the sa
      me block.
    </p>
    <hr>
       <div class="lowerhalf">
    <p>
      HELLLLLLLLOOOOO
    </p>
    <br>
    <br>
 
      
   <img src="https://cdn.glitch.global/4123bb0d-5d94-499b-9b6f-c2f290ed0780/Nc_GFr.png?v=1693430096953">
    
        </div>

  </body>
  
</html>

CSS

CSS is for your style. Things like colors, placement, font choices, font sizes, etc. We added the following CSS code inside the part of the head.

    body {
        width: 50%;
        margin-left: 25%;
        background-color: #caf0f8;
        color: blue;
      }
      hr {
        border-color: #03045e;
      }
      img {
        width: 500px;
      }
      .lowerhalf {
        background-color: #90e0ef;
      }
      .the {
        background-color: #0077b6;
      }

Review these pages and tutorials!

Exercise: A “now page”

Create a now page.

At a minimum the page should have some info about you, a name or nickname, what you are currently studying and/or what you are currently reading or watching.

Include at least one image.

The page can be as minimal or complex as you like, but it should be good.

Examples:

nownownow.

Afterwards…

Visit the Low Tech Webring Directory.

Homework

Visit Gossip’s Web.

Exercise 1:

Explore Gossip’s Web and visit some of the links. Take your time, don’t rush. What is the purpose? Who does it serve? What kinds of pages exist (site architecture)? How does the architecture and design serve the goal of the site? What are your overall impressions?

Exercise 2:

Finish your now/ page (see above activity) and upload to the internet (link to it on Brightspace homework). See homework on Brightspace for additional info.

This site should be informational and aesthetically compelling!