Class

Class on 9.12.13

Class on 9.12.13

Today we are going to continue on from what we did on Tuesday. We will get into how to write lists and also how to add links to a page. Combinging lists and links we will make a navigation element that we will use to link a few pages together.

Marking up a Page

Instead of starting with nothing today we are going to start with a lists.txt file that has some content. We will convert this to HTML. As a kind of review from last class we’ll start with you adding the elements to make the page an HTML page, and saving it as lists.html. Here’s a the basic sequence:

  1. convert page to .html including adding html,head,body elements
  2. add markup for the content we know h1, p etc
  3. add markup for the lists.
  4. add markup for the links
  5. add navigation
  6. test things out to see if they work.

If you did the reading and can get started on the lists go ahead. Since we’ll be doing a lot of markup in class you will be working at different speeds and can go ahead or slow down.

Here is the list.txt file we will use

lists.txt

You should have with you the files we did from last class. We will use those as other pages when we get to the navigation part of the class.

Navigation

Once we have marked up lists.txt with the lists and links we will add in navigation. The standard on the web is to put your navigation into list items. Here is an example with links to Home, About Us and Contact

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</nav>

Homework

Reading

Read Chapters 3, 4 and 5 in the book. 3 and 4 are on lists and we have gone over that in class this week. Chapter 5 is on images and we will cover those next week

Video

Watch the HTML Fundamentals part 3 book. This covers everything we did this week plus it adds in information about HTML5 elements we have not covered yet and some information about images. It’s done with me writing a lot of HTML on screen so you may want to be at your computer and have an editor at hand so you can follow along.

Quiz

There may be a quiz next week on the video and reading to check that people are doing it.

Assignment

Complete Assignment 2. Details here on the blog and on the assignemnt in Blackboard

Class on Tuesday 9.10.13

Old Business

Before we start the new material I want to go over:

  • Turning in the Assignment
  • Access to Blackboard
  • Access to lab computers

New Material

Today we are going to dive deeper into HTML. We will cover the topics listed in this presentation, but most of what you do will be writing HTML. So if you miss the class, the presentation alone won’t be enough to cover what you miss.

Everything we cover is also in the book and we should get through Chapters 2, 3 and 4 this week (we already started Ch. 2 last week).

If Sublime Text is working I will use that to demonstrate on-screen and I may also show you how you can intall it on your USB drive. That version is called the “portable” version and only works on Windows computers.

Sublime Text 2 Downloads

Sublime Text 3 Downloads

Presentation

Here is our presentation. Depending on how long things take us it may be for both Tuesday and Wednesday this week.
view online

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).