CMPT241 Web Programming

CMPT241 Web Programming HTML

a horizontal line to visually separate sections of a page (block) Should be immediately closed with /> Horizontal rule <hr /> First paragraph <hr /> Second Paragraph HTML First Paragraph Second Paragraph output

Block elements contain an entire large region of content • examples: paragraphs, lists, table cells • the browser places a margin of whitespace between block elements for separation Block and Inline Statements

Inline elements affect a small amount of content • examples: boldtext, images • the browser allows many inline elements to appear on the same line • An inline element can contain other inline elements, but cannot contain any block element. • must be nested inside a block element Block and Inline Statements (cont.)

Some tags can contain additional information called attributes • syntax: <element attribute="value" attribute="value"> content </element> • example: <a href="page2.html">Next page</a> More HTML tags

Some tags don't contain content; can be opened and closed in one tag • syntax: <element attribute="value“ attribute="value" /> • example: <hr /> • example: <imgsrc=“Harry.jpg" alt="pic of Harry Potter" /> More HTML tags

List of valid empty elements area base br col hrimg input link meta param

The hrefattribute specifies the destination URL Links or anchorsare inline elements, so they must be placed inside a block element such as a p or h1 Links <a> (anchor) Search <a href="http://www.google.com/">Google</a> now! HTML Search Google now!output

title: tooltip • Types of URLs that can appear in anchors: • Absolute: to another web site • Relative: to another page on this web site More about anchors <a href=“deathlyHallows-book.html">Harry Potter and the Deathly Hallows Book</a> <a href="http://en.wikipedia.org” title="Search">Wikipedia</a>HTML Harry Potter and the Deathly Hallows Wikipediaoutput

The srcattribute specifies source of the image URL HTML5 requires an alt (an alternative text representation) attribute describing the image. If the browser is unable to fetch the image, it will show the alt text in its place. Screen reader software can read the values of alt attributes. Images <img> <imgsrc="images/tobby.jpg" alt=“Tobbyfrom Harry Potter" />HTML

The src attribute specifies source of the image URL • Absolute URL • Relative URL • You can use .. (two dots) to represent the parent of the current directory. • Be careful with this: <imgsrc=“/images/tobby.jpg" alt=“Tobby from Harry Potter" /> Images <img> <imgsrc="images/tobby.jpg" alt=“Tobbyfrom Harry Potter" />HTML

Common img Attributes • src • alt • title • tooltip • width • width of the image (pixels or percentage of window) • height • height of the image (pixels or percentage of window)

If placed inside an anchor, the image will become a link More about images <a href="http://harrypotter.net/"> <imgsrc="images/dumbledore.jpg" alt=“Dumbledore from Harry Potter" title="Alas! Ear wax!"/> </a> HTML

br should be immediately closed with /> br should not be used to separate paragraphs or used multiple times in a row to create spacing Line Break One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them. HTML One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them output

Comments are useful for disabling sections of a page Comments  CS courses are  a lot of fun!HTML CS courses are a lot of fun!output

em: emphasized text (usually in italic) • strong: strongly emphasized text (usually in bold) • The tags must be properly nested for a valid page • semantic meaning of the content • em and strong indicate that their content should be emphasized in some way by the browser. Phrase elements , HTML is really, REALLYfun! HTML HTML is reallyREALLY fun!output

Tags must be correctly nested: a closing tag must match the most recently opened tag The browser may render it correctly anyway, but it is invalid HTML Nesting tags Bad HTML is really,REALLY, really fun! HTML

ul represents a bulleted list of items (block) li represents a single item within the list (block) Unordered list: <ul>, <li> • <ul> • <li>No shoes</li> • <li>No shirt</li> • <li>No problem!</li> • </ul>HTML • No shoes • No shirt • No problem!output

More about unordered lists • <ul> • <li>Harry Potter characters: • <ul> • <li>Harry Potter</li> • <li>Hermione</li> • <li>Ron</li> • </ul> • </li> • <li>LOTR characters: • <ul> • <li>Frodo</li> • <li>Bilbo</li> • <li>Sam</li> • </ul> • </li> • </ul>HTML

More about unordered lists (cont.) • Harry Potter characters: • Harry Potter • Hermione • Ron • LOTR characters: • Frodo • Bilbo • Sam • output

ol represents a numbered list of items we can make lists with letters or Roman numerals using CSS (later) Ordered list <ol> • Apple business model: • <ol> • <li>Beat Microsoft</li> • <li>Beat Google</li> • <li>Conquer the world!</li> • </ol>HTML Apple business model: Beat Microsoft Beat Google Conquer the world output

A list item can contain a sub-list of the same or different list type.

If you leave a list open, subsequent contents will be indented Common error: Not closing a list • <ul> • <li>No shoes</li> • <li>No shirt</li> • <li>No problem!</li> • Paragraph after list...HTML • No shoes • No shirt • No problem! • Paragraph after list...output

closing the outer li too early (or not at all) will render correctly in most browsers, but it is incorrect HTML Common Error: Improper nested list placement • <ul> • <li>Harry Potter characters:</li> • <ul> • <li>Harry Potter</li> • <li>Hermione</li> • <li>Ron</li> • </ul> • </li> • <li>LOTR characters: • <ul> • <li>Frodo</li> • <li>Bilbo</li> • <li>Sam</li> • </ul> • </ul>HTML

dl represents a list of definitions of terms dt represents each term, and dd its definition All three are block elements. Definition list <dl>, <dt>, <dd> <dl> <dt>newbie</dt> <dd>one who does not have mad skills</dd> <dt>jaded</dt> <dd>tired, bored, or lacking enthusiasm </dd> <dt>frag</dt> <dd>a kill in a shooting game</dd> </dl>HTML newbie one who does not have mad skills jaded Tired, bored, or lacking enthusiasm frag a kill in a shooting gameoutput

Tables <table>, <tr>, <td> <table> <tr><td>1,1</td><td>1,2</td></tr> <tr><td>2,1</td><td>2,2</td></tr> </table> HTML output • table defines the overall table, tr each row, and td each cell's data • Useful for displaying large row/column data sets • By default, td is left-aligned

Table headers, captions: <th>, <caption> <table> <caption>My important data</caption> <tr><th>Column 1</th><th>Column 2</th></tr> <tr><td>1,1</td><td>1,2</td></tr> <tr><td>2,1</td><td>2,2</td></tr> </table> HTML output My important data • th cells in a row/column are considered headers • a caption at the start of the table labels its meaning

Note • table, trand td are necessary to create a table, but th and caption are optional. • Tables are sometimes used by novices for web page layout, but this is not proper semantic HTML and should be avoided

colspan and rowspan • Syntax: • <td rowspan = “rows” colspan = “columns”> • <throwspan = “rows” colspan = “columns”>

Block quotations <blockquote> As Lincoln said in his famous Gettysburg Address: <blockquote> Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. </blockquote> HTML • a lengthy quotation • normally indented (no quotation marks) • Content must be nested inside a block element As Lincoln said in his famous Gettysburg Address: Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. output

Inline quotations <q> Quoth the Raven, <q>Nevermore.</q> HTML • a short quotation used in a paragraph, sentence or phrase • Browser displays the quotes automatically. • Why not just write the following? • Quoth the Raven, "Nevermore." • Using <q> allows us to apply CSS styles to quotations Quoth the Raven, “Nevermore.” output

HTML Character Entities How would I write a web page about writing web pages? <a href="http://google.com/search?q=manhattan+college&ie=utf-8&aq=t">Search Google for Manhattan College</a>output

HTML Character Entities

HTML Character Entities <ahref="http://google.com/search?q=manhattan+college &ie=utf-8&aq=t"> Search Google for Manhattan College </a> HTML <a href="http://google.com/search?q=manhattan+college&ie=utf-8&aq=t">Search Google for Manhattan College</a>output

Link to homework 1.html? <a href = “homework 1.html”>Homework 1</a> <a href = “homework%201.html”>Homework 1</a>

Computer code <code> The <code>ul</code> and <code>ol</code> tags make lists. HTML • code: a shortsection of computer code • displayed in monospace font (letters have the same width) • inline element The ul and ol tags make lists.output

Preformatted text <pre> • <pre> • Roses are red • Violets are blue • </pre> HTML • Displayed with exactly the whitespace / line breaks given in the text • Shown in a fixed-width font by default • block element • Roses are red • Violets are blueoutput

Use <pre> and <code> together <pre><code> public static void main(String[] args) { System.out.println("Hello, world!"); } </code></pre> HTML • When showing a large section of computer code, enclose it in a pre to preserve whitespace and a codeto describe the semantics of the content public static void main(String[] args) { System.out.println("Hello, world!"); }output

CMPT241 Web Programming