This is probably going to be the most challenging chapter of the whole book, so please pay close attention to the concepts you learn and practice creating your own web pages. As I mentioned in the previous chapter, WYSIWYG editors are an option, but I certainly recommend hand-coding all of the exercises I give you. They will pay off very quickly.
Hyper Text Markup Language, or HTML, is a platform for formatting content for the browser to view and operate. Many applications we use everyday utilize the following HTML concepts behind the scenes including: Microsoft Word, Microsoft Internet Explorer, Mozilla FireFox, and even e-mail clients such as Microsoft Outlook. Once you master these skills, you will open yourself to a world of development and design—which you can use anywhere.
The first web page in your website consist of default filename. This default filename is usually “index.html” and sometimes (but not always) “default.html”. For this exercise, we are going to create an HTML file within Windows Notepad (Start, Run, type in “notepad” and hit enter) or any plain text editor that comes with most operating systems. Your window should look something like this:
Now, you need to save this file somewhere. I recommend creating a folder on your computer called “web”—for the effort of this exercise I’m going to create it on my desktop—and save the file in that folder by the name of “index.html”. Go to file, save-as, type “index.html”, and then change the type from Text Documents (.txt) to “All Files”, and hit “save”:
Now, we’re ready to start coding. The first set of tags that should be included in every web page is:
<HTML>
</HTML>
This tells the browser that it is in fact and HTML document you are working with. Although they are not always necessary, for the purpose of creating VALID HTML documents, you need to add those tags. Next, you will create the HEAD and TITLE tags. These are tags that are interpreted before the web page loads:
<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
</HTML>
Notice, under the title tag, I added information between <TITLE> and </TITLE>? That information will show up on the Title bar of the browser window:
Next, you will add content to the web pages body:
<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
Content goes here
</BODY>
</HTML>
Notice the content I put between <BODY> and </BODY>? Open the file in our web browser and see what happens:
Now that we’ve created a simple web page, its time to learn the various HTML tags that can be used. Everything from this point on will stay between the <BODY> and </BODY> tags.
<p> – The Paragraph Tag
The first tag that every designer learns is the paragraph tag: <p></p>. Your web browser will interpret each instance of <p></p> as a separate paragraph in the web page.
<p>WhirledVisions Productions delivers the highest quality designs and marketing solutions at affordable prices. We believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking.</p>
<p>Through 15 years of growth, we have become recognized for our professional and innovative approaches. Our ‘team of talent’ and unique can-do attitude translates into success and satisfaction for our clients. </p>
The above will appear like this:
<h1></h1> Header Tags
Header tags allow you to apply a title or label to a specific section of your web page that you would like to emphasize. There is a series of six different header tags available to choose from: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Place the following above the two paragraph tags you just created.
<h1> Welcome to WhirledVisions</h1>
The result will look like this:
Creating Tables
The TABLE element is usually one of the more difficult HTML concepts that a webmaster struggles with in the beginning. It is, however, very simple to master once you understand the concepts. Each table has a table row <TR> and table
columns <TD>. Allow me to demonstrate:
<TABLE>
<TR> <!– << inserting a table row –>
<TD>Left Column</TD> <!– << inserting a column in that row
<TD>Right Column</TD>
</TR> <!– << closing that row element –>
</TABLE> <!– << closing that table lement –>
The result of the above code should look like this:
Now, let’s use these concepts to add a column to our HTML document. Pay close attention to the tags I add to the elements, especially ALIGN, COLSPAN:
<TABLE WIDTH=”400″>
<TR>
<TD COLSPAN=”2″><h3>Website Prices</h3></TD> <TR>
<TD>5 Page Website</TD>
<TD ALIGN=”right”>$1,000.00</TD>
</TR>
<TR>
<TD>10 Page Website</TD>
<TD ALIGN=”right”>$1,500.00</TD>
</TR>
<TR>
<TD>15 Page Website</TD>
<TD ALIGN=”right”>$2,000.00</TD>
</TR>
</TABLE>
The result of the above code is:
There are things you need to pay close attention to, especially:
- WIDTH: used to assign the elements width in pixels, can be used in the TABLE, TR, or TD tag. You could also use percentages. For example, you could make the first TD 30% and the second TD 70% in width.
- COLSPAN: notice how the first table row only has one column, and the other rows have two columns? That’s because I set the COLSPAN to 2, so that the row would compensate for the second column’s space and show properly.
- ALIGN: you can choose to align any element in the table LEFT, RIGHT, or CENTER
- BORDER: you can also, if you choose, create a border to easily depict where the table rows exist. Simply add BORDER=”1” to the TABLE element.
In the next exercise, I will show you how to assign colors, sizes, fonts, etc. to your TABLES with ease. You will notice that I left the attributes to the TABLE element to a minimum, and it is because we need to use Cascading Style Sheets (CSS) to conform to website design standards.
Hyperlinks and the Anchor Tag
Another HTML element that you should become very aware of is the Anchor tag, or <a>. Within the <a> tag, an HREF is added to bring the user to a particular destination, when clicked. Here is an example:
<A href=”index.html”>Home Page</a> |
<A href=”about.html”>About Us</a> |
<A
href=”mailto:info@whirledvisions.com”>Cont
act Us</A> |
<A
href=”http://www.amazingdesignsecrets.com”
target=”_blank”>Partner</A>
Here is a demo of what the above looks like in our web page. I placed it above the content for navigation purposes, I placed a “|” after every link to use as a divider:
Breaks
Notice in the above picture the logo is very close to the navigation menu? The best way to easily move the content down is to add break tags <BR />. The break tag adds a one line break in between two pieces of content. Unlike the <p> tag, breaks allow you to control your content much more effectively. Here is an example:
<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
<h1> Welcome to WhirledVisions</h1>
<A href=”index.html”>Home Page</a> |
<A href=”about.html”>About Us</a> |
<A
href=”mailto:info@whirledvisions.com”>Cont
act Us</A> |
<A
href=”http://www.amazingdesignsecrets.com”
target=”_blank”>Partner</A>
<BR><BR> <!- – two line breaks – -><IMG
src=”images/logo.jpg” BORDER=”0″
ALIGN=”LEFT” />
<p>WhirledVisions Productions delivers the
highest quality designs and marketing
solutions at affordable prices. We Believe
that you need a comprehensive strategy to
catch and compel your target market. We
believe in creating demand for your
talents, products or services through
positive Web-based technologies, Media and
networking.</p><p>Through 15 years of growth, we have
become recognized for our professional and
innovative approaches. Our ‘team of
talent’ and unique can-do attitude
translates into success and satisfaction
for our clients. </p>
<TABLE WIDTH=”400″>
<TR>
<TD COLSPAN=”2″><h3>Website
Prices</h3></TD>
<TR>
<TD>5 Page Website</TD>
<TD ALIGN=”right”>$1,000.00</TD>
</TR>
<TR>
<TD>10 Page Website</TD>
<TD ALIGN=”right”>$1,500.00</TD>
</TR>
<TR>
<TD>15 Page Website</TD>
<TD ALIGN=”right”>$2,000.00</TD></TR>
</TABLE>
</BODY>
</HTML>
And here is an example of what that looks like. Doesn’t look much better now
that the logo has been moved down two lines?
Introduction to Cascading Style Sheets (CSS)
These font style tags are a simple way of adding quick effects to your text. Although, I must warn you, this method of identifying the style of a font has become deprecated according to the World Wide Web Consortium (W3C)—the organization who sets standards development of HTML,. CSS, and other web languages—and are recommended that you utilize Cascading Style Sheets to accomplish this.
It is really your choice which route you would like to go in styling your text. It is preferred; however, that you choose the latter by only assigning values you to your web page elements. It will certainly serve you better in the long run. HTML the values that you assigned above to recycle throughout your entire website—a benefit you do not have with font tags. Here is how you do that:
- Create a CSS file. I am going to call mine “styles.css”. For purposes of this exercise, I’m going to use Windows Notepad.
- Type the following values within your CSS file:
.WVBold { //<–the name of the class you
would like to assign
Font-weight:Bold;
}
.WVItalics { //<–the name of the class
you would like to assign
Font-emphasis:italics;
}
.WVUnderline { //<–the name of the class
you would like to assign
Underline:True;
} - Add the following to directly under the tag of your document but above the tag:
- Add the classes to each element you’d like to emphasize in your web
page: Example:<div class=”WVBold”>Demo Text</div> Demo Text
<div class=”WVItalics”>Demo Text</div> Demo Text
<div class=”WVUnderline”>Demo Text</div> Demo Text
Applying CSS to Web Page Elements
One of the greatest advantages of using CSS is that you can implement your class within any HTML element. For example, if you wanted to apply the HTML element to a <p> tag, you could simply type <p class=”WVBold”>.
Tables
<TABLE STYLE=”width:400px;”>
<TR>
<TD COLSPAN=”2″><h3>Website
Prices</h3></TD>
<TR>
<TD class=”WVBold”>5 Page Website</TD>
<TD ALIGN=”right”
class=”WVItalic”>$1,000.00</TD>
</TR>
<TR>
<TD>10 Page Website</TD>
<TD ALIGN=”right”>$1,500.00</TD>
</TR>
<TR>
<TD>15 Page Website</TD>
<TD ALIGN=”right”>$2,000.00</TD>
</TR>
</TABLE>
I’ve supplied an HTML and CSS reference guide along with this course with every single element, tag, and value for your convenience. If you downloaded an electronic copy of the course, then it is located at the very end of this book. I recommend printing and laminating it for easy access.
