If you have been following my Web Programming Series you have probably been awaiting the most awaited tutorial on the web. OK, so maybe it isn't the most awaited, but you have been waiting for quite some time and here it is. In this final edition of web programming, we will be discussing text font, color, links, images, tables, and other key features of HTML programming. We will be summing up all you need to know to get started with basic web programming. There might even be a bonus article on other great articles about other kinds of web programming. So stop biting you finger nails (from the anxiety) and get ready to finish the web programming series!! Read More...
The Font Tag
Before learning how to create links and images, we will want to learn how to change the color, size and font face. These are determined with the font tag. I bet you can guess how it's formatted. Yes, you're right! The font tag looks something like this:
<FONT COLOR="#FF0000" SIZE="7" FACE="arial">This Text is red, size 7, and arial.</FONT>
The first tag you will notice is the color element. It can contain hexidecimal values. We will not discuss hexidecimal values in depth, but they are basically a six digit and letter code that is preceded with a # (Shift+3). For a full chart of web safe colors (Colors that all browsers that can display) see this HTML Hexidecimal Color Chart. The second element, the size element, is an element that determines the size of the text. The default in most browsers is 3. While this might seem small, it is the equivelant of size 12 in Microsoft Word. When using the font tag, make sure you only use values of 1-7. Once above 7, the text gets too big. There are other tag for these bigger texts, we will discuss them later. If you don't define a size, the text will probably be a little larger then the text in this article. The last element is the face element. It contains the font face (Arial, Times New Roman, etc). As with the colors, there are safe fonts that are installed on to most computers. These fonts are: Arial, helvetica, sans-serif, times new roman, times, serif, courier new, courier, monospace, georgia, verdana, and geneva. Generally Times New Roman will be the default font on most computers. All you have to do is copy (Ctrl+C) one of these fonts and paste (Ctrl+v) between the quotation marks of the face element. Please note, every element that is part of tag is enclosed in either "quotation marks" or 'apostrophes'. You must enclose the font name, color, size, and anything that is after the equal sign of an element. Also note, the order of these elements doesn't matter. You can put them anywhere after the name of the font and before the first >. Here is a demo of the font tag:
<FONT COLOR="#FFFF00">Yellow with Default Size and Default Font</FONT><br>
<FONT COLOR="#FF0000" FACE="sans-serif" SIZE="4">Red Text with Size 4 and Font Sans-Serif</FONT><br>
<FONT FACE="verdana" COLOR="#0000FF" SIZE="3" >Blue Text with Default Size and Font Verdana</FONT><br>
<FONT SIZE="25" COLOR="#00FF00" FACE="Times New Roman" >Green Text with Size 25 and the Default Font</FONT>
The output of that would be:
Yellow Text with Default Size and Times New Roman
Red Text with Size 4 and Font Sans-Serif
Blue Text with Default Size and Font Verdana
Green Text with Size 2 and the Default Font
You can test out all of these by creating a new html file with notepad. If you need a little help with writing the file, here's the code:
<HTML>
<HEAD>
<TITLE>My Font Tag Test</TITLE>
</HEAD>
<BODY>
<FONT>This is a font test!</FONT>
You have to fill in the font tag!
</BODY>
</HTML>
Simply save this in a special folder and then right click it and point to Open With. Internet Explorer (or the better browser, Firefox) should be listed. Click on it and you file will open up. You can size you browser down a little (You don't do it a lot, so it's that big button between the red X and the Minimize button) so you can fit both it and notepad on your screen. Make your changes in Notepad and press Ctrl+S (The universal keys for save), or go to File>Save. Go over into your browser and press Ctrl+R (Refresh) and you should see your changes.
The Heading Tags
Remember how I said there were things you could use if you desired a font size above 7. Well yes you could type the font tag along with the size or you can use heading tags. Unlike the font tag, the heading tags have no elements (That define size). This is because the size is in the tag. Also, notice I said tags. There are multiple heading tags. An example of one is here:
<H3>Heading Three</H3>
Heading tags contain H and then a number from 1 to 6. Heading 1 is the largest and a little too big for use. Heading 7 is the smallest and is almost smaller then regular text. I prefer using heading 3; it is just the right size for titles that need to be big, but not too big. Here is a heading tag sample:
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H5>
The viewer of the page would see:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Headings are good when you are writing several paragraphs each with it's own title and each nested within another paragraph. The headings will help you keep a consistent title for each paragraph.
Links and Images
Links are a very important part of web programming. They make up the structure of websites and let users browse with ease. Without links the web wouldn't exist. You've probably seen fancy effects with links (Done in CSS), but in this tutorial we will be working with basic links. Links can contain multiple elements, but we will talk about the most important one; the href element. The href element contains the address that the link links to. So this would be the format of a link:
<A HREF="http://flashcreations-faq.blogspot.com/">FlashCreations'</A>
Links begin with the A tag and they have the href element, which contains the address that the link sends you to. The example above would give you a link to my home page. Links are pretty straight forward at their simplest form. This basic information will open you web pages up to a whole new world.
Now that we have talked about links, what about if we want to include pictures on our site. This is possible with the IMG tag. The IMG tag usually has one element, the location of the image (or src which is an abbreviation for source). A basic IMG tag looks like this:
<IMG SRC="my_image.jpg">
This is the basic form of the IMG tag. The src element contains the location of the image based on the location of the HTML document. If the image you want isn't in the current folder and it's one folder up either you specify the exact location or you use the special parent directory command. Take a look at this example: Say you have a website (www.mysite.com) and in a folder called web (www.mysite.com/web/) you have a image file called image.jpg. Also in that folder you have another folder called HTML. Within the HTML folder is the file that you are currently on (index.html). Here is the directory tree:
www.mysite.com
| |
image.jpg HTML
|
index.html
Suppose you wanted to include the image into your file (index.html). If you typed "http://www.mysite.com/image.jpg" you would get the image, but what if you website address changed to http://www.mysite.org/. This would mean you would have to go through and change all your image's srcs. That would be quite a pain. There is an easier way. It is the command ../ (Dot Dot Forward Slash). It can be used in place of the "http://www.mysite.com/image.jpg". You could use the parent directory command (../) like this "../image.jpg". Wouldn't that be a lot less typing and a lot less headache if you change you site's location. This is a key fundamental of HTML. Always base you locations relative to the file and not the site. Meaning don't have locations that are static (Contain Unchangeable Things) like "http://www.mysite.com/image.jpg", use code that can be reused where ever it's located ("../image.jpg").
Now we have talked about the link and the image, how about combining them. Well if we think about it, you probably already know. Instead of having text we can put our image in like so:
<A HREF="http://flashcreations-faq.blogspot.com/"><IMG SRC="image.jpg"></A>
Wasn't that easy! All you had to do was replace the text with the IMG tag. This can be used with anything. If you include something between the A tags it will link to the HREF provided.
Tables
Tables are something that you might use to display some data or a bunch of images. Tables can also be used to align data and provide a functional website. According to the W3C (World Wide Web Consortium), using tables to align a websites content is not the standard for the web. CSS is now the standard for any web content alignment and placement. See the W3C site for more. The basic structure of a table begins with, you guessed it, a table tag. Before we talk about the tags, lets talk about the elements that each tag can have.
| Element |
Use |
Supported Tags |
Example |
| border |
To define the size of the border in pixels or in precent |
table |
border="2" |
| width |
To define the width of a cell or the whole table |
table, td |
width="5"
width="15%"* |
| height |
To define the height of a cell or the whole table |
tabel, td, tr |
height="7"
height="17%"* |
*If used for a cell, x% of the whole table. Ex. 10% cell of a 100px table would be 10px. If used for the whole table x% of the window. Ex. 10% of a 100px window would be 10px.
Knowing these elements we can learn the tags that go with a table. The first, and most important is the table tag. It is the tag that starts the table. For this tag you must include a width to tell how big the table is. This tag can optionally have a height and border element (the border is suggested to be included). The next tag is the TR (table row) tag. This tag can also have a height element to define a row's height, but not a width element. The final tag is the TD element. It is used for each individual column in each row. This tag can include a width and height element. All together an example table would look like this:
<table width="200" border="1">
<tr>
<td><b>X</b></td>
<td><b>1</b></td>
<td><b>2</b></td>
<td><b>3</b></td>
</tr>
<tr>
<td><b>1</b></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><b>2</b></td>
<td>2</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td><b>3</b></td>
<td>3</td>
<td>6</td>
<td>9</td>
</tr>
</table>
The above code would output:
| X |
1 |
2 |
3 |
| 1 |
1 |
2 |
3 |
| 2 |
2 |
4 |
6 |
| 3 |
3 |
6 |
9 |
You will notice that the code makes a 3x3 multiplication table. You can practice on your own by making tables of diffents things such as TV Schedules, sports standings and/or scores, and scientific observations. If you prefer not to make your own tables, after you can make them on your own you can use my online table generator. Please only use this after master HTML tables; You will not learn anything by just using your comptuer to make them for you.
Some Notes
One of the last things we will talk about is comments. A lot of tutorials will start with the most basic things such as comments. I do not, becuase I think it is unnecessary to worry you with comments and it makes the last section easier. Comments in HTML are simple tags (again) that you inclose your comment with. A comment is something that is not visible to the broswer. It is only visible to people viewing the source of your code. It is formatted like this:
<!--This is a comment in HTML-->
It is pretty straight forward and simple. If there is a confusing piece of code, use it to explain what it does. If there is a note you would like to make to yourself (be carful anyone can view the comment if they view your HTML source) you can put it in a comment.
Final Assignment
Your final assignment for this tutorial is to make a website about your favorite cady, sports team, car, etc. and try to use all the things we talked about. You don't have to post it on the web, but try to make several pages and use some links.
I hope that you have enjoyed these tutorials and found them useful. If you continue a career in web programming (or just a hobby) that great! If you choose not to, that's OK too. For some people this just isn't their thing. If you have any questions or comments please feel free to post them in the comments, on our forums, or PM me from our youtube page. I would also like to take this time to say thank you to all my readers, subscribers, and fans. If you haven't yet subscribed please do anddon't forget we offer email updates. I am currently working on a Bonus Tutorial for this series. It will include great help websites, resources, and further learning tools.
