Resource

Blank Page

Below is the markup for a blank page that inlcudes link to a css file. Everything that you want people to see needs to go in the <body></body> tags


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Your Title: appears in Tab on top of page</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<h1>Main Site Heading (title)</h1>
</body>
</html>

Background Images

Sometimes it can be tough to add in your background images. I make a short tutorial on how to do it. You can see it here: http://profstein.clarify-it.com/d/dzc3vf

Some quick pointers

 

The only trick to remember here is that in the url() you have to add the path from the CSS file to the image. To move up out of the css folder you use ../ Here is how the example below breaks down the url of ../images/dog-square.jpg

  1. ../  this says to move out of the css folder
  2. images/  this says to look in the images folder
  3. dog-square.jpg  this says to use the dog-square.jpg file

 

If you use this folder structure then all of your background images will start with ../images/

Basic Page Sections

Basic Page Sections

A basic web page usually has these sections:

  • Header: This identifies the site, usually has an h1 element and maybe a logo if one is used
  • Navigation: so you can move throughout pages in the site
  • Content: this is where the main content for the page goes
  • Footer: this let’s people know they’ve reached the end of the page and also often has info about who created the site, copyright info and, if pages are long a smaller version of the navigation.

Here is a diagram

In HTML5 elements were added to help us define some of these sections: header, nav, footer. For the content it is common to add a div with a class or ID on it that wraps all content. Two other HTML5 elements, article and section are also used, but we will cover them later. Here is a basic page with sections that you can use:

<!doctype html5>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Page Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>My Main Heading</h1>
    </header>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="page2.html">Page2</a></li>
            <li><a href="page3.html">Page3</a></li>
        </ul>
    </nav>
    <div class="main">
        <!-- page content goes here -->
    </div>
    <footer>
        <!-- footer content goes here -->
    </footer>
</body>
</html>

Styling the Page

When you are styling the page you want to use some of the graphic design basics to help identify the diffferent sections of the page:

  • Color
  • Line
  • Space

Color

When you want to set the color of text, you use the color property:

h2{
    color:#ff3300;
}

When you want to set the background color of an element use the background-color property:

nav{
    background-color:#000;
}

If you do set the background color, also make sure you set the color of the text so it contrasts with the background-color and is readable.

Line

The simplest way to add lines to define and separate elements with borders.

header{
    border:1px solid #333;
}

Sometimes you don’t want a border all the way around. So you can just set one, like here adding a border above the footer:

footer{
    border-top: 3px solid black;
}

You can set all four borders separately:

  • border-top
  • border-right
  • border-bottom
  • border-left

Space

Adding space between elements is another way to separate them. When you’re trying to add space between elements, margin is the way to go first:

footer{
    margin-top:50px;
}

Like border you can set all four separately or at once if you just use margin:30px

Uploading files with FTP and Filezilla

There are a number of different programs which allow you to use the FTP protocol. The one we will use in class is Filezilla. It is free and is available on both Mac OSX and Windows. You can download it here if you don’t have it at home yet.

In order to use FTP we need three pieces of information:

  1. The Host, which for all of you is: mmp.bmcc.cuny.edu
  2. The Username, this was given to you last class and is some version of your first and last names
  3. The Password, this was also given to you in class.

If you don’t remember your username or password I can give it to you, but please put it somewhere that you will be able to remember it.

Here is the process for uploading files.

  1. Open Filezilla

  2. Enter your login information (Host, username, Password) and click QuickConnect

  3. You should see this message if you connect successfully

  4. When you are logged in you will see the folders and files on the server on the right panel. The first time it will be blank. On the left panel select the folder that contains the files or folders you want to upload. I suggest creating a BMCC-Server or MMP-Server folder that will contain all of the content you want to put on the server

  5. To upload a folder or file, first make sure you are in the correct place in both panels (local and server), then right click the file or folder on the local (left) side and select Upload.

  6. You can see the progress in the bottom window.

If you make changes to files or folder names or locations outside of filezilla, there is a refresh button you can click to update:

Intellectual Property on the Web

Intellectual Property on the Web

Digital files, like text and images on the Web, are easy to reproduce and edit. However most content found on websites is copyrighted by law and cannot be reproduced without an explicit permission from its author. Copyrighted content includes most creative property found on the web, such as text, images, video, audio and code. If you do not know if material on the web is copyrighted it is safe to assume that it is. Copyright laws apply regardless if the website displays a copyright notice. If you want to use materials created by somebody else, your best route would be to ask for permission from the author.

What is copyright?

According to the US Copyright Office, “Copyright is a form of protection provided by the laws of the United States … to the authors of “original works of authorship,” including literary, dramatic, musical, artistic, and certain other intellectual works. This protection is available to both published and unpublished works.”

Copyrights laws give author exclusive rights to reproduce, distribute, and display their work in public, as well as create other work derived from it. Authors can grant other people permission to reproduce their work or use it in other ways.
More about copyright laws.

Fair Use

Under certain circumstances it may be legal to make very limited use of copyrighted material without the permission of the author. For example, in a book review, you may quote a paragraph from the book you are reviewing, or in a article about a movie you may include an image from the movie. You still must attribute the work to its creator. Fair use usually implies that your intent is non-commercial, educational or nonprofit, that you use a small portion of the original material and that your use of it does not devalue its original source. However, Fair Use does not stipulate the amount of text, code, video or music that is permissible to use and your safest bet is always to seek author permission.
More about Fair Use.

Creative Commons

Some authors choose to allow others the use their work on certain conditions. Authors using one of the Creative Commons licenses keep their copyright but allow people to copy and distribute their work on the conditions specified in the licence, and provided they give them credit. For example, in flickr.com/creativecommons you can find images published under several Creative Commons licenses. If you wish to use one of these images in your work you will have to carefully read the license of the image and comply by its rules.
More about Creative Commons.

Class on Tuesday 9/3

Here are the files we worked on in class in a zip folder. Zipped files need to be extracted before you can work on them. If you are on Windows you should be able to right-click and then extract the files (In our lab use 7-Zip>Extract Here. At home you  can use Extract All). On a Mac you can just double click the file to unzip it.

Class-9.3.13.zip

  • OnScreenNotes.txt is the notes I had on screen including the workflow for saving and viewing pages.
  • index.html is the first file we made from scratch
  • existing_content.html is the file we were adding markup to. This is not complete so there are syntax issues and not everything has tags around it.
  • sample_content.txt is the original content we used for existing_content.html

Last class was all about the big picture and we covered a lot of different ideas. Don’t worry if everything didn’t sink in. We’ll be going the ideas again and focusing on smaller chunks in more detail in each class. Today that focus is on HTML. The major learning areas for this class are:

  • Creating Digital Media Files
  • Displaying Digital Media Files
  • Understanding how the technology behind computers, the internet and media files works
  • Evaluating how all of this technology effects your lives, public policy and society in general

HTML forms the base of how we will tackle Displaying Digital Media Files. This class focuses on displaying media on the web and HTML is the foundation for information on the web.

In Class

“ Computers are good at following instructions, but not at reading your mind. ” - Donald Knuth

 We will use the presentation below to cover the bulleted topics
  • What is HTML
  • Basic HTML syntax
  • Creating your first HTML document
  • Marking up Existing Content
We will use this file: sample_content.txt

At Home

We have no class on Thursday. All of the work below will be due before next class on Tuesday 9/10. Do all three, the reading, the videos and the assignment. You should do the reading and watch the videos before the assignment.

Reading in the Book

Read chapters 1 & 2 of our class book “HTML & CSS: Design and Build Websites”. Extra Reading These articles cover most of the same information as in the book. They are optional. You can read them if  you have read the book and want more or if you haven’t gotten the book yet (I won’t always provide alternatives). The Basics of HTML: http://docs.webplatform.org/wiki/guides/the_basics_of_html HTML Text Elements: http://docs.webplatform.org/wiki/guides/html_text

Video on YouTube

I have a series of videos on YouTube about HTML Fundamentals. You should watch the first two which cover the basic concepts. If you want to watch part 3 go ahead. Part 3 is longer because it gets into showing writing HTML in action. Part 1: What is HTML and how does it fit into Web Design Part 2: How to Write HTML

Assignment

Complete Assignment 1. This assignment is due on Tuesday, September 10 (1 week).