Now that you have learned the basics of HTML it is time to continue on to bigger and better things. If you prefer to continue with web programming this article is for you. We will discuss some useful programs for HTML design and tools for making programming easier. We will also talk about other websites of interest for other programming topics and further HTML training. Read More...
In terms of other tutorials I would suggest W3Schools. They provide free tutorials and certification in all kinds of web programming. Before continuing anything else. Try their HTML tutorial to fill you in with the latest and greatest new features. The next step is to lean CSS. CSS stands for Cascading Style Sheet and it is the web standard for formatting you HTML. After that you will want to learn how to code in Javascript. It is the easiest way to program without having to deal with servers or anything like that. Once you have mastered the basics, you can try learning other languages such as PHP, SQL, and ASP. Check out the W3Schools website for more great programming tutorials. It is a great way to learn and it definitely worked for me!
If you need any help along the way you can either post a comment, PM us through our Youtube Channel, or now you can request live support from one of our experts with the CrossLoop service near the bottom of the page on the left hand column. Another good resource is the Web Developer Community Forum. It is a community of coders who can provide support for literally any programming on the web.
Since you have finished you have probably been looking for some really cool HTML editing program. The problem is (and you had the same at the beginning of the tutorials) you are not willing to spend all that money on Dreamweaver. Unless if you learn PHP, Perl, ASP, SQL, etc. and become a full-time coder and web designer, you don't have to get Dreamweaver. There are plenty of great tools out there that are as good and for beginners. Here are some of my favorites:
This concludes the Web Programming Series I hope everyone has enjoyed and learned something for these tutorials. Check out site every day for new articles, tips, tricks, tutorials, and computer how-to's. If you have any suggestions for this tutorial or others you can post a comment or submit you idea on the forum. Feel free to PM us from our Youtube Page or contact us for live computer help with the CrossLoop Gadget on the left-hand column of this page.
Thanks for reading!
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" |
| height | To define the height of a cell or the whole table | tabel, td, tr | height="7" height="17%"* |
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.
I'm sure everyone has been looking forward to the next installment of Web Programming. Well, here it is. In this section we will be learning basic HTML syntax and formatting. Remember: This tutorial is just an introduction to Web Programming. After reading, if you want to continue with web programming, you might want to go to your local bookstore and pick up some books on HTML. If you haven't read the first part, you can find Web Programming Part 1, here. Read More...
Creating Your File
The first thing you will need to do before anything is create a file to save your work in. You are going to need to open up notepad to do this. If you don't remember how to do this, check out my first tutorial. Once you have notepad opened, click on File and then Save As. Browse for a location (I suggest making a file for this tutorial) and give it a memorable name, such as test.html or first.html. Please note you will need to change the Save Type As: to All Files so you can save it as an HTML document. Some people ask: What is the difference between the html and htm extension and which one should I use? The answer to your question is there is absolutely no difference between the two types, I just prefer, html.
Basic HTML Syntax
In the last tutorial I told you HTML was similar to that bit of code I provided. The first part of that code is the HTML tags. These tags are the beginning and end markers of HTML and must be included for the browser to be able to read the file. All of your code will be between these two tags. The syntax of the HTML tag is: <HTML>
</HTML>
Notice, each tag begins with the tag name enclosed in the brackets and then ends in a slash and the tag name enclosed in brackets. You can copy the code above into the new html document you created or you can get the extra practice by hand typing it.
The next tag is the head tag. Between the opening and closing head tag you can put css, JavaScript, and most importantly, the HTML page's title. In this tutorial we will only discuss the title of the HTML document. The syntax is:
<HEAD>
<TITLE>This is the Title</TITLE>
</HEAD> The title tag is the tag that contains the title of the document. The title is the text that appears at the top of your browser next to the Close, Maximize, and Minimize buttons. Please note: I am putting all the tag's names in caps, but you don't have to. I find it a lot easier if you do this so you distinguish between actual text and code.
The second most important tag is the body tag. The body tag contains all the content that is displayed in the browser's window. You can probably guess what the syntax is for this tag, but I'll show you.
<BODY>
</BODY>You can type any text within the body tags and it will appear in the browser. There is much more to what you can include in the body tag, but we will discuss that after the recap.
So far, we have discussed the basic tags involved in the creation of HTML. You have written HTML code that can viewed in your browser. Right now, I would suggest saving (File>Save). You can lose a lot of typing in seconds if you don't take the time to save. You should have the following code typed in notepad:
<HTML>
<HEAD>
<TITLE>This is the Title</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>Viewing Your Work
That's great you say, but how do I view all my hard work? It's quite simple. Simply navigate to your file, right click, click open with, and select your browser. If you browser isn't listed you may have to click the browse button, but it should be there. You browser will open and display your file. If you copied the text exactly from above, you shouldn't see anything in the body, but the title should be displayed at the top.
Format Your Text
You are probably thinking: Typing text is fun, but how do I make it look fancy like all those cool websites. The answer is more tags. There are tags for attributes such as bold, italics, underline. You can also use paragraph tags for displaying lots of information or font tags to change the font. The first we will cover is the attributes. One more thing before continuing, the <br /> tag is used to create a line break (Same as hitting the enter key). Here is a demo of attributes:
<B>This Text is Bold</B><br />
<STRONG>This Text is Also Bold</STRONG><br />
<I>This is Italics</I><br />
<EM>This is Also Italics</EM><br />
<U>Underline!</U>The output of the above code would be:
This Text is Bold
This Text is Also Bold
This is Italics
This is Also Italics
Underline!Another important tag is the paragraph tag. This tag is used to format text into paragraphs. It acts as putting two line breaks after each block of text, but I recommend it over the two line breaks. To format you text into paragraphs use this syntax:
<P>This is a demo of a paragraph in HTML. The paragraph tag is used to format the text so it is easier to read and simpler to code</P>
<P>Here is another paragraph. Notice the space between the two.</P>The output of the following code would be:
This is a demo of a paragraph in HTML. The paragraph tag is used to format the text so it is easier to read and simpler to code.
Here is another paragraph. Notice the space between the two.The paragraph tag adds something new to HTML. Elements. Elements are specifications that can be used to personalize the appearance of certain tags. The paragraph tag is one of the tags that can have elements. One of the basic elements you can add to the paragraph tag is the align element. It can contain three values: left (Default), center, or right. This element can be applied to almost any tag (Aside from any of the tags discussed before the paragraph tag).
Your Assignment
Write a few paragraphs about what you have learned and use the tags and elements to demo each feature. You don't have to tell about the syntax, just explain each feature and give a demo. You can experiment with the tags and see what you get. Doesn't this look interesting??? You can try just about anything.
Now that we have completed the second installment of the Web Programming Series, you can take a break, high-five you-self (I don't know how), or pat your-self on the back because you are well on you way to learning the basics of HTML. If you want to get better the best thing you can do is practice, practice practice! It's that simple. Check every day for the next installment of Web Programming: Web Programming Part 3!!!!!!!
Web programming is what makes up all of the pages you see on your browser, and is a major part of computing (aside from writing actual programs). One of the most basic forms of web programming is HTML. We are not going to talk about PHP, Perl, ASP, or even JavaScript in this article, just plain HTML. We will discuss basic topics such as text fonts, formats, headers, titles, the structure of HTML, and tables. After reading this short little tutorial, you should be equipped with basic knowledge that is the basis of the beginning of a web design career. I have included links to more specific and exact websites for learning other languages such as PHP or JavaScript. Read More...
HTML Basics
Let's begin with some basics. You are probably wondering what HTML stands for. HTML is an acronym for HyperText Markup Language and it is one of the many languages web browser "understand". HTML is a system of < (open braces) and > (closing braces). For example, take a look at the following pseudo code:
<Library name="Los Angeles County Library" city="Los Angeles" state="California">
<Section type="Fiction">
<Shelf number="113.2" Row="4">
<Book Title="Harry Potter and the Deathly Hollows" Author="J.K. Rowling" ...>
<Description>
...
</Description>
</Book>
</Shelf>
</Section>
</Library>
By looking at the example above you can tell me the Book, the author, call number, Library, etc. HTML is similar to this because it is system of commands enclosed in brackets (<Library>), occasionally with attributes (type="Fiction"), and closing brackets (</Library>). This is the basis of HTML. The browser interprets the HTML the same way you looked at the example code.
HTML Editor
Most people would answer with an astounding Dreamweaver!! Whoa, easy there. You are just starting to learn HTML. Unless if you have a lot of money to spend, I wouldn't go breaking the bank just yet. You might decide web programming is not for you after reading this article (That's ok, as long as you didn't invest the vacation fund toward buy Dreamweaver). There are many great free or shareware programs out there that will do a beginner well. Believe it or not, notepad is one of them. I know it's been a long time since you have used it, so here is a refresher course on how to find it. First get out the Swiffer duster, because we're going to be stirring up some dust. Click Start>All Programs>Accessories>Notepad. You should see a very downgraded version (and by downgraded I mean having no resemblance to) Microsoft Word. Get familiar with it because it is going to be your best (coding) friend for the rest of the article (Unless if you find a suitable freeware/shareware program). I would suggest using notepad, though, because it doesn't have any of those fancy features that writes all the code for you or finishes your statements. The only way you are going to become good at this is if you learn it without any help then get one of those programs. This way you can learn the fancy program, but if there is something wrong, you can go back to good 'ol typing everything in manually.
I know I have probably gone way to fast for all you beginners, so let's take a break and return soon with the continuation to this article Web Programming Part II (Return of the HTML Tags!). (I would take this time to go get a cup of coffee with extra caffeine and a comfy chair to sit in because in the next tutorial, we're going to be typing like mad!! Get Ready)
