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:dmcedillo@gmail.com"> 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>&nbsp;</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.