Presentation is loading. Please wait.

Presentation is loading. Please wait.

Background: HTML and CSS Chapters 1-4 of Deitel XML text.

Similar presentations

Presentation on theme: "Background: HTML and CSS Chapters 1-4 of Deitel XML text."— Presentation transcript:

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 XML How to Program - Welcome Cover of XML How to Program

6 Lists

7 Code for lists html example is in the ppt notes for this slide 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 XML How to Program - Navigation Bar Links Page List Example Page Contact Page Header Page Table Page Feedback Form

10 Page with links

11 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 XML How to Program - Contact Page My email address is 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) 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” 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 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.

Download ppt "Background: HTML and CSS Chapters 1-4 of Deitel XML text."

Similar presentations

Ads by Google