College of Micronesia- FSM Pohnpei State Campus GEORGE S. MANGONON, MBA Chair, Math/Sci Division September 15-25, 2008

 Know the basics of web development using HTML and Frontpage  Develop/design WebPages specifically course or office/division WebPages  Link course webpages/individual webpages into a division or office webpage  Link division/office webpages into the Pohnpei Campus Home Page.  Provide an alternative communication/information/instructional tools for the students using the web platform

 Individual Course WebPages or Office/Division WebPages of the participants 10-Day Activities

HTML Documents  are plain-text(also known as ASCII) files that can be created using any text editor such as Notepad on a Windows machine.  save your HTML documents with an extension.htm or.html.  not case-sensitive HTML Editors WYSIWYG(what you see is what you get) editors such as Frontpage or Dreamweaver You design your HTML document visually, instead of writing the markup tags in a plain-text file and imagining what the resulting page will look like.

 Element – a fundamental component of the structure of a text document - examples are heads, tables, paragraphs, lists HTML tags -mark the elements of a file for your browser Ex. Text of heading - indicates head of the text document -must be enclosed in less-than/greater-than brackets <> in order to be executed by the browser -some tags come in pairs and surround the piece of text ; one tag marks the beginning, and another marks the end of the piece of text. -ending tags require an ending represented by the slash(/) mark; the slash(/) turns off the attribute. -some tags can appear by themselves, indicating an object that should be inserted, rather than text to be annotated.

begins the title of a document marks the end of the title of a document Putting Them together. beginning tag This is the title of my document ending tag

 Head  tells the browser that it is an HTML document  places the title of your page in the browser’s title command line  Body  contains the body of the document (the information seen on screen)

… used to tell what the following section of your page is about has six (6) levels, numbered 1 to 6, with 1 being the largest typically displayed in larger and/or bolder fonts than normal body text Text of heading where n is a number between 1 and 6 (inclusive) specifying the level of the heading

tag (without attributes) produces a horizontal line the width of the browser window used to separate major area of your web page visual divider between sections of a document  Additional attributes:  WIDTH=nfor fixed pixel width  WIDTH=n%for certain percentage of the screen wide  SIZE=nfixed pixel amount thick

controlling thickness solid lines controlling alignment sample

… The paragraph tag adds a line space to indicate the beginning of a new paragraph Any amount of whitespace — including spaces, linefeeds, and carriages returns — are automatically compressed into a single space sample

normally, text will do a word-wrap at the end of a line to have a text BREAK (or go to another line), use the tag has no closing tag Without line break With-line break

 text/graphic may be aligned from the left margin, from the center, or from the right  ALIGN attribute is placed in the opening tag before the greater- than (>) bracket  default alignment is align=left

…  The center tag defines text that should be centered  You can center one word or your whole page  Everything between the tags gets centered html basics day 1

document-body  The body tag introduces the body of the document. It should appear after the head section and occupy the remainder of the document.  document-body document-body  The background attribute specifies an image file to use as the background for the page.

bgcolor- background text- text colors link- links colors alink- active links colors vlink-visited links color rr gg bb – a six digit hexadecimal number blue value green value red value Colour names: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, Yellow, and White

SAMPLE

 …  This list style uses bullets to identify items in a list start with an opening list ( unnumbered list) tag enter the (list item) tag followed by the individual item end the entire list with a closing list tag html basics day 1

 This list style uses numbers, instead of bullets, to identify items in a list

When the text calls for added descriptive/instructional details Often used to produce tables of contents or outlines html basics day 1 sample

Includes a term and a definition No bullets or numbers Can be used whenever a sequence of indented material is needed in a text block Begins with a to identify it; is the tag for the term; is the tag for the definition Ends with a

sample

creates indented text Often used to highlight quotations that are nested within other paragraphs Requires a ending tag May be ended with either a or, depending on usage SAMPLE html basics day 1

<pre> … </pre> generates text in a fixed-width font things are displayed the way we type them Makes spaces, new lines, and tabs significant Useful for program listings sample

Day 2 Hands-on Building Your Course Webpage

Prepare the following: For instructors: Course Schedules Syllabi Resume Your picture For staff: Office Objectives Personnel List Pictures of Staff Office Pictures Other pertinent office data For everyone: Your objectives in creating a website. Make plans of what you want to put in your website. - These should be saved in your flash-drives

Day 2 Hands-on Building Your Course/Office Webpage

Follow the instructions in Exercise 1 Handout.Exercise 1 Handout.