Getting Started with HTML

HTML and Javascript Notes Part 1 The languages all browsers understand is HTML. There are many languages out there such as ASP, JSP, PHP and many more that are web-based languages, but what they do is uses a server to convert data into HTML so the browser can understand them. The browser doesn't understand ASP or JSP, but only HTML. Javascript is a scripting language that is used by the browser to manipulate your HTML on your page. Javascript is very useful, but can also be difficult because not all browsers interpret Javascript the same way. The Javascript you code might work properly in one browser, but another browser it doesn't work at all. That is what makes building web applications difficult. It is much easier to build a desktop application then it is to build a web based application because in a web based application you have code your application according to the web standards that browsers are suppose to follow. The only issue is that not all browsers follow the web standards. Javascript is not Java. It has its name because its syntax is similar to Java. HTML uses tags to define its fields. Almost all (not all of them) should have an open tag and a closing tag. There are some exceptions. Lets create your first HTML file. Go to your desktop and select your right mouse button->new->text document name the new text document myfirsthtml.html. (Make sure you add the extension with a dot (.) followed by the HTML extension. That will create your HTML file. The file should change into the look of your default browser. If it doesn't, that is either because you don't have access to create a html file, or most likely it is because you are hiding your file extension. To know if you are hiding your file extension, you should select the right mouse button on the file and select properties. If the file says, “Opens with: Notepad, you did not create an html file, but a text file like this: myfirsthtml.html.txt. This is not what you want. If you created an HTML file, you can skip this step, if not, you need to open your Windows Explorer on Windows Vista, and select Organize-> Folders and Search Options->Views->and uncheck “do not show hidden files and folders”. If you are using another operating system, you should figure out how to unhide your file extensions on your system. To edit your file, you can not just click on it because that is how you will execute it in your browser. To edit your html file, you should select the right mouse button on the file, select Open With (or Open) and select either Notepad or Wordpad. Now you are ready to start creating your html file. An HTML file should start with an open HTML tag, and then a closing HTML tag. Inside those tags should have head tags along with the body tags like so. When you open it up in the browser by selecting on it, you should see nothing display yet. Remember, each time you change your HTML file, you need to refresh the browser to see your changes. You can create your first table with a test statement to see something display like this:

This is a Test Now if you open this up in the browser, it should display This is a Test. You can also add a title in between the head tags like this: This is a Test Now when you open your browser, at the very top of the browser you should see, “This is a Test HTML File – Windows Internet Explorer”. That is where the title will appear. To create rows and columns such as you see in Excel, you should use the rows and column tags like this (You usually will want to put them inside a table):

Row 1 Column 1	Row 1 Column 2
Row 2 Column 1	Row 2 Column 2
Row 3 Column 1	Row 3 Column 2

If you want the table to be more readable, you can add a border=1 to create a border around it. Now, there are other HTML components that you should be aware of. To create a Select box (drop down box), you will create it like this and put it between the body tags:   Milk  Coffee  Tea If you want a default to inform the user to select an option, you can add an option like this as your first option: --Select an Option-- You can also create a text box like this: You can put a break to move this to the next line by this tag:
You can also create a text area like this:
Enter your comments here... The rows=”5” allows you to increase the size(width) of the textarea. There are two other widely used html components which are radio buttons and checkboxes. To create a checkbox, you will write it like this: Milk
Butter
To have the checkbox automatically be checked when the page is loaded, you can type checked in the tag to make it default to check. To use radio buttons, you will do something like this: Milk
Butter The thing about radio buttons is that if you name each radio button with the same name, then the user will be forced to select one or the other radio buttons. They will not be able to select both options. Radio buttons allows f or grouping to force the user to select one option out of the group.   will give you a space between items because HTML doesn't recognize spaces between components. Now we also need to know how to create a link to another html page. To do this, you should create a second html page at the same location of your current html page and give it a name like: mysecondhtml.html. After you do this, set it up to be an html page as I demonstrated. Put the html tags, and a table, and some text that will print out. Execute the html page to make sure that it works correctly. This is my second html page After you have done this and everything is working, we want to link our first page to the new html page you just created. Now to link to the second html page, you can add something like this:
Go To Second HTML Page The href is the location of the page you are linking to. A link starts with a tag and ends with a tag as well. You will put the description within the and the tags. Now that we have all our components, we need to know a little bit about making html pages more interesting. You can use a Font tag to change a fonts size and color, but it is depreciated. What depreciated means is that it isn't supported by strict html standards. Therefore, you should avoid it. Row 1 Column 1 You can use the styles to change the style of the font and color. Row 2 Column 1 This code I put in the column tag which adds an attribute for the styles. It changes the font to size 40 pixels, and the font-family to blackadder. The itc italicizes the fonts and the color changes it to red. You should separate each attribute by a semicolon. You can also use the tags to bold the text and to underline the text and to italicize the text as well. You can change colors by putting the name of the color or by putting its hexadecimal equivalent. To find the hexadecimal equivalent, you can google: html color codes and get all kinds of them. Here is one of them: http://html-color-codes.info/ Select the color you want, and it gives you the hexadecimal equivalent. Select one and change red to the hexadecimal color and see how your page changes. To create a Button, you will do something like this:
If you want a button that will be used to submit the form, you will write it like this:
I will explain submitting a form later.