1 / 37

BASIC XHTML TAGS

ACT102 INTRODUCTION TO WEB PAGE DEVELOPMENT. BASIC XHTML TAGS. Reading Chapter 2 Basic HTML Web Standards More HTML Elements. BASIC HTML TAGS. describes the content and structure of information on a web page Must be viewed in a browser to see the presentation (appearance on screen)

dmorello
Download Presentation

BASIC XHTML TAGS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ACT102 INTRODUCTION TO WEB PAGE DEVELOPMENT BASIC XHTML TAGS

  2. Reading Chapter 2 • Basic HTML • Web Standards • More HTML Elements BASIC HTML TAGS

  3. describes the content and structure of information on a web page • Must be viewed in a browser to see the presentation (appearance on screen) • surrounds text content with opening and closing tags • All tags are in lower case and must contain an opening and closing tag • each tag's name is called an element syntax: <element> content </element> • example: <p>This is a paragraph</p> • most whitespace in HTML is ignored or collapsed to a single space • for this course we will use a newer version called HTML5 Hypertext Markup Language

  4. <!DOCTYPE html> <html> <head> <!--information about the page--> <title>This shows in the browser title line</title> <meta charset="utf-8" /> <!—self closing--> <meta name="author" content=“Your name" /> <meta name="description" content=“Longer then the title and more information." /> <meta name="keywords" content=“html, css, dom, events, ajax, xml, json, sql, web security, cookie, session" /> <script src="resources/slides.js" type="text/javascript"></script> </head> <body> page contents </body> </html> Tags • <!DOCTYPE html> tells the browser to interpret our page's code as HTML5, • the latest/greatest version of the language • The DOCTYPE tag is has no closing tag. • <html></html> • <head></head> the header describes the page • <title></title> displays in the first line of the browser • <body></body>the body contains the page's contents • <!– the content inside these tags are comments and ignored by the browser--> • The page is saved with a .html extension Structure of an HTML page

  5. block elements contain an entire large region of content examples: • <p>paragraphs</p>, • <ul><li>unordered lists</li></ul>, • <h1>headers</h1> • the browser places a margin of whitespace between block elements for separation • inline elements affect a small amount of content examples: <em>Emphasized text</em><strong>Strong text</strong><dfn>Definition term</dfn><code>A piece of computer code</code><imgsrc="smiley.gif" alt="Smiley face" height="42" width="42" /> • the browser allows many inline elements to appear on the same line • must be nested inside a block element Block and inline elements

  6. Block-level element/tag • define a complete section or block of text • Can contain inline element and block-level element • Inline elements • Define the structure of a sequence of characters within a line • may not contain a block-level element • may be used within a block • This works <h2><em>Bold and italic</em></h2> • How about this <em><h2>Bold and italic</h2></em> Block-Level vs. Inline Elements

  7. Partial list of block-level tags • p, blockquote, h1 … h6, div, ul, ol, li, span • Partial list of inline tags • a (anchor tag), em, strong, img, q (short quotation) Examples of block and inline

  8. Tags covered in this lecture • Required on all pages • <!DOCTYPE> • <html></html> • <head></head> • <body></body> • Our Class • <title></title> • <meta /> • Self closing • <meta /> • <hr /> • <img /> • <br /> • Basic Tags • <h1></h1>…<h6></h6> • <p></p> • <a> </a> • <em></em> • <strong></strong>

  9. Tags covered in this lecture (cont) • <ul><li></li></ul> • <ol><li></li></ol> • <!– information --> • <code></code> • <pre></pre> • <dl></dl> • <dt></dt> • <dd></dd> • <blockquote></blockquote> • <q></q> • <del></del> • <ins></ins> • <abbr></abbr> ALL OF THE TAGS ON THESE TWO SLIDES WILL BE ON THE FIRST QUIZ!!!!!!!!!!!!

  10. <title></title> tag is the title of the web page • <title>Chapter 2: HTML Basics</title> • placed within the <head></head> tags of the page • displayed in the web browser's title bar and when bookmarking the page Page title:

  11. <p></p>paragraphs of text (one of the block tags) <p>Lady Macbeth fulfills her role among the nobility and is well respected like Macbeth. King Duncan calls her &quot;our honored hostess.&quot; She is loving to her husband but at the same time very ambitious, as shown by her immediate determination for Macbeth to be king. This outcome will benefit her and her husband equally. She immediately concludes that &quot;the fastest way&quot; for Macbeth to become king is by murdering King Duncan. </p> • placed within the body tags of the page • must be lower case and have both an opening and closing tag • w3c <p></p> examples Paragraph:

  12. Headings: <h1></h1>, ..., <h6></h6> • headings separate major areas of the page (they are block tags) <h1>ACT102 Web Page Development</h1> <h2>Department of Computer Science</h2> <h3>On-Line Section 40</h3> • Each header tag gets smaller or may be styled by the programmer Headings:

  13. <hr /><!– self closing and is not pared --> • creates a horizontal line to visually separate sections of a page (blocks) <p>First paragraph</p> <hr /> <p>Second paragraph</p> • Is self closing with /> • <!– is not pared --> Horizontal rule:

  14. some tags can contain additional information called attributes syntax: <element attribute="value" attribute="value"> content </element> syntax: <element attribute="value" attribute="value" /> • Example with content: <a href="page2.html">Next page</a> • Example without content; <!-- opened and closed in one tag --> <imgsrc="bunny.jpg" alt="pic from Easter" /> HTML TAGS CAN HAVE ATTRIBUTES

  15. <a></a> • used to link to other cites, or "anchor“ pages within a site (inline) <p> Search <a href="http://www.google.com/">Google</a> <a href="lectures.html">Lecture Notes</a>. </p> • uses the href attribute to specify the destination URL • can be absolute (to another web site) • or relative (to another page on this site) • anchors are inline elements; must be placed in a block element such as p or h1 Links:

  16. <img/><!– self closing and is not pared --> • inserts a graphical image into the page (inline) • syntax <imgsrc="images/text.jpg" alt=“Cover of our course textbook" /> • srcattribute specifies the image URL • alt attribute specifies an alternate text for an image, if the image cannot be displayed • HTML5 requires an alt attribute describing the image • More about images <a href="http://www.webstepbook.com/index.shtml/"><img src="images/text.jpg" alt=“Cover of our textbook“ title=“Web Programming Step by Step" /></a> • if placed in an a anchor, the image becomes a link • title attribute is an optional tooltip (on ANY element) Images:

  17. <br /><!-- self closing and is not pared --> • forces a line break in the middle of a block element (inline) <p>The paragraph was too long.<br /> So I put a line brake here.</p> <p>The line break adds readability to your content., <br /> Please use them where they will do the most good!</p> • Warning: Don't over-use <br />(guideline: >= 2 in a row is bad) • <br /> tags should not be used to separate paragraphs or used multiple times in a row to create spacing Line break:

  18. <em>: emphasized text (usually rendered in italic)</em> • <strong>: strongly emphasized text (usually rendered in bold)</strong> <p> HTML is <em>really</em>, <strong>REALLY</strong> fun! </p> Phrase elements :

  19. <!-- each language has its own comment tag these are HTML comments --> • text placed between the two <!-- --> tags is ignored by the browser <!-- My web page, by Suzy Student ACT102 SECTION 40 FALL 2012 --> <p>ACT courses are <!-- NOT --> a lot of fun!</p> • PROGRAMMERS may fail to thoroughly comment their pages • still useful at top of page for indicating purpose of page • can be used to disable code segments for debugging • comments cannot be nested and cannot contain a -- characters Comments:

  20. <p> HTML is <em> really, <strong> REALLY lots of </strong> </em> fun! </p> • tags must be correctly nested (a closing tag must match the most recently opened tag) • if tags are not matched correctly the browser may render it correctly anyway, but it will not validate Nesting tags

  21. It is important to write proper HTML code and follow proper syntax. • Why use valid HTML and web standards? • to mimic more rigid and structured language • more interoperable across different web browsers • more likely that our pages will display correctly in the future • can be interchanged with other XML data: SVG (graphics), MathML, MusicML, etc. Web Standards

  22. <p> <a href="http://validator.w3.org/check/referer"> <imgsrc=“http://www.w3.org/Icons/valid-html20” alt="Validate" /></a> </p> • validator.w3.org • checks your HTML code to make sure it follows the official HTML syntax • more picky than the browser, which may render bad HTML correctly W3C HTML Validator

  23. <ul><li>First Item</li></ul> • ul represents a bulleted list of items (block) • li represents a single item within the list (block) <ul> <li>No Reading</li> <li>No Studing</li> <li>Big problem!</li> </ul> Unordered list :

  24. More about unordered lists • a list can contain other lists: <ul> <li>Simpsons: <ul> <li>Homer</li> <li>Marge</li> </ul> </li> <li>Family Guy: <ul> <li>Peter</li> <li>Lois</li> </ul> </li> </ul> • The list displayed in IE • the browser contains a default list of bullet images

  25. Ordered Lists: • ol represents a numbered list of items (block) <p>RIAA business model:</p> <ol> <li>Sue customers</li> <li>???</li> <li>Profit!</li> </ol> • viewed in IE we can make lists with letters or Roman numerals using CSS (later)

  26. <dl> <!--starts a definition list--> <dt>term to be defined</dt> <dd>definition of term</dd> </dl> Start tag: required, End tag: optional <dl> <dt>Dweeb <dd>young excitable person who may mature into a <em>Nerd</em> or <em>Geek</em> <dt>Hacker <dd>a clever programmer <dt>Nerd <dd>technically bright but socially inept person </dl> Definition list:

  27. <blockquote></blockquote> • a lengthy quotation (block) <p>As Lincoln said in his famous Gettysburg Address:</p> <blockquote> <p>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.</p> </blockquote> Quotations:

  28. <q></q> • a short quotation (inline) <p>Quoth the Raven, <q>Nevermore.</q></p> • Why not just write the following? <p>Quoth the Raven, "Nevermore."</p> • We don't use " marks for two reasons: • HTML shouldn't contain literal quotation mark characters; they should be written as &quot; • using <q> allows us to apply CSS styles to quotations (seen later) Inline quotation:

  29. a way of representing Unicode characters within a web page Complete list of HTML entities HTML Character Entities

  30. Entity example: &lt;p&gt; &lt;ahref=&quot;http://google.com/search?q=marty&amp;ie=utf-8&quot;&gt; Search Google for Marty &lt;/a&gt; &lt;/p&gt; The above code produces:

  31. <del>Final Exam</del> <ins>Midterm</ins> • content that should be considered deleted or added to the document (inline) <p> <del>Final Exam</del> <ins>Midterm</ins> is on <del>Aug 29</del> <ins>Apr 17</ins>. </p> Deletions and insertions:

  32. an abbreviation, acronym, or slang term (inline) <p> Safe divers always remember to check their <abbr title="Self-Contained Underwater Breathing Apparatus">SCUBA</abbr> gear. </p> Abbreviations:

  33. a short section of computer code (usually shown in a fixed-width font) <p> The <code>ul</code> and <code>ol</code> tags make lists. </p> Computer Code:

  34. a large section of pre-formatted text (block) <pre> Steve Jobs speaks loudly reality distortion Apple fans bow down </pre> • displayed with exactly the whitespace / line breaks given in the text • shown in a fixed-width font by default Preformatted text:

  35. information about your page (for a browser, search engine, etc.) <meta charset="utf-8" /> <meta name="description" content="Authors' web site for Building Java Programs." /> <meta name="keywords" content="java, textbook" /> • placed in the head section of your HTML page • meta tags often have both the name and content attributes • some meta tags use the http-equiv attribute instead of name • the meta tag with charset attribute indicates language/character encodings • using a meta tag Content-Type stops validator "tentatively valid" warnings Web page meta data:

  36. A favicon (short for 'favorites icon'), also known as a website icon, a page icon or urlicon, is an icon associated with a particular website or webpage. • Any appropriately sized (16×16 pixels or larger) image can be used, and although many still use the ICO format, other browsers now also support the animated GIF and PNG image formats. <link rel="shortcut icon" href="images/favicon.png" type="image/png"> <link rel="icon" href="images/favicon.png" type="image/png"> Favorites icon:

  37. Chapter 2 Quiz due by Friday of week 3 Homework problem due by Friday Week 4 Quiz:

More Related