Website Development Komodo Editor and HTML Intro

Size: px

Start display at page:

Download "Website Development Komodo Editor and HTML Intro"

Jemimah Morton
6 years ago
Views:

1 Website Development Komodo Editor and HTML Intro Introduction In this Lecture and Tour 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 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, other 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. 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 Note that Komodo offer many features we will not need or use for this class. Through the series of Web Development labs you will be building a web site that will be about you: your background interests and career aspirations. Start to formulate your ideas for what your will represents; what you d like to convey to your target audience. You will upload your web site so anyone on the Internet is able to see it. Guided Tour Komodo Editor There are a number Tutorials available for Komodo if you wish to further explore its feature or feel you need more information after this Tour. One example is: 1. Locate and start the Komodo editor on the desktop or All Programs list. Page 1

2 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. Page 2

Your First Web Page 1. We can now start entering basic HTML statements. Key in the text shown, replacing Instructor with your name. Notice the spacing and tab before Hello World.

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.

3 Your First Web Page 1. We can now start entering basic HTML statements. Key in the text shown, 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 < and greater 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 index.html and click Save. Be sure you are saving in the Documents folder. The file extension must be.html! If you find that another copy is out there from a prior student just indicate Replace when prompted. Page 3

3. You ll note a change in the appearance of the contents on Komodo screen as

Note that the html tags are in a different color then the contents.

Go to the Documents folder by first clicking on the Windows symbol at the

4 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 browser. 4. Go to the Documents folder by first clicking on the Windows symbol at the lower right of the display and then the Documents item in the list on the right of the panel that pops up Page 4

5 5. Locate the index.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 the index.html file name and select Open With, Firefox. Don t exit from Komodo. Page 5

6 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 and see how Komodo helps us out. Note that you have been provided with a handout that includes many of the common HTML tags. A copy is also located in the Class Reference Library. 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 if you need to correct or modify the code.

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 <font> statement attribute (color) When you started to

7 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 if you need to correct or 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 </ it anticipated that you wanted font 9. Switch to the browser window. Your web page should now look as follows. Note that that if you make an error, say misspell color in the tag as colour you won t get an error message, you just won t get what you want when you check it out in the browser. Try It! Also note you might get different results with different browsers. 10. Let s add a little more content and a few more tags Page 7

8 11. Switch to the browser window and you should see 12. Now print your page from the browser 13. Print the index.html file from Komodo and staple it to the web page printout and turn them into your Instructor 14. Exit Komodo Page 8

Tutorial. Activities. Code o o. Editor: Notepad Focus : Text manipulation & webpage skeleton. Open Notepad

Tutorial. Activities. Code o o. Editor: Notepad Focus : Text manipulation & webpage skeleton. Open Notepad Tutorial Activities Code o o Editor: Notepad Focus : Text manipulation & webpage skeleton Open Notepad Click in the search bar and type notepad to load it up, you should see something like this: Type in