Web+Design

Missed the first lesson? Copy/Paste this address into a Windows Explorer Window: \\DLINK-ROOM106\Volume_1\introlesson.mts = = = = =**Lesson One: Tag, you're it!**= You can tag anything around you. Classrooms, states, even people. Moving forward from that, upload a screencap of your favorite website below with tags for what you think the elements are.

Part 2 - Can you see where you could replace your tags with some of these common HTML tags?
** ** Surrounds the entire web page. Stands for //HyperText Markup Language//. **** A hypertext anchor, makes a link on your page like this. The HREF attribute tells your browser where to go when you click. ** ** All alone in the world, the img tag places an image on your page, but does not have a paired closing tag. (so the slash goes at the end of the tag) Almost always has the SRC attribute that says where your image is located. **  ** etc... Allow you to format text as headings. H1 is the largest, getting smaller as you go to H2, H3, etc...
 *  ** The body surrounds everything you see on the website. You can use a background or bgcolor attribute to give the page a background image or background color.
 *  ** ... Allow you to create bulleted, and numbered lists. Each list item has a set of **  ** tags around it.
 * ** alows you to create many different form fields, always nested in it's parent ** ** tags. The TYPE attribute determines if it will be a textarea input, submit button, etc.

Part 3 - Classroom Object Page
[] Get in your medium-size groups (on the board) and work together to create a simple HTML page all about a classroom object. (desk, monitor, headphones, etc.) Use the page linked above to find new tags we have not discussed before and try them out. You can use google images to grab pictures if you need them, just copy the entire URL of the picture, and include it within the quote marks of the SRC attribute in your IMG tag.

Once you finish your page, we will be looking at how it relates to web accessibility:
**Important coding secret!** Always use the four main IMG attributes when placing an image in your site. They are: SRC, ALT , HEIGHT , and WIDTH. For example, your IMG tag might look like this: ****

[] (Let's validate your page and see what happens!)

[] (Annotated example of accessible vs inaccessible site)

[] (Some food for thought)

[] (Do your colors contrast well enough?)

Part one screencaps:









Click Edit, Then File, and Upload File. Make sure your image is in JPG or PNG format, NOT PSD.







TUNNEL SNAKES.

WE'RE THE TUNNEL SNAKES.

AND WE RULE RULE RULE