Scott Marino MSMIS Summer Session Web Site Design and Authoring Session 2 and 3 Scott Marino

MSMIS Summer Session Topics Introduction to Unix Default home page Page Naming Standards –HTML 4 / Chapter 1 Directory Structure –HTML 4 / Chapter 2 HTML Page structure –HTML 4 Chapter 2,3,5 Paragraph Formatting –HTML 4 / Chapter 2 Fonts and Text –HTML 4 / Chapter 3 Font Sizing –HTML 4 / Chapter 3 Hyperlinks –HTML 4 / Chapter 7 Publishing Basics Assignment / Lab 2

Scott Marino MSMIS Summer Session Introduction to Unix mv Move or Rename a file cp Copy a file rm remove or delete a file ls -rtl list directory contents mkdir make a directory cd change directory vi Visual Interface editor pico editor

Scott Marino MSMIS Summer Session Introduction to Unix chmod - change mode (permissions) –Owner, Group, World –rwxrwxrwx chmod 644 for html files and directories –rw-r--r-- chmod 755 for cgi files and directories –rwxr-xr-x

Scott Marino MSMIS Summer Session Default Home Page Defined by server Delivered when browser points to Different names used, usually defined by installation at hosting company during server installation and setup –default.htm or default.html –index.htm or index.html –welcome.htm or welcome.html

Scott Marino MSMIS Summer Session Web Page Naming Standards Alphanumeric with NO special characters or blank spaces Typically all lower case Use underscores to make words msmis_5599.htm Page names are case sensitive in hyperlinks.htm and.html are most common for static pages –Some server installations require a specific extension

Scott Marino MSMIS Summer Session Web Page Naming Standards.shtm and.shtml are often used for pages that include Server Side Includes SSI to direct the server to parse the page and perform substitution.asp,.jsp, and.php direct the web server to pass the page through the parsing engine before delivery

Scott Marino MSMIS Summer Session Directory Structure /yourdomain/www –for web pages /yourdomain/www/images –for graphic files.gif and.jpg are most common /yourdomain/www/cgi-bin –for common gateway interface files CGI.cgi and.pl are most common –may make subdirectories for shopping carts

Scott Marino MSMIS Summer Session HTML Page Structure HTML tags Pairs –Pairs have an opening and closing tag. Opening tags have the tag between braces Closing tags include a before the tag Standalone –don’t require a close tag All pages start with and end with enclosing ALL the contents

Scott Marino MSMIS Summer Session HTML Page Structure –Contains title, meta descriptions and javascript – closed before the start of the – This appears in the title bar for the page –Contains the main body of the web page and are “nested” between the tags is a horizontal rule (line)

Scott Marino MSMIS Summer Session HTML Page Structure starts a new paragraph close tag is optional –align=center is an attribute and value for the paragraph makes font BOLD makes font Italic

Scott Marino MSMIS Summer Session Paragraph Formatting denotes a new paragraph – is optional and is often omitted A new paragraph starts after a blank line of text to align a paragraph to the left –center and right are the other options HTML ignores more than 1 consecutive blank space –Use to create additional blank spaces

Scott Marino MSMIS Summer Session Fonts and Text Some text here Serif fonts contain the little ends at the tops and bottoms of the letters –Typically for long blocks of text Sans-serif fonts do not have the ends –Used for navigation bars and smaller areas of text Offer choices for the browser since not all computers have all loaded fonts

Scott Marino MSMIS Summer Session Fonts and Text

Scott Marino MSMIS Summer Session Font Sizing Sizes range from 1 to 7 with 1 as the smallest –Size 1 is typically illegible on a Mac –Size 3 is the typical default size for a browser - 12pt and –Make portions of text within a bigger or smaller –Recommended to not mix size=n with big and small tags

Scott Marino MSMIS Summer Session Hyperlinks This is a relative link. This absolute link will take you to Yahoo!. Absolute vs. Relative –For links within your site use relative linking –For links to an external site use absolute linking –Use the same directory structure in your local software as the web site

Scott Marino MSMIS Summer Session Hyperlinks Targets are typically used for frame references. If the site has no frames then the target does not exist, the browser will launch a new window This is useful to keep visitors on your site –The destination is opened in a new browser so the visitor never leaves your site

Scott Marino MSMIS Summer Session Hyperlinks Makes a hyperlink out of an image border=0 removes the border from the image –Otherwise a blue hyperlink border would display around the image Image maps - create with FrontPage or other tools

Scott Marino MSMIS Summer Session Hyperlinks Bookmarks Will hyperlink to the page and bring the “name” to the top of the display screen Allows for linking within a page (like an FAQ page) Allows another page to link to the middle of a page

Scott Marino MSMIS Summer Session Hyperlinks –Hyperlinks to an ftp site, usually to download a file –When clicked activates the default program and creates a blank message –Hyperlinks to the newsgroup

Scott Marino MSMIS Summer Session Publishing Basics WS_FTP or other FTP program –Moves file to the web server from your PC –A shareware version of ws_ftp is available Transfer text files (html, cgi scripts) as ASCII files Transfer images (.gif,.jpg) as BINARY or IMAGE files May need to change permissions (chmod) after FTP’ing a new file

Scott Marino MSMIS Summer Session Assignment / Lab 2 Locate ws_ftp or some other method of ftp software to publish your site Determine the default name for the home page on your site (index.htm, index.html, default.html, etc.) Make a simple “Welcome to my site” page to make sure you can publish to your site