HTML and CSS. Data Technologies. HTML Headings. Background Reading

Size: px

Start display at page:

Download "HTML and CSS. Data Technologies. HTML Headings. Background Reading"

Josephine Bond
6 years ago
Views:

1 HTML Headings HTML headings are used to provide section structure for the document. Data Technologies HTML and CSS <h1>the document "Title"</h1> <h2>a main section within the document</h2> <h3>a subsection of the first section</h3> <h2>another main section</h2> Background Reading Chapters 2 and 4 of Introduction to Data Technologies The Web Design Group CSS Reference HTML Paragraphs HTML ignores all whitespace. It is necessary to indicate, via markup, where blocks of text begin (and end). An example paragraph. Here s another paragraph. HTML Unordered Lists Each item is preceded by a bullet (e.g., a list of questionnaire instructions). <ul> <li> An item </li> <li> Another item </li> <li> Yet another item </li> </ul> You might think this is another paragraph, but it s not.

2 HTML Ordered Lists Each item is preceded by a number (e.g., a list of questions in a questionnaire). <ol> <li> First item </li> <li> Second item </li> <li> Third item </li> </ol> Use thelist-style-type style-sheet property to control the appearance of the number. HTML Anchors within the same Document A hyperlink can be made to point to another location within the same document (e.g., skip to question i on a questionnaire). This requires use of thename attribute of the anchor element. <h1>table of Contents</h1>  <ol> <li><a href="#section1">section 1</a></li> <li></li> </ol>  <h2><a name="section1">section 1</a></h2> Blah blah HTML Anchors An anchor creates a hypertext link (e.g., go to the next page of a 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. Thehref attribute of the anchor element specifies a Uniform Resource 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=" Department of Statistics Home Page </a>. HTML Tables A minimal table (a simple way to arrange elements of a web page, though see also ) <table> <th>column 1</th> <th>column 2</th> <td>col 1 data</td> <td>col 2 data</td> <td>more col 1 data</td> <td>more col 2 data</td> </table>

3 HTML Table Attributes HTML table elements have a number of useful attributes for controlling the table layout. HTML table row, table header, and table data elements also have useful layout attributes. <table border="1" cellpadding="5"> <th>column 1</th> <th>column 2</th> <th>column 3</th> <td>col 1 data</td> <td colspan="2" align="left"> Data spanning cols 2 and 3</td> </table> Generic HTML Elements Thediv andspan elements have no predetermined meaning or appearance. <div> A div makes a "block" of output and a span is just part of a block </span>. <div> This is a second block and this is just part of the second block </span>. Miscellaneous <center> This text is centred. </center> This line stops HERE.<br> This is on a separate line. <hr> <em>this text is emphasised</em><br> <strong> This text is strongly emphasised </strong> HTML is a structural markup language; it describes the structure of a document. Use (CSS) for controlling the appearance of different structural elements. <head> H1 { color: blue P { font-style: italic </head> <body> <h1>a heading</h1> A normal paragraph of text

</span> </body> are actually a separate language from HTML. For example, comments in CSS are actually of the form: /* A CSS comment */ div.

4 Styles can be applied to only a certain class of an element. <head> div.comment { font-style: italic div.comment span { font-weight: bold </head> <body> <div class="comment"> This is a block of comment-style text and this part of the comment is bold. </span> </body> are actually a separate language from HTML. For example, comments in CSS are actually of the form: /* A CSS comment */ div.comment { font-style: italic National Survey of Student Engagement 2006 The College Student Report In your experience at your institution during the current school year, about how often have you done each of the following? Very Often Often Sometimes Never Often Often Sometimes Very Never Asked questions in class or contributed to class discussions Prepared two or more drafts of a paper or assignment before turning it in Included diverse perspectives (different races, religions, genders, polticial beliefs, etc.) in class dicussions or writing assignments Worked with other students on projects during class Made a class presentation Worked on a paper or project that required integrating ideas or information from various sources Come to class without completing readings or assignments Worked with classmates outside of class to prepare class assignments Case Study: The College Student Report The National Survey of Student Engagement (NSSE) is an annual survey conducted on college and university students in the United States. The survey aims to measure the level of student participation in in programs and activities that the university provides for learning and personal development. The survey is administered both as an online form and as a pen-and-paper questionnaire. When a survey has both an online and a paper version, we would like to avoid having two separate copies to update. Can this be done? Case Study: The College Student Report <html> <style type="text/css" media="screen"> div.evenoptions { display: none; div.oddquestion { background-color: #EFF2E8; </html>

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

CSC 121 Computers and Scientific Thinking

CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language