html and css - wustatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · cascading style...

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