Download presentation
Presentation is loading. Please wait.
1
Background: HTML and CSS Chapters 1-4 of Deitel XML text
2
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.
3
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.
4
Display an image
5
An image <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XML How to Program - Welcome <img src = "xmlhtp.jpg" height = "238" width = "183" alt = "Cover of XML How to Program">
6
Lists
7
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"> XML How to Program - Lists The Best Features of the Internet You can meet new people from countries around the world. You have access to new media as it becomes public: tag --> New games New applications For business For pleasure …
8
Navigation bar
9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XML How to Program - Navigation Bar <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page"> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page"> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form">
10
Page with links
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XML How to Program - Links Here are my favorite Internet Search Engines Click on the Search Engine address to go to that page. Yahoo AltaVista Ask Jeeves WebCrawler
12
Send mail
13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XML How to Program - Contact Page My email address is deitel@deitel.com. Click on the address and your browser will open an email message and address it to me.
14
A table Link to table Table source
15
An html form from Dietel’s XML text
16
The source for form from Dietel’s XML text In notes below And at htmlform.htmlhtmlform.html
17
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.
18
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.
19
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.)
20
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.
21
Internal stylesheet
22
Source is at Grocerylist.htmlGrocerylist.html
23
Importing an external style-sheet
24
links Grocery is at grocery2.htmlgrocery2.html Stylesheet is at styles.htmlstyles.html
25
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; }
26
Importing a style sheet (example continued) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XML How to Program - Importing Style Sheets Shopping list for Monday : Milk Bread White bread Rye bread Whole wheat bread Rice Potatoes Pizza with mushrooms Go to the Grocery store
27
In line CSS ( from Dietel’s XML text)
28
Source for inline CSS document “width.html” <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Box Dimensions div { background-color: #ffccff; margin-bottom:.5em } Here is some text that goes in a box which is set to stretch across twenty precent of the width of the screen. Here is some CENTERED text that goes in a box which is set to stretch across eighty precent of the width of the screen. 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!
29
Another inline CSS example
30
Source for borders2.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XML How to Program - Borders body { background-color: #ccffcc } div { text-align: center; margin-bottom:.3em; width: 50%; position: relative; left: 25%; padding:.3em } Solid border Double border Groove border Ridge border Inset border Outset border
31
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.
Similar presentations
