Background: HTML and CSS
advertisement
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: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 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.
