Summer Web Design Class Day 3

1. “Clap along if you feel like a room without a roof!”

2. Let’s add some more stuff to the basic webpage we began yesterday

Add paragraph, headline, and line break tags:

<p>This is a paragraph. Using these tags will make your content double-spaced.</p>

<h1>This is your largest headline</h1>

<h6>This is your smallest headline</h6>

Simply hitting the space bar will not make your content automatically go on the next line or below other content. You must add line break tags like this:

<br>

Add picture:

Example: <img src=”black dog.jpg” /> or <img src=”mustang.gif” />

Add link:

<a href=”full link URL”>Text that is clickable</a>

Example: <a href=”http://www.medfordma.org/”>This is a link to the City of Medford website</a>

Want the link to open in a new window? Add target=”_blank” after the URL

Embed video:

Go to YouTube.com

Find a video you like, click share, then embed, and copy the iframe code onto your page

3. Fun with JavaScript- what the heck is going on?

Want to try it on your own?

Open Notepad++

Begin a simple webpage:

<html>
<head>
<title>My annoying webpage</title>
</head>
<body>
<p>This is funny but it gets old fast!</p>
</body>
</html>

Save this as fart.html on your computer.

Click here and see if you can figure out how to add the code to your simple webpage to make it work.

4. Want to use JS to make a game?

You have a half an hour to make a game!

You can work with a partner if you want.

Go here to begin.

5. More fun JS tutorials:

http://www.jsdares.com/ (games)

http://codecombat.com/play/level/rescue-mission

https://thimble.webmaker.org/project/59304/remix (robot game)

Build an iPhone game

MHS Web Design

Welcome to our web design class!

Summer Web Design Class Day 3