The News Box

Learn how to create a news box to post news items on your ECEn XML web page.

News boxes offer an easy way to keep frequent visitors to your website up to date on your basic news. For a class home page, you might post test dates or changes in homework assignnments or due dates. For a research home page, you could list recent publications, awards or discoveries. The list goes on.

News boxes work well on ECEn "main" style pages, like the main ECEn home page. They can also be used on ECEn "secondary" pages, like this help page.

To create a news box in ECEn Web XML, we're going to use <news> tags.

These instructions assume that you already have an ECEn XML web page to edit and know at least a bit about XML. Most content, such as text, links, lists, pictures etc., belongs in the <content> portion of your page; check the instructions below to see if you need to make sure that you have a page with a <content> portion. If you need a quick tutorial or just a simple starter web page download, check out the 'Howdy, World' Tutorial where you can get a brief overview of what files you need to set up a basic ECEn XML web page.

If you need an example, have a look at the News Example page. You can view the XML source in your browser by clicking the 'this XML' link at the bottom of the page. Or, the XML source is located in the Common Tasks Downloads to the right. (Right click, Save Link Target As...)

Basic News Box

Here is some ECEn XML "code" to generate a news box:

<news>

<title>

<text>The Daily Pepper</text>

</title>

<style>visible date</style>

<article>

<title>

<text>Purple Pepper Grown in Provo</text>

</title>

<highlight-picture-file>purple_pepper_sample.png</highlight-picture-file>

<content>

<text>Peter Piper picked the first peck of purple peppers in Provo.</text>

</content>

<related-page>pepper_news.phtml</related-page>

</article>

</news>

Looking at the code, you can see that the entire news box is enclosed in <news> tags and that each news article is enclosed in <article> tags. Most of tags that define the content of the news story are not different than those that define content for typical pages.

There is one major difference between news boxes and other content in that you do not place the news code in the <content> block.

Here is what the news box would look like on an ECEn "secondary" XML web page:

[image]

To create a news box:

1	Create an opening and closing `<news>` tag. Make sure your `<news>` tag is within your `<page>` tags, but not within your `<content>` tags.

2	Within your `<news>` tags, give your news box a title using the `<title>` tags. Within the `<title>` tags, create `<text>` tags, and within them specify the title of your news box. In the sample case, the title was 'The Daily Pepper', but choose whatever is appropriate for your web page.

3	Underneath your`<title>` tags, use a `<style>` tag to specify whether your new box will have a 'visible date' or not. For all the possible new box styles, refer to the ECEn XML Templates Reference.

Now that we have set up a basic news box, we can place our news stories, or articles within it. Underneath your <style> tag, create an <article> tag.
You can place as many articles as you like in your news box, though we recommend about 3 or less. However, make sure not to enclose an article inside another article.

5	Give your article a title. Create `<title>` and `<text>` tags just like we did for the whole news box within the `<article>` tags.

Create opening and closing <highlight-picture-file> tags and specify the name of your news picture within the tags.
The BYU Home Page news item pictures are generally 55 pixels wide and 60 pixels tall---we recommend that you make your news pictures that size, too. The ECEn XML templates do not perform any picture resizing on the fly. If your picture is not that size and you're not comfortable using a graphics editing program to resize it, feel free to contact the ECEn Web Team and we'll be glad to help resize your picture.

After the <highlight-picture-file> tags, create an opening and closing <content> tag. Within the <content> tag, you can place just about any bit of content you like. Most news item simply have a <text> tag here. For a list of all valid news article content have a look at the ECEn XML Templates Reference.

8	If your news story has a web page that explains more about the story or something related, you can create a 'more' link for your news item. Outside of the `<content>` tags, create a `<related-page>` tag that specifies your 'more' link.

Create as many <article> tags as you'd like; we typically recommend three or less.
As you add new articles in your news box, you can expire older articles. Expired articles will not show up on your web page, allowing you to keep track of all your news articles.
To expire a news item: Add a <style> tag and within it specify expired.

What if I still don't get it... Have look at the News Example and if you're still stuck, send an email to the ECEn Web Team and we'll be happy to help you.