Web Site Design

1. Web Site Design Malden Public Library YA Summer Reading Program Ms. Adams

2. Online Safety • Don’t use your real name (NarutoFan27) • Don’t post personal information where people can locate you • Don’t post pictures of yourself • Don’t tell anyone your password

3. Be Safe • Be as general as possible • Draw a caricature of yourself. • Make a picture of your favorite quote. • Take a picture from a free clip art site. • Take a picture of yourself and use photo editing software to make it not look like you anymore.

4. Hi, my name is Isabella DiMarco and I’m a 14 year old year who lives in Malden. If you want to be my friend, text me at 781-324-0218. Hi, my name is CuteSkaterGirl and I live right outside Boston. Hi, my name is HeavyMetalFan88776 and I live in Massachusetts. I like listening to metal a lot. I went to see Metallica last year and they were awesome. If you want to talk to me about metal, send me an email at johnnylovesmetal@hotmail.com. I hate homework sooooo much. My stupid teacher Ms. Adams gives us like a ton of work all the time. I mean, we’re only in eighth grade, duh. I had to go pick up Suzi, the girl I babysit for, from day care and it is a long walk from Cheverus and I thought my backpack was going to bust open. I HATE my boss. He’s such an idiot. If it weren’t for the fact that I owe my dad five hundred dollars for my car insurance, my waitressing days at China Wok would be over. I am so mad at AZ for breaking up with TM. She cried all through lunch even though we tried to tell her he’s a jerk. Compare

5. Things to make a website about: Your favorite hobby Your poetry Your favorite TV show or movie Life in general

6. Good Web Design • Pick colors that look good together • Make sure the text is legible. • Only use simple fonts (Times New Roman, Arial, Helvetica) • Make sure your images are small • Don’t use animated GIFs or scrolling marquees • Don’t use frames • Don’t use too many different fonts (one for headlines, one for text) • Don’t put too much text on one page • Make sure your navigation is clear and consistent

7. Let’s Make a Website • What you see is what you get (WYSIWYG) • Build a website while looking at what it will basically look like. • First, we’ll take a look at a WYSIWYG Editor and what you can do with it. • Then, we’ll look at the different parts of a sample website and then you’ll learn how to recreate it.

8. My Awesome Website • Header • Navigation • Main Text

9. Layout • Make a layout using tables • This layout has two tables.

10. Header • The website has an image at the top that says the name of the website. This is a good place to experiment with fonts. • If you are using text, you can only use fonts everyone has on their computer (ie. Arial, Times New Roman). If it’s an image you can use whatever you want.

11. Navigation • You can make your navigation using text or images and links. • You can put it at the top or the side of your website. • You want the navigation to look the same on all of your websites so that it is easy to find.

12. Main Text • You can write whatever you want. In this example we also included some pictures.

13. Make a Layout • Create a Table with two rows and one column; Make the width of the column 800 px and the border 0.

14. Make a Layout • Put your cursor in the bottom row and click create table. Make a table with one row; two columns. Make the width of the column 800 px and the border 0.

15. Insert an Image • In the top row of the website we want to put an image. Click on Image and then Choose file. Click on title.gif. Type in something under alternate text. That shows up if the image doesn’t load or for blind people with screen readers.

16. Navigation • In the bottom left half, we will put our navigation. For now, put the following catagories: • Home • Links • Games • Blog

17. Navigation • Navigation isn’t useful if it doesn’t take you anywhere. Turn those words into links by highlighting each word, clicking on the Link button, and typing the name of the file. • Home = home.html • Links = links.html • Games = games.html • Blog = blog.html

18. Colors • You can change the background color of the entire page, tables, or table cells. • Under format, click on table cell properties or page colors and backgrounds. • Choose colors that will look good together. • It is usually a bad idea to change the color of links since people are very familiar with them. • If you do change the link color make sure that the colors are different for link text versus visited links.

19. Make New Pages • Don’t start from scratch • Go into the Web Design Class folder on the desktop • Copy the index.html file • Paste it three times • Rename the files – links.html; games.html; blog.html

20. Links Page • Open links.html • Make a link to your favorite website like you did for the navigation • Insert google.gif and change that to a link in the image menu. Do not check the box for border.

21. Games • Go to http://www.addictinggames.com • Click on Embed Games • Find a game you like and copy the code that is underneath it. • Other games websites may have similar codes.

22. Games Website • Open games.html • Click in the bottom right part of the table. • Delete the text that’s in there. • Click on Source (tab at bottom of screen) • Don’t click anywhere else unless you need to scroll. Paste the code there. • Hit control-S to save and go back to Normal • You may not be able to see the game. Go into the folder and double click on games.html to open it. The game may be too wide to fit in your table nicely.

23. Blog • Even though we made a website for your blog, I would not recommend using it. • Instead, sign up for an account with blogger or live journal. This makes managing your posts easier. • Blogger is best if you are writing about topics anyone can read about, like TV shows or movies or books. • Live Journal is best if you are writing about yourself. You can “Friends-Lock” your posts so only people you know in real life can read them. • You need to be 14 to sign up for these services unless you have permission from your parents. • If you do create your own blog, make sure you change the link in the navigation to your new address. Use the full address: http://rockergirl27.livejournal.com

24. Basic HTML Use Tags to Build a website: <html></html> This is a website <head></head> This is the header <title></title> This is the title <body></body> This is the body <p></p> This is a paragraph <br></br> Insert a line break <font></font> Change the font <a></a> Link to this <img></img> This is a picture

25. The Most Basic HTML Only <html> <head> <title>Awesome Website</title> </head> <body> <p>This is my super cool website.</p> <p>If you want to see another website, go <a href=http://www.maldenpubliclibrary.org>here</a>.</p> <img src=“dog.gif” alt=“This is a picture of my dog”> <a href=“dog.html”><img src=“dog2.gif” alt=“Another picture of my dog”></a> <br>Click on that picture to see a website about my dog. </body> </html>

26. Create a table in HTML <table> <tr> <td><p>Hi</p></td> <td><p>What’s Up?</td> </tr> <tr> <td><p>Fun!</p></td> <td><p>Tables</td> </tr> </table> Table = Here’s a Table TR = Here’s a new row TD = Here’s a new column

27. Help Yourself • Start out using a WYSIWYG editor. Learn HTML to fix things that you can’t do with the editor. • Learn more HTML as you go. Best website: http://www.lissaexplains.com

28. Web Hosting • Sign up at http://www.bravenet.com