Citiwiki summer workshop day 2 web page and wiki
1 / 44

CitiWiki Summer Workshop Day 2: Web Page and Wiki - PowerPoint PPT Presentation

  • Updated On :

CitiWiki Summer Workshop Day 2: Web Page and Wiki. Li Xu CS, UMass Lowell. Server Workaround. Day 1 Reflection. Q&A Project. RSS Feed. Thunderbird. Day 2 Agenda. Web page authoring HTML, XHTML, XML, CSS Wiki. Day 2 Goals. 6.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'CitiWiki Summer Workshop Day 2: Web Page and Wiki' - LionelDale

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Citiwiki summer workshop day 2 web page and wiki l.jpg

CitiWiki Summer Workshop Day 2: Web Page and Wiki

Li Xu

CS, UMass Lowell

Server workaround l.jpg
Server Workaround


CitiWiki Workshop 2007

Day 1 reflection l.jpg
Day 1 Reflection

  • Q&A

  • Project

CitiWiki Workshop 2007

Rss feed l.jpg
RSS Feed

  • Thunderbird

CitiWiki Workshop 2007

Day 2 agenda l.jpg
Day 2 Agenda

  • Web page authoring


  • Wiki

CitiWiki Workshop 2007

Day 2 goals l.jpg
Day 2 Goals


CitiWiki Workshop 2007

  • Understand web design and technologies

  • Learn how to create Web page and Wiki

    • HTML tags

    • Wiki editing commands

  • Be able to design and build simple web and Wiki pages

CitiWiki Workshop 2007

The big picture l.jpg
The Big Picture

  • Web server

    • Contact your school IT people on how to publish web pages on the server

  • HTML documents

    • Create offline

    • Upload to the web server

  • Web browser

CitiWiki Workshop 2007

Citiwiki setup l.jpg
CitiWiki setup

  • Web site organization

    • Hierachical tree structure

  • Apache web server

    • Put diretories and HTML pages into the htdocs directory

CitiWiki Workshop 2007

Page elements l.jpg
Page Elements

  • Title

  • Navigation links

  • Author, date, contact information

  • Content

CitiWiki Workshop 2007

Slide10 l.jpg

  • HTML stands for Hypertext Markup Language

  • Write text with mark-up tags

    • Wrap around text using matching beginning and closing tags

CitiWiki Workshop 2007

Slide11 l.jpg

  • HTML file structure



<TITLE>Your title goes here</TITLE>



The body of your document goes here.



CitiWiki Workshop 2007

Html tags headings l.jpg
HTML Tags: Headings

  • Use heading and paragraph tags to organize logical structure

<H1>This is a heading 1</H1>

<H2>This is a heading 2</H2>

<H3>This is a heading 3</H3>

<H4>This is a heading 4</H4>

<H5>This is a heading 5</H5>

<H6>This is a heading 6</H6>

<P>This is a normal text paragraph.</P>

CitiWiki Workshop 2007

Html tags text formating l.jpg
HTML Tags: Text Formating

  • Alignment

    • <CENTER>This text is centered.</CENTER>

    • <H1 STYLE=”text-align: right”>This heading is right aligned.</H1>

  • Appearance

    • This is <B>bold</B>.

    • This is <I>italic</I>.

  • Fonts and color

    • <H1><FONT FACE=”Arial”>This is a heading</FONT></H1>

    • <FONT COLOR=YELLOW>This text is yellow.</FONT>

CitiWiki Workshop 2007

Html tags lists l.jpg
HTML Tags: Lists

  • Bullet list: <ul>, <li>, </li>, </ul>

  • Numbered list: <ol>, <li>, </li>, </ol>

CitiWiki Workshop 2007

Html tags links l.jpg
HTML Tags: Links

  • Create hyperlinks

  • <a> Tag

    • <a href=””> Google</a>

  • Link within same page

    • <a name=“top”> top of page </a>

    • <a href=“#top”> Go to top </a>

CitiWiki Workshop 2007

Html tags image l.jpg
HTML Tags: Image

  • Display image

  • <img> Tag

    • <img src=“picture.jpg" alt=“Picture description" />

CitiWiki Workshop 2007

Html tags tables l.jpg
HTML Tags: Tables

<table width="300" border="1">


<th>Web Features</th>

<th>Love it</th>

<th>Hate it</th>








<td>Style Sheet </td>





  • Table

  • Table header

  • Table row

  • Table cell

CitiWiki Workshop 2007

Using tables for layout l.jpg
Using Tables for Layout

  • Common practice pre 2006




<H1>Page Header Area</H1>















CitiWiki Workshop 2007

Web page software l.jpg
Web Page Software

  • Microsoft FrontPage

  • Adobe DreamWeaver

CitiWiki Workshop 2007

New age of web design xhtml css l.jpg
New Age of Web Design: XHTML, CSS

  • A Sea Change in last two years

    • XHTML and CSS have arrived

    • Separate content and structure from styling

CitiWiki Workshop 2007

Xml xhtml css l.jpg

  • XML: Extensible Markup Language

    • Define new tags.

    • Well-formed. Opening tags matched with closing tags

    • Validation. Specify semantic rules on tags and attributes

  • XHTML: Extensible HyperText Markup Language

    • Reformulation of HTML as XML

  • CSS: Cascading Style Sheets

    • Separate styling from structural design

CitiWiki Workshop 2007

Web design in xhtml css l.jpg
Web Design in XHTML, CSS

  • XHTML file describes content structure

  • Separate styling sheet (formatting commands) dictates styling of page

  • Early adoption suffers from lack of browser support

  • Has become main stream approach (2006 upward)

CitiWiki Workshop 2007

Structural tags l.jpg
Structural Tags

  • Heading and paragraph

    • h1, h2, h3, …, p

  • Div

  • Identifier of elements

CitiWiki Workshop 2007

Css styling l.jpg
CSS Styling

  • Style rules in CSS

    • Selector {declaration}

    • Example: p {color: blue; background-color: white; }

    • XHTML file is a tree structure (tags are strictly enclosing), root is html

    • Selector consists a path to select specific elements in HTML page

CitiWiki Workshop 2007

Cascading l.jpg

  • “Outer” element’s style will be inherited by “inner” element, unless specified otherwise

CitiWiki Workshop 2007

Connecting css to html l.jpg
Connecting CSS to HTML

  • Embed style in HTML header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


<html xmlns="" xml:lang="en">


<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>My Page</title>

<style type="text/css">

p {text-align:right; font-family: Arial, Helvetica, sans-serif;}

li {font-weight:bold;}



CitiWiki Workshop 2007

Connecting css to html27 l.jpg
Connecting CSS to HTML

  • Link style sheet file to HTML

    • Put style commands in style.css file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" xml:lang="en" lang="en">


<title>My Page</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href=“style.css" />


CitiWiki Workshop 2007

Css beauty l.jpg
CSS Beauty

  • CSS Zen Garden

CitiWiki Workshop 2007

Css exercise l.jpg
CSS Exercise

  • Using heading, p, div, list tags

  • Embedding and linking methods

  • CSS layout:

CitiWiki Workshop 2007

Use web page software l.jpg
Use Web Page Software

  • FrontPage

  • DreamWeaver

  • Check out W3C Standards Specification

CitiWiki Workshop 2007

Slide31 l.jpg

  • Web design and web page creation in XHTML, CSS flexible and powerful, but too much overhead

    • Web designer makes living/fortune by doing just that

  • Wiki: light-weight method to create web content – just use your browser

    • Profound implications

CitiWiki Workshop 2007

Wiki engine l.jpg
Wiki Engine

  • MediaWiki

  • MoinMoin

  • PmWiki

  • TikiWiki

  • UseModWiki

CitiWiki Workshop 2007

Wiki commands l.jpg
Wiki Commands

  • Mirrors what you can do in HTML

    • Heading

    • List

    • Table

    • Links

    • Page hierarchy

CitiWiki Workshop 2007

Wiki commands34 l.jpg
Wiki Commands

  • Heading

    • P: empty line

    • Line break: \\

    • h1: !, h2: !!, h3:!!!, …

  • Indenting: ->, -->

  • Use edit toolbar

CitiWiki Workshop 2007

Wiki commands35 l.jpg
Wiki Commands

  • List

    • Ordered list: #

    • Unordered list: *

    • List nesting: ##, **

CitiWiki Workshop 2007

Wiki commands36 l.jpg
Wiki Commands

  • Links:

    • [[page name]]

    • [[section/subsection]]

    • [[|Google address]]

    • Or bare URL

CitiWiki Workshop 2007

Wiki commands37 l.jpg
Wiki Commands

  • Formatting

    • Emphasize: quote ’’, ’’’

    • Color: %red%, %blue%, %green%, and %color=#CC0033%, %bgcolor%

    • %color=yellow bgcolor=green% text

    • Wiki style

CitiWiki Workshop 2007

Wiki exercise l.jpg
Wiki Exercise

CitiWiki Workshop 2007

Brainstorm what you can do l.jpg
BrainStorm What You Can Do

  • What is your current use of technology?

    • Online course materials (already developed)

    • Powerpoint

    • Web Resources (e.g., radio broadcasts, simulations)

    • Email, mail lists (questions about HW, Exams/Quizzes)

    • Learning Management System

    • Websites for Case Studies

    • OpenSource software (webservers, PHP, etc.)

    • Google/Yahoo Groups

  • What impact do you think technology has on student learning in your classroom?

    • How the discussed web and wiki technology can enhance teaching and learning?

  • How might technology enhance or detract from student learning?

    • Some simulations are distracting

    • Tech skills may be a limitation for some students, detracting from learning exp.

    • It has to work and must be available!

CitiWiki Workshop 2007

Additional questions l.jpg
Additional Questions

  • How do you manage large classes?

  • How effective are the current technology and tools you use?

  • Availability of technology for class use.

  • Communication with IT for infrastructure need

  • How do we use technology for Assessment?

CitiWiki Workshop 2007

First draft project plan l.jpg
First Draft – Project Plan

  • In order to assist you in planning to incorporate web and wiki into your course, we need to know more about what you intend to do. On Wednesday, we will discuss the following questions:

  • What is the nature of the class and rational for incorporating technology?

  • What is your implementation plan?

  • What is your assessment plan?

  • Please answer these questions and bring a one or two page summary to our next meeting and put it on your Wiki.

CitiWiki Workshop 2007

Day 2 assignments l.jpg
Day 2 Assignments

  • Wiki blog your bio and project ideas on CitiWiki

  • Build a mock up Wiki page for your course or your work

CitiWiki Workshop 2007

Day 2 assignment l.jpg
Day 2 Assignment

  • What technology-enhanced tool do you plan to incorporate in your class?

  • What is the nature of the class and rationale for the plan?

  • What is you plan for implementation?

  • What is your plan for assessment?

  • Write your plan in your Wiki page

CitiWiki Workshop 2007

Day 2 assignment44 l.jpg
Day 2 Assignment

  • Optional: download software and set up your own web server and Wiki on Windows

    • Directions on software.html

    • Incorporate wiki for daily use

    • Will go over details on Day 4

CitiWiki Workshop 2007