Embed Size (px)
DESCRIPTION
How an Index.htm works. - PowerPoint PPT Presentation
Citation preview
HOW AN INDEX.HTM WORKS
If you go to www.scottbunin.com, you will find that the page automatically loads up an index.htm file. There are many files on the page. However, a user will not know what the files do. The solution to this is to create an index that directs a customer or a user to where we want them to go. As programmers, we can specify a file name. As an end user, most people will just click on whatever loads.
Index: Getting StartedYour index is the front end of your entire web site. To begin, create a file called index.htm. In this file, all links to previous work can be shown. The end user will then be able to browse the parts of a site that they find to be most interesting.
MAKE THE INDEX FUN WITH SCRIPTS Since our index.htm is going to
be the front end of the entire web site, we will add some code to get attention. With billions of Internet pages, we have to do what we can or we will get ignored. We will look at some choices later during this unit. The choices will be from an online dynamic database.
Index AssignmentOur index will reference each of the projects we
have done so far in a table. Use the <table> command directly or find a web site that creates a table for you. The table should have at least 14 boxes. A 2 by 7 table should work well. In each of the boxes, a project will have a picture, a summary and a link. The links will show the work that we have done and enable a user to get there with one click. As we review our projects, we are welcome to correct any mistakes made such as missing pictures from the server.
ReviewHow an index.htm worksIndex: Getting StartedMake the index fun with scripts!Index Assignment
Example: Including Tic TacToe in the Index
Our first project was Tic Tac Toe so the first <td> in our table should have a link. The link may be based on a picture, on words or any combination of the two. The project will require at least one a paragraph and least one picture for each of the 6 projects we have done.
Making a table element with a pictureInside our <table> we declare each
<tr> that contains two <td>. If done correctly, each row will have two boxes or cells. To make a picture show up in one of the cells, we enclose an <img> command with a <td> command:
<td> <img src=“picture.png”> </td> We can create or find any picture we
want.
MAKING A TABLE ELEMENT WITH TEXT By writing a paragraph, we can prove that we knew what we were doing for a project. Each paragraph has 5 sentences. Place the text inside the <td> tag. Such as <td> Sentence. Sentence. Sentence. Sentence. Sentence. </td>
Putting a link on the text or pictureAfter getting pictures and/or text to
appear inside the table cells, we are ready to add a link to it. Each of the table cells will need a link. Here is an example of one linking a picture to project 17.htm.
<td><a href=“17.htm”><img src=“ttt.png”></a></td>
This will create a picture inside a link inside a table cell!
REVIEW Example: Including TicTacToe in the Index
Making a table element with a picture
Making a table element with text
Putting a link on the text or picture
•Rubric Part 1 A table appears with references to each of
the 6 projects (10)Each project has a picture (6 * 5 = 30)Each project has a paragraph(6 * 5 = 30)The table includes links to all previous and
current projects (15)
RUBRIC PART 2 Create an aesthetically pleasing background for the .htm <body> tag using either color or a picture. (10)
Have one or more of the links appear in button format. (10)
Use one of the dynamic script examples to make stuff move around in a pleasant way. (10)
Adding Some Moving DecorationThere are some great scripts written for
students on the Internet. For example, at http://www.dynamicdrive.com/dynamicindex4/bounceimage.htm you can find a way to make 3d looking balls bounce around. The site contains many other examples to pick from and students may find any one they like. To start with, go to the link (above) and read the directions the programmer gave us.
MODIFYING THE MOVING DECORATION The directions on the site ask us to
download files and edit our file’s <head> section and <body> section. The directions only work if you follow them. After downloading the picture file, you can change the picture to whatever you want. Look in the .js files given and change variables seen such as the number of balls that bounce around from 3 to any number desired.
ReviewRubric 1Rubric 2Adding Some Moving DecorationModifying The Moving Decoeration
MAKING SURE PREVIOUS FILES ALL WORK After we get everything set up
with links, we should go through and make sure our previous files are working. If a picture has been left out or misnamed, it can make the whole page suffer. We don’t have to redo projects. However, give yourself the credit you deserve and correct any small mistakes seen.
Page FunctionThe page has to be functional. A functional index.htm will list all the things that are available for the visitor to see. Make certain that each link actually works. In the future, the teacher will go to the index.htm to look for files. If the file is hidden and not found, a student may not get the credit they expect.
PAGE AESTHETICS The page should look professional.
Colors and pictures should be balanced to add to the look but not overwhelm the user with craziness. It could be fun to have a link to a page that goes crazy, but that is for another time, not for the index. Try to keep the format of each of the units displayed in a way that is congruent. If each table cell has a picture and a text, it will be consistent and easier to understand.
Linking to PeersEach of the other students in this class is
setting up their work in the same way you are! If John Smith helped you, or you helped John Smith, give them credit (or take your credit) by linking to their page and explaining what happened. For example, to link to a student named Scott Bunin you can put in “../scottbunin/index.htm” to get to their main index page. The .. Will automatically back up a folder and then find our peer.
REVIEW Making sure previous files all work Page Function Page Aesthetics Linking to Peers
Linking to Outside ReferencesWhen we get information from an
outside source, we should say where we got it from. For example, We were assigned to look at the Dynamic Drive web site so we should give them the credit. If we don’t credit them, then it looks like we are trying to pretend that we made the idea our selves and people won’t take us seriously.
BUTTON LINKS Another way to have a link on your page
is to have it set up in a button. A good example of this is on scottbunin.com. If you want to see how it is done, or how any site is done, Internet explorer enables a person to view the source. In Internet explorer, click on view or press <alt> + <v> to get the view menu. Then, click on source. You can look at what is there for examples on your own page.
College MajorsThere are different majors that can use
JavaScript and HTML coding for student success. First, computer science is for those of us who want a deeper look at understanding how computers work. To specialize in specifically making web pages, courses on Web Development can be found for their own major. Finally, any modern college class is going to use the computer as a communication tool, even if computers are not the main focus of the curriculum.
CAREERS Getting work in web development isn’t
easy because the market is very competitive with smart young programmers. If you want a career in web programming, you don’t have to wait. Start by producing a series of professional pages as examples of your abilities. Some students could use the pages we made in class (if they are good). After you have some examples, look around on the Internet. You may be surprised to find a LOT of people can’t do what you can.
ReviewLinking to Outside ReferencesButton LinksCollege MajorsCareers
