•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Data Technologies
HTML and CSS
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Background Reading
Chapters 2 and 4 of “Introduction to Data Technologies”
The Web Design Group CSS Referencehttp://htmlhelp.com/reference/css/
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML ParagraphsHTML ignores all “whitespace”.
It is necessary to indicate, via markup, where blocks of textbegin (and end).
<p>An example paragraph.</p><p>Here’s another paragraph.
You might think this is another paragraph,but it’s not.</p>
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML HeadingsHTML headings are used to provide section structure for thedocument.
<h1>The document "Title"</h1>normal text<h2>A main section within the document</h2>normal text<h3>A subsection of the first section</h3>normal text
<h2>Another main section</h2>normal text
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Unordered ListsEach item is preceded by a “bullet” (e.g., a list of questionnaireinstructions).
<ul><li> An item </li><li> Another item </li><li> Yet another item </li>
</ul>
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Ordered ListsEach item is preceded by a “number” (e.g., a list of questionsin a questionnaire).
<ol><li> First item </li><li> Second item </li><li> Third item </li>
</ol>
Use the list-style-type style-sheet property to control theappearance of the “number”.
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML AnchorsAn anchor creates a hypertext link (e.g., go to the next page ofa questionnaire or go to a help page); if you follow a link,usually by clicking on it in a browser, you will be “transported”to a new destination.
The href attribute of the anchor element specifies a UniformResource Identifier (URI) as the “destination” of the hyperlink.
The Content of the element is what appears on the display.
Here’s a link to the<a href="http://www.stat.auckland.ac.nz">Department of Statistics Home Page</a>.
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Anchors within the same DocumentA hyperlink can be made to point to another location within thesame document (e.g., skip to question i on a questionnaire).
This requires use of the name attribute of the anchor element.
<h1>Table of Contents</h1><!-- anchors --><ol><li><a href="#section1">Section 1</a></li><li>...</li></ol><p><!-- destination --><h2><a name="section1">Section 1</a></h2>Blah blah
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML TablesA minimal table (a simple way to arrange elements of a webpage, though see also Cascading Style Sheets) ...<table><tr><th>Column 1</th><th>Column 2</th>
</tr><tr><td>Col 1 data</td><td>Col 2 data</td>
</tr><tr><td>More col 1 data</td><td>More col 2 data</td>
</tr></table>
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
HTML Table AttributesHTML table elements have a number of useful attributes forcontrolling the table layout.
HTML table row, table header, and table data elements alsohave useful layout attributes.
<table border="1" cellpadding="5"><tr><th>Column 1</th>
<th>Column 2</th><th>Column 3</th></tr>
<tr><td>Col 1 data</td><td colspan="2" align="left">Data spanning cols 2 and 3</td></tr>
</table>
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Miscellaneous<center>This text is centred.</center>
<p>This line stops HERE.<br>This is on a separate line.</p>
<hr>
<em>This text is emphasised</em><br><strong>This text is strongly emphasised</strong>
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Generic HTML ElementsThe div and span elements have no predetermined meaningor appearance.<div>A div makes a "block" of output and a<span>span is just part of a block
</span>.</div><div>This is a second block<span>and this is just part of thesecond block
</span>.</div>
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Cascading Style SheetsHTML is a structural markup language; it describes thestructure of a document.
Use Cascading Style Sheets (CSS) for controlling theappearance of different structural elements.
<head><style>H1 { color: blue }P { font-style: italic }
</style></head><body><h1>A heading</h1><p>A normal paragraph of text</p>
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Cascading Style SheetsStyles can be applied to only a certain “class” of an element.<head><style>div.comment { font-style: italic }div.comment span { font-weight: bold }
</style></head><body><div class="comment">This is a block of comment-style text<span>and this part of the comment is bold.
</span></div>
</body>
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Cascading Style SheetsCascading Style Sheets are actually a separate language fromHTML. For example, comments in CSS are actually of theform:
<style>/* A CSS comment */div.comment { font-style: italic }
</style>
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Case Study: The College Student ReportThe National Survey of Student Engagement (NSSE) is anannual survey conducted on college and university students inthe United States.
The survey aims to measure the level of student participationin in programs and activities that the university provides forlearning and personal development.
The survey is administered both as an online form and as apen-and-paper questionnaire.
When a survey has both an online and a paper version, wewould like to avoid having two separate copies to update. Canthis be done?
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
National Survey of Student Engagement 2006The College Student Report
VeryOften Often
Some-times Never
VeryOften Often
Some-times Never
Asked questions in class orcontributed to class discussions
Made a class presentation
Prepared two or more drafts of apaper or assignment before turningit in
Worked on a paper or project thatrequired integrating ideas orinformation from various sources
Included diverse perspectives(different races, religions, genders,polticial beliefs, etc.) in class dicussions or writing assignments
Come to class without completingreadings or assignments
Worked with other students onprojects during class
Worked with classmates outside of class to prepare class assignments
In your experience at your institution during the current school year, about how often have you done eachof the following?
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Case Study: The College Student Report<html>...
<style type="text/css" media="screen">...
div.evenoptions {display: none;
}div.oddquestion {background-color: #EFF2E8;
}...</html>
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Case Study: The College Student Report<html>...
<style type="text/css" media="print">...
div.evenoptions {width: 49%;float: right;
}div.oddquestion {width: 49%;float: left;border-top: 1px solid #869750;margin-bottom: 10px;
}...</html>