CIS 141
Introduction to HTML Programming

Lessons page

Class 1

In this lesson the learning objectives are: How To Navigate Nicole's CIS 141 Web site Review Internet and WWW terms Comparison: Email Client - Browser - FTP Client Internet Basics The Internet vs. The World Wide Web The Internet Map Hypertext & HTML What is a Protocol ? What is Hypertext ? The Progression of HTML Website - Web Page - HTML File The URL - Uniform Resource Locator The page called "index.html" Review hardware and software used in this class Client vs. Server Your Text Editor - Used to write/modify your code Notepad - Used if your computer is a PC (non-Mac) TextEdit - Used if your computer is a Mac gedit - Used if your computer is running Linux Your Web Browser - Used to view your website Firefox, Chrome - preferred on both platforms Safari, Opera - native to the Mac platform Internet Explorer (Edge) - not particularly preferred by web designers Your FTP Client - Used to get your code from your computer to the web server WS-FTP - Used if your computer is a PC (non-Mac) Classic FTP - Used if your computer is a Mac FileZilla - Used if your computer is running Linux Working locally (client system) - Working on the server Sending me email - so I know how to reach you My email address - Nicole.Cook@marin.edu Your email address What You Need From Web Host An HTTP URL An FTP URL A username and password Planning your website - Part 1 Planning Your Website (Part 1) Determining a theme for your website Thinking about how to break up your topic Connecting to the server

Return to Syllabus

Class 2
In this lesson the learning objectives are: Creating a Simple Webpage Tag Fields Your Toolkit Headings Paragraphs and Breaks Lists - Ordered and Unordered Character Attributes Horizontal Rules and Attributes Special Characters Using Images Making Mistakes Comment Tags
Now you're ready to put together a website of your own. The good news is, you don't have to spend a penny to get started. You can begin right now by using any text editor like Notepad or TextEdit. You type in the HTML code, save the file with an ".html" ending, and then use Firefox, Safari or Internet Explorer to open the file. Even if you do not have an Internet connection on your computer, you can use an Internet browser "offline" to view the files you create for this class
This week we will begin to explore HyperText Markup Language (HTML)--the coding system that turns plain text into colorful, interactive web pages. For the same reason that you want kids to learn their multiplication tables before they get their hands on a calculator, it's helpful to understand basic HTML before relying on web authoring software (like Adobe DreamWeaver, Microsoft Expression Web, Kompozer or Artisteer). That way, you know just what you can do, how to do it, and how to resolve problems you encounter
Also, many web authoring tools don't support all the latest HTML tags. If you know how to code HTML, it's easy to open an HTML file and add extra tags by hand--including new tags that were developed after the site authoring software hit the shelves. HTML is a living, growing language; understanding how it works is critical to keeping up with its latest innovations
To begin, you will create your first web document (often referred to as a "home page") and name it "index.html" (Do not give the file any other name). This document will contain the basic tags found in every web page.

Return to Syllabus

Class 3
In this lesson the learning objectives are: Creating Multiple Web Pages For Your Website Navigation and Storyboarding Structure - Linear, Hierarchical, Cluster How do I get back home ? Anchors Using .gif's as links and anchors Anchoring to a different page in the same folder Anchoring to a different page in a different folder or directory Paths Local Addressing Relative Addressing Absolute Addressing
Clicking on links is what makes the web so unique and exciting. Being able to inform your reader that you have additional or relevant information elsewhere in cyberspace and giving them the decision whether to access it, is a powerful concept! You will need to understand the anchor (<a>) tag. It connects your page to other web pages, to World Wide Web sites, to text within a web page and to the email window on your internet browser
The "good news" is that information contained at a website does not have to be linear (as in a book with a beginning, middle, and end). Instead, each page of information made available for distribution on the World Wide Web can contain words (called "hypertext") that create a link to another page
The "bad news" is that information contained at a website does not have to be linear. Books may be restrictive in their layout - but when was the last time you got lost within a book ? Getting lost within a website is all too common. As a web author, one of your main tasks will be to create hypertext links which are clear and descriptive. Also consider a layout which will allow your visitors to glide effortlessly from one page to another, without getting lost

Return to Syllabus

Class 4
In this lesson the learning objectives are: Graphics and Links A Touch on Cascading Style Sheets Body Tag Attributes background - Uses a picture for the background text - The color of the text link - The color of a link not visited vlink - The color of a link which has been visited recently alink - The color of a active link--while it is being selected Color and Background Colors bgcolor - Setting a solid background color Using named colors Using hexadecimal color codes The Font Tag Graphics Formats For The Web .png's - Smaller size but better appearance .gif's - Usually low resolution graphics .jpg's - Usually high resolution graphics Image Types - Interlaced & Non-Interlaced Animated gif's Animated .gif software The Image Tag Controlling image size with HTML Using "alt" with the image tag Aligning and centering images Borders and spacing around images The Image Placement Vertical placement Horizontal placement Thumbnails Image link to an image What if I want to center the image and add navigation ? Image Maps Using an image as a navigation tool It might be called a image map but it does not have to be a map Hot spots Rectangle Circle Polygon
A text-only page isn't going to catch anyone's eye. After all, the World Wide Web is all about color and pictures. You will now dress up your website by adding graphics
I recommend you download graphics from graphical archives on the World Wide Web. Although it is tempting to create original graphics for your website, it can be a tremendous drain on your time if you are not already an experienced graphics artist. Consider enrolling in a "Graphics Design" course after you have mastered HTML
With the growing popularity of Windows 7, 8 and 10; Mac OS X and Linux graphical interfaces, web users now look for a button or picture to click on. Creating graphics that link can add sophistication and pizazz to your website. But, when you include linked graphics you will also need to consider those users who are using mobile devices with much smaller screen sizes who cannot display large graphics or other users (not many anymore but there may be a few) who may be running a much older computer with a less than optimal video or operating system who cannot view some graphics types
No matter what's on a web page, the standard white background which displays on most browsers can get a little dull. Changing a page background color is as simple as adding a bgcolor attribute and hexadecimal value to the <body> tag. If adding color isn't exciting enough for you, you can use an image as your background. Any image you choose will tile into the background--that is, it will go into the background at whatever size it is and then reproduce itself over and over to fill the page
Once you have changed the background color you may want to adjust the color of the body text, linked text, visited links and active links so all the colors on your page work together to be both pleasing to the eye and easy to read. The easiest way to ruin your web page is to add a background color or graphic that makes the page unreadable
One of the most powerful and effective navigation techniques is the image map. In this lesson you will see how to create an image map and how to use the image map technique to improve the usability of your site

Return to Syllabus

Class 5
In this lesson the learning objectives are: Dividing Your Display The Big Three Frames Tables CSS Frames Frameset Frame Border Frame Sizing Tables Properties Borders Cellspacing and Cellpadding Colors and Backgrounds Alignment Width and Height Rowspan and Colspan Newer Table Constructs thead tbody tfoot Differences In: HTML4 - XHTML - XML - HTML5 XHTML Rules

Return to Syllabus

Class 6
In this lesson the learning objectives are: Forms Form Methods action -- Mailto method -- Get, Post Input Boxes Button Checkbox Hidden Image Password Radio Reset Submit Text Textarea Properties Size Maxlength Pattern Placeholder Input Types Text Password Range Date and Time Checkboxes and Radio Buttons Drop-down Box

Return to Syllabus

Class 7
In this lesson the learning objectives are: Multimedia Video H.264 codec MP4 format Converting Video to Other Formats Sound MP3 format

Return to Syllabus