Monday, February 23, 2009

Basic Of HTML & XHTML Lesson 1

Course Introduction

HTML and XHTML were both created following the same standards and guidelines that allow for Web page structure.

In this course, you'll learn what HTML can do and how Cascading Style Sheets can make up for the deficits of what it cannot do. You'll also learn how to:

Apply HTML tags used for overall page structure.


Include ordered and unordered lists on a page. The importance of lists is significant as they allow for page organization and order.


Construct links from one place to another.




What HTML Is - And What It Is Not

Before you can begin writing Web pages, you should know what HTML is, what it can do, and most importantly what it can't do.

After completing this lesson, you should be able to:

Explain how HTML ties into the significance between page layout and page format
Define the role the W3C has played in HTML's evolution







HTML stands for Hypertext Markup Language. HTML is based on the Standard Generalized Markup Language (SGML), a much larger document-processing system. To write HTML pages, you won't need to know a whole lot about SGML.

However, knowing that one of the main features of SGML is that it describes the general structure of the content inside documents, rather than its actual appearance on the page or onscreen, does help. This concept might be a bit foreign if you're used to working with WYSIWYG (What You See Is What You Get) editors.





HTML Describes Page Structure



Most HTML documents have common elements such as titles, paragraphs, and lists.

Before you start writing it's possible to identify and define a set of elements in that document and give them appropriate names. Each section of text conforms to one of a set of styles that are predefined before you start working.






HTML defines a set of common styles for Web pages: headings, paragraphs, lists, and tables. It also defines character styles such as boldface and code examples.





These styles are indicated inside HTML documents using tags. Each tag has a specific name and is set off from the content of the document using a specific notation.











HTML Does Not Describe Page Layout



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 formatted.

The only thing you have to worry about is marking which section is supposed to be a heading.














Web browsers, in addition to providing the networking functions to retrieve pages from the Web, double as HTML formatters. When you read an HTML page into a browser such as Netscape or Internet Explorer, the browser interprets, or parses, the HTML tags and formats the text and images on the screen.

The browser has mappings between the names of page elements and actual styles on the screen; for example, headings might be in a larger font than the text on the rest of the page. The browser also wraps all the text so that it fits into the current width of the window.







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).

Here are some things to keep in mind as you develop Web pages:


Do

Do design your pages so that they work in most browsers.
Do focus on clear, well-structured content that's easy to read and understand.

Don't
Don't design your pages based on what they look like on your computer system.
Don't assume every viewer will be using the same type of browser that you are, different browsers can offer different results.







In practice, most HTML tags are rendered in a fairly standard manner, on desktop computers at least. When the earliest browsers were written, somebody decided that links would be underlined and blue, visited links would be purple, and emphasized text would appear in italics. They also made similar decisions about every other tag.

Since then, pretty much every browser maker has followed that convention to a greater or lesser degree. These conventions blurred the line separating structure from presentation, but in truth it still exists, even if it's not obvious.





HTML Is a Markup Language



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.

HTML has a defined set of tags you can use. You can't make up your own tags to create new appearances or features. And just to make sure that things are really confusing, various browsers support different sets of tags. To further explain this, it's important to know the history of HTML.





A Brief History of HTML Tags




The base set of HTML tags, the lowest common denominator, is referred to as HTML 2.0. HTML 2.0 is the old standard. It is a written specification that was developed and is maintained by the W3C, it's the set of tags that all browsers must support.

The HTML 3.2 specification was developed in early 1996 and several software vendors, including IBM Corporation, Microsoft Corporation, Netscape Corporation, Novell Corporation, SoftQuad Corporation, Spyglass Corporation, and Sun Microsystems Corporation, joined with the W3C to develop this specification.

Some of the primary additions to HTML 3.2 included features such as tables, applets, and text flow around images. HTML 3.2 also provided full backward-compatibility with the existing HTML 2.0 standard.







HTML 4.0, first introduced in 1997, incorporates many new features that give you greater control than HTML 2.0 and 3.2 in how you design your pages. Like HTML 2.0 and 3.2, the W3C maintains the HTML 4.0 standard. Framesets (originally introduced in Netscape 2.0) and floating frames (originally introduced in Internet Explorer 3.0) have become an official part of the HTML 4.0 specification.



Additional improvements were made to table formatting and rendering. By far, however, the most important change in HTML 4.0 was its increased integration with style sheets.






If you're interested in how HTML development is working and just exactly what's going on at the W3C, check out the pages for HTML at the Consortium's site.



http://www.w3.org/MarkUp/

Note: All Web sites are current at the time of writing but are subject to change.





In addition to the tags defined by the various levels of HTML, individual browser companies also implement browser-specific extensions to HTML. Netscape and Microsoft are particularly guilty of creating extensions, and they offer many new features unique to their browsers.



Confused yet? You're not alone. Even Web designers with years of experience have to struggle with the problem of which set of tags to choose to strike a balance between wide support for a design (using HTML 3.2 and 2.0 level tags) or having more flexibility in layout but less consistency across browsers (HTML 4.0 or specific browser extensions).

No comments:

Post a Comment