Beginner's Guide to Web Development

Beginner’s Guide to Web Development – HTML Guide

Since you will inevitably be writing HTML code when developing for the web, we are going to give a tutorial on HTML in this section.

HTML is a markup language that is used to create static web pages. Web browsers, such as Internet Explorer and Netscape, read HTML code and then display text, images, etc. based on the content of the HTML code. For example, to display a bold line saying "hello" in a web page, you would type the following:

<b>Hello</b>

The browser knows that any text included inside <b></b> tags should be displayed as bold. Thus, on the web page, the following is displayed:

Hello

Using the tag syntax, which is an opening tag <tag> and an ending tag </tag>, the browser can determine which part of the HTML code upon which it needs to perform a special action. There are four basic tags that should be included in every HTML document. These are the following:

html

head

title

body

The <html> tag should appear at the beginning and the ending of the document. This tag signifies the beginning and ending of an HTML document. Any information between the <head> </head> tag is header information. This is where the title of your HTML page should go. The title has its own tag: <title> </title>. The information between the <body> </body> tag is what gets displayed by your web browser. The following simple HTML template aids in understanding the above:

<html>

<head>
<title>[Enter the title of your page here]</title>
</head>

<body>
[Enter the content of your page here]
</body>

</html>

Remember, every time you have an opening tag, for example, <html>, you need an ending tag as well, i.e. </html>.

To get some practice, let's write a simple HTML page. Open up your text editor and type or copy and paste the following:

<html>

<head>
<title>Test HTML Page</title>
</head>

<body>
<B>Hello</B>
</body>

</html>

Save this file on your machine as test.html. Then, double click on the file and see what happens.

Click here to view results: test.html

Your browser should pop up displaying the word "Hello" in bold. If it does, you have successfully written an HTML page.

Before moving on to more complex HTML functions, we're going to look at two basic, commonly used tags: the <p></p> tag and the <br> tag. The <p> tag signifies the start of a paragraph. Your browser will automatically insert a blank link before the beginning <p> tag and after the ending </p> tag. The <br> tag is a line break. This tag mimics the return key of your keyboard when used in conjunction with a text editor.

Lets write a simple HTML page using line breaks and paragraphs. Type the following into your text editor and save it as simple.html

<html>

<head>
    <title>Simple HTML Page</title>
</head>

<body>

   <p>This is paragraph 1</p>
   <p>This is paragraph 2</p>
   After this line is a line break <br>
   This is the end of the page

</body>

</html>

Save this file on your machine as simple.html. Then, double click on the file and see what happens.

Click here to view results: simple.html

You can create simple HTML pages easily by using the template shown above along with paragraph and line break tags and inserting the text you want to display in the body of the template. For the most part, HTML is simple to write and easy to learn, and by keeping the above template in mind and learning a few more of HTML’s features, you can become a respectable HTML programmer in a relatively short amount of time. Before moving on, we are going to cover some more complex features of HTML, including tables, links, and styles.

Tables

HTML tables are one of the most powerful and important features of HTML. By mastering tables, you can accomplish much in terms of displaying and aligning text, images, etc on your web pages.

A barebones HTML table has the following format:

The <table> tags signify the beginning and end of the table. The <tr> tags signify table rows and the <td> tags signify table columns or table cells. Let's write an HTML page that makes use of a simple table. Type the following in your text editor:

<html>

<head>
   <title>Simple table</title>
</head>

<body>

<b>table Example</b>

<table>

    <tr>
       <td>Row 1 Column 1 </td>
       <td>Row 1 Column 2 </td>
    </tr>

    <tr>
       <td>Row 2 Column 1 </td>
       <td>Row 2 Column 2 </td>
    </tr>

</table>

</body>

</html>

Save this file as table.html to your desktop and double click it to see what happens.

Click here to view results: table.html

Notice the way in which the tags were written. For each <tr> tag, we had two <td> tags. This is because a <td> tag is used to create a cell inside a row. Since we wanted two cells for each row, we needed two <td> tags for each <tr> tag.

Tables are not only used to display text on the proper lines, as shown above, but to display text in the proper area on the page. For example, type the following into your text editor:

<html>

<head>
   <title>More Complex table</title>
</head>

<body>

<table width="400" border="1">

   <tr>
      <td width="250">text1</td>
      <td width="150">text2</td>
   </tr>

</table>

</body>

</html>

Save this file as table2.html on your desktop and double click it. Notice the border around the table and around each of the cells. The line ‘border = "1"’ inside the opening table tag accomplished this. This border allows you to better see the effect of the widths on the table columns.

Click here to view results: table2.html

The point of this example was to show you a way to align text horizontally on the screen. The bigger you make the width of the first column, the farther apart text2 becomes from text1. This is a common way HTML programmers align text on their web pages.

All in all, tables are a powerful way of displaying text on an HTML page and are a frequently used mechanisms of web page authors to perform all kinds of display variants, such as those demonstrated above. We'll see examples of more complex tables within the sample application.

Links

Another HTML topic we want to cover is the a feature of HTML called links. A link can be created using the tag <a></a>. Here is an example of a link:

Click here to go to the introduction

Creating a link is simple. Below is the code used to create the above link:

<a href="introduction.html">Click here to go to the introduction</a>

Notice the entire code is enclosed inside <a></a> tags. The "href" attribute of the tag is used to identify the page in which you want to link. In this case "introduction.html". However, if you wanted to link to something like Yahoo!, you could simply type "http://www.yahoo.com" inside the href attribute. Once you close your beginning <a> tag, the text before the final closing </a> tag will be in the form of a link, which the browser usually displays as underlined text in a color such as blue or red. In the example above, this text was "Click here to go to the introduction". That's all there is to links. Make sure to check out the HTML Tag Reference for more examples.

Styles

The final topic we want to cover is that of style sheets. Style sheets are what web programmers use to change the look of their web pages. For example, style sheets can be used to change fonts, colors, sizes, etc. There are many different methods for using styles. One of the easiest of these is to create classes. The following is an example:

.text {color: #FF0000;
font-family: Helvetica, Arial, sans-serif;
font-size: 10pt;
font-weight: normal;}

The above class uses some of the most commonly used attributes of a style sheet. These are color, font-family, font-size, and font-weight. The way to create a class is by using the following format:

.[class name] { [attribute1]:[value1];
[attribute2]:[value2];
. . .[last attribute]:[last value]
}

Notice that attributes are separated by semi-colons, attributes and values are separated by colons, and the entire attribute-value list is surrounded by curly braces. Also, notice that the name of the class starts with a "period". All classes should start with "periods" except those that are named after HTML tags. For example, if you want all text located within paragraph tags to follow a certain style, you can create the following class:

p {color: #FF0000;
font-family: Helvetica, Arial, sans-serif;
font-size: 10pt;
font-weight: normal;}

By creating the above class, the text on your page within paragraph tags will follow have the above style. One way to use a class is to put the class inside of style tags inside of your page's head tags. Take a look at the following example code:

<html>

<head>
   <title>Style Example</title>

   <style type="text/css">

      p {color: #FF0000;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10pt;
      font-weight: normal}

      .text {color: #00FF00;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 14pt;
      font-weight: normal}

   </style>

</head>

<body>

<p>This text is using paragraph style</p>

<table>

   <tr>
      <td class="text">This text is using text style</td>
   </tr>

</table>

</body>

</html>

Type the above code into your text editor as save it as style.html. Double click the file and see what happens.

Click here to view results: style.html

Notice the difference between the two texts. Also, notice that we didn't have to do anything special with our "p" style class. We can just use a paragraph tag and our style was applied. However, for classes not based on HTML tags, such as the ".text" class, we have to explicitly tell the browser we are using that class. We do this with the class="text" attribute of the <td> tag. We can use this class attribute with various tags, such as "td", "p", and "span". Here are some examples using the "text" class created above with the "p" and "span" tags.

<p class="text">This text is using the text class</p>

This text is normal <span class="text">This text is using the text class</span>This text is normal again

We have yet to talk about the "span" tag. What this tag does is allows you to break out sections of text and apply a different style to it. In the example above, we used the "span" tag to print the section "This text is using the text class" in a different style than the other text on that same line. The "span" tag gives you the ability to change the style of text without inserting a line break like the "p" tag does.

Before moving on, we are going to talk about a common technique used by web developers in regards to style sheets, which is the practice of sharing style sheets across multiple pages. This can be done using a "link" tag in the header section of your HTML document. This process is referred to as "linking in a style sheet". However, before you can link in a style sheet, you must create a style sheet file. This is very simple. The following is an example using the "text" class from above.

.text {color: #FF0000;
font-family: Helvetica, Arial, sans-serif;
font-size: 10pt;
font-weight: normal}

All you need to do to create a style sheet file is type or copy the above into your text editor, and then save it with a ".css" extension. Go ahead and copy the above "text" class into your text editor and save it as text.css.

Now all we need to do is create an HTML file that links in the above style sheet. Type or copy the following into your text editor:

<html>

<head>

<link href="text.css" rel="stylesheet" type="text/css">

</head>

<body>

<span class="text">Hello</span>

</body>

</html>

Save this file as teststyle.html in the same directory you saved your text.css file. Launch the teststyle.html file and see what happens.

Click this link to view the results: teststyle.html

Notice that the style class "text" was applied to the word "Hello". That's all there is to linking in style sheets to your HTML pages. This is a big advantage for web sites with multiple HTML pages. This technique allows you to maintain your styles in one central file. Thus, if you need to change a style, a change to one file will equate to a change in the style of every HTML page that links in that style sheet. The sample application uses this technique to manage its styles across multiple pages.

This concludes the overview of HTML. Make sure to take a look at HTML Tag Reference for more information on HTML, including more explanations of style sheet attributes.

Now that you have been exposed to the basics of HTML, let's talk about the programming language you are going to be using in your JSP code: Java. The next section of the tutorial, "Java Basics", will cover this topic.