Download
1 / 31
310 likes | 404 Vues
Background: HTML and CSS. Chapters 1-4 of Deitel XML text. Remarks. There is a lot of important and useful discussion on html in the text that is not covered in this ppt. I have simply picked a few interesting examples. You may need to work through the rest of these chapters for yourself.
E N D
Background: HTML and CSS Chapters 1-4 of Deitel XML text
Remarks • There is a lot of important and useful discussion on html in the text that is not covered in this ppt. • I have simply picked a few interesting examples. • You may need to work through the rest of these chapters for yourself.
A little background: HTML • Hypertext markup language is processed by the browser (or some html parser) and content is displayed. • The language consists of tags opening and closing instructions, like font settings, anchors, applets, and forms. • The material (data) thus presented is said to be “marked up” using the defined tags. • This course won’t cover much html per se.
An image <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>XML How to Program - Welcome</title> </head> <body> <p><img src = "xmlhtp.jpg" height = "238" width = "183" alt = "Cover of XML How to Program"></p> </body> </html>
Code for lists html example is in the ppt notes for this slide <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>XML How to Program - Lists</title> </head> <body> <h1>The Best Features of the Internet</h1> <ul> <li>You can meet new people from countries around the world.</li> <li>You have access to new media as it becomes public: <!-- This starts a nested list, which uses a modified --> <!-- bullet. The list ends when you close the <ul> tag --> <ul> <li>New games</li> <li>New applications <!-- Another nested list --> <ul> <li>For business</li> <li>For pleasure</li> </ul> <!-- This ends the double nested list --> </li> …
Navigation bar <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>XML How to Program - Navigation Bar</title> </head> <body> <p> <a href = "links.html"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page"></a><br> <a href = "list.html"> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page"></a><br> <a href = "contact.html"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page"></a><br> <a href = "header.html"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page"></a><br> <a href = "table.html"> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page"></a><br> <a href = "form.html"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form"></a><br> </p> </body> </html>
Page with links <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>XML How to Program - Links</title> </head> <body> <h1>Here are my favorite Internet Search Engines</h1> <p><strong>Click on the Search Engine address to go to that page.</strong></p> <p><a href = "http://www.yahoo.com">Yahoo</a></p> <p><a href = "http://www.altavista.com">AltaVista</a></p> <p><a href = "http://www.askjeeves.com">Ask Jeeves</a></p> <p><a href = "http://www.webcrawler.com">WebCrawler</a></p> </body> </html>
Send mail <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>XML How to Program - Contact Page</title> </head> <body> <p>My email address is <a href = "mailto:deitel@deitel.com"> deitel@deitel.com</a>. Click on the address and your browser will open an email message and address it to me.</p> </body> </html>
A table • Link to table • Table source
The source for form from Dietel’s XML text • In notes below • And at htmlform.html
What’s wrong with html? • Network programmers found html too limiting. It is ok for web page content, but what about presenting material for some specialized application, like molecular structure? • Also, there are inconsistencies and ambiguities in some expression definitions. • Many browsers accept/process HTML, even though it has errors.
Aside: And what is XML? • XML was developed by a consortium of programmers. It is “eXtensible Markup Language”. A developer can use the “element” tag to create his own entities for application-specific needs.
Aside continued: DTD, DOM and Schema • We will learn more about these, but DTD references appear in the CSS examples. • DTD: Document type declarations define an XML document’s structure. A DTD is not required for an XML document but they insure conformity. DTDs use a modified BNF for defining entities, called extended Backus-Nauer Form. An XML or HTML document might reference a DTD at the top. • Schema: There is currently a shift away from DTDs to Schema for defining XML structure. Schema uses XML syntax and both W3C and MS have defined schema standards. • DOM is a tree-structure, recommended by W3C for representing an XML document. (Any directory-style tree would work.)
CSS: cascading style sheet • A CSS can be internally or externally defined. It is a style sheet that tells the browser how to represent the html document.
Internal stylesheet • Source is at Grocerylist.html
links • Grocery is at grocery2.html • Stylesheet is at styles.html
An external style sheet: code part 1 /* An external stylesheet */ a { text-decoration: none; } a:hover { text-decoration: underline; color: red; background-color: #ccffcc; } li em { color: red; font-weight: bold; } ul { margin-left: 2cm; } ul ul { text-decoration: underline; margin-left: .5cm; }
Importing a style sheet (example continued) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <!-- Linking external style sheets --> <head> <title>XML How to Program - Importing Style Sheets</title> <link rel = "stylesheet" type = "text/css" href = "styles.css"> </head><body> <h1>Shopping list for <em>Monday</em>:</h1> <ul> <li>Milk</li> <li>Bread <ul> <li>White bread</li> <li>Rye bread</li> <li>Whole wheat bread</li> </ul> </li> <li>Rice</li> <li>Potatoes</li> <li>Pizza <em>with mushrooms</em></li> </ul> <p> <a href = "http://food.com">Go to the Grocery store</a> </p> </body></html>
Source for inline CSS document “width.html” <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <!-- Setting box dimensions and aligning text --> <head> <title> Box Dimensions</title> <style type = "text/css"> div { background-color: #ffccff; margin-bottom: .5em } </style> </head><body> <div style = "width: 20%">Here is some text that goes in a box which is set to stretch across twenty precent of the width of the screen.</div> <div style = "width: 80%; text-align: center"> Here is some CENTERED text that goes in a box which is set to stretch across eighty precent of the width of the screen.</div> <div style = "width: 20%; height: 30%; overflow: scroll"> This box is only twenty percent of the width and thirty percent of the height. What do we do if it overflows? Set the overflow property to scroll!</div> </body></html>
Source for borders2.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>XML How to Program - Borders</title> <style type = "text/css"> body { background-color: #ccffcc } div { text-align: center; margin-bottom: .3em; width: 50%; position: relative; left: 25%; padding: .3em } </style> </head> <body> <div style = "border-style: solid">Solid border</div> <div style = "border-style: double">Double border</div> <div style = "border-style: groove">Groove border</div> <div style = "border-style: ridge">Ridge border</div> <div style = "border-style: inset">Inset border</div> <div style = "border-style: outset">Outset border</div> </body> </html>
HW on this section • Use my form, table and html/css examples to produce your own form, table and html/css. Post these 3 exercises and email me the links.
