1 / 22

Web Site Design and Authoring

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

rmccrimmon
Download Presentation

Web Site Design and Authoring

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Site Design and Authoring Session 2 and 3 Scott Marino Scott Marino MSMIS Summer Session 1 - 2001

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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 &nbsp; to create additional blank spaces Scott Marino MSMIS Summer Session 1 - 2001

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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

  21. 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

  22. 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

More Related