Website Development Komodo Editor and HTML Intro

Website Development Komodo Editor and HTML Intro Introduction 





In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of this class o The basic setup of an HTML web page o Adding several HTML tags to add basic formatting and lists and tables to your webpage The Editor o Editors are programs for the entry and modification of the contents and command statements needed for web pages, Javascript programs, etc. o There are a number of editors, with differing capabilities, that run under Windows and the Mac OS o Some editors offer simple entry, others offer a level of assistance syntax checking. That is, they examine the text being entered and can give prompts to help complete the statements. And for statement types they recognize they will call out certain errors in their construction as you enter them. We will be using an editor called Komodo (www.ActiveState.com). Some of the features that make it a good choice are: o It provides a degree of prompting for HTML and Javascript o It allows a user to work on multiple files concurrently. This is handy when, for example, you’re building and testing multiple web pages concurrently. o It runs under Windows and Mac OS o It’s Open Source and available as a free download. To download the program to your own computer, go to http://www.activestate.com/ and click on the Developer Tools menu at the top and then choose Komodo Edit. Then choose your correct operating system version. Note that Komodo offers many additional features we will not need or use for this class.

You do not have to use Komodo Edit for this assignment. You can also use NotePad or any simple text editor.

Assignment 1. Locate and start the Komodo editor on the desktop or All Programs list. Or just type Komodo in the search box after clicking the Windows START icon at the bottom left of your screen.

Page 1

2. The first page you see has the standard menu and general information and news for Komodo. 3. Close the Start Page by clicking the X 4. Then select File, New File

Notice that the default file extension (type) is .txt. A web page’s extension must be .html. You will change the file name and extension after you type the initial part of the file.

Page 2

Your First Web Page 1. We can now start entering basic HTML statements. Key in the text shown below, replacing Instructor with your name. Notice the spacing and tab before Hello World. This is done for readability by us humans, not the computer a. The HTML tags (commands to the browser) are always enclosed in the Less than “” delimiters b. Text that is simply to be displayed is shown without the delimiters c. Spaces and tabs within the web page is generally ignored, but are used for readability

2. The next step is to save the file to the Documents folder. Do so by clicking on the Diskette icon, then type in the name YourNameAssignment2.html and click Save. Be sure you are saving in the Documents folder. The file extension must be .html! Normally the first file on a website will be named just index.html, but I want you to make sure your name is in your filename so I can tell who’s document it is.

Use YourNameAssignment2 .html as filename

Page 3

3. You’ll note a change in the appearance of the contents on Komodo screen as it now recognizes the files type and will help out as it can. Note that the html tags are in a different color then the contents.

We’re now ready to test our first web page. Do not close the Komodo editor. 4. Go to the Documents folder by first clicking on the Windows symbol at the lower left of the screen and then the Documents item in the list on the right of the panel that pops up

Page 4

5. Locate the YourNameAssignment2.html file you just created. You can verify it’s the correct one by checking the date and time of the file.

6. Right click on your file and select Open With, Firefox (or any other Browser). Don’t exit from Komodo.

Page 5

7. Your web page should appear as follows (your name in the place of Instructor) in the Page Title area.

If things don’t look as you expected, don’t close the browser; switch back to the Komodo window, make the needed changes to your HTML code and save the file; then switch back to the editor and reload the page.

Now we’ll enter a few more tags as shown in the picture below and see how Komodo helps us out by color coding our text and also typing in the close tags automatically. Sometimes it can be frustrating when it types the close tag for you because you may have to cut and paste it somewhere else, but when creating your own webpage from scratch it can be faster. 8. Let’s bold our Hello World text, change its font color to blue and add another line of text that we want back to black and not bold. That will be accomplished by using several additional tags. a. sets the text that follows to bold, we must terminate its actions with a when we no longer want bold b. The tag is the means of setting font type, size, and color. The font statement is an example of a tag that uses attributes to qualify its actions. As was the case with the tag used to terminate bolding, we will use the statement when to go back to the font defaults c.
causes the content that follows to begin on the next line

Page 6

You can string tags and text on one line or separate lines. The goal is to make your code as readable as possible for you or others who modify the code. Komodo will try and assist you by completing commands. It doesn’t always anticipate correctly. Note that Komodo did the following for you:  When you started the color qualifier it gave you both quotes (“”)  It added another color for the statement attribute (color)  When you started to terminate the special font and keyed in