Sparks 
Fly
[Home] [PBS
VideoDatabase] [Social Studies] [TSU]
[UVA]
|
Sparks
|
|
HTML Basics Links, Graphics, Frames Practice Code a page Include the following Background color, Text color Headline followed by a horizontal rule Paragraph in the body that is indented at both margins and justified Change the font face, size and color and type more information Add a list Browser Save Colors
Creating Links Linking to other files (relative linking) Tag called anchor--tells browser where to find the file <A HREF="path/filename.html">anchor text</A> <A HREF> Creates an anchor to a reference (a location you specify) the </A> closes the anchor the anchor text is what you click on to activate the hypertext link Creating Links Linking to other sites (absolute linking) You need to be very specific and watch the typing--this link is to a web address <A HREF="http://web_address">Sparks’ Fly</A>
Creating Links Linking to the same file This allows the reader to jump to a place in the document without having to read the whole thing First--must leave a bookmark or pointer in the file then create the link Pointer tag <A NAME="xxxx"> Link tag <A HREF="#xxxx">anchor text</A> You must include the # to tell the browser to look for the pointer and not a different file. Creating Links Mail to links Way to receive messages from visitors to your web page <A HREF="mailto:e-mail address">anchor text</A> Link Color Three different types of link but usually only two colors are used for types of links Unvisited links LINK= Visited links VLINK= Active links--this changes so fast not usually necessary to change Add the link color commands to the Body color tag code line <BODY BGCOLOR="0099BB"TEXT="6600DD"LINK="00FF00"VLINK="FF0000"> Exercise Create a link that takes you to the Sparks’ Fly site at https://members.tripod.com/cynthiasparks Test it Graphics A picture is worth a thousand words, that’s why it take a thousand times longer to load!! Heather CarrCopyright--be careful and be sure you check before using the graphic Loading depends on size of the graphic, small loads much faster type of graphic--.gif faster load than .jpeg Graphics .GIF type of file used for clip art Graphics Interchange Format .JPEG type of file used for photos Joint Photographic Expert Group format <IMG SRC="file_name"> Image Search--searches for the graphic and loads it into your Web page Be sure to put graphics files in same directory as web page to make loading faster Graphics Downloading Graphics Files Great search engine for web "stuff" http://www.looksmart.com Search for backgrounds, animations, clip art, etc. Find file you want to download (download OR) Position the mouse over the image and right click and hold down Choose Save this Image As Save As dialog box appears Save to directory where you have web page files Click OK (graphic is saved to your selected location) Alignment—Graphics Alignment Where will the image appear on your page (automatically left) <IMG SRC="graphic filename" ALIGN="RIGHT"> You can choose Right, Left, Middle, Bottom, Texttop Labeling To get the box that appears when the mouse moves over the graphic Command is an attribute of the img src command alt Example <img src="cat.jpg" alt="My pet"> Image as Link Use same link command Insert image command in place of the area where you would place the text you wanted to be active Example <a href=" https://members.tripod.com/cynthiasparks"><img src="laptop.gif" alt="Sparks Fly"></a>Text and Graphics Alignment divisions tag To justify left or right use the <div align="center/left/right"> Place before the image tag and the </div> to close it To wrap text around the image use the <align="bottom/top/middle/absmiddle"> Example <img src="cat.gif" alt="My Pet" border=0 align="top"> Trouble with Graphics Check the filename The file and the html file are not in the same directory Check in Windows Sometimes Windows adds an extension to a file without telling you You think the file is cat.gif because that is what you named it Windows may have added another suffix so that the file is actually named cat.gif.gif Exercise Graphics Select a graphic that represents you to be the theme graphic for your page Insert it and add the alt text Place text around a series of graphics using all the options Select an animated graphic to represent a e-mail concept and position it at the bottom of your page Creating Frames Frames divide a single browser window into multiple windows Sub-windows then can view different pages Two types of web documents Body documents--display in a single window Frameset documents--divided window with URLs referencing to the document the browser is to display in the windows Creating Frames Replace the <BODY> tag with <FRAMESET>…</FRAMESET> You must now include tags that indicate the number of frames to be viewed on the page Once this is done use the <FRAME SRC="filename"> to tell the browser what to show in the window Creating Frames Split the window vertically Change the <BODY> to <FRAMESET COLS="25%,50%,25%"> On the next line indicate the files to be viewed in each frame <FRAME SRC="filename"> <FRAME SRC="filename"> <FRAME SRC="filename"> The web page will have three vertical windows with each of the referenced files on view Creating Frames Splitting Horizontally Change in the FRAMESET command the COLS to ROWS <FRAMESET ROWS="25%,50%,25%"> This creates specified percentage frames for the window of any browser Creating Frames Elastic frames Enlarges or gets smaller depending on how much room is left in the window <FRAME SRC="25%,50%,*"> This creates a window of 25% one of 50% and the last whatever is left over It is a good idea to always create one elastic window to account for different screen sizes Invisible Scrollbars on Frames Attributes of the "frame scr" tag Remove scrollbars "scrolling-no" Remove borders "frameborder=0" Where to hang your website Free servers that are willing to host http://www.freewebsites.netSelect your host based on your needs Program used to create site Method of upload to site Size of website Exercise Create a framed document Place your opening activity in one frame and the class practice activity in another frame Make the scrollbars disappear and the borders so that the frame has a seamless appearance Web Page Elements Title bar Defines the web site Appears in the bookmarks First words that appear in a browser Menu bar Navigation for site Can be icons (pictures) or words or both Web Page Elements Location Specifies the web address (appears in the location bar You can determine this Check with your ISP host Should be easy to remember Navigation Two schools of thought about navigation within websites Long, scrolled page(s) Shorter, linked pages Frames Divided page with one commonly a navigation bar Site Links Often at the bottom of the page Usually refer to internal links but can include external links also Content Title graphic/logo Unique image that ties the site together Appears on all pages of the site Body copy The meat of the site The information that is what the site is all about Website documentation Reference to the author/webmaster Should be clearly stated Should include credentials Sponsoring institution Commercial or organizational affiliation Date of last update Can also include date created Count of the number of times site is accessed URL of the site itself Contacting information Either of the author, webmaster Usually an e-mail link Effective Writing for Web Pages Writing for the web is different from print writing Computer screen makes reading difficult Average speed off computer screen is 25% of that from print Small type difficult to read Attention is hard to get and retain from web surfers Bottom Down Approach Surfers want to know immediately if the page is relevant to them Conclusion or summary is usually placed at the top Bottom Down or place the purpose main point first Seems weird but…millions of pages in competition Have to show surfer why he/she wants to stay and read your site Bad Sites—Viewers Move On "Moby Dick" Word heavy Text, text, text "Pictures" Extensive graphics slow the load speed Blinking and bouncing graphics Banners—java scripts Rules for Writing Effectively Topic, its main idea, and its conclusion Immediately visible Easily located Knowable Ideas rule structure Main ideas at the "top" of screen Supporting and secondary info below Structure of the content and the website Readily recognizable to visitor Simple construction best Limit one idea to a group of words Avoid technical terminology Unless you provide definition Avoid lingo Data, detail, complexity Subsequent pages Logical placement Don’t cover too much on any one page Subsequent page(s) Apparent by link Consistent with predecessors Detailed information Available through links for printing Placed in a logical form for printing Edit out the superfluous No matter how clever Detracts from message Spell check Don’t depend totally on this Have independent proofreading Always focus on the message Invite feedback mailto for comments, suggestions, questions Ignore idiotic responses (don’t respond to them) Formatting Each page consistent Use a table to create margins Leave white space Use of graphics Reinforce text Elaborate on text Highlight text Replace text NOT be meaningless and distracting But you thought it was cute! |
| This page was updated on: 04/10/02 |