1. CMPT241 Web Programming HTML

2. Block and Inline Elements 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 2

3. Block and Inline Elements (cont.) Inline elements affect a small amount of content ▫examples: bold text, 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 3

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

5. More HTML tags Some tags don't contain content; can be opened and closed in one tag ▫syntax: ▫example: ▫ ▫example: 5

6. List of valid empty elements areabase brcol hrimg inputlink metaparam

7. More HTML tags Some tags can contain additional information called attributes ▫syntax: ▫ content ▫example: ▫ Next page 7

8. Links (anchor) The href attribute specifies the destination URL Links or anchors are inline elements, so they must be placed inside a block element such as a p or h1 8 Search Google now! HTML Search Google now! outputGoogle

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

10. Images The src attribute 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. 10 HTML

11. Images 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: 11 HTML

12. 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)

13. More about images If placed inside an anchor, the image will become a link 13 <img src="images/dumbledore.jpg" alt=“Dumbledore from Harry Potter" title="Alas! Ear wax!"/> HTML

14. Line Break br should be immediately closed with /> br should not be used to separate paragraphs or used multiple times in a row to create spacing 14 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

15. Comments Comments are useful for disabling sections of a page 15 <!-- My web page, by Bob Student CMPT241, Fall 2048 --> CS courses are a lot of fun! HTML CS courses are a lot of fun! output

16. Phrase elements, 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. 16 HTML is really, REALLY fun! HTML HTML is really REALLY fun! output

17. Nesting tags 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 17 HTML is really, REALLY, really fun! HTML Bad

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

19. More about unordered lists 19 Harry Potter characters: Harry Potter Hermione Ron LOTR characters: Frodo Bilbo Sam HTML

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

21. Ordered list ol represents a numbered list of items we can make lists with letters or Roman numerals using CSS (later) 21 Apple business model: Beat Microsoft Beat Google Conquer the world! HTML Apple business model: 1.Beat Microsoft 2.Beat Google 3.Conquer the world output

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

23. Common error: Not closing a list If you leave a list open, subsequent contents will be indented 23 No shoes No shirt No problem! Paragraph after list... HTML No shoes No shirt No problem! Paragraph after list... output

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

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

26. Tables,, 1,11,2 2,12,2 26 1,1 1,2 2,1 2,2 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

27. Table headers, captions:, 27 My important data Column 1 Column 2 1,1 1,2 2,1 2,2 HTML output Column 1Column 2 1,11,2 2,12,2 My important data  th cells in a row/column are considered headers  a caption at the start of the table labels its meaning

28. Note table, tr and 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 28

29. colspan and rowspan Syntax: ▫ 29

30. Block quotations a lengthy quotation normally indented (no quotation marks) Content must be nested inside a block element 30 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. HTML 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

31. Inline quotations 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 allows us to apply CSS styles to quotations 31 Quoth the Raven, Nevermore. HTML Quoth the Raven, “Nevermore.” output

32. HTML Character Entities 32 How would I write a web page about writing web pages? Search Google for Manhattan College output

33. HTML Character Entities character(s)entity < > " &" & (white space) ™ ©™ © é è ñé è ñ π δ Δπ δ Δ 33

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

35. Link to homework 1.html? Homework 1

36. Computer code code: a short section of computer code displayed in monospace font (letters have the same width) inline element 36 The ul and ol tags make lists. HTML The ul and ol tags make lists. output

37. Preformatted text Displayed with exactly the whitespace / line breaks given in the text Shown in a fixed-width font by default block element 37 Roses are red Violets are blue HTML Roses are red Violets are blue output

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

39. Homework 1 Create an html page (for example, homework1.html) both describing and using what we have learned so far. Create a link to homework 1 on your home page. Make sure all links and pages are accessible through the public url turing.manhattan.edu….. Due before Monday midnight