Thursday, February 17, 2011

Learning Center 1: Introduction to Web Page Design

This learning center is a reference guide for writing html code.  An html code reference guide is necessary since there is no html textbook for the students to use. The learning center is saved as a webpage and is located in the student drive on the school’s network.  The learning center includes major html code concepts that are taught throughout the course.  During instruction, the learning center is used as a visual to introduce code functions, start tags, attributes, and end tags.  This reference guide provides students with a simple, uncongested view of individual pieces of code.  When students forget a particular piece of code while working on a class assignment or project, they look up the piece of code in the learning center.  Assessment of student learning through the learning center is done via observation of students having the learning center open and formal grading of daily assignments and projects.    


globe Web
Page Design

Quick Reference Guide

Structure Tags      
Function Start Tag Attributes End Tag
HTML File <html>   </html>
File Header <head>   </head>
File Title <title>   </title>
Body <body> bgcolor="color" </body>
    text="color"  
    link="color"  
    alink="color"  
    vlink="color"  
Formatting Tags      
Function Start Tag Attributes End Tag
Heading <h1-6> align="left/right/center/justify" </h1-6>
Paragraph <p> align="left/right/center/justify" </p>
Line Break <br />    
Horizontal Rule <hr>    
Bold <strong>   </strong>
Italic <em>   </em>
Form Tags      
Function Start Tag Attributes End Tag
HTML Form <form> alt="alternative text displayed" </form>
    method="get/post"  
    action="url to send data to"  
Input Information <input> type="checkbox/image/password/radio/text" </input>
    name="name of input"  
Drop-down List <select> option="available option(s) in list" </select>
Multi-line Text Input Control <textarea> name="name of textarea" </textarea>
Push Button <button> name="name of button" </button>
    type="button/reset/submit"  
       
Frame Tags      
Function Start Tag Attributes End Tag
Set of Frames <frameset> src="url of source" </frameset>
    name="name of frame"  
One Frame in a Set <frame /> name="name of frame"  
    target="_blank/_self/_parent/_top"  
    src="url shown in frame"  
rows="number of rows"
Inline Frame <iframe> src="url of iframe"  
    name="name of iframe>  
Image Tags      
Function Start Tag Attributes End Tag
Image <img> src="url of image" </img>
    alt="alternative text displayed"  
    width="pixels"  
    height="pixels"  
Link Tags      
Function Start Tag Attributes End Tag
Anchor <a> href="url to link" </a>
    target="_blank/_self/_parent/_top"  
    name="location"  
List Tags      
Function Start Tag Attributes End Tag
Unordered List <ul> type="disc/circle/square" </ul>
Ordered List <ol> type="1/I/A/a/i" </ol>
List Item <li>   </li>

 

2 comments:

  1. This is a great idea, Mike. I could use this in my HTML class! We use a template, but that just has the 4 main commands.
    We use the shorter tags for BOLD , Italicize .
    I have been working with the students on images, and am making a web page w/different examples, with comments in the code to explain what each is.

    ReplyDelete
  2. Hmm, it did not post my tags. Bold was B, Italicize is I, Underline is U....
    I also developed a jeopardy review for HTML, if you need it.

    ReplyDelete