Defining XML elements. [Archive]

Mr Initial Man

09-08-2005, 06:13 PM

I'm writing an HTML tutorial, and one thing I thought of doing was creating pages that showed the actual HTML Coding. Because of the elements needed, I decided to use XML.

This is an HTML page that shows what I have in mind. (http://coachrandom.furtopia.org/tutorial/framesetcode.html)

This is the XML file I'm working with. (http://coachrandom.furtopia.org/tutorial/presentationframes.xml)

What I'm trying to figure out is how do I define the XML elements?

Charles

09-08-2005, 08:53 PM

You write a DTD.

Mr Initial Man

09-08-2005, 08:57 PM

Am I basically coming up with my own markup language, then?

Please understand, I have never used XML before. This is basically a crash course for me.

LiLcRaZyFuZzY

09-09-2005, 03:40 AM

you might want to read this-> http://www.w3schools.com/dtd/default.asp
and the other xml tutorials at w3schools

Charles

09-09-2005, 04:41 AM

Am I basically coming up with my own markup language, then?If I correctly understand you, then yes.

Mr Initial Man

09-09-2005, 09:36 AM

Thanks for the tutorials. When I've done the DTD, can I use CSS with it? Or is CSS for HTML only?

LiLcRaZyFuZzY

09-09-2005, 10:28 AM

Formatting XML with CSS is NOT the future of how to style XML documents. XML document should be styled by using the W3C's XSL standard!
it can however be done:
http://www.w3schools.com/xml/xml_display.asp

here is an xsl introduction:
http://www.w3schools.com/xml/xml_xsl.asp

and here is a more extensive tutorial on xsl
http://www.w3schools.com/xsl/xsl_languages.asp

Mr Initial Man

09-09-2005, 11:02 AM

Okay, this is my XML file so far:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE showcode SYSTEM "codeml.dtd">
<showcode>
<code>
<line><<name>!DOCTYPE HTML</name> <public>PUBLIC</public> <value>"-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"</value>></line>
<line><<name>html</name> <att>lang</att>=<value>"en"</value> <att>dir</att>=<value>"ltr"</value>></line>
<line><<name>head</name>></line>
<line><<name>title</name>>Presentation<<end>/</end><name>title</name>></line>
<line><<name>meta</name> <att>http-equiv</att>=<value>"Content-Type"</value> <att>content</att>=<value>"text/html; charset=iso-8859-1"</value>></line>
<line><<name>meta</name> <att>http-equiv</att>=<value>"content-script-type"</value> <att>content</att>=<value>"text/javascript"</value>></line>
<line><<name>meta</name> <att>http-equiv</att>=<value>"Content-Style-Type"</value> <att>content</att>=<value>"text/css"</value>></line>
<line><<name>meta</name> <att>name</att>=<value>"Author"</value> <att>content</att>=<value>"John-David Kraaikamp"</value>></line>
<line><<name>meta</name> <att>name</att>=<value>"Description"</value> <att>content</att>=<value>"HTML Tutorial"</value>></line>
<line><<name>meta</name> <att>name</att>=<value>"Keywords"</value> <att>content</att>=<value>"HTML, Tutorial, website, building"</value>></line>
<line><<name>link</name> <att>type</att>=<value>"text/css"</value> <att>rel</att>=<value>"stylesheet"</value> <att>href</att>=<value>"style.css"</value>></line>
<line><<end>/</end><name>head</name>></line>
<line><<name>frameset</name> <att>cols</att>=<value>"50%, 50%"</value>></line>
<line><<name>frame</name> <att>src</att>=<value>"./presentation1.html"</value> <att>name</att>=<value>"side1"</value>></line>
<line><<name>frame</name> <att>src</att>=<value>"./presentation2.html"</value> <att>name</att>=<value>"side2"</value>></line>
<line><<name>noframes</name>></line>
<line><<name>div</name> <att>id</att>=<value>"top"</value>></line>
<line><<name>h1</name>>Presentation<<end>/</end><name>h1</name>></line>
<line><<name>h2</name>>How does it look?<<end>/</end><name>h2</name>></line>
<line><<end>/</end><name>div</name>></line>
<line><<name>div</name> <att>id</att>=<value>"wrapper"</value>></line>
<line><<name>div</name> <att>id</att>=<value>"content"</value>></line>
<line><<name>p</name>>In case you haven't noticed, <<name>a</name> <att>href</att>=<value>"presentation3.html"</value>>this page<<end>/</end><name>a</name>> and <<name>a</name> <att>href</att>=<value>"presentation4.html"</value>>this page<<end>/</end><name>a</name>> look quite different.<<end>/</end><name>p</name>></line>
<line><<name>p</name>>However, their <<name>strong</name>>coding<<end>/</end><name>strong</name>> is the same, except for one crucial difference: the page on the right has the following element removed from the head:<<end>/</end><name>p</name>></line>
<line><<name>p</name> <att>class</att>=<value>"example"</value>><char>&lt;</char>link type="text/css" rel="stylesheet" href="style.css"<char>&gt;</char><<end>/</end><name>p</name>></line>
<line><<name>p</name>>In all other ways, these pages are identicle, except for a slight discrepancy in some of the heading text.<<end>/</end><name>p</name>></line>
<line><<name>p</name>>This is why, when dealing with presentation, you ignore the defaults offered by the elements when it comes to presentation. To cite an earlier page, <<name>cite</name>>How it looks is a function of <<name>em</name>>presentation<<end>/</end><name>em</name>>. HTML is concerned with <<name>em</name>>structure<<end>/</end><name>em</name>>.<<end>/</end><name>cite</name>><<end>/</end><name>p</name>></line>
<line><<name>p</name>>Now that we're dealing with presentation, you'll learn why the default styles of the elements aren't important.<<end>/</end><name>p</name>></line>
<line><<name>p</name>>Years ago (late 1990s, in fact), all presentation was handled by HTML itself. Elements such as <<name>strong</name>>&lt;font&gt;<<end>/</end><name>strong</name>>, <<name>strong</name>>&lt;i&gt; (italics)<<end>/</end><name>strong</name>>, <<name>strong</name>>&lt;b&gt; (bold)<<end>/</end><name>strong</name>>, and <<name>strong</name>>&lt;u&gt; (underline)<<end>/</end><name>strong</name>> were all used to control how the website looked. They're still in use today, though they are no longer needed.<<end>/</end><name>p</name>></line>
<line><<name>p</name>>However, that made for very large, clunky websites. Then, near the turn of the millenium, the World Wide Web Consortium started coming out with <<name>strong</name>>Cascading Style Sheets<<end>/</end><name>strong</name>>, which relieved HTML of the task of presentation.<<end>/</end><name>p</name>></line>
<line><<name>p</name>>In teaching you presentation, I'm going to show how to use <<name>strong</name>>Cascading Style Sheets<<end>/</end><name>strong</name>> (<<name>strong</name>>CSS<<end>/</end><name>strong</name>> for short) to control every aspect of your site's appearance.<<end>/</end><name>p</name>></line>
<line><<name>p</name>>By the way, the text in those two pages is from a latin essay. The last paragraph is the "Lorem Ipsum" text, a "dummy text" which has been used for centuries.<<end>/</end><name>p</name>></line>
<line><<end>/</end><name>div</name>></line>
<line><<name>div</name> <att>id</att>=<value>"menu"</value>></line>
<line><<name>ol</name>></line>
<line><<name>li</name>><<name>a</name> <att>href</att>=<value>"./index.html"</value>>Main<<end>/</end><name>a</name>><<end>/</end><name>li</name>></line>
<line><<name>li</name>><<name>a</name> <att>href</att>=<value>"./intro.html"</value>>Introduction<<end>/</end><name>a</name>><<end>/</end><name>li</name>></line>
<line><<name>li</name>><<name>a</name> <att>href</att>=<value>"./doctype.html"</value>>Document Type Declaration<<end>/</end><name>a</name>><<end>/</end><name>li</name>></line>
<line><<name>li</name>><<name>a</name> <att>href</att>=<value>"./html.html"</value>>HTML Element<<end>/</end><name>a</name>><<end>/</end><name>li</name>></line>
<line><<name>li</name>><<name>a</name> <att>href</att>=<value>"./head.html"</value>>Head Element<<end>/</end><name>a</name>><<end>/</end><name>li</name>></line>
<line><<name>li</name>><<name>a</name> <att>href</att>=<value>"./body.html"</value>>Body Element<<end>/</end><name>a</name>><<end>/</end><name>li</name>></line>
<line><<name>li</name>><<name>a</name> <att>href</att>=<value>"./semantics.html"</value>>HTML Semantics<<end>/</end><name>a</name>><<end>/</end><name>li</name>></line>
<line><<name>li</name>><<name>span</name>>Presentation<<end>/</end><name>span</name>><<end>/</end><name>li</name>></line>
<line><<name>li</name>><<name>a</name> <att>href</att>=<value>"./css.html"</value>>Cascading Style Sheets<<end>/</end><name>a</name>><<end>/</end><name>li</name>></line>
<line><<end>/</end><name>ol</name>></line>
<line><<end>/</end><name>div</name>></line>
<line><<end>/</end><name>div</name>></line>
<line><<name>p</name>> <<name>a</name> <att>href</att>=<value>"http://validator.w3.org/check?uri=referer"</value>><<name>img</name> <att>src</att>=<value>"http://www.w3.org/Icons/valid-html401"</value> <att>alt</att>=<value>"Valid HTML 4.01 Frameset"</value> <att>height</att>=<value>"31"</value> <att>width</att>=<value>"88"</value>><<end>/</end><name>a</name>><<end>/</end><name>p</name>></line>
<line><<end>/</end><name>noframes</name>></line>
<line><<end>/</end><name>frameset</name>></line>
<line><<end>/</end><name>html</name>></line>
</code>
<line>
<link target="./presentation.html">Back to Presentation</link>
</line>
</showcode>

This is my DTD:

<!ELEMENT showcode (#PCDATA|code|line|name|public|att|value|char|end|link)*>
<!ELEMENT code (#PCDATA)>
<!ELEMENT line (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT public (#PCDATA)>
<!ELEMENT att (#PCDATA)>
<!ELEMENT value (#PCDATA)>
<!ELEMENT char (#PCDATA)>
<!ELEMENT end (#PCDATA)>
<!ELEMENT link (#PCDATA)>
<!ATTLIST link target CDATA #REQUIRED>

Here's what I intend to do with my elements:

<showcode> would be sort of like an <html> element, <code> would be my equivalent as a body element. <name>, <public>, <att>, <value>, <char>, and <end> should all work like elements, but each is styled differently.

<line> is supposed to be like a cross between a element and the <li> element for a numbered list (basically, every line would be numbered), and <link> is intended to be like an <a> element. Do I define how these work in XSL or the DTD?

LiLcRaZyFuZzY

09-09-2005, 11:42 AM

did you read the XSLT tutorial?
http://www.w3schools.com/xsl/default.asp

The style is defined in a separate file, the xsl file
and linked to in the xml like this
<?xml-stylesheet type="text/xsl" href="style.xsl"?>

Mr Initial Man

09-09-2005, 12:33 PM

I think I'm getting somewhere, because already I'm in trouble. >.>

My XSL document. (http://www.coachrandom.furtopia.org/tutorial/xml/code.xsl)

My DTD:
<!ELEMENT showcode (#PCDATA|code|line|name|public|att|value|char|end|link)*>
<!ELEMENT code (#PCDATA)>
<!ELEMENT line (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT public (#PCDATA)>
<!ELEMENT att (#PCDATA)>
<!ELEMENT value (#PCDATA)>
<!ELEMENT char (#PCDATA)>
<!ELEMENT end (#PCDATA)>
<!ELEMENT link (#PCDATA)>
<!ATTLIST link target CDATA #REQUIRED>

My XML document (http://www.coachrandom.furtopia.org/tutorial/xml/presentationframes.xml)

For some reason, it's only showing the first line. What did I do wrong?

LiLcRaZyFuZzY

09-09-2005, 01:16 PM

don't have much time right now, but i'll take a look at it when i come back

good luck

LiLcRaZyFuZzY

09-10-2005, 03:14 AM

here you might wanna try this xsl

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html lang="en" dir="ltr">
<head>
<title>Frameset Coding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="John-David Kraaikamp" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="Content-Style-Type" content="text/css" />
<meta name="Description" content="HTML Tutorial" />
<meta name="Keywords" content="HTML, Tutorial, website, building" />
<link type="text/css" rel="stylesheet" href="code.css" />
</head>
<body>
<xsl:for-each select="showcode/code/line">
<xsl:value-of select="line"/>

<xsl:value-of select="name"/>
<xsl:value-of select="att"/>
<xsl:value-of select="end"/>
<xsl:value-of select="public"/>
<xsl:value-of select="char"/>
<xsl:value-of select="value"/>
<a><xsl:value-of select="link"/></a>

</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

the not-displaying was just an XPath error
on this line

<xsl:for-each select="showcode/code/line">

something weird comes up, no indentation, no spaces between attributes, but the whole does show up

Mr Initial Man

09-10-2005, 06:40 AM

Oy. I noticed...

I've been working on a DTD, but that doesn't seem to affect anything, unless I'm doing it completely wrong.