Website Development Komodo Editor and HTML Intro

Transcription

1 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 ( 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 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 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

3 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 < 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 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

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 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 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

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 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. <b> sets the text that follows to bold, we must terminate its actions with a </b> when we no longer want bold b. The <font> 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 </b> tag used to terminate bolding, we will use the </font> statement when to go back to the font defaults c. <br> causes the content that follows to begin on the next line Page 6

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 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 <font> 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 to check your webpage. Note that that if you make an error, say misspell color in the <font> 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. Now Let s add a little more content and a few more tags. You may type in any text that you want. Be creative and have fun with it. Add each of the following tags somewhere in your file and test them one at a time to make sure they work. Try nesting (combining) the tag commands, for instance you can make something centered, underlined, and a different font color. Include your name somewhere on the webpage itself, in addition to the title on the tab. <p> This text will be treated as a paragraph in terms of spacing, a break plus a blank line</p> <u> This text will be underlined. </u> <i> You guessed it. This text is italic. </i> <h1> this the a largest header</h1> <h2> this is the second largest header</h2> <h6> this is the smallest header, a header will always be bold and start a new paragraph as well </h6> <hr> horizontal rule, draws a line across page, does not have to have a close <center> will center anything that follows until you end it with </center> <marquee> This text will scroll across screen. </marquee> ends the text to be scrolled. <font color= red size= 20 > This text will be in the chosen color and size. Try different colors. </font> will cause the following text to revert to the default font which is black. &nbsp Will allow you to put in additional blank spaces, 1 space for each tag Page 7

8 11. Next add an HTML Table somewhere on your webpage. Make sure it is at least a 2row by 2column table of information. Below is a simple example of a table. Review how these tags work: <table> <tr> <td> and <th> Remember that if you do not specify a border width, it defaults to zero which will be hidden and not show in the browser. Refresh the browser window to make sure your table worked. 12. And Finally, add the two type of lists somewhere in your webpage document. An ordered list and an unordered list. Use the examples below as a guide. Be sure to add both types of lists. Refresh the browser to make sure it worked. Page 8

9 13. Switch to the browser window to do a final check on your webpage. Be sure your name is on the webpage somewhere towards the top. 14. Print the webpage to turn in. Unfortunately, our printer only prints in black and white, but I will have your file to visually check as well (Be sure to save the file correctly as described below). Leave your printout in a stack up front. Ctrl-P should work in most browsers to bring up the print window. It should already default to the correct printer. 15. Exit Komodo, close the browser. Save a copy of your file in your Student Folder 1. If you do this assignment outside of our building, you will need to me your html file, otherwise go to step Click on the Windows START icon at the bottom left of the screen. 3. In the Search box, type the following (the back slashes \ need to face the correct way) \\ \Bucher Double click to open your correct section folder Page 9

10 5. Now right click and choose New to Folder 6. Create a folder with your First and Last name as the folder name 7. This will be a more permanent folder for your files to be stored and also so I can check them easily. This folder is actually created on the computer in my office. Files that are left in the local Documents folder are not guaranteed to still be there week after week. So always keep a copy of your final work in this student folder. 8. Now open your student folder you just created and then also open the local Documents folder. Then finally drag your Assignment2.html file from Documents into your Student Folder. Be sure to initial the attendance sheet up front! Page 10