MTT Competency 003:B Study Guide

MTT Competency 003:BStudy Guide Diana Cedillo EDTC 6343_61 Fall 2012

COMPETENCY 003:B THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B. Knows how to create and edit Web pages using appropriate tools, design principles (e.g., size and type of graphic files, font size and color, backgrounds) and page elements (e.g., hyperlinks, HTML tags, alt tags for accessibility).

What is a web page? “A web page is nothing more than a file, a HTML file to be exact. It's called HTML because web page documents have the file extension .html or .htm. HTML stands for Hyper Text Mark-up Language” (Barta).

A “Bit” About Files A file extension tells a person what kind of file it is. Every file has a file extension. Example: file name ---> diary.txt <--- file extension

File Extensions

Text: Color, Size and Face Hexadecimal Values Six digit number and letter combination that represents RGB (Red, Green, Blue) Range 000000 (Black font) to FFFFFF (White font) Size and Face

Background To use a tiled image (texture or picture) for your background: <body background="mybackground.gif">

Elements-Hyperlinks Hyperlink <a href="http://www.google.com"> Send E-mail <ahref="mailto:dmcedillo@gmail.com">

Elements- HTML tags Four Basic Tags <html> <head> <title> <body> Web Page HTML Tag Example <body> <a href="http://dianacedillo.blogspot.com/">D. Cedillo's Blog</a> The purpose of this blog is to inform students, staff, and administrators on the latest technologies that can be incorporated into a classroom setting. </body> </html> Live Link

Tag Rules Rule 1. All tags are enclosed in angle bracekts: < > Rule 2. Every tag that is opened must be closed. Open tag looks like this: <html> <body> Closed tag adds a forward slash and looks like this: </html>< /body> Rule 3. Tags tell the browser both what (attribute) and how (value) to do it. To align a paragraph in the center: Rule 4. Multiple attributes should be added to a tag in series. Your text is here.

Add an Image When you add an image, it is as simple as telling the browser what image to display and where to find it. <imgsrc=“imagename.format”>

Creating a Web Page Basic Text Editors Note Pad Word Pad Text Edit Ultra Edit Web Page Editors Microsoft Front Page Macromedia Dream Weaver Macromedia Contribute

Creating Your First Website Dreamweaver CS4

Game Who wants test their speed? http://www.superteachertools.com/speedmatch/online3/game1348715258/

Resources • Asher, Pat. (2000-2011). Learning Center at Ancestry. Pat’s Web Page Tutorials. Web. Retrieved from http://freepages.computers.rootsweb.ancestry.com/~pasher/basichtml.htm#backgrnd on 26 September 2012 • Barta, Joe. Page Tutor. Web. Retrieved from http://www.pagetutor.com/html_tutor/index.html on 26 • Super Teacher Tools. (2012). SuperTeacherTools.com. Web. Retrieved from http://www.superteachertools.com/speedmatch/online3/game1348715258/ on 26 September 2012. • Trani, Paul. (2009). Creating a First Web Site with Dreamweaver CS4. Lynda.com. Web. Retrieved from http://www.lynda.com/home/Player.aspx?lpk4=56652&playChapter=False on 27 September 2012.

MTT Competency 003:B Study Guide