1. Basic HTML All About Me - Your Name Information for display

2. Topics (10) Title With Student Name and "All About Me" My Favorite Thing To Do My Pet What I Want to Do When I Get Older My Favorite Place to Visit What I Would Spend a Million Dollars On Four more appropriate titles to be selected by student

3. Paragraphs It is important that we show our professional ability by creating paragraphs that are complete. Create a topic sentence that clearly defines what is to be spoken about. Create 3 or more body sentences that reinforce and/or expand upon the topic. Create a conclusion sentence that wraps up the topic and/or moves on to the next topic. With attention to how we write a paragraph, we will communicate successfully.

4. Editor To complete this project, a student will need to create and modify text. Macs come with a program called TextEdit and PCs come with a program called Notepad. There are programs that give more options such as Notepad++. There are also a variety of online editors such as on jsfiddle.net where a web page interacts with a programmer. Start with a simple editor that the teacher demonstrates and keep in mind that we may use any editor we choose.

5. Review Basic HTML Topics (10) Paragraphs Editor

6. Information for display Information for display

7. The tr tag stands for “table row.” The section is ended with. The tag can also contain some additional information such as width=“100%”. By setting the width to 100%, the table will take up the whole screen. Each item inside the row is referred to as a or table data.

8. In the example we used the following: Information for display We could have added a third or fourth item or as many as we wanted. Change the number 50 to make the box take up less or more room.

9. Complete Table Each completed table row should have a paragraph and a picture. A good way to set this up is to alternate. The first row has the paragraph on the left and the picture on the right. The second row has the paragraph on the right and the picture on the left. Find a way to make your table informative and good looking.

10. Review Complete Table

11. The following example will put an image in one of our table boxes: Change the link to the picture with any one you want like something you can find on Google images.

12. (link tag) The following HTML code using the tag to place a link to some centered text: Click here to go to NBA.com

13. Linking Pictures Click here to go to NBA.com

14. Image Height and Width By modifying the img tag, we can specify how much room the picture should take up on our web page. It can sometimes look nicer to have all the pictures the same size.

15. Review (link tag) Linking Pictures Image Height and Width

16. More Tags will create a new line like when you hit enter bold, underlined, and italicized Text This text is centered http://www.webmonkey.com/2010/02/html_cheatsh eet/

17. Functional Considerations The page is functional if it conveys information about the current topic. If the end user is able to look at the page and get an idea of who you are, then it is a success. You are an important and unique individual. Make your web page an important and unique page. Keep in mind the purpose of what you are trying to accomplish.

18. Aesthetic Considerations If a page looks sloppy, people will mistake the programmer for being sloppy. By making the page look nice, we present ourselves in a professional and intelligent way. Keep page formatting consistent and simple. Use colors and pictures where they enhance, but don’t get carried away. Make certain the project has the right amount of artistic touch.

19. Adding CSS #myPicture { position: fixed; top: 150px; left: 5px; }

20. Review More Tags Functional Considerations Aesthetic Considerations Adding CSS

21. Adding a Form This example will create a form with a button on it. The button is reffered to by the computer sa myButton and the end user sees the text Move Picture.

22. Adding JavaScript function movePicture(){ img = document.getElementById("myPicture"); img.style.top = Math.random() * 500 + "px"; }

23. Applications to Other Subjects These kinds of web pages can be about any academic subject. When our English teacher assigns us an essay on a novel, we can make the essay on a web page. Our science report can go on a web page. Our history project can be made on a web page. Practice using your tools as often as you can.

24. Rubric 1. Create a basic HTML file. (20) 2. Include 10 topics. (20) 3. Write 10 paragraphs. (20) 6. Create a table. (10) 11. Place 10 images. (10) 12. Add links to the 10 images. (10) 19. Format TWO pictures with CSS. (5) 21. Add a button that uses JavaScript to move the TWO pictures. (5)

25. Review Adding a Form Adding JavaScript Applications to Other Subjects Rubric