Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Document
Document related concepts
Transcript
ACT102 INTRODUCTION TO WEB PAGE DEVELOPMENT BASIC XHTML TAGS BASIC HTML TAGS Reading Chapter 2 Basic Web HTML Standards More HTML Elements HYPERTEXT MARKUP LANGUAGE 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 STRUCTURE OF AN HTML PAGE <!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 BLOCK AND INLINE ELEMENTS 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> <img src="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-LEVEL VS. INLINE ELEMENTS Block-level element/tag Inline elements define a complete section or block of text Can contain inline element and block-level element 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> EXAMPLES OF BLOCK AND INLINE 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) 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> 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!!!!!!!!!!!! PAGE TITLE: <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 PARAGRAPH: <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 "our honored hostess." 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 "the fastest way" 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 HEADINGS: 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 HORIZONTAL RULE: <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 --> HTML TAGS CAN HAVE ATTRIBUTES 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 --> <img src="bunny.jpg" alt="pic from Easter" /> LINKS: <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 IMAGES: <img /><!– self closing and is not pared --> inserts a graphical image into the page (inline) syntax <img src="images/text.jpg" alt=“Cover of our course textbook" /> src attribute 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) LINE BREAK: <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 PHRASE ELEMENTS : <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> COMMENTS: <!-- each language has its own comment tag these are HTML comments --> text placed between the two <!-browser --> tags is ignored by the <!-- 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 NESTING TAGS <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 WEB STANDARDS 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. W3C HTML VALIDATOR <p> <a href="http://validator.w3.org/check/referer"> <img src=“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 UNORDERED LIST : <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> 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 ORDERED LISTS: ol represents a numbered list of items (block) viewed in IE <p>RIAA business model:</p> <ol> <li>Sue customers</li> <li>???</li> <li>Profit!</li> </ol> we can make lists with letters or Roman numerals using CSS (later) DEFINITION LIST: <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> QUOTATIONS: <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> INLINE QUOTATION: <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 " using <q> allows us to apply CSS styles to quotations (seen later) HTML CHARACTER ENTITIES a way of representing Unicode characters within a web page Character(s) Entity <> < éèñ é è ñ ™© ™ © πδΔ π δ Δ И И “& " & Complete list of HTML entities > ENTITY EXAMPLE: <p> <a href="http://google.com/search?q=marty&ie=utf-8"> Search Google for Marty </a> </p> The above code produces: DELETIONS AND INSERTIONS: <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> ABBREVIATIONS: 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> COMPUTER CODE: 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> PREFORMATTED TEXT: 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 WEB PAGE META DATA: 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 FAVORITES ICON: 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"> QUIZ: Chapter 2 Quiz due by Friday of week 3 Homework problem due by Friday Week 4
