 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
HTML for Beginners An introduction to creating web pages
HTML or HyperText Markup Language is the code used to power webpages worldwide on the Internet. Although its uses are great, HTML is an easy language for even the novice to pickup and quickly become proficient. In this article we will look at the basics of HTML, tags and their properties, and begin creating our own webpages.
The Basics: An HTML webpage is simply a text file with code explaining how the contents should be rendered by a web browser. Different browsers may display HTML code slightly differently but the concept remains the same. Even a flat text file with no HTML code could be renamed with a '.html' or '.htm' extension and be rendered as HTML by web browsers. In any case, HTML is a "Markup Language", or one that describes and enhances the content it contains. HTML can be used for many purposes including website design and layout, building web forms, importing applications, or controlling the colors and style with Cascading Style Sheets (CSS). HTML is nice in that even beginners can start right away. Once a few basics are learned, more advanced techniques can be applied to the code later. It is important to start out designing webpages with good practices in mind. The code will flow better, be easier to maintain, appeal to Internet search engines, etc. A few good habits now will ensure the production of many quality webpages in the future.
HTML consists of "tags" among the normal text of a page. Every tag has an opening and closing statement between angle brackets ('< >'). So to start our HTML code, we need the (go figure) '<HTML>' tag. This almost always is on the first line of an HTML webpage and '</HTML>' is on the very last line. This tells the browser that the enclosed contents of the tags contain HTML code. So the process of learning HTML is simply the process of learning the appropriate HTML tags and how they function alone and together. Knowing this, a simple HTML webpage could be created with a few extra tags.
--------------------------------------------------------- <HTML> <BODY> <DIV> Hello, World! <BR> Hola Mundo! </DIV> </BODY> </HTML> ---------------------------------------------------------
That was pretty easy. The above code can be saved to a file, say hello.html, and then viewed on the web. If you don't have access to a web host, the saved files can still be loaded in a browser window. Our example above works but it is plain and boring. With a little extra code we can format the content, liven it up, and illustrate several HTML examples.
--------------------------------------------------------- <HTML> <BODY> <DIV align="center"> <FONT face="arial" size="2"> Hello, World! <BR> Hola, Mundo! </FONT><BR> <HR width="50%"><BR> </DIV> </BODY> </HTML> ---------------------------------------------------------
The first thing to note is that all of our content goes inside the '<BODY>' tags. This is, obviously, the "body" of the content. Inside the BODY we have several tags defining the layout and displaying of content. You can think of a '<DIV>' tag as a sort of container for information. It separates a specific section of data and allows you to apply certain properties to that data. In this case, we set the 'align' attribute to 'center' in order to center our text on the page. The '<P>' tag is similar to <DIV> but provides a 'paragraph' of information. Other tags to note are '<BR>' and '<FONT>'. '<BR>' stands for 'break', meaning a line break where following data starts on the next line. The '<FONT>' tag applies a font type and size to the text inside. A better approach is to use Cascading Style Sheets to define fonts, sizes, colors, etc, and apply those to specific sections of text. That is beyond the scope of this article so for now, '<FONT>' will have to do. You may also have noticed that several tags have properties set inside them. This is common for almost all HTML tags. Although the Tags in our examples are in uppercase, and the properties in lower case, this does not have to be so. HTML tags are case insensitive so '<FONT>' is the same as '<Font>' and '<foNt>'. Case is for the most part a personal preference.
|
|
2006 Domainz Limited - A Melbourne IT Company
Level 1, St Laurence House, 138 The Terrace , Wellington, NZ
Offices: Wellington, Melbourne, London, Paris, Amsterdam, Madrid, San Francisco
www.domainz.net.nz
