college of micronesia- fsm pohnpei state campus george s. mangonon, mba chair, math/sci division...
TRANSCRIPT
College of Micronesia- FSMPohnpei State Campus
GEORGE S. MANGONON, MBAChair, 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
www.comfsm.fm/~gmangonon
www.comfsm.fm/~pulmano
www.comfsm.fm/~mmmangonon
http://www.comfsm.fm/~mmmangonon/vpia/index.htm
http://www.comfsm.fm/~mmmangonon/businessdivision/index.htm
http://www.comfsm.fm/~gmangonon/mspniweb/index.htm
http://www.comfsm.fm/~gmangonon/icpniweb/index.htm
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. <Hy>Text of heading </Hy> - 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.
<title> begins the title of a document
</title> marks the end of the title of a document
Putting Them together.
beginning tag
<title> This is the title of my document </title>
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)
<hn>…</hn>• 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
<hn>Text of heading </hn>
where n is a number between 1 and 6 (inclusive)
specifying the level of the heading
<hr /> • 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=n for fixed pixel width WIDTH=n% for certain percentage of the screen wide SIZE=n fixed pixel amount thick
controlling thickness
solid lines
controlling alignment
sample
sample
sample
<p >… </p>• 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
<br /> 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
<center>…</center> The center tag defines text that should be centered You can center one word or your whole page Everything between the <center> tags gets centered
html basics day 1
<body> document-body </body> The body tag introduces the body of the document. It should appear after
the head section and occupy the remainder of the document.
<body background=“url”> document-body</body> <body text=blue> document-body </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
<ul>… </ul> This list style uses bullets to identify items in a list
• start with an opening list <ul> ( unnumbered list) tag
• enter the <li> (list item) tag followed by the individual item
• end the entire list with a closing list </ul> tag
html basics day 1
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 <dl> to identify it; <dt> is the tag for the term; <dd> is the tag for the definition
•Ends with a </dl>
sample
•<blockquote> creates indented text
•Often used to highlight quotations that are nested within other paragraphs
•Requires a </blockquote> ending tag
•May be ended with either a <p> or <br />, depending on usage
SAMPLEhtml 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
html basics day 1
sample
Day 2
Hands-on Building Your Course Webpage
Prepare the following:For instructors:Course Schedules SyllabiResumeYour picture
For staff:Office ObjectivesPersonnel ListPictures of StaffOffice PicturesOther 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.