DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: Homework

  1. #1
    Join Date
    Apr 2011
    Posts
    1

    Homework

    Please I am new to XML i really need to know how to create a different pages in my website. LIke the link to the homepage,welcome page, contact and so on. Please need just example in XML and Xslt or even css. Please somebody help.

  2. #2
    Join Date
    May 2009
    Posts
    60
    a little starthelp

    is working with css javascript xml xsl
    in tag info a text for page

    Code:
    <?xml version="1.0"?>
    <?xml-stylesheet href="homepage.xsl" type="text/xsl" ?>
    <homepage>
    	<data>
    		<info>
    			<title>My Homepage</title>
    
    			<text>Hello to my Home page</text>
    		</info>
    		<info>
    			<title>Information XML</title>
    
    			<text>XML information</text>
    		</info>
    		<info>
    			<title>Contact</title>
    
    			<text info="Phone">555 123456</text>
    			<text info="Street">New York Drive</text>
    		</info>
    		<menu>
    			<item>Home</item>
    			<item>Information XML</item>
    			<item>Contact</item>
    		</menu>
    	</data>
    </homepage>
    Code:
    <?xml version="1.0"?>
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    	<xsl:output indent="yes" method="html"/>
    	<xsl:template match="/">
    		<html>
    			<script type="text/javascript">
    				<xsl:text>
    				var dis="";
    				function on(das){
    				if(dis != "")
      					document.getElementById(dis).style.display='none';  
     					if(document.getElementById(das).style.display=='none'){ 
      						document.getElementById(das).style.display='block';  
      					}
    					else{  
      						document.getElementById(das).style.display='none';
      					}  
     					dis = das;
    				}
    				</xsl:text>
    			</script>
    
    			<style type="text/css">
    				<xsl:text>
    			.menu
    			{
       			position: absolute;   
       			height: auto; width: 250px;    
       			left: 20px; top: 30px;    
    			}     
    			.page{
    			position: absolute;          
    		   	height: auto; width: 60%;
              	left: 310px; top: 9px;
    		  	}
    			</xsl:text>
    			</style>
    
    			<body onload="on('page1');">
    				<xsl:apply-templates select="homepage"/>
    			</body>
    		</html>
    	</xsl:template>
    	<xsl:template match="homepage">
    		<xsl:apply-templates select="data"/>
    	</xsl:template>
    	<xsl:template match="data">
    		<xsl:apply-templates select="info"/>
    		<xsl:apply-templates select="menu"/>
    	</xsl:template>
    	<xsl:template match="info">
    		<div class="page" id="page{position()}" style="display: none;">
    			<h1>
    				<xsl:value-of select="title"/>
    			</h1>
    			<xsl:apply-templates select="text"/>
    		</div>
    	</xsl:template>
    	<xsl:template match="text">
    		<p>
    			<xsl:value-of select="@info"/>
    			<xsl:apply-templates select="@info"/>
    			<xsl:value-of select="."/>
    		</p>
    	</xsl:template>
    	<xsl:template match="@info"><xsl:text> : </xsl:text></xsl:template>
    	<xsl:template match="menu">
    		<div class="menu">
    			<xsl:apply-templates select="item"/>
    		</div>
    	</xsl:template>
    	<xsl:template match="item">
    		<li>
    			<a href="javascript:on('page{position()}');">
    				<xsl:value-of select="."/>
    			</a>
    		</li>
    	</xsl:template>
    </xsl:stylesheet>
    result
    Code:
    <html>
      <script type="text/javascript">
    				var dis="";
    				function on(das){
    				if(dis != "")
      					document.getElementById(dis).style.display='none';  
     					if(document.getElementById(das).style.display=='none'){ 
      						document.getElementById(das).style.display='block';  
      					}
    					else{  
      						document.getElementById(das).style.display='none';
      					}  
     					dis = das;
    				}
    				
      </script>
      <style type="text/css">
    			.menu
    			{
       			position: absolute;   
       			height: auto; width: 250px;    
       			left: 20px; top: 30px;    
    			}     
    			.page{
    			position: absolute;          
    		   	height: auto; width: 60%;
              	left: 310px; top: 9px;
    		  	}
    			
      </style>
      <body onload="on('page1');">
        <div class="page" id="page1" style="display: none;">
          <h1>My Homepage</h1>
          <p>Hello to my Home page</p>
        </div>
        <div class="page" id="page2" style="display: none;">
          <h1>Information XML</h1>
          <p>XML information</p>
        </div>
        <div class="page" id="page3" style="display: none;">
          <h1>Contact</h1>
          <p>Phone : 555 123456</p>
          <p>Street : New York Drive</p>
        </div>
        <div class="menu">
          <li>
            <a href="javascript:on('page1');">Home</a>
          </li>
          <li>
            <a href="javascript:on('page2');">Information XML</a>
          </li>
          <li>
            <a href="javascript:on('page3');">Contact</a>
          </li>
        </div>
      </body>
    </html>

Similar Threads

  1. Replies: 2
    Last Post: 11-08-2010, 12:36 PM
  2. VB.net Homework project
    By firedwg1 in forum .NET
    Replies: 5
    Last Post: 06-29-2006, 01:54 AM
  3. java homework
    By Mona in forum Java
    Replies: 6
    Last Post: 06-22-2006, 02:54 AM
  4. Replies: 2
    Last Post: 05-11-2006, 01:29 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center