Creating & Editing Web Pages - University of Pennsylvania · Web Pages: Adding content Click ‘Add...
Transcript of Creating & Editing Web Pages - University of Pennsylvania · Web Pages: Adding content Click ‘Add...
Creating & EditingWeb Pages
dbe.med.upenn.edu/biostat-research/computing-seminars
Clay Wells <[email protected]>
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> ∑ < >
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
- non-break space% - percent∑ - Sum∞ < >
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