Foundations of Technical Writing



Foundations of Technical Writing

HTML and CSS Tutorial

Instructions: Create a website (two files with the .htm or .html or .shtml file-name extension) and a cascading style-sheet document (.css file-name extension), and save these frequently while you work. Follow instructor’s guided comments on the discussion thread during these modules.

When you’re done, save the files to Blackboard.

• Start by reading the tutorial I created: How to Create a Free KU Website here:



• Using a basic text editor or working in the code section of a WYSIWYG editor, create a new HTML page (a document with the .htm or .html or .shtml file-name extension).

• Walk through at least one basic HTML tutorial by adding your own content to this page. Type the code yourself so you gain proficiency and confidence. Start with this tutorial:



• Create a second page and link them together (that is, create links from each to the other).

• Create a cascading stylesheet document (a document with the .css file-name extension).

• Walk through at least one basic CSS tutorial by adding your own content to this style-sheet. Start with this tutorial:



• Link your CSS document to your HTML pages (use a separate CSS document, not just inline styles) so it affects the content on all your pages.

Here are some of your website resources for this project:





...and lots more linked from the modules and from Blackboard.

Some tips for success:

0. Create a new blank .htm file using Notepad or Notepad++. On a Windows computer, you can find Notepad in Start/Programs/Accessories/Notepad; otherwise, open the Run window and type Notepad.exe to start the program. (Never use Word or such programs to work on websites.)

1. Help your classmates if you see people having trouble, and don’t be afraid to ask for help on the discussion board, as well. We don’t want to leave anyone behind.

2. Save this file as something like "HTML-exercise.htm" – and leave open this file. Be sure to use Save As… and select the type called “All Files,” not “Text Documents.” However, you only need to use Save As… on the first save.

3. Also open this file with your Internet browser (Internet Explorer, Chrome, Firefox, or so on) by double-clicking it in the folder where you saved it.

4. When building websites, always make the file-name extensions visible so you can see the capitalization and spelling of all the files you'll be linking; for example, is your main page called "Index.htm" or "index.HTML" or so forth? Unless you can see these details, your links will fail.

5. Now you can make your changes while checking how it looks in your Internet browser. Leave both the file and the browser open as you work.

6. Be sure to save all the changes you make using your HTML editor by either clicking File/Save or by using the shortcut Ctrl-S.

7. You can see the changes in your Internet browser by hitting F5 to refresh the page.

8. Voila! You're building a website!

To edit your file after closing it, make sure to open the .htm file (right-click and then select Open With…) using the HTML editor, and then save it as .htm (or .html, or .shtml) file of the “All Files” type. You can also open and edit it in an HTML editor like Notepad++, FrontPage, Dreamweaver, Web Editor, Homesite, or others. However, for this exercise, I urge you to work in Notepad or Notepad++, not the fancy editors, because it’s important to have experience coding by hand, and it takes just as long to learn how to use those programs as it does to just do it yourself. By the way, I can tell if you're being sneaky and using an editor by looking at your code.

Document

Create a set of basic HTML documents while walking through the tutorials.

Purpose

To practice for the upcoming Website assignment while gaining competence and confidence with editing HTML, CSS, and making or editing websites.

Audience

Yourself and your instructor.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download