220 likes | 233 Views
Web Site Design and Authoring. Session 2 and 3 Scott Marino. 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
E N D
Web Site Design and Authoring Session 2 and 3 Scott Marino Scott Marino MSMIS Summer Session 1 - 2001
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 Topics Scott Marino MSMIS Summer Session 1 - 2001
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 1 - 2001
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 • http://hotwired.lycos.com/webmonkey/reference/unix_guide/ Scott Marino MSMIS Summer Session 1 - 2001
Default Home Page • Defined by server • Delivered when browser points to www.yourdomain.com • 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 1 - 2001
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 1 - 2001
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 1 - 2001
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 1 - 2001
HTML Page Structure • HTML tags • Pairs • Pairs have an opening and closing tag. • Opening tags have the tag between braces <tag> • Closing tags include a </tag > before the tag • Standalone • don’t require a close tag • All pages start with <html> and end with </html> enclosing ALL the contents Scott Marino MSMIS Summer Session 1 - 2001
HTML Page Structure • <head></head> • Contains title, meta descriptions and javascript • <head> closed before the start of the <body> • <title>This appears in the title bar for the page</title> • <body></body> • Contains the main body of the web page • <head> and <body> are “nested” between the <html> tags • <hr> is a horizontal rule (line) Scott Marino MSMIS Summer Session 1 - 2001
HTML Page Structure • <p> starts a new paragraph • </p> close tag is optional • <p align=center> • align=center is an attribute and value for the paragraph • <b></b> makes font BOLD • <I></I> makes font Italic • <image src=“images/myimage.gif” alt=“This is a cool image”> Scott Marino MSMIS Summer Session 1 - 2001
Paragraph Formatting • <p> denotes a new paragraph • </p> is optional and is often omitted • A new paragraph starts after a blank line of text • <p align=“left”> 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 1 - 2001
Fonts and Text • <font face=“font1, font2, font3>Some text here</font> • 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 1 - 2001
Fonts and Text • <font face="Arial, Helvetica, sans-serif"> • <font face="Times New Roman, Times, serif"> • <font face="Courier New, Courier, mono"> • <font face="Georgia, Times New Roman, Times, serif"> • <font face="Verdana, Arial, Helvetica, sans-serif"> Scott Marino MSMIS Summer Session 1 - 2001
Font Sizing • <font … size=n> • 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 • <big></big> and <small></small> • Make portions of text within a <font></font> bigger or smaller • Recommended to not mix size=n with big and small tags Scott Marino MSMIS Summer Session 1 - 2001
Hyperlinks • This is a relative<a href=“page1.htm”>link</a>. • This absolute <a href=“http://www.yahoo.com”> link</a> 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 1 - 2001
Hyperlinks • <a href=“http://www.yahoo.com target=_blank> • 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 1 - 2001
Hyperlinks • <a href=cooking.htm><image src=“images/chef.gif” alt=“Let’s cook” border=0></a> • 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 1 - 2001
Hyperlinks • Bookmarks • <a name=“ingredients”> • <a href=“cooking.htm#ingredients> • 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 1 - 2001
Hyperlinks • <a href=“ftp://ftp.site.com/path”> • Hyperlinks to an ftp site, usually to download a file • <a href=“mailto:users@domain.com> • When clicked activates the default e-mail program and creates a blank message • <a href=“news:neswgroupname”> • Hyperlinks to the newsgroup Scott Marino MSMIS Summer Session 1 - 2001
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 1 - 2001
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 Scott Marino MSMIS Summer Session 1 - 2001