eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introducton to Web Design
HTML the Language of the Web  
  • So what does a web browser (client software) do with a file it receives from a web server (server software)? Does it just display it to the human user as is?

  • The answer is yes and no. Actually, in some cases, the web browser will display a document exactly the way it receives it from the web server. For example, if the document requested is an image, the web browser will display it directly. Similarly, plain text files will be displayed just as they are sent.

  • However, if the document is an HTML document, the web browser will "interpret" the HTML and display it according to the instructions contained within the HTML code.

  • Well, what is HTML code and why must it be interpreted?

  • HTML (Hyper Text Markup Language) is a very simple language used to "describe" the logical struture of a document.

Is HTML a Programming Language?
Actually, though HTML is often called a programming language it is really not. Programming languages are 'Turing-complete', or 'computable'. That is, programming languages can be used to compute something such as the square root of pi or some other such task. Typically programming languages use conditional branches and loops and operate on data contained in abstract data structures. HTML is much easier than all of that. HTML is simply a 'markup language' used to define a logical structure rather than compute anything. It is sort've a semantic issue, but it is one which you should officially be aware of.

  • For example, it can describe which text the browser should emphasize, which text should be considered body text versus header text, and so forth.

  • The beauty of HTML of course is that it is generic enough that it can be read and interpreted by a web browser running on any machine or operating system. This is because it only focusses on describing the logical nature of the document, not on the specific style. The web browser is responsibe for adding style. For instance emphasized text might be bolded in one browser and italicized in another. it is up to the browser to decide.

  • The language itself is fairly simple and follows a few important standards.

  • Firstly, document description is defined by "HTML tags" that are instructions embedded within a less-than (<) and a greater-than (>) sign. To begin formatting, you specify a format type within the < and the >. Most tags in HTML are ended with a similar tag with a slash in it to specify an end to the formatting. For example, to emphasize some text, you would use the following HTML code:

    this text is not bold <EM>this text is bold</EM> this text is not bold

  • It is important to note that the formatting codes within an HTML tag are case-insensitive. Thus, the following two versions of the bold tag would both be understood by a web browser:

    <em>this text is bold</em> this text is not <EM>this text is bold</EM>

  • You can also compound formatting styles together in HTML. However, you should be very careful to "nest" your code correctly. For example, the following HTML code shows correct and incorrect nesting:

    <CENTER><EM>this text is bolded and centered
    correctly</EM></CENTER>
    
    <EM><CENTER>this text is bolded and centered
    incorrectly</EM></CENTER>
    

  • In the incorrect version, notice that the bold tag was closed before the center tag, even though the bold tag was opened first. The general rule is that tags on the inside should be closed before tags on the outside.

  • Finally, HTML tags can not only define a formatting option, they can also define attributes to those options as well. To do so, you specify an attribute and an attribute value within the HTML tag. For example, the following tag creates a heading style aligned to the left:

    <H2 ALIGN = "LEFT">this text has a heading level two style and is aligned to the left </H2>

  • There are a few things to note about attributes however. First, it is not necessary to enclose attribute values within quotes unless white space is included in the value. Secondly, it is not necessary to have a space before or after the equal sign that matches an attribute to its value. Finally, when you close an HTML tag with an attribute, you should not include attribute information in the closing.

  • Finally, you should know that web browsers do not care about white space that you use in your HTML document. For example, the following two bits of HTML will be displayed the exact same way:

    This is some text that is displayed as you would expect
    
    
    This     is  some     text
    that is displayed in a way
    you
    would not expect: exactly the same as the above
    

HTML Resources

Previous Page | Next Page