background: html and css
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
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.
Display an image
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>
Lists
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
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
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
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>
A table
• Link to table
• Table source
An html form from Dietel’s XML text
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
Internal stylesheet
• Source is at Grocerylist.html
Importing an external style-sheet
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>
In line CSS (from Dietel’s XML text)
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>
Another inline CSS example
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.