Embed Size (px)
Citation preview
MTT Competency 003:BStudy Guide
Diana CedilloEDTC 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).
COMPETENCY 003:B
“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).
What is a web page?
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
A “Bit” About Files
File ExtensionsExtension Name
.txt = Text File
.gif = Graphic Interchange Format.jpg = JPEG/JIFF Image
.bmp = Bitmap Graphic.mpg = MPEG Animation.avi = Audio Video Interleave File
.wmv = Windows Media File.doc = Document.wri = Write Document.rtf = Rich Text Format File
.exe = Executable File.wav = Waveform Audio.mp3 = MPEG Audio Stream.html = Hypertext Markup Language.asp = Active Server Page.php = Hypertext Preprocessor Code.css = Cascading Style Sheet
Hexadecimal ValuesSix digit number and letter combination that represents RGB (Red, Green, Blue)
Range000000 (Black font) to FFFFFF (White font)
Size and Face<font color="#FF0000" size="5” face="fontname">
Text: Color, Size and Face
To use a tiled image (texture or picture) for your background: <body background="mybackground.gif">
Background
Hyperlink<a href="http://www.google.com">
Send E-mail<ahref="mailto:[email protected]">
Elements-Hyperlinks
Four Basic Tags<html> <head> <title> <body>
Elements- HTML tags
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>
Tag Rules
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”>
Add an Image
Basic Text EditorsNote PadWord PadText EditUltra Edit
Creating a Web Page
Web Page Editors
Microsoft Front Page
Macromedia Dream Weaver
Macromedia Contribute
Creating Your First Website
Dreamweaver CS4
Who wants test their speed?
http://www.superteachertools.com/speedmatch/online3/game1348715258/
Game
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.
Resources
