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
Basic HTML Tags  
  • The most basic HTML tags are those which let the browser know important things about the document itself rather than how to display the body of the document.

  • The following table outlines the HTML tags that define the basic HTML document.

Opening Tag Closing Tag Description
<!DOCTYPE> none Defines the HTML specification your document uses such as <!DOCTYPE HTML PUBLIC "-/IEFT//DTD HTML 3.2//EN">. This tag will be used before the <HTML> tag.
<HTML> </HTML> Specifies that the document should be interpreted as an HTML document. This tag should either be the first line in an HTML document or should be directly after the <!DOCTYPE> specification. Likewise, the closing tag should be the last line in an HTML file.
<HEAD> </HEAD> Specifies an area where the browser can look to for general information about the document. It requires a <TITLE> tag at the minimum.
<TITLE> </TITLE> Specifies the text that will be used for the header of the browser frame. Some search engines use this text for keyword indexing and browsers will use this for naming bookmarks if a user chooses to bookmark your site. So choose your titles well. This tag goes between the <HEAD> and </HEAD> tags.
<BASE> None Specifies the base URL that all relative links should utilize. This helps if you move an entire site off its original server and need to quickly make all relative links work at their new locale. This tag must appear within the bounds of the <HEAD> element. You will use this tag only with corresponding HREF attribute such as <BASE HREF = "www.mydomain.com">
<BODY> </BODY> Specifies the information that should be displayed in the browser window. This is the document itself rather than information "about" the document. The <BODY> tag takes several optional parameters that will be discussed on Day Three.
<!-- comment goes here--> none You can create comment text that will not be displayed by the browser by placing it between the <!-- and the -->. Some browsers also support the <COMMENT></COMMENT> tags.
<META> none Embeds information about the document. You can use the tag with the following attributes provided you use it within the bounds of the <HEAD> element:

<META HTTP-EQUIV = "REFRESH" CONTENT = "10; url=doc2.html"> - Automatic redirection

<META NAME = "Description" CONTENT = "a description of page"> - Gives a search engine a description to use

<META NAME = "Keywords" CONTENT = "comma separated keywords"> - Gives a search engine help for indexing

<META HTTP-EQUIV = "PRAGMA" CONTENT = "no-cache"> - Tells the browser not to cache the page.

<META HTTP-EQUIV = "expires" CONTENT = "Saturday 12 April 1997 10:23:23 GMT"> - Tells the browser when the page expires.

Basic HTML Tags by Example

  • Consider the following example that creates the minimum web page....

<!DOCTYPE HTML PUBLIC "-/IEFT//DTD HTML 3.2//EN">

<HTML>
<HEAD>
<TITLE>Hello World</TITLE>
<META HTTP-EQUIV = "Description" NAME = "Description"
CONTENT = "This page is simply a basic HTML page">
<META HTTP-EQUIV = "Keywords" NAME = "Keywords"
CONTENT = "HTML, tutorial, learning, example">
</HEAD>
<BODY> <!--This is a comment and comments do not show up in the browser --> This is a very simple web page </BODY>
</HTML>

  • The figure below shows how a web browser would interpret the HTML code above. Notice that the comment line does not show up in the browser window. Also, notice that the text between the <TITLE> and </TITLE> tags is displayed in the browser title bar.

Previous Page | Next Page