Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC...
-
Upload
june-lucas -
Category
Documents
-
view
212 -
download
0
Transcript of Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC...
![Page 1: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/1.jpg)
MTT Competency 003:BStudy Guide
Diana CedilloEDTC 6343_61
Fall 2012
![Page 2: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/2.jpg)
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
![Page 3: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/3.jpg)
“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?
![Page 4: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/4.jpg)
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
![Page 5: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/5.jpg)
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
![Page 6: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/6.jpg)
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
![Page 7: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/7.jpg)
To use a tiled image (texture or picture) for your background: <body background="mybackground.gif">
Background
![Page 8: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/8.jpg)
Hyperlink<a href="http://www.google.com">
Send E-mail<ahref="mailto:[email protected]">
Elements-Hyperlinks
![Page 9: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/9.jpg)
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
![Page 10: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/10.jpg)
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
![Page 11: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/11.jpg)
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
![Page 12: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/12.jpg)
Basic Text EditorsNote PadWord PadText EditUltra Edit
Creating a Web Page
Web Page Editors
Microsoft Front Page
Macromedia Dream Weaver
Macromedia Contribute
![Page 13: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/13.jpg)
Creating Your First Website
Dreamweaver CS4
![Page 14: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/14.jpg)
Who wants test their speed?
http://www.superteachertools.com/speedmatch/online3/game1348715258/
Game
![Page 15: Diana Cedillo EDTC 6343_61 Fall 2012. THE MASTER TECHNOLOGY TEACHER KNOWS AND APPLIES BASIC STRATEGIES AND TECHNIQUES RELATED TO WEBSITE MASTERING. B.](https://reader036.fdocuments.us/reader036/viewer/2022072014/56649e7e5503460f94b810e7/html5/thumbnails/15.jpg)
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