Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Beginning Web Publishing • Community Information Toolkit • Video # 2 Agenda • Overview of HTML – Basic concepts • HTML Authoring Tools • Working with Digital Images – Formats; ways to use images – Using Scanners and Digital Cameras • Image Editors • Principles of Good Web Design Before We Begin: A Word About Copyright • Most content on the Web is copyrighted • The copyright symbol © is not required • It is generally not acceptable to republish text and images from Web sites -- nor from books, magazines, etc. – Even if your use is non-profit • Civil and criminal penalties apply • Get permission, or don’t do it! http://lcweb.loc.gov/copyright CGI Scripts Java Streaming Media JavaScript Active Server Pages Shockwave Animated GIFs Static HTML Pages Basic Web Server Basic HTML: Your Primary Publishing Medium • HTML is a rich presentation language • HTML, along with inline graphics, offers many ways to control how your content appears • HTML can be: – Written on any platform – ...Using a wide variety of authoring tools – Delivered by any Web server What Makes a Web Document? • The basic document language for the Web is HTML -- HyperText Markup Language • HTML editing is analogous to using word processors such as MS-Word, except: – You’re designing for a Web browser window, not the printed page – The codes, or tags, are visible to the author HTML: Text and “Tags” Reside in the Same File <title>Community Information</title> ... <h1>Welcome to Smallville</h1> <p>Smallville is a picturesque town on the banks of the Au Sable River </p> <title>Basic Web Sample</title> <h1>A Sample HTML Document</h1> The Browser Interprets Your HTML Tags ... HTTP: HyperText Transfer Protocol Web Server User’s Web Browser The Internet HTTP session www.smallville.mi.us HTML document user.isp.com Definitions • Web browser: software used to "surf" the Web – Netscape Navigator, Microsoft Internet Explorer, Web TV browser, Opera • Web server: hardware and software that deliver Web pages on demand • Web "page": a single HTML document as displayed by a Web browser – One page may consist of multiple files on server • URL: "Uniform Resource Locator" = the address of a Web server or a Web page Common File Types • Most basic Web site has only two file types: – HTML, for HTML documents – GIF: Graphics Interchange Format • For photographs, logos, diagrams, charts referred to in your HTML documents • Many additional formats are used – JPEG: Image format well-suited to photographs – Innumerable special formats Your Jobs as a Web Author • Prepare HTML files – By hand or by using “authoring tools” • Prepare image files – Scanned images, or created with “drawing” programs • Organize files into a coherent site • Place files on server • Check to make sure everything works “Manual” HTML Editing • Any word processor will work just fine • “Flat file editors” are good for manual HTML construction – Windows WordPad is a good choice – On Mac, BBedit is popular • Strategy: – Create and edit files on local hard disk – Review progress using browser – When satisfied, move files to server Using a Text Editor -“Blank Slate” Approach <h1>Editing</h1> Type text and tags into your favorite text editor… Windows Wordpad Is Popular for "Hand" Editing HTML Wordpad Window Netscape Browser Window When Manually Editing, Hop Between Wordpad and Browser Using the Windows Taskbar to return to WordPad HTML Overview Basic HTML Document Structure [ [ <html> <head> <title>The Historical Society of YourTown, Michigan </title> </head> <body> This is an HTML document about our historical society. </body> </html> The <HEAD> tag marks “front matter” such as the document (page) title. The <BODY> holds the text of the page Notes About HTML Tags • “Case” doesn't matter – <title> and <Title> and <TITLE> and <tiTLe> are all the same • Spacing in your source document doesn't matter – Include as many carriage returns and extra spaces in your source document as you wish – Web browser looks only at tags to determine layout on screen Paragraphs <P> <h2>Paragraphs in HTML</h2> <p> This is paragraph 1. </p> <p> This is paragraph 2. </p> Headings <H1...H6> <H1>High School</H1> <H2>Middle School</H2> <H3>Elementary Schools</H3> <H4>Pre-Schools</H4> <H5>Library Storytimes</H5> <H6>Other Education Organizations</H6> <CENTER> Tag: Centers Text within Windows <CENTER><H1>Welcome to The Historical Society of YourTown, Michigan</H1></CENTER> <HR> - Horizontal Rule <BR> - Break ("hard return") <HR> <H3>Contact Information</H3> <B>The Historical Society</B><BR> 1212 Main Street<BR> YourTown, MI 48195<BR> Each <br> causes local carriage return, no line feed Creating Links: The Anchor Tag All Anchor Tags have three parts... <A HREF="name and location of document"> Text that appears as a link</A> The Beginning Anchor Tag The text or image(s) that the user would click on The End Anchor Tag Creating Links to Other Web Sites <H3>Contact Information</H3> <B>The Historical Society</B><BR> 1212 Main Street<BR> YourTown, MI 48195<BR> <HR> <A HREF="http://milf.tln.lib.mi.us/mcin/comm.htm">Go to the Milford Community Network</a> Background Colors <HTML> <HEAD> <TITLE>Backgrounds</TITLE> </HEAD> <BODY BGCOLOR="#0000FF"> This page has a blue background. <P> </BODY> </HTML> Background Images <HTML> <HEAD> <TITLE>Background Images</TITLE> </HEAD> <BODY BACKGROUND="mi.gif"> This page has the state of Michigan as a background. </BODY> </HTML> Basic Tables <TABLE> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE> Placing an Image into an HTML Document <IMG SRC="yahoo.gif” ALT=“Yahoo Logo”> <p> <IMG SRC="yahoo.gif” ALT=“Yahoo Logo”> <A HREF=“http://www.yahoo.com">Yahoo</A> </p> <p> <A HREF="http://www.yahoo.com” ALT=“Yahoo Logo”> <IMG SRC="yahoo.gif"> </A> Yahoo </p> Organizing Your HTML Files on the Server /home/webdata/ index.html picture1.gif /topic1/ index.html picture1.gif topic1a.html topic1a.gif /topic2/ ... Web Server www.smallville.mi.us Relative and Absolute References to Same File... http://www.smallville.mi.us/topic1a.html …includes this absolute reference to topic1a.gif image: <img src="http://www.smallville.mi.us/topic1a.gif"> /home/webdata/ /topic1/ ... topic1a.html topic1a.gif http://www.smallville.mi.us/topic1a.html …includes this relative reference to topic1a.gif image: <img src="topic1a.gif"> Server File Layout Determines Each Page's URL http:// www.smallville.mi.us Protocol Server Address /events/may.html Path to File Those Are the Basics • With basic tags… • …and simple inline images • You can build a very effective Web site • So start writing Web pages now! • You can learn fancier tricks of the trade later HTML Authoring Tools Authoring Tools • Translators – Translate from another format to HTML – MS Word, WordPerfect, Pagemaker, etc • HTML Editors – What You See is What You Get – Adobe Pagemill, Netscape Composer, HTML Assistant Pro, MS Frontpage Tables: Much Easier With an Editor HTML Forms: Easy with Authoring Tools <FORM> <H3><FONT COLOR="#000000">Smallville Softball Reservations</FONT></H3> <P><FONT COLOR="#000000">Which field do you want?</FONT></P> <P><FONT COLOR="#000000"><INPUT TYPE="radio" VALUE="radio" NAME="radio253910" CHECKED="1">Moseley Park<BR> <INPUT TYPE="radio" VALUE="radio" NAME="radio254583" CHECKED="1">Hines Park<BR> <INPUT TYPE="radio" VALUE="radio" NAME="radio255700" CHECKED="1">Gardiner Park</FONT></P> <P><FONT COLOR="#000000">What date? <INPUT NAME="name" TYPE="text" SIZE="25"><BR> What time?<INPUT NAME="name" TYPE="text" SIZE="25"></FONT></FORM> FrontPage: Authoring Tool and Web Project Manager • What You See Is What You Get (WYSIWYG) editing • Add pages, links using graphical commands • Each new project is called a FrontPage "web" • Multiple "views" of your site • Built-in tools for specific applications – Comment forms, simple discussion forum Navigation View Folder View Hyperlink View – Visualize Internal Links The FrontPage Editor In Normal View The FrontPage Editor in HTML View FrontPage: Predefined Themes Pre-Created Templates Managing Files with Authoring Tools • Many authoring tools automate the process of publishing pages • “One-button publishing” – A little tricky to set up – Webmaster may have to install extensions on server – Just click "Publish" button when done editing a page Manually Moving Files to the Server: WS-FTP Example logo.jpg logo.jpg Netscape Composer OneButton Publish Site Management • Some authoring tools provide ways to manage an entire site – Beyond editing individual pages • Other advanced features: – Check link integrity • Identify links that point to dead sites or missing files – Validate HTML (make sure tags are valid) – FrontPage: project management features • Assign tasks to team members • Set priorities, update status FrontPage Project Management • Define tasks to be done • Assign to team members, give priorities Web Sites That Evaluate Your Web Site • Tools to examine your site – HTML validity – Link integrity – Speed of page downloads – Whether your GIF images are optimized • Can offer many of the advantages of authoring tools • Easy to apply to your entire site NetMechanic: Check Your Site’s HTML Validity, Links, etc. NetMechanic Setup NetMechanic Results Working with Digital Images Digital Image Input Choices • Digital cameras • Scanners • Have photo lab deliver in digital form – Floppies – Photo CD – Even directly to the Web Scanners • From paper to digital documents • Newsletters, pages from books, photographs -- even small objects can be scanned • Three basic kinds of images to scan: – Photographs – Line art – Text Types of Scanners • Most applications call for flat-bed scanners – Useful for most everyday applications – Some offer automatic sheet feeders • Useful for bulk scanning jobs • Many other scanners exist – 35MM slides, negatives – Book scanners, handheld scanners Choosing a Scanner • Many brands to choose from: HP, Visioneer, Canon, Epson, Umax... • Quality varies with price – Probably want to spend at least $300 – More expensive scanners offer better resolution, faster speed • You want at least 600 dots per inch optical resolution – Look for at least 24 bit color – Check for bed size, speed of scan Software Bundled with Scanners • Image editing software – E.g., Adobe Photodeluxe, Corel Photopaint • Software to perform optical character recognition (OCR) – E.g., Caere Ominpage, Xerox Textbridge • Related tools: Adobe Acrobat, fax software, image file managers, etc. Installing Your Scanner • Unpack • Install the software • Connect the scanner to the PC – Parallel (printer) port • Often use pass-through to your printer – SCSI • Not all PCs have this (all Macs do) – USB: new Universal Serial Bus -- autoinstalls under Windows 98 Installation is Easy under Windows 98 • Plug scanner into USB port • Automatic software installation • Your PC must have a USB port! Steps In Scanning • • • • • Position your original on the bed Close the cover, power on Start your software Select Preview Use the mouse to select part of page to scan… • …or leave to full-page if desired Getting Ready to Scan Preview and Select Area to Scan Setting the Output Type Setting the Resolution • A relatively low resolution may work well • E.g. 150 dots per inch • Computer monitor screens only offer about 72 dpi • You may need higher resolutions if: – Your readers will download and print the file – You will manipulate the file with an image editor OCR Results Letter from the AFCN President Greetings all! Well, it's been more than a month since our get- together in San Jose, and what a fine gathering it was. I am also glad to report I had the opportunity for a nice drive Scanning Tips • Scan multicolumn text one column at a time • Choose the right resolution and screening for photographs • Choose a vector format if you’re scanning in a logo or graphic to reuse • Use image editor to crop, resize, finetune • Watch file sizes on what you serve! Image Editing Software Working With Images • Get a good image editor – Paint Shop Pro (shareware) – Adobe Photoshop – Adobe Photodeluxe • A stripped-down version of Photoshop • With many user-friendly features and effects – Corel PhotoPaint What Image Editors Can Do • Convert among various formats • Rotate images • Resize or crop images – Standard video monitor is at least 640 X 480 pixels • Adjust contrast, brightness, number of colors • Add text, even combine images • Apply a variety of special effects Adobe PhotoDeluxe Example PhotoDeluxe Effects PhotoDeluxe "Sketch" Effect Image Size Matters • Reduce your image to the minimum possible to convey your meaning – A 100 kilobyte image is too large!!! – Reduce size of image – Reduce number of colors in image – Use a GIF optimizer in image editor • Use thumbnails instead of full-size images – Thumbnail is small, points to larger image <a href=“large.jpg”> "Thumbnail" Concept <img src=“small.jpg”> </a> Thumbs-Plus Software: Automates Web Thumbnails Working With Colors • Digital color representation requires compromises • Video cards, monitors, and software each have their own characteristics • Newest computers have 24 bit color – Over 16 million colors; known as “true color” • Older PCs have less capability – As few as 256 colors Minimize Number of Colors • Video cards, operating systems, and browsers have limits on color handling • Minimize the number of different colors you use • Use 216 or fewer distinct colors per page: – Speeds up page loading – Ensures better control over final display Browser-Friendly Palette GIF Features to Explore • Transparency – Pick a color in your image to render as transparent • E.g. the wall behind a human subject – The picture will blend into the Web page • Animation – This is how banner ads work – Very easy to set up • Many image editors can handle transparency and animation Principles of Good Web Design 6/12/98 tmw Characteristics of a Good Web Site • • • • • Well-organized Easy to navigate Attractive Useful Up-to-date Steps to a well designed Web site • • • • • Have a goal Target your audience Create a plan Select a Web service provider Try it out – Using different PCs and browsers – Over slow dial-up lines • Maintain it Few graphics makes it more accessible to everyone. Organized by department. Organized by audience type. Organized by subject. No scrolling necessary to start navigating. Standard tool bars and a brief menu for easy navigation. Avoid backgrounds that wash out your text. Imagemaps can provide easy means of navigation. Tables • Standard text, images or links are arranged in tabular format with or without borders • Pros – Allows creator to place items on a page – Looks neat • Cons – Can be tricky, but tables are amazingly useful to the designer. Tables provide Web designers with control over layout. Frames • Divides the browser's window into two or more scrollable areas – Useful for site-wide menus • Pros – Can provide an area that makes updating or changes very simple – Can help with navigation • Cons – Used improperly can make a huge mess! Frames can be used to provide a static navigation window. Tips • Emulate a site you like. • Pick a style for the site – Test the style before you build entire site • Keep things simple. • Provide a search function if possible. • Test your site – Are pages legible? – Is site easy to navigate? – Does site provide the information users would expect to find? Avoid littering your opening page with your awards. Web Design and HTML References • WebReference.com • WebDeveloper.com • Serverwatch.com • www.zdnet.com • www.cnet.com • … and many more!