HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style...
Transcript of HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style...
![Page 1: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/1.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
Data Technologies
HTML and CSS
![Page 2: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/2.jpg)
•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/
![Page 3: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/3.jpg)
•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>
![Page 4: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/4.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 5: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/5.jpg)
•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
![Page 6: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/6.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 7: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/7.jpg)
•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>
![Page 8: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/8.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 9: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/9.jpg)
•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”.
![Page 10: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/10.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 11: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/11.jpg)
•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>.
![Page 12: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/12.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 13: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/13.jpg)
•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
![Page 14: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/14.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 15: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/15.jpg)
•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>
![Page 16: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/16.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 17: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/17.jpg)
•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>
![Page 18: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/18.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 19: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/19.jpg)
•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>
![Page 20: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/20.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 21: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/21.jpg)
•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>
![Page 22: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/22.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 23: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/23.jpg)
•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>
![Page 24: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/24.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 25: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/25.jpg)
•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>
![Page 26: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/26.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 27: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/27.jpg)
•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>
![Page 28: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/28.jpg)
•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?
![Page 29: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/29.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 30: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/30.jpg)
•First •Prev •Next •Last •Go Back •Full Screen •Close •Quit
![Page 31: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/31.jpg)
•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?
![Page 32: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/32.jpg)
•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>
![Page 33: HTML and CSS - WUstatmath.wu.ac.at/courses/data-analysis/lectures/htmlcss.pdf · Cascading Style Sheets Cascading Style Sheets are actually a separate language from HTML. For example,](https://reader033.fdocuments.net/reader033/viewer/2022051918/600af58f62e4c86b7244d9cc/html5/thumbnails/33.jpg)
•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>