HTML Authoring

Design  A good website starts its life in the design stage Layout, Color, Sound, Content, Functionality and Maintainability aspects are formed in the design stage.  Designing a website involves: Look and Feel of the site, languages & server resources, programming & data structures involved, the time and programming abilities needed, end user ease, & site maintenance.

Good Design v s Bad Design  What makes a good design? Plan the web site structure Plan the navigation setup Plan the page layout, considering how and where to use color and sound Plan your content The 5 w’s: Who, What, When, Where, Why

Good Design v s Bad Design  Examples of good web design:

Good Design v s Bad Design  What makes a bad design? Poor Planning! The 10 Sins of web design  Examples of bad web design:

Building a Website  Set up the web site folder structure first: Example: public_html/index.html-my home page public_html/assignments/-my assignments public_html/images/-my pictures public_html/include/-my style sheet public_html/multimedia/-my multimedia public_html/templates/-my templates

Building a Website  Create a template file  Use include files for common content  Frames? OK for managing simple websites though beware – frames can be annoying to work with when you have a large website

Building a Website  Other tips: Be consistent E.g. 1. Use a style sheet rather than remember what font style you want to use E.g. 2. If your website uses frames, use the same frame structure throughout E.g. 3. Make comments to yourself in HTML code if it helps:   Remember: Planning and Consistency are the key to a well designed website!

Web Development Tools  What kind of tools can be used? Text editors: E.g.. Notepad, WordPad, crimson editor Specific Software: Microsoft Word Netscape Composer Microsoft FrontPage Macromedia Dreamweaver

HTML Tags  The first tag in every HTML file Indicates that the content of the file is in HTML All text and HTML commands should fall within the beginning and ending tags A Web Page A simple web page

HTML Tags  Reserved section for only a few tags (e.g.. ) A Web Page A simple web page  Each HTML page needs a title to indicate what the page describes  Used by browser’s bookmarks and by other programs that catalog Web pages

HTML Tags  The remainder of the page, including all text, graphics etc. is enclosed within the tag A Web Page A simple web page

HTML Tags  Page Formatting Background color Background Image

HTML Tags  Font Formatting  Alignment ALIGN=CENTER ALIGN=LEFT ALIGN=RIGHT A simple web page

HTML Tags  Hyperlinks Link or anchor tag A simple web page Page 2

HTML Tags  Hyperlinks Relative Pathname HREF=“file.htm”HREF=“assign2.ppt” HREF=“files/file.htm” HREF=“../file.htm” Absolute Pathname HREF=“/user1/joiana/file.htm” HREF=“

HTML Tags  Hyperlinks Mail to A simple web page me

HTML Tags  Tables Holds the table contents and an optional caption Lecturer Subject Cliff Ogleby

HTML Tags  Frames Frameset document This site requires frames.

HTML Tags  Images Inline format: GIF, JPG External format: TIFF, BMP, PNG ALIGN=TOP ALIGN=MIDDLE ALIGN=BOTTOM E.g.. An image as a link

Web Graphics  Animated GIFs

HTML Tags  Inserting Multimedia Flash files Shockwave files Plugins E.g.. A flash animation object:

Useful Links

A Web Page A simple web page body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } Advanced HTML  Cascading Style Sheets E.g.. styles.css sets the style for the body tag Web page - index.html Style Sheet – styles.css

Advanced HTML  Image Maps

Advanced HTML  Layers

Javascript  A programming language for adding functionality and features to web pages.  Javascript is embedded into HTML E.g.. Rollover buttons

Java  Object oriented programming language  Designed with the intent: Write a program once and run it on many different platforms  Java programs are compiled into bytecode  Applets

Flash  Allows vector animation  Is extremely compact  Has streaming capabilities  Used to create entire websites  Used as an advertising tool animations & games

Flash  Examples:    

Flash  Principles of flash animation: Animation sequence based on a timeline Vector objects created in Flash Library of objects of which there can be many instances.