More Related Content
Similar to BITM3730Week3.pptx
Similar to BITM3730Week3.pptx (20)
More from MattMarino13
More from MattMarino13 (20)
Recently uploaded
Recently uploaded (20)
BITM3730Week3.pptx
- 1. HTML and XHTML BITM 3730 Developing Web Applications
- 2. HW 1 and 2 Review • HW 1 Example – http://pirate.shu.edu/~marinom6/mattmarino.html • HW 2 Example – http://pirate.shu.edu/~marinom6/schedule.html • Please Note only previously due HW assignments are posted on my pirate.shu.edu web space
- 3. HTML Review • <a href=“websitelink.com”>Website Link</a> serves as code for hyperlinking a website • As discussed href is “hyperlink reference” • The <h1></h1> tag represents a header • <h2></h2>, <h3></h3>, etc. also exist and get smaller
- 4. <div></div> tag • The <div> tag defines a division or a section in an HTML document. • The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. • The <div> tag is easily styled by using the class or id attribute. • Any sort of content can be put inside the <div> tag! • Note: By default, browsers always place a line break before and after the <div> element. • For our purpose, it is important to note the <div> tag serves as a break for a paragraph [<p></p> tag]
- 5. XHTML Basics • XHTML stands for EXtensible HyperText Markup Language • XHTML is a stricter, more XML-based version of HTML • XHTML is HTML defined as an XML application • XHTML is supported by all major browsers
- 6. XHTML for the Experts • XML is a markup language where all documents must be marked up correctly (be "well-formed"). • XHTML was developed to make HTML more extensible and flexible to work with other data formats (such as XML). In addition, browsers ignore errors in HTML pages, and try to display the website even if it has some errors in the markup. So XHTML comes with a much stricter error handling.
- 7. Strict? • <!DOCTYPE> is mandatory • The xmlns attribute in <html> is mandatory • <html>, <head>, <title>, and <body> are mandatory • Elements must always be properly nested • Elements must always be closed • Elements must always be in lowercase • Attribute names must always be in lowercase • Attribute values must always be quoted • Attribute minimization is forbidden
- 8. Example XHTML code • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" • "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <title>Title of document</title> • </head> • <body> • some content here... • </body> • </html>
- 9. Compared to HTML code • <html> • <head> • </head> • <body> • </body> • </html>
- 10. Importance of XHTML • XHTML documents are XML conforming as they are readily viewed, edited, and validated with standard XML tools. • XHTML documents can be written to operate better than they did before in existing browsers as well as in new browsers. • XHTML documents can utilize applications such as scripts and applets that rely upon either the HTML Document Object Model or the XML Document Object Model. • XHTML gives you a more consistent, well-structured format so that your webpages can be easily parsed and processed by present and future web browsers.
- 11. Importance of XHMTL • You can easily maintain, edit, convert and format your document in the long run. • Since XHTML is an official standard of the W3C, your website becomes more compatible with many browsers and it is rendered more accurately. • XHTML combines strength of HTML and XML. Also, XHTML pages can be rendered by all XML enabled browsers. • XHTML defines quality standard for your webpages and if you follow that, then your web pages are counted as quality web pages. The W3C certifies those pages with their quality stamp.
- 12. Important Tags for this week • <p></p> for writing a paragraph with text • <b> - Bold text • <strong> - Important text • <i> - Italic text • <em> - Emphasized text • <small> - Smaller text
- 13. <b> and <strong> tags • In order to bold text you can use either the <b> or <strong> tags • <b>Marino</b> will show up as Marino • <strong>Marino</strong> will show up as Marino • Notice they are both merely bold!
- 14. <i> and <em> tags • In order to italicize text you can use either the <i> or <em> tags • <i>Marino</i> will show up as Marino • <em>Marino</em> will show up as Marino • Notice they are both merely italic!
- 15. <small> tag • This merely makes your text smaller without having to utilize the size attribute or similar attributes within HTML code • Ideally, you use this tag to deemphasize something [things that are not important]
- 16. Keep in Mind Now, but for Later • <form>…</form> - defines a form • <input type…/> - defines a form input • button checkbox file hidden image password radio reset submit text
- 17. Building Assignment 3 • Some suggestions: • <h1></h1> tags for About Me, My Favorite Sport or Musical Act, and My Favorite Animal • <p></p> tags when providing the paragraph about each section • Your paragraph should be any where from 3 to 5 sentences
- 18. Building Assignment 3 Example <h1>About Me</h1> <p>I am an Adjunct Professor of BITM at Seton Hall University. I have taught courses in Management Information Systems [BITM 2701] and Developing Web Applications [BITM 3730]. My web space created for this course is available at <a href="http://pirate.shu.edu/~marinom6/">My Site> </p> You do not need to include any hyperlink for Assignment 3
- 19. Building Project #1 • Refer to Professor Nazzaro’s example at http://pirate.shu.edu/~nazzarma/ • Listing your address while at Seton Hall University instead of your home address is fine • You will in theory only list one degree [the one you will receive at SHU] under Education • Unless you have an Associate’s degree from somewhere • Your Experience will be vastly less • Try to have bullet points on what you did at your job(s)
- 20. Building Project #1 • Your Skills do not have to broken down into different areas • Please list three References [you can include former professors, friends, other people in the class to meet this requirement] • Remember to use the tags discussed to bold and italicize as necessary
- 21. Source Code
- 22. Important Note for Project #1 • Professor Nazzaro’s Resume is created in XHTML • For the purposes of Project #1 you are more than welcome to only use HTML code • Consideration of extra credit will be given if you are able to utilize XHTML properly for Project #1