html-tags

HTML documents are plain-text, also known as ASCII files, that can be created using any simple text editor like Notepad or WordPad on Windows. It is best to create your code with these simple text editors as opposed to Word or WordPerfect, which may reformat your code as you create it. You are probably wondering how any lowly text editor could design such sophisticated-looking Web sites. Well, it’s the Web browser that determines how the page actually looks. The browser reads the text, looks for HTML markings, then visually displays the page according to the instructions.

The only drawback to this is that it is impossible to know what your page will look like when it is done. Fortunately, you can do a test run on a browser before you actually publish your page. It’s not a perfect scenario, but it works.

You will also need access to a Web server to get your files on to the Web. Contact your local internet provider to see if you can post your files free of charge.

TAGS

The tag is a code that describes how the images and texts are going to appear on your site. For example, if you want a certain word or block of text bold, you would type it as follows: (the tag for bold is <B>)

<B>Welcome To My Web Page</B>

The first <B> instructs the browser to make anything after it appears bold. The second </B> (notice the backslash to denote an ending bracket) tells the browser to stop the bold instructions.

Tags denote the various elements in an HTML document. An element is a basic component in the structure of a text document. Elements can be heads, tables, paragraphs, and lists; and they may contain plain text, other elements, or a combination of both.

An HTML tag is made up of a left angle bracket (<), a tag name, and a right angle bracket (>). They are usually paired to begin and end the tag instruction. For example, <H1> and </H1>. The end tag is similar to the start tag except that a slash “/” precedes the text within the brackets.

Some elements may include an attribute or additional information inside the start tag. For example, if we wanted to create a table using HTML, we would use the table tag, <table>. We could add attributes to the tag to define the border and width of the table, as in: <table border=2 width=100%>.

Mark-Up Tags

* HTML–This announces to your browser that the file contains HTML coded information. The file extension .html also indicates that this is an HTML document and must be coded. The final tag in your document will be </HTML>.

* Head–The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser’s window.

<head>

<title> my web page </title>

* Title–The title element contains your document title and identifies its content in a global context. The title is usually displayed in the title bar at the top of the browser window, but not inside the window itself. The title is also what is displayed on someone’s hotlist or bookmark list, so choose something descriptive, unique, and relatively short.

</head>

* Body–The second and largest part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window).

* Headings–HTML has six levels of headings numbered one through six, with one being the largest. Headings are usually displayed in larger and/or bolder fonts. The first heading in each document could be tagged <H1>.

<body>

<H1> This displays a large font </H>

Additional code here

* Paragraphs–You must indicate paragraphs with &lt;P&gt; elements. Without them, the document becomes one large paragraph. Your browser doesn’t acknowledge carriage returns, so when it comes across a spot where you pressed Enter, it will just keep reading the text until it comes to &lt;P&gt;. You can also use break tags (<br>) to identify a line break.

</body>

* Lists–Sometimes you’ll want to present your information in the form of a list. HTML lets you create unnumbered, numbered, bulleted, and definition lists.

* Tables–You can also set up data into tables. HTML reduces multiple spaces to a single space and doesn’t pay attention to tabs. You can use rows and columns, however, and that will work in most situations. Refer to your selected text for more information.

ADDING IMAGES TO YOUR WEB PAGE

When you display images on your Web page, they don’t actually appear on your text editor. All you do is add a tag to the document that basically says “add image here.”

Use the image tag and define the source, which is the location of where the image is located.

<IMG SRC=”A:myimage.gif”>

This HTML tag will display the image named myimage.gif, which is located on the A: drive.

CREATING A HYPERLINK

This is the backbone of all Web pages–creating the ability for your user to link to other locations, whether it be relative (within your own Web site) or absolute (to some other Web site). Here is an example.

<A HREF=”HTTP://www.google.com”>GO TO GOOGLE</A>

This bit of HTML code will display the words “Go to AOL” on your page and will be linked to the AOL Web site. The user can click on these words to complete the link.

YOU’RE ON YOUR WAY

Although there is much more to know about decorating” and designing your page for optimum beauty and presentation, hopefully, you understand what HTML is about and how to go about making use of it. The concept isn’t too far out-once you grasp it you should zip through the basics in no time.

Last year marked a revolution in back-end design. The major force behind this change was not just a need for better functionality but for a better process in Web development. In an industry survey from 1999, Web startups found that 80 percent of their budget was typically spent on development costs. These companies also observed that the best site redesign every two months. The enormous development costs got people’s attention. Complex, transaction-heavy sites were demanding better processes. The old one-tier sites with static HTML or just CGI were fading away, and even the newer, two-tier systems like flat ASP or Cold Fusion were becoming impossible to keep clean and updateable.

web-development

What is meant exactly by tiered site architecture? The three aspects of any site are presentation, logic, and data. The further you separate these areas, the more layers, or “tiers,” your system has. The earliest Web sites were static HTML pages, with maybe some small logical piece running HTML forms through a Common Gateway Interface (CGI). Sites like the initial CERN Web site and many university Web sites still combine presentation, logic, and data in one layer. The problem with this approach is that when you change any one aspect you have to wade through all the rest. For example, if you want to change the site’s presentation (i.e., do a redesign), the code and data are also affected. Two-tier architecture sites, like the early HotWired and current sites like Reebok.com and Discover.com, divide the site into two layers: a combined presentation and logic layer and a separate database. This was an improvement over single-tier architecture, as changes in content (publishing a new article, for example) only affected the database and didn’t impact the site’s logic or design. But a change in the site’s design still risked messing up the logical portion.

Enter the three-tier system, perhaps best exemplified currently by base technologies like ATG Dynamo, and now cropping up everywhere. Amazon and E*Trade are two sites that are now fully three-tier. In this system, designers and information architects work on the front layer or interface of a Web site, programmers and software architects work on the middle layer, and integrators and database designers work on the back end. The three-tier system is currently a great way to make the three pieces of Web development (front, middle, and rear) operate with some independence from each other. This independence allows sites to be built more quickly and also permits one tier to be altered without rewriting the others. Nam Szeto, creative director at Rare Medium in New York, notes that “if more strides can be made to free up the display layer from the business logic layer, Web designers and developers can enjoy more freedoms building sophisticated and elegant interfaces that aren’t wholly contingent on whatever happens on the back-end.”

Working within a good three-tier system permits designers to develop a dynamic interface in a meaningful, malleable way, taking into consideration the ultimate purpose of the site, and working with–not against–the structure of the site’s data and content. The two most important components of back-end functionality that specifically affect the designer’s job are transactions and content management. In order to have a site that can be at all affected by the people who use it, the site must be able to handle transactions. Content management allows a site’s editorial staff to keep the content fresh by rotating news, posting articles, and updating information. Whether it’s an experimental site to express oneself or a retail site that delivers products to customers, both of these components–transactions and content management–will affect how ultimately compelling the user-experience is and how flexible the front-end can and should be.

Transactions allow a user to take actions that affect the site or the real world: pay a bill, buy a product, or post a message to a bulletin board–they are an integral part of a site’s interactivity. Usually, transactions involve HTML pages that present a face for an application server, which then does the actual work. (An application server is a generic framework that allows the installation of custom software components that provide the functionality necessary in a transactional site.)

Content management, the second task of back-end technology, is the be-all and end-all of sites like online newspapers. Workflow is also a part of this picture, permitting articles in a newspaper to be entered by a reporter, proofread by a proofreader, modified and approved by an editor, and posted to the site by another editor. The workflow also allows a story to be published live and on schedule, and retired to the archive at the appropriate time. A number of systems have been built to handle content management on the Web. A system called Vignette is one of the largest, and though it is two-tier, it performs workflow and content management very well. In the future, the popular content management systems, including Vignette, will begin relying more and more on Extensible Markup Language (XML) and will make their systems fully three-tier. This bodes well for sites that combine content and transaction.

Besides workflow, another important subcategory of content management is templating, which means finding all the pages in a site that share a common format and creating a single template that encapsulates the common design elements and contains some tags or code to pull in dynamic content. “A great templating architecture is essential not only for content management but for all the disparate development areas of a dynamic Web site,” says Lisa Lindstrom of Hyper Island School of New Media Design in Sweden. “It makes designers, producers, and developers use the same terminology and will make the content gathering easier for the client.” Microsoft’s Active Server Pages (ASP), Sun’s Java Server Pages (JSP), the open-source PHP, and Allaire’s Cold Fusion are all engines that enable templating, but if the ultimate goal of a site is to become truly three-tier, only ASP and JSP or variants allow for this type of structure.

There are other areas of back-end development, such as using open architecture, that can aid in the implementation of a three-tier system and allow more freedom for front-end creatives. Open architecture means that programmers write custom code to plug into the application server to deal with existing or third-party systems. An open system allows two pieces from different vendors to work together. Misty West, community director for wholepeople.com, a new site serving whole foods markets, says, “Open architecture on the Web represents global success where Esperanto failed. Open architecture isn’t just central to the Web, it is the Web.”

Finally, having an application server that is easily clusterable also helps sustain the health of a three-tier system. This means that as the site develops, more machines can be added to serve more people, and the software on all those different machines will still work together. Three-tier systems are much easier to build and maintain, but they put more burdens on a system, so more hardware will be needed as the site grows. The best current candidate for meeting these requirements is the class of application servers, based on Java, known as Enterprise Java Bean (EJB) Servers. These use an object-oriented middle layer that meets the Sun standard and uses Java Server Pages (JSP) for the presentation layer.

In short, if you are a designer who wants to work with a team that builds useful, dynamic sites, an understanding of three-tier architecture is essential. Three-tier sites are functional for the user, but also make creativity and constant improvement possible for the designer. These sites have useful and powerful back-ends that won’t entangle you in creative restrictions. And that is the ultimate purpose of a three-tier architecture.