The Web Is Graphical and Easy to Navigate
The Web Is Cross-Platform
The Web Is Distributed
The Web Is Dynamic
The Web Is Interactive

The Web Is a Hypertext Information System

The idea behind hypertext is that instead of reading text in a rigid, linear structure (such as a book), you can skip easily from one point to another. You can get more information, go back, jump to other topics, and navigate through the text based on what interests you at the time.

Hypertext enables you to read and navigate text and visual information in a nonlinear way, based on what you want to know next.

When you hear the term hypertext, think links. (In fact, some people still refer to links as hyperlinks.) Whenever you visit a web page, you’re almost certain to see links throughout the page. Some of the links might point to locations within that same page, others to pages on the same site, and still others might point to content stored on other servers. Hypertext was an old concept when the Web was invented it was found in applications such as HyperCard and various help systems. However, the World Wide Web redefined how large a hypertext system could be. Even large websites were hypertext systems of a scale not before seen, and when you take into account that it’s no more difficult to link to a document on a server in Australia from a server in the United States than it is to link to a document stored in the same directory, the scope of the Web becomes truly staggering.

Nearly all large corporations and medium-sized businesses and organizations are using web technology to manage projects, order materials, and distribute company information in a paperless environment. By locating their documents on a private, secure web server called an Intranet, they take advantage of the technologies the World Wide Web has to offer while keeping the information contained within the company.

The Web Is Graphical and Easy to Navigate

In the early days, using the Internet involved simple text-only applications. You had to navigate the Internet’s various services using command-line programs (think DOS) and arcane tools. Although plenty of information was available on the Net, it wasn’t necessarily pretty to look at or easy to find.

Then along came the first graphical web browser: Mosaic. It paved the way for the Web to display both text and graphics in full color on the same page. The ability to create complex, attractive pages rivaling those founds in books, magazines, and newspapers propelled the popularity of the Web. These days, the Web offers such a wide degree of capabilities that people are writing web applications that replace desktop applications.

A browser is used to view and navigate web pages and other information on the World Wide Web. Currently, the most widely used browser is Microsoft Internet Explorer, which is built into Microsoft Windows.

Hypertext or Hypermedia? If the Web incorporates so much more than text, why do I keep calling the Web a hypertext system? Well, if you’re going to be absolutely technically correct about it, the Web is not a hypertext system it’s a hypermedia system. But, on the other hand, you might argue that the Web began as a text-only system, and much of the content is still text-heavy, with extra bits of media added in as emphasis. Many very educated people are arguing these very points at this moment and presenting their arguments in papers and discursive rants as educated people like to do. Whatever. I prefer the term hypertext, and it’s my book, so I’m going to use it. You know what I mean.

The Web Is Cross-Platform

The whole idea that the Web is and should be cross-platform is strongly held to by purists. The reality, however, is somewhat different. With the introduction over the years of numerous special features, technologies, and media types, the Web has lost some of its capability to be truly cross-platform. As web authors choose to use these nonstandard features, they willingly limit the potential audience for the content of their sites. For example, a site centered around a Flash animation is essentially unusable for someone using a browser that doesn’t have a Flash player, or for a user who might have turned off Flash for quicker downloads. Similarly, some programs that extend the capabilities of a browser (known as plug-ins) are available only for one platform (either Windows, Macintosh, or UNIX). Choosing to use one of those plug-ins makes that portion of your site unavailable to users who are either on the wrong platform or don’t want to bother to download and install the plug-in.

The Web Is Distributed

Web content can take up a great deal of space, particularly when you include images, audio, and video. To store all of the information, graphics, and multimedia published on the Web, you would need an untold amount of disk space, and managing it would be almost impossible. (Not that there aren’t people who try.) Imagine that you were interested in finding out more information about alpacas (Peruvian mammals known for their wool), but when you selected a link in your online encyclopedia, your computer prompted you to insert CD-ROM #456 ALP through ALR. You could be there for a long time just looking for the right CD-ROM!

The Web succeeds at providing so much information because that information is distributed globally across millions of websites, each of which contributes the space for the information it publishes. These sites reside on one or more computers, referred to as web servers. A web server is just a computer that listens for requests from web browsers and responds to that request. You, as a consumer of that information, request a resource from the server to view it. You don’t have to install it, change disks, or do anything other than point your browser at that site.

A website is a location on the Web that publishes some kind of information. When you view a web page, your browser connects to that website to get that information.

The Web Is Dynamic

If you want a permanent copy of some information that’s stored on the Web, you have to save it locally because the content can change any time, even while you’re viewing the page.

If you’re browsing that information, you don’t have to install a new version of the help system, buy another book, or call technical support to get updated information. Just launch your browser and check out what’s there.

If you’re publishing on the Web, you can make sure that your information is up-to-date all the time. You don’t have to spend a lot of time re-releasing updated documents. There’s no cost of materials. You don’t have to get bids on numbers of copies or quality of output. Color is free. And you won’t get calls from hapless customers who have a version of the book that was obsolete four years ago.

The Web Is Interactive

Interactivity is the capability to “talk back” to the web server. More traditional media, such as television, isn’t interactive in the slightest; all you do is sit and watch as shows are played at you. Other than changing the channel, you don’t have much control over what you see. The Web is inherently interactive; the act of selecting a link and jumping to another web page to go somewhere else on the Web is a form of interactivity. In addition to this simple interactivity, however, the Web also enables you to communicate with the publisher of the pages you’re reading and with other readers of those pages.

For example, pages can be designed to contain interactive forms that readers can fill out. Forms can contain text-entry areas, radio buttons, or simple menus of items. When the form is submitted, the information typed by readers is sent back to the server from which the pages originated.

As a publisher of information on the Web, you can use forms for many different purposes, such as the following:

• To get feedback about your pages.
• To get information from your readers (survey, voting, demographic, or any other kind of data). You then can collect statistics on that data, store it in a database, or do anything you want with it.
• To provide online order forms for products or services available on the Web.
• To create guestbooks and conferencing systems that enable your readers to post their own information on your pages. These kinds of systems enable your readers to communicate not only with you, but also with other readers of your pages.

In addition to forms, which provide some of the most popular forms of interactivity on the Web, advanced features of web technologies provide even more interactivity. Flash, JavaScript, Java, and Shockwave, for example, enable you to include entire programs and games inside web pages. Software can run on the Web to enable real-time chat sessions between your readers. As time goes on, the Web becomes less of a medium for people passively sitting and digesting information (and becoming “Net potatoes”) and more of a medium for reaching and communicating with other people all over the world.

Microsoft Internet Explorer
Mozilla Firefox
Netscape Navigator

What the Browser Does

The core purpose of a web browser is to connect to web servers, request documents, and then properly format and display those documents. Web browsers can also display files on your local computer, download files that are not meant to be displayed, and in some cases even allow you to send and retrieve email. What the browser is best at, however, is dealing with retrieving and displaying web documents. Each web page is a file written in a language called the Hypertext Markup Language (HTML) that includes the text of the page, a description of its structure, and links to other documents, images, or other media. The browser takes the information it gets from the web server and formats and displays it for your system. Different browsers might format and display the same file in diverse ways, depending on the capabilities of that system and how the browser is configured.

Retrieving documents from the Web and formatting them for your system are the two tasks that make up the core of a browser’s functionality. Depending on the browser you use and the features it includes, however, you also might be able to play Flash animations, multimedia files, run Java applets, read your mail, or use other advanced features that a particular browser offers.

Microsoft Internet Explorer

Microsoft’s browser, Microsoft Internet Explorer, is included with Microsoft Windows. It was also included with the Mac OS, but has since been discontinued. You can still install and use other browsers if you want, but if you’re not picky, you don’t need to do anything more.

Microsoft Internet Explorer has become the most widely used web browser, in large part due to the fact that it has been tightly integrated with the latest versions of Windows. As of January 2006, Internet Explorer makes up more than 80% of the overall browser market.

Mozilla Firefox

Mozilla Firefox is the new kid on the web browser block. In 1998, Netscape Communications opened the source code to their web browser and assigned some staff members to work on making it better. Seven years and many releases later, the result of that effort is Mozilla Firefox. Netscape Communications, since acquired by America Online, no longer has any official ties to the Mozilla Foundation, which is now an independent nonprofit organization.

Microsoft released Internet Explorer 6 in October 2001. Firefox and its predecessor Mozilla have seen many revisions over that time, and currently offer more comprehensive support for web standards than does Internet Explorer. Firefox is available for Windows, Mac OS X, and Linux, and is a free download at

Internet Explorer still dominates the web browser market, but Firefox is becoming increasingly popular, especially with people who create websites.

Netscape Navigator

Once the dominant web browser, Netscape Navigator is now a version of Mozilla Firefox that has been modified to have the Netscape brand rather than the Mozilla brand. In terms of how they display web pages, Netscape Navigator and Mozilla Firefox are identical. You can download Netscape at http://browser.netscape.com

The important thing to remember about Netscape is that the browser has a long history, and once dominated the market. Netscape went nearly four years between browser releases, and at one time Netscape 4.7 was extremely popular. Unfortunately, now it exists mainly to cause pain to web designers. The problem with Netscape 4.7 is that it’s old, and its support for current web standards is woefully lacking. With Firefox, much effort was put into making it adhere as closely as possible to published standards. When Netscape 4.7 was released, Netscape was taking a more cavalier attitude toward standards. The bottom line is that pages that look great in Internet Explorer, Firefox, and other current browsers can look awful in Netscape 4.7. You’ll have to decide whether you take this into consideration as you design your pages.

A web server is the program that runs on a computer and is responsible for replying to web browser requests for files. You need a web server to publish documents on the Web. One point of confusion is that the computer on which a server program runs is also referred to as a server. So, when someone uses the term web server, she could be referring to a program used to distribute web pages or the computer on which that program runs.

When you use a browser to request a page on a website, that browser makes a web connection to a server using the HTTP protocol. The server accepts the connection, sends the contents of the requested files, and then closes the connection. The browser then formats the information it got from the server.

On the server side, many different browsers can connect to the same server to get the same information. The web server is responsible for handling all these requests.

Web servers do more than just serve files. They’re also responsible for managing form input and for linking forms and browsers with programs such as databases running on the server.

As with browsers, many different servers are available for many different platforms, each with many different features and ranging in cost from free to very expensive. For now, all you need to know is what the server is there for; you’ll learn more about web servers when we will talk about Putting Your Site Online.

In addition to typing URLs directly into your browser to go to a particular page, you also use URLs when you create a hypertext link within a document to another document. So, any way you look at it, URLs are important to how you and your browser get around on the Web.

URI/URL syntax in brief

Every URI (and therefore, every URL) begins with the scheme name that defines its name space, purpose, and the syntax of the remaining part of the URI. Most Web-enabled programs will try to dereference a URI according to the semantics of its scheme and a context-vbn. For example, a Web browser will usually dereference a http://example.org/ by performing an HTTP request to the host example.org, at the default HTTP port (see Port 80). Dereferencing the URI mailto:bob@example.com will usually start an e-mail composer with the address bob@example.com in the To field.

example.com is a domain name; an IP address or other network address might be used instead. In addition, URLs that specify https as a scheme (such as https://example2.com/) normally denote a secure web site.

The hostname portion of a URL, if present, is case insensitive (since DNS is specified to ignore case); other parts are not required to be, but may be treated as case insensitive by some clients and servers, especially those that are based on Microsoft Windows. For example:

• the links http://iteachweb.net and HTTP://ITEACHWEB.NET both will open same page.
• The link http://iteachweb.net/page_home.html is correct, but link http://iteachweb.net/PAGE_home.html will result in an HTTP 404 error.

The World Wide Web is constructed from many millions of individual pages, and those pages are, in general written in Hypertext Markup Language, better known as HTML.
We use it to mark up our text documents so that web browsers know how to display them and define hypertext links within them to provide navigation within or between them.

I thank at least you have worked with word processing programs that use style sheets like Microsoft Word, or you have done something like that; each section of text conforms to one of a set of styles that are predefined before you start working.

HTML defines a set of styles for web pages: titles, paragraphs, lists and tables. It also defines the character styles such as bold and sample code. These styles are listed in documents using HTML tags. Each tag has a specific name and is separated from the content of the document using a notation.

HTML Does Not Describe Page Layout

When you’re working with a word processor or page layout program, styles are not just named elements of a page they also include formatting information such as the font size and style, indentation, underlining, when you write some text that’s supposed to be a heading, you can apply the Heading style to it, and the program automatically formats that paragraph for you in the correct style.

HTML doesn’t go this far. For the most part, HTML doesn’t say anything about how a page looks when it’s viewed. HTML tags just indicate that an element is a heading or a list; they say nothing about how that heading or list is to be formatted. So, as with the magazine example and the layout person who formats your article, the layout person’s job is to decide how big the heading should be and what font it should be in. The only thing you have to worry about is marking which section is supposed to be a heading.

Different browsers running on diverse platforms might have various style mappings for each page element. Some browsers might use different font styles than others. For example, a browser on a desktop computer might display italics as italics, whereas a handheld device or mobile phone might use reverse text or underlining on systems that don’t have italic fonts. Or it might put a heading in all capital letters instead of a larger font.

What this means to you as a web page designer is that the pages you create with HTML might look radically different from system to system and from browser to browser. The actual information and links inside those pages are still there, but the onscreen appearance changes. You can design a web page so that it looks perfect on your computer system, but when someone else reads it on a different system, it might look entirely different (and it might very well be entirely unreadable).

How Markup Works?

HTML is a markup language. Writing in a markup language means that you start with the text of your page and add special tags around words and paragraphs. The tags indicate the different parts of the page and produce different effects in the browser.

Every webpage is made with HTML but after 2001 the W3C which the community that determine the standard for the web decided to discontinue HTML and replaced with XHTML, it maybe sound scary but it’s not a big deal, XHTML which is for Extensible Hypertext Markup Language is almost identical to HTML the most deference between them is just their syntaxes basically XHTML places strict rules on the way its code is written, with ultimate goal to make WebPages more compatible with deferent browsers and devices, you can essentially think of XHTML as a clean version of HTML but that is not mean that you can not use HTML in your WebPages, absolutely not.

• The text of the page itself.
• HTML tags that indicate page elements, structure, formatting, and hypertext links to other pages or to included media

The rules to write a tag is to go like this:

The tag name itself (here, thetagname) is enclosed in brackets (< >). HTML tags generally have a beginning and an ending tag surrounding the content they affect. The beginning tag “turns on” a feature (such as headings, bold, italics, underline, and so on), and the ending tag turns it off. Closing tags have the tag name preceded by a slash (/). The opening tag (for example, <p> for paragraphs) and closing tag (for example, </p> for paragraphs) compose what is officially called an HTML element.

Be aware of the difference between the forward slash (/) mentioned with relation to tags, and backslashes (\), which are used by DOS and Windows in directory references on hard drives (as in C:\window or other directory paths). If you accidentally use the backslash in place of a forward slash in HTML, the browser won’t recognize the ending tags.

Not all HTML tags have both an opening and closing tag. Some tags are only one-sided, and still other tags are containers that hold extra information and text inside the brackets. XHTML 1.0, however, requires that all tags be closed.

Another difference between HTML 4.0 and XHTML 1.0 relates to usage of lowercase tags and attributes. HTML tags are not case sensitive; that is, you can specify them in uppercase, lowercase, or in any mixture. So, <HTML> is the same as <html>, which is the same as <HtMl>. This isn’t the case for XHTML 1.0, where all tag and attribute names must be written in lowercase.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>My Sample HTML Page</title>

</head>
<body>
<h1>This is my first title</h1>
<p>This is my first webpage paragraph bla bla!</p>
</body>

</html>

Note that the<!DOCTYPE> tag in the previous example doesn’t appear in lowercase like the rest of the tags. This tag is an exception to the XHTML rule and should appear in uppercase. In fact, you don’t have to specify a DOCTYPE at all to get your pages to work. The purpose of the DOCTYPE is to tell validators and browsers which specification your page was written to. It will be included in all examples, but you can leave them out if you like.

After you create your HTML file, save it to your hard disk. Remember that the best way to learn is to type your code and use a simple text editor such as Notepad but if you’re using a word processor like Microsoft Word, choose Save As and make sure that you’re saving it as “Text Only”. When you choose a name for the file, follow these two rules:

• The filename should have an extension of .html (.htm on DOS or Windows systems that support only three-character extensions)for example, myfile.html, text.html, or index.htm. Most web software requires your files to have these extensions, so get into the habit of doing it now. (If you are using Windows, make sure that your computer is configured to show file extensions. If it isn’t, you’ll find yourself creating files named things like myfile.html.txt, which your browser will not think are HTML files.)
• Use small, simple names. Don’t include spaces or special characters (bullets, accented characters) just letters and numbers are fine.

Viewing the Result

Now that you have an HTML file, start your web browser. You don’t have to be connected to the Internet because you’re not going to be opening pages at any other site. Your browser or network connection software might complain about the lack of a network connection, but you should be able to work offline.

Text Formatting and HTML

When an HTML page is parsed by a browser, any formatting you might have done by handthat is, any extra spaces, tabs, returns, and so onis ignored. The only thing that specifies formatting in an HTML page is an HTML tag. If you spend hours carefully editing a plain text file to have nicely formatted paragraphs and columns of numbers but don’t include any tags, when a web browser loads the page, all the text will flow into one paragraph. All your work will have been in vain.

The advantage of having all white space (spaces, tabs, returns) ignored is that you can put your tags wherever you want. The following examples all produce the same output. Try them!.

What does Cascading mean?

There are three types of style sheets that can influence the presentation of an HTML document in a browser. These are:

• Browser style sheets: Browsers apply style to all web documents. Although these style sheets vary from browser to another, they all have common characteristics, including black text, blue links, and purple visited links. These are referred to as default browser style sheets.
• User style sheets: A user is anyone looks at your website. Most modern borwsers allow users to set their own style sheets within their browser. These style sheets will override the browser’s default sheets for that specific user only.
• Author style sheets: The author is the one that create the website, by applying a style sheet to his pages, that override user styles, which override browser styles.

Cascading means that styles can fall (or cascade) from one style sheet to another. The cascade is used to determine which rules will be apply to a document.

Including Styles in Tags

You’ve already seen how HTML pages are created using tags. I want to stop briefly and discuss attributes as well. An attribute is an additional bit of information that somehow affects the behavior of a tag. Attributes are included inside the opening tag in a pair. Here’s an example:

<tag attribute=”value”>

Some attributes can be used with nearly any tag; others are highly specific. One attribute that can be used with nearly any tag is style. By including the style attribute in a tag, you can include one or more style rules within a tag itself. Here’s an example using the <h1> tag:

<html>
<head>
<title>My Sample HTML Page</title>

</head>
<body>
<h1 style="font-family: Verdana, sans-serif;">Heading</h1>
</body>

</html>

The style attribute of the <h1> tag contains a style declaration. All style declarations follow this same basic pattern, with the property on the left and the value associated with that property on the right. The rule ends with a semicolon, and you can include more than one in a style attribute by placing commas between them. If you’re only including one rule in the style attribute, the semicolon is optional, but it’s a good idea to include it. In the preceding example, the property is font-family, and the value is Verdana, sans-serif. This attribute modifies the standard <h1> tag by changing the font to Verdana, and if the user doesn’t have that font installed on his system, whichever sans-serif font the browser selects.

There are many, many properties that can be used in style declarations. Putting a declaration into a style attribute is just one of several ways that you can apply styles to your webpage. ]]> http://iteachweb.net/intergrate-css/feed/ 1 http://iteachweb.net/structuring-your-html/ http://iteachweb.net/structuring-your-html/#comments Tue, 02 Nov 2010 14:29:20 +0000 Leo http://root.itwmailsystem.com/iteachweb.net/?p=57 HTML defines three tags that are used to describe the page’s overall structure and provide some simple header information. These three tags<html>, <head>, and <body>identify your page to browsers or HTML tools. They also provide simple information about the page (such as its title or its author) before loading the entire thing. The page structure tags don’t affect what the page looks like when it’s displayed; they’re only there to help tools that interpret or filter HTML files.

In the strict HTML definition, these tags are optional. If your page does not contain them, browsers usually can read the page anyway. These tags, however, are required elements in XHTML 1.0. The most recent browsers already take advantage of XHTML.

The HTML document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>

<head>
<title>My Sample HTML Page</title>
</head>

<body>
<h1>This is my first title</h1>
<p>welcome to my first page written in HTML. This is simply a text document</p>
</body>

</html>

Elements of an HTML page:

The first element on the code is known as I already mention the DOCTYPE element. Its purpose to notify the browser of the “flavor” of HTML used in the document. The DOCTYPE element used and will be used for all our examples refer to XHTML 1.0 transitional.
and the document type definition (DTD) that defines the specification. This is followed by the <html>, <head>, and <body> tags. In our example, the XHTML 1.0 Strict document type appears before the page structure tags:

The DOCTYPE element must always occur right at the beginning of the HTML document.

Next, note that the remainder of the document is enclosed by elements <html> at the start of the page and </html> at the end. These tags notify the browser that what lies between should be interpreted and displayed as an HTML document.

Although many modern browsers correctly display HTML without these tags, it is a bad practice to omit them. Even if the page is shown correctly on your PC, you have no idea what operating system and browser a visitor may be using, he may not be so lucky.

The document within these outer tags is split into two further section. The first is enclosed in <head> and </head> tags, and the second is contained between <body> and </body>. Essentially, the document’s head section is used to store information about the document that is not to be displayed in the browser window, whereas the body of the document contains text to be displayed to the user via the browser window.

The <head> of the Document

We always studying our sample code, we can see that the head section of our simple HTML document contains only one line ; our “My Sample HTML Page” title enclosed in <title> and </title> tags.

Remember that the head section contains information that is not to be displayed in the browser window. This is not, then the title displayed at the top of our page text, as you can confirm in the image. Neither does the document title refer to the file-name of the document.

In fact, the document title fulfills a number of functions, among them:

• Search engines often use the page title (among other factors) to help them decide what a page is about.
• When you bookmark a page, it is generally saved by default as the document title.
• Most browsers, when minimized, displayed the title of the current document on their icon or Taskbar button

It’s important, therefore to chose a meaningful and descriptive title for each page that you create.

Many other element types are used in the head section of a document, including link, meta and script elements although we don’t give an account of them in these section.

The Document <body>

Referring again to our example, we can see that the document’s body section is made up of the content we want to display on the page. This includes all the text and other content (links, pictures, and so on).