Background HTML and CSS Chapters 1 4 of

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 "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/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 "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/strict. dtd"> <html> <head> <title>XML How to Program - Lists</title> </head> <body> <h 1>The Best Features of the Internet</h 1> <ul> <li>You can meet new people from countries around the world. </li> <li>You have access to new media as it becomes public:   <ul> <li>New games</li> <li>New applications  <ul> <li>For business</li> <li>For pleasure</li> </ul>  </li> …

Navigation bar

Navigation bar <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/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> <a href = "list. html"> <img src = "buttons/list. jpg" width = "65" height = "50" alt = "List Example Page"></a> <a href = "contact. html"> <img src = "buttons/contact. jpg" width = "65" height = "50" alt = "Contact Page"></a> <a href = "header. html"> <img src = "buttons/header. jpg" width = "65" height = "50" alt = "Header Page"></a> <a href = "table. html"> <img src = "buttons/table. jpg" width = "65" height = "50" alt = "Table Page"></a> <a href = "form. html"> <img src = "buttons/form. jpg" width = "65" height = "50" alt = "Feedback Form"></a> </p> </body> </html>

Page with links

Page with links <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/strict. dtd"> <html> <head> <title>XML How to Program - Links</title> </head> <body> <h 1>Here are my favorite Internet Search Engines</h 1> <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">Alta. Vista</a></p> <p><a href = "http: //www. askjeeves. com">Ask Jeeves</a></p> <p><a href = "http: //www. webcrawler. com">Web. Crawler</a></p> </body> </html>

Send mail

Send mail <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/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

An html form from Dietel’s XML text

The source 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 “e. Xtensible 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 W 3 C and MS have defined schema standards. • DOM is a tree-structure, recommended by W 3 C 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 grocery 2. 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: 2 cm; } ul ul { text-decoration: underline; margin-left: . 5 cm; }

Importing a style sheet (example continued) <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/strict. dtd"> <html>  <head> <title>XML How to Program - Importing Style Sheets</title> <link rel = "stylesheet" type = "text/css" href = "styles. css"> </head><body> <h 1>Shopping list for <em>Monday</em>: </h 1> <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 "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/strict. dtd"> <html>  <head> <title> Box Dimensions</title> <style type = "text/css"> div { background-color: #ffccff; margin-bottom: . 5 em } </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 borders 2. html <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/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: . 3 em; width: 50%; position: relative; left: 25%; padding: . 3 em } </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.