Background: HTML and CSS Chapters 1-4 of Deitel XML text.
-
Upload
trevor-warner -
Category
Documents
-
view
232 -
download
0
Transcript of Background: HTML and CSS Chapters 1-4 of Deitel XML text.
![Page 1: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/1.jpg)
Background: HTML and CSS
Chapters 1-4 of Deitel XML text
![Page 2: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/2.jpg)
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.
![Page 3: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/3.jpg)
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.
![Page 4: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/4.jpg)
Display an image
![Page 5: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/5.jpg)
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>
![Page 6: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/6.jpg)
Lists
![Page 7: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/7.jpg)
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>
…
![Page 8: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/8.jpg)
Navigation bar
![Page 9: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/9.jpg)
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 10: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/10.jpg)
Page with links
![Page 11: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/11.jpg)
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>
![Page 12: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/12.jpg)
Send mail
![Page 13: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/13.jpg)
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:[email protected]"> [email protected]</a>. Click on the address and your browser will open an email message and address it to me.</p>
</body></html>
![Page 14: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/14.jpg)
A table
• Link to table
• Table source
![Page 15: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/15.jpg)
An html form from Dietel’s XML text
![Page 16: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/16.jpg)
The source for form from Dietel’s XML text
• In notes below
• And at htmlform.html
![Page 17: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/17.jpg)
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.
![Page 18: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/18.jpg)
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.
![Page 19: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/19.jpg)
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.)
![Page 20: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/20.jpg)
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.
![Page 21: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/21.jpg)
Internal stylesheet
![Page 22: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/22.jpg)
Internal stylesheet
• Source is at Grocerylist.html
![Page 23: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/23.jpg)
Importing an external style-sheet
![Page 24: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/24.jpg)
links
• Grocery is at grocery2.html
• Stylesheet is at styles.html
![Page 25: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/25.jpg)
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; }
![Page 26: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/26.jpg)
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>
![Page 27: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/27.jpg)
In line CSS (from Dietel’s XML text)
![Page 28: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/28.jpg)
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>
![Page 29: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/29.jpg)
Another inline CSS example
![Page 30: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/30.jpg)
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>
![Page 31: Background: HTML and CSS Chapters 1-4 of Deitel XML text.](https://reader035.fdocuments.us/reader035/viewer/2022081506/56649ccd5503460f949982d9/html5/thumbnails/31.jpg)
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.