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:
- convert page to .html including adding html,head,body elements
- add markup for the content we know h1, p etc
- add markup for the lists.
- add markup for the links
- add navigation
- 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
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.
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
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
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
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.
There may be a quiz next week on the video and reading to check that people are doing it.
Complete Assignment 2. Details here on the blog and on the assignemnt in Blackboard
Before we start the new material I want to go over:
- Turning in the Assignment
- Access to Blackboard
- Access to lab computers
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
Here is our presentation. Depending on how long things take us it may be for both Tuesday and Wednesday this week.
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.
- 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.
“ 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 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
Complete Assignment 1. This assignment is due on Tuesday, September 10 (1 week).
Because you will lose access to the content on Blackboard at the end of this semester I will be putting most of the content for the class on this blog. I will provide links to this blog and to the content I post in Blackboard. If you want to go directly to the blog you can follow this short link: http://bit.ly/100fall13 and you may want to bookmark the blog on your home computer.
Today I will talk a bit more than usual. As the course goes on you will spend more time working at the computer creating things. Today, I’m going to try to set the stage and give you some context and ideas that we will get deeper into as the course goes on. You can follow along with the presentation here: http://bit.ly/100f13w1