1 / 31

Chapter 4 HTML

Chapter 4 HTML. Objectives. Explain how HTML/XHTML are used and describe the difference between them Interpret HTML code Explain how HTML Forms are used in web applications Interpret HTML Forms Explain the purpose Cascading Style Sheets (CSS) Describe the different formats for CSS code

luisa
Download Presentation

Chapter 4 HTML

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. Chapter 4HTML

  2. Objectives • Explain how HTML/XHTML are used and describe the difference between them • Interpret HTML code • Explain how HTML Forms are used in web applications • Interpret HTML Forms • Explain the purpose Cascading Style Sheets (CSS) • Describe the different formats for CSS code • Interpret CSS code

  3. HTML • HyperText Markup Language (HTML) is the language for writing web pages • HTML/4 is the current version • HTML/4 versions include • strict: strictly enforces syntax rules • traditional: allows informally accepted syntax • frameset: allows the use of HTML frames

  4. XHTML • XHTML is HTML expressed as an XML document • Compared to HTML • XHTML has a more rigorous syntax, which is more machine-readable • XHTML contains more meta-information, i.e., information about the HTML document

  5. HTML Syntax • Each HTML element is defined by a tag, or pair of tags • tags are delimited by angle brackets: < > • tags may include attributes ( name=“value” ) • Paired tags have content • e.g., paragraph: <p>Hello!</p> • Empty tags contain nothing • e.g., <br />, <img src=“ball.jpg” alt=“Ball” />

  6. Sample Web Page

  7. XHTML Headings • XHTML documents start in this form (version XHTML/1-strict) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> define XML version define XML document type start HTML document

  8. <head> element • The first element of an HTML document is the <head> element • defines a document title, among other things • document title appears in the browser title bar <head> <title>Eastern Hills Soccer League</title> </head>

  9. Headings and Paragraphs heading, level1(1-6 available ) <h1>Eastern Hills Soccer League</h1> <hr /> <p><img src="SoccerBall.jpg" alt="Soccer Ball"/></p> <p><strong>EHSL Mission:</strong> to serve all children in the Hills area by providing an opportunity for them to grow up healthy, happy, and strong through participation in the world's greatest competitive sport.</p> horizontal rule image paragraph (text)

  10. Lists • <ul> unordered (bullet) list • <ol> ordered (numbered) list • <li> list item <ul> <li> <a href="standings.html">Current Team Standings</a></li> <li><a href="matches.html">This Week's Matches</a></li> <li><a href="mailto:info@EHSL.org">Contact Us</a></li> </ul>

  11. Hyperlinks • Hyperlinks take the browser to other documents when clicked • Format:<a href=“ …url … “> …link text… </a> • e.g.,<a href="standings.html">Current Team Standings</a>

  12. Tables • An HTML table presents data in a grid format <table border=“1”> <caption>Table Caption</caption> <tbody> <tr> <td>R1,C1</td> <td>R1,C2</td> <td>R1,C3</td> </tr> <tr> <td>R2,C1</td> <td>R2,C2</td> <td>R2,C3</td> </tr> </tbody> </table> Table Caption

  13. HTML Forms • An HTML Form presents a fill-in form for entering data • Form controls include • text box, text area, and password box • check box • radio buttons • drop-down menus • submit buttons

  14. Form tag

  15. Text and Passwords

  16. Check-box and Radio-Buttons

  17. Drop-Down Menus

  18. Submit Buttons

  19. CSS • Cascading Style Sheets is a technique for changing the appearance, or style, of web page elements • Style may be defined in three ways: • in-line: along with an HTML element • internal style sheet: within an HTML document • external style sheet: outside of an HTML document

  20. Style Elements • The “style” of an element can include many visible attributes: • Color • Size • Font • Alignment • Decoration (underline, bold, etc.) • etc.

  21. Style Definition • Style attributes are defined as a set of “name: value” pairs, separated by “;” color: red; background: blue; align: left • Each HTML element has its own set of relevant style attributes

  22. In-Line Style • In-line style is defined using the “style” attribute of an HTML element <p style=“color: blue; text-align: center”>This paragraph is centered in blue</p> This paragraph is centered in blue

  23. Internal Style Sheet • An internal style sheet is defined in the heading of an HTML document • Delimited by <style type=“text/css”>…</style> <head> <title>...</title> <style type=“text/css”> p { color: blue; text-align: center } </style> </head>

  24. Internal Style Sheet • An internal style sheet consists of a set of descriptors • Each descriptor defines the style for one HTML element • Descriptor format: h1 { text-align: center; color: brown } selector declaration block property name / value

  25. Internal Style Sheet selector declaration block property name / value h1 { text-align: center; color: brown } • The selector identifies one or more HTML elements to which the rule applies • multiple elements are comma-separated • Property values in the declaration block apply to each instance of the selected HTML element(s)

  26. Selectors • Descriptors starting with "." define classes that can be referenced in document elements using the class attribute .number { text-align: right } <p class="number">1234</p>

  27. Selectors • Descriptors may also identify established psuedoclasses • e.g., a:hover is applied to hyperlinks only while under the cursor a:hover { background: white }

  28. Internal Style Sheet Example <head> <title>...</title> <style> h1 { color: brown; background-color: lightgray; border: solid gray; text-align:center; padding: .5em; } .strong { font-weight: bold; } .quote { margin-left: 1em; margin-right: 1em; } li { padding-top: 1ex; } a:hover { background-color: lightgray; } </style> </head>

  29. External Style Sheet • An external style sheet has the same format as an internal style sheet, but is stored in a separate document • It is imported into a document with a <link> tag <head> ... <link rel="stylesheet" type="text/css" ref="styles/style-1.css"> </head>

  30. CSS - Precedence • When conflicting style attributes apply to an element, the closest one takes precedence External Style Sheet Internal Style Sheet In-line Style Attribute HTML Element

  31. Review • HTML • XHTML • HTML Forms • Cascading Style Sheets • In-line, internal, and external style sheets

More Related