Category Archives: HTML Tutorials

Tutorials for HTML related topics.

Using HTML Attributes

HTML tags provide the foundation for web page design.  To provide more flexibility with HTML design, attributes have been defined for HTML tags to alter the behavior of any particular HTML tag.  There are many instances while designing a web page when you will want to change the default behavior of the tag.  For instance, you might want to change the background color of the whole page or some section of the page.  You might want to change the alignment of a section of text or apply a unique style to a tag’s representation.  There are many instances when you would want to identify an HTML tag by giving it a name to identify it so that it can be referred to elsewhere.  Some tags, such as the one used to present an image (<img>) don’t do much of anything without having at least one attribute defined.  In the case of the image tag, you would need to have an attribute that tells the browser where the find the image to be displayed.

Some Examples of HTML Attributes
Using bgcolor and background with the body tag
A very visible example of the effect of an attribute used in an HTML tag is changing the background color or image for the entire body of a web page.  Browsers understand that the contents of the <body> tag will be displayed on the main part of the web page.  By default, the background used by browsers when they encounter the <body> tag is white.  If you want a background color other than white, you would use the bgcolor attribute.  The following tag changes the background color of a web page from the default white to gray:

                <body bgcolor=”gray”>

If you want to have an image comprise the background for a web page, you could use the following code:

                <body background=”/images/background.gif”>

This example assumes that you have a folder on your web server called images, and that inside that folder there is an image named background.gif.  In the case of a background image, if the image isn’t large enough to fill the entire background of your web page, the browser will repeat the image vertically and horizontally to fill the background.

Linking using the anchor tag
The world wide web’s fundamental usefulness hinges on its ability to link documents, providing web users with a quick connection from one page to another related page.  Linking documents in HTML is done using the anchor (<a>) tag.  The anchor tag by itself doesn’t tell the browser where to link.  Instead, you have to include the href attribute as in the following example:

                < a href=http://www.oursponsorswebsite.com>Visit our sponsor</a>

This piece of HTML code tells the browser that the text “Visit our sponsor” is the anchor text for a link.  When the user clicks on the anchor text, he is taken to the url www.oursponsorswebsite.com.

Displaying a picture using the image tag
HTML pages would be pretty boring without the use of images.  The need to tell the browser where to find an image is a good example of how to use HTML attributes.  Images are included using <img>.  Similar to the anchor tag example above, using the <img> tag alone wouldn’t suffice.  The image tag attribute “src” is required to tell the browser where to find the image to be displayed, as in the following example.

                <img src=”/images/logo.gif” width=”150”>

This block of code tells the browser to place an image in the document.  The browser is instructed to get the logo.gif image from the images folder located in the top level folder for the document.  You also notice a width attribute defined in the tag.  This constrains the image to be 150 pixels wide.  Conveniently, the height of the image is constrained proportionally when the width attribute is defined.

HTML Attributes Reference
Don’t feel like you have to memorize all the HTML tags and their corresponding attributes.  Instead, it is convenient to access a reference when trying to determine which attributes can be used with particular HTML tags.   The official definition for HTML tags and attributes can be found at www.w3.org.  You can also find other resources for understanding the same information by using a search engine to search for “html tags” or “html attributes”

Beyond HTML Attributes
In the mid-1990’s, a methodology called Cascading Style Sheets (CSS) was developed for use in web pages to make them more streamlined.  CSS is a standard for defining the layout and formatting for a web page.  Many of the attributes that were commonly used with HTML tags before CSS came around are now handles by CSS definitions.  For designers unfamiliar with CSS or who, for whatever reason, don’t choose to use CSS, HTML attributes that overlap with CSS definitions can still be used to change the behavior of HTML tags.  However, to be considered vogue in the world of web design, it is recommended that you learn and use CSS.

html-example

Introduction to HTML

HTML (Hypertext Markup Language) is the lingo of the internet.  It is the medium for web designers to essentially explain to web browsers how to present information to users of the Internet.  Using a reference to the former predominant information medium, newspapers, you can think of HTML in the context of a newspaper editor determining the typesetting and layout for an upcoming circulation.  The design staff would spell out page formats for various parts of the newspaper by determining fonts, positions, image locations, section layouts and other details.  The delivered product would be the result of the determination by the designers to use a size 50, Times New Roman font for the newspaper’s title, to include certain pictures and captions associated with stories and headlines, and to organize other aspects of the newspaper’s layout according to a model.

HTML works similarly.  The vocabulary understood by browsers includes markup tags such as <b> to bold text, <u> to underline text, <p> to create a new paragraph, and <ul>/<li> to create lists.  HTML obviously has much more capability than a newspaper.  The ability to quickly move between pages by following web links is a major advantage that web pages and the internet in general offer as an information medium.  Anyone who’s used the internet to check email, make a payment, or look up an address or phone number knows that HTML and related web technologies facilitate significant interaction between the user and the information supply.

A Simple Example
This exercise will give you a basic introduction to how HTML works.  On your computer open the Notepad program by going to Start Menu->All Programs->Accessories->Notepad.  When the Notepad editor comes up, type (or paste) the following:

<html>
   <head>
    <title>My first web page</title>
  </head>
  <body>
     <h2>My First Web Page</h2>
     <p>This text makes up the first paragraph.  You can’t see the paragraph tag itself, but you can tell that this section of text is set off from the next section of text by a paragraph tag.  The browser doesn’t show the tags themselves.  Instead, it uses the tags as instructions on how to present the information.</p>

    <p>This is another paragraph.  By default the text in this paragraph is separated from the previous paragraph by a line of white space, so that it appears double-spaced, similar to how two paragraphs would be separated in a typical document.</p>

    <p>Enter text here:  <input type=”text” width=”50″ />

    <p>What’s your favorite food?
                <select>
                <option>Hamburgers</option>
                <option>Pizza</option>
                <option>Mac and Cheese</option>
             </select>
  </body>
</html>

Now save the file using the name “html-example.html”.  After you save the file, open a web browser (Internet Explorer and Firefox are the two most popular), then open the file you just created by using the File->Open… or File->Open File… command in the browser.  When you open the html-example.html file in your browser, you should see something like this:

 

So how did all those tags turn into what you see in your browser?  I will explain.

HTML Tags
HTML segments are typically opened by a start tag and closed by an end tag.  The first tag you’ll see in an HTML page is the <html> tag.  At the end of the page, you’ll see a tag like this </html>.  The ‘/’ included in the end tag tells the browser, “This is where the html tag ends.”  Although it isn’t always necessary to close all HTML tags that have been opened, it’s best to explicitly provide a closing HTML tag for each tag opened.  HTML tags can be, and very often are, nested inside of other tags.  For example, every HTML tag on a page is nested inside of the <HTML></HTML> tag.

There are two main tags that divide an HTML document into its major sections.  After the <html> tag is the <head> tag.  The information enclosed in the <head> tag normally deals with describing what the HTML page is about.  In our example, you see a <title> tag enclosed within the <head></head> section.  You notice that the text inside the <title> tag is displayed at the top of the browser, but not actually in the main section of the web page itself.

HTML
           -> Head
           -> Body

The <body> tag is the section that contains the functional content of the web page.   Most of the interaction between a web page and its users occurs in the <body> section of an HTML document.

Common HTML Tags
Following our example above, the paragraph (<p>) tags tell the browser to set off the text contained within them as separate paragraphs.  You’ll notice that there is a line of white space between the first and second paragraphs on the page.  That’s because the browser is following the formatting standard for <p> tags.

The last two items included in our example HTML document are interesting.  To allow for interaction between the user and the web page, various kinds of user input tags exist as part of the web markup language.  The first one in our example, <input type=”text” width=”50”>, allows the user to enter text that can be sent to the web server and processed.  The ‘type’ attribute of the <input> tag tells the browser which kind of input box to create.  The ‘width’ attribute of the <input> tag tells the browser how many characters wide the input box should be.

 The last item in our HTML example, a drop-down box, is created using the <select> tag and associated <option> tags, which are used to create a list of choices within the <select> box.

There are dozens of HTML tags that can be used on a web page.  To find a comprehensive list of the HTML tags understood by browsers, you can visit www.w3.org or do a web search for “html tags”.

Beyond HTML

Although there is a substantial degree of design flexibility that can be realized using HTML tags alone, the advanced capabilities of browsers and the full functionality World Wide Web goes well beyond HTML.  Web programming languages such as PHP, ASP, and Java (JSP and Servlets), scripting languages such as JavaScript, and multimedia platforms such as Adobe Flash give web pages much more animation than could be achieved with HTML alone.