MTT Competency 003:B Study Guide
Download
Report
Transcript MTT Competency 003:B Study Guide
Diana Cedillo
EDTC 6343_61
Fall 2012
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).
“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 file extension tells a person what kind of file it is. Every
file has a file extension.
Example:
file name ---> diary.txt <--- file extension
Extension
.txt
.gif
.jpg
.bmp
.mpg
.avi
.wmv
.doc
.wri
.rtf
.exe
.wav
.mp3
.html
.asp
.php
.css
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
=
Name
Text File
Graphic Interchange Format
JPEG/JIFF Image
Bitmap Graphic
MPEG Animation
Audio Video Interleave File
Windows Media File
Document
Write Document
Rich Text Format File
Executable File
Waveform Audio
MPEG Audio Stream
Hypertext Markup Language
Active Server Page
Hypertext Preprocessor Code
Cascading Style Sheet
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
<font color="#FF0000" size="5” face="fontname">
To use a tiled image (texture or picture) for your background:
<body background="mybackground.gif">
Hyperlink
<a href="http://www.google.com">
Send E-mail
<ahref="mailto:[email protected]">
Four Basic Tags
<html>
<head>
<title>
<body>
Web Page HTML Tag Example
<body>
<p><a href="http://dianacedillo.blogspot.com/">D. Cedillo's
Blog</a></p>
<p>The purpose of this blog is to inform students, staff, and
administrators on the latest technologies that can be
incorporated into a classroom setting.</p>
<p> </p>
</body>
</html>
Live Link
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> <p> <font>
Closed tag adds a forward slash and looks like this:
</html>< /body>< /p> </font>
Rule 3. Tags tell the browser both what (attribute) and how
(value) to do it.
To align a paragraph in the center:
<p align=“center”>
Rule 4. Multiple attributes should be added to a tag in
series.
<font color=“#FF0000” size=“5”> Your text is here. </font>
When you add an image, it is as simple as telling the
browser what image to display and where to find it.
<img src=“imagename.format”>
Basic Text Editors
Note Pad
Word Pad
Text Edit
Ultra Edit
Web Page Editors
Microsoft Front Page
Macromedia Dream Weaver
Macromedia Contribute
Dreamweaver CS4
Who wants test their speed?
http://www.superteachertools.com/speedmatch/online
3/game1348715258/
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.