The ECEn XML Web Templates (v. 3_7)
 'Howdy World' Tutorial
|
'Howdy World' Tutorial
The Howdy World Tutorial is a simple, hands-on tutorial with bits of explanation
along the way. Requires that you have access to some
web space on the ECEn web server.
This tutorial assumes two things: | 1 | You have space on the ECEn webserver.
|
| 2 | You know how to access and edit web pages on the ECEn webserver.
|
If you don't have space for your web page on the ECEn webserver (and would like some), or have space and don't know how to access it, please
contact us
so we can help.
In this tutorial, we will create a simple ECEn xml web page. Check out the final creation. This tutorial is designed to teach you:  | Enough about basic xml to get your page up and running...
|
| How to wrap basic content in ECEn web xml...We'll cover how to put basic content, like text and headings, in an
ECEn Web Templates-style XML file. Check out
the final creation to see for yourself!
|
The one thing you must know about XML...
1Every bit of information in an xml document is wrapped in tags.
Every bit of information in an xml document is wrapped in tags. Tags describe content within xml files. Check out these examples:
<tag> Information within the tag </tag>
<text> This part of the content is described as text </text>
<related-page> This part of the content is described as a related page </related-page>
there is really more than just one thing you should know about XML, but understanding how tags work is probably
all you need to succeed in this tutorial. If you want to know more about XML, check out General XML Fundamentals. If you know HTML, it would be a good idea to look at the General XML Fundamentals to get a feel for the differences between HTML and XML.
Creating your first XML web page...
Alright, now that we know a bit about XML and you have some ECEn web space to work with, we can make the page. Every ECEn XML Web Templates page needs two files in the same directory: | page_name.xml
|
| page_name.phtml
|
| 1.1 | Create the .xml file. If you wish, you can download the starter xml page for this tutorial. (Right click on the link and choose Save Link As...)
|
| 1.2 | Create the .phtml file by creating an empty text file and pasting the following line within it: <? include("/var/www/include/xml_templates_3_7/template.php"); ?> Or, you may download this standard .phtml file. (Right click and Save Link As...) You must rename this file
to whatever you named the .xml file (but with .phtml on the end instead
of .xml). An .xml file with an empty or missing .phtml file will not render!
|
Be careful on Windows: it might try to append extra file extensions to your newly created .xml and .phtml files. These extra extensions will break the ECEn templates.
You can avoid this problem when you save your file. Near the bottom of the Save dialog box, select 'All Files' in the 'Save as Type:' drop down menu.
At this point, you've set up a blank .xml file (or downloaded the starter xml file) and a .phtml file with the
special line of text in it both in the same directory somewhere on the ECEn webserer.
Now we'll go through the steps to put your basic web page together. If you downloaded the starter xml page you won't have to do most of the xml writing. However, it is a good idea to read through and get a feel
for how each XML tag builds your web page. If you run into trouble while you're typing away creating your very first XML web page, don't worry! If the page comes up with 'An error
was encountered while parsing the XML file...' or something else unexpected happens, have a look at General XML Fundamentals, which points out common misunderstandings about XML. If you still need help, don't hesitate to email the ECEn Web Team. | 2.1 | The <page> tag - Place an opening and closing page tag in the .xml file. As you probably guessed, this tag encapsulates all of the tags that form
your web page. If you place any xml tags or other content outside this tag, the
ECEn XML Templates won't interpret them as part of your page and may not work at all.
|
| 2.2 | The <parent-page> tag - Place an opening and closing parent-page tag in the .xml file
within the opening and closing page tags.
At the top of this page, on the left side, is a breadcrumb. It is
a list of pages to guide you through the hierarchy leading to your
current web page. Specify the parent page of this web page, or the
page that led you to this one, within the parent-page tags.
If you're not sure what page to use as the parent-page, just use
http://www.ece.byu.edu/index.xml for now.
(If you're wondering, the breadcrumb gets its name from fairytale
characters Hansel and Gretal, who left a trail of breadcrumbs to
find their way out of a forest they were lost in.)
|
| 2.3 | The <style> tag - On the next line, place an opening and closing style tag beneath the parent-page tag.
This style tag indicates how you'd like your page to look. There
are two page styles we'll worry about here: 'main page' and
'secondary page'. In this tutorial, we are creating a secondary
page, so type 'secondary page' between the style tags.
|
| 2.4 | The <title> tag - Place an opening and closing title tag beneath the style tag.
This tag specifies the title of your page that appears in browser title bar.
Don't type the text for the title just yet.
|
| 2.5 | The <text> tag - Place an opening and closing text tag within the title tags.
Within the opening and closing text tags, type the title for this page, maybe
something like 'Hello World'.
It might feel a bit verbose to have the real text within a a text tag within a
title tag, but title tags can contain more
than just plain text in some cases.
|
| 2.6 | The <name> tag - Place an opening and closing name tag beneath the title tag.
Remember the breadcrumb? The name tag specifies the text for this
page in the breadcrumb. Type a meaningful name in the breadcrumb,
such as 'Hello World'.
Note: try to avoid using 'exotic' characters (like # and % and so
on) in names---stick to numbers, letters, spaces and simple
punctuation where possible.
|
| 2.7 | The <content> tag - Place an opening and closing content tag after the name tag.
Finally, we can get to the content in the page. All the tags up till
this one have specified the format and headings for this web page. All the tags within this tag
will specify the text, paragraphs, links, pictures, and tables etc. within the web page.
|
| 2.8 | The <section> tag - Place an opening and closing section tag in the content tags. The section tag is at the heart of organizing your content in the ECEn
Web Templates. Sections are used for organizing all sorts of text and other content.| 2.8.1 | Within the section tags, create opening and closing title tags. Sections, just
like pages, can have titles. This title tag will have text, so type opening and closing
text tags within the title tags. Between the text tags, specify a title for this section,
something like 'Hi, World', for variety's sake.
Note that the title of this section is rendered as a heading.
Just organize your text in titled sections and the XML templates will keep track
of what headings will look like.
|
| 2.8.2 | Finally, create an opening and closing text tag. Type whatever text you wish within
it.
|
|
Congratulations! Hopefully, you've gotten a glimpse at how the ECEn web templates
work, how to use them, and what you might use them for. Feel free to return to the ECEn Web Templates documentation main page to see how to create lists, tables, pictures, main pages, and more. If you have any
questions or concerns, please let us know.
|
|
Hello World Downloads
|
