Creating & EditingWeb Pages

dbe.med.upenn.edu/biostat-research/computing-seminars

Clay Wells <clayw@upenn.edu>

Thursday, October 10, 13

Web Pages: Topics

Adding ContentSections

Grouping ContentText-level SemanticsEmbedded Content

Tabular DataStyles

Thursday, October 10, 13

Web Pages: Adding content

Click ‘Add content’ -> Select the page type:

- Faculty page- Project page

- Educational Resource- User page

- Student Resource

biostat-research

Thursday, October 10, 13

Web Pages: Topics

Adding ContentSections

Grouping ContentText-level SemanticsEmbedded Content

Tabular DataStyles

Thursday, October 10, 13

Web Pages: Sections

HTML elements

<section><h1> <h2> <h3>

Thursday, October 10, 13

Web Pages: Sections

a generic sectiona thematic grouping of content, typically with a heading

<section>...

</section>

Thursday, October 10, 13

Web Pages: Sections

headings

<h1>First Heading</h1>

<h2>Second Heading</h2>

<h3>Third Heading</h3>

Thursday, October 10, 13

Web Pages: Topics

Adding ContentSections

Grouping ContentText-level SemanticsEmbedded Content

Tabular DataStyles

Thursday, October 10, 13

Web Pages: Grouping

HTML elements

<div> <p> <pre> <hr><blockquote>

<ul> <ol> <li>

Thursday, October 10, 13

Web Pages: Grouping

div’s have no special meaninguse as a last resort

<div id=”project_description”>The XYZ project ...</div>

Thursday, October 10, 13

Web Pages: Grouping

paragraph

<p class=”project_description”>The XYZ project ...</p>

Thursday, October 10, 13

Web Pages: Grouping

preformatted text

<pre>structure is represented by typographic conventions rather than by elements. good for displaying an blockof code</pre>

Thursday, October 10, 13

Web Pages: Grouping

horizontal rulerepresents a paragraph-level thematic break

<hr>

There is no need for an hr element between sections themselves,the section elements and the h1 elements imply thematic changes.

Thursday, October 10, 13

Web Pages: Grouping

quote from another source

<blockquote><p>They who can give up essential liberty to obtain a little temporary safety, deserve neither liberty nor safety.</p></blockquote>

<cite>Benjamin Franklin</cite>

Thursday, October 10, 13

Web Pages: Grouping

unordered lists

<ul><li>List item example</li><li>Another example</li></ul>

Thursday, October 10, 13

Web Pages: Grouping

ordered lists

<ol><li>First Item</li><li>Second Item</li></ol>

Thursday, October 10, 13

Web Pages: Grouping

list attributes

<ol type=‘lower-roman’><ol reversed><li value=’10’>List item example</li><li value=’9’>List item example</li>

Thursday, October 10, 13

Web Pages: Topics

Adding ContentSections

Grouping ContentText-level Semantics

Embedded ContentTabular Data

Styles

Thursday, October 10, 13

Web Pages: Text-level

HTML elements, entity codes

<b> <i> <u><a> <br>

<cite> <span>&nbsp; &#8721; &lt; &gt;

Thursday, October 10, 13

Web Pages: Text-level

Basic formatting

<b>Bold Text</b><i>Italic Text</i>

<u>Underline Text</u>

Thursday, October 10, 13

Web Pages: Text-level

a hypertext link, has a href attribute optionally a target attribute (open in new window/tab)

<a href=”http://dbe.med.upenn.edu/biostat-research”>Biostat Research</a>

<a href=”/biostat-research/resources-latex”>LaTeX Resources</a>

<a href=”http://encrypted.google.com” target=”_blank”>Google</a>

Thursday, October 10, 13

Web Pages: Text-level

linking to a section in a page

<a href=”#pubs”>Publications</a>...

<a name=”pubs”></a><h3>Publications</h3>

Thursday, October 10, 13

Web Pages: Text-level

line break

<br>

Thursday, October 10, 13

Web Pages: Text-level

reference to a creative workmust include the title of the work or the name of the

author(person, people or organization) or an URL reference

<cite>Benjamin Franklin</cite>

Thursday, October 10, 13

Web Pages: Text-level

doesn't mean anything on its own,but can be useful when used together with the global attributes.

<span>Anything can go here</span>

Thursday, October 10, 13

Web Pages: Text-level

entity codesASCII, ISO8859-1, Symbols

&nbsp; - non-break space&#37; - percent&#8721; - Sum&infin; &lt; &gt;

http://www.w3schools.com/tags/ref_ascii.asp

Thursday, October 10, 13

Web Pages: Topics

Adding ContentSections

Grouping ContentText-level SemanticsEmbedded Content

Tabular DataStyles

Thursday, October 10, 13

Web Pages: Embed content

HTML elements

<img><iframe>

YouTube, Vimeo, etc.

Thursday, October 10, 13

Web Pages: Embed content

images

<img src=”url/file.jpg” alt=”Book cover”>

Thursday, October 10, 13

Web Pages: Embed content

video (YouTube)

embed YouTube <iframe>

Thursday, October 10, 13

Web Pages: Topics

Adding ContentSections

Grouping ContentText-level SemanticsEmbedded Content

Tabular DataStyles

Thursday, October 10, 13

Web Pages: Tabular Data

HTML elements

<table><caption>

<colgroup> <col> <tbody><th> <tr> <td>

Thursday, October 10, 13

Web Pages: Tabular Data

table details

In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed by one or more td elements, followed optionally by a tfoot element (but there can only be one tfoot element child in total)

Thursday, October 10, 13

Web Pages: Tabular Data

basic table 2x2

<table><th>Column One</th> <th>Column Two</th><tr> <td>r1 c1</td> <td>r1 c2</td> </tr><tr> <td>r2 c1</td> <td>r2 c2</td> </tr></table>

Thursday, October 10, 13

Web Pages: Tabular Data

table caption

<table><caption>a brief table description</caption>...

Thursday, October 10, 13

Web Pages: Tabular Data

colgroup, colrepresents a group of one or more columns

represents a one or more columns

<table><!-- sudoku example --><colgroup><col><col><col><colgroup><col><col><col><colgroup><col><col><col>...

Thursday, October 10, 13

Web Pages: Tabular Data

tbodyrepresents a block of rows, body of data

use with colgroup and col elements

...<tbody> <tr><td>1<td> <td>3<td>6<td> <td>4<td>7<td> <td>9 <tr><td> <td>2<td> <td> <td>9<td> <td> <td>1<td> <tr><td>7<td> <td> <td> <td> <td> <td> <td> <td>6</tbody>...

Thursday, October 10, 13

Web Pages: Tabular Data

thtable header

<table><th>Column One</th><th>Column Two</th>...

Thursday, October 10, 13

Web Pages: Tabular Data

tr, tdtable row, table data

...<tr><td>r1 c1</td><td>r1 c2</td></tr><tr><td>r2 c1</td><td>r2 c2</td></tr>...

Thursday, October 10, 13

Web Pages: Tabular Data

basic table 2x2

<table><th>Column One</th> <th>Column Two</th><tr> <td>r1 c1</td> <td>r1 c2</td> </tr><tr> <td>r2 c1</td> <td>r2 c2</td> </tr></table>

Thursday, October 10, 13

Web Pages: Topics

Adding ContentSections

Grouping ContentText-level SemanticsEmbedded Content

Tabular DataStyles

Thursday, October 10, 13

Web Pages: Styles

Cascading Style Sheets, CSSreference available classes

<p class=”biodescription”>...</p><hr class=”gradient”>

<span class=”jumpto”>...</span>

Thursday, October 10, 13

Web Pages: Styles

available CSS classes

biodescriptionbiobodygreybox

sudokutablespan (jumpto)

hr (gradient, thin)

Thursday, October 10, 13

Web Pages: Resources

biostat-research/seminar-web-pages

http://htmlhelp.com

http://www.w3.org/html/wg/drafts/html/master/

http://www.w3schools.com/tags/ref_ascii.asp

Thursday, October 10, 13

Creating & EditingWeb Pages

Questions ?

Thursday, October 10, 13