Tonga Institute of Higher Education IT 141: Information Systems Lecture 8: HTML Programming
HTML Background You should already know what HTML looks like and how it becomes a webpage You should also realize you must put your webpages on a webserver somehow. To create HTML webpages, there different programs that try to help with the process Then you must send the page to the webserver using FTP Then, other people will be able to see the webpage when they go to the server The web browser that the person uses will “render” the HTML file into a webpage that they receive from the server
How to create HTML There are many web page creator programs. A popular one that allows you to create webpages by through a graphical interface is called Dreamweaver. Dreamweaver, and other programs, hide the HTML programming to make it simpler, but it's still important to learn the foundation and background To make an HTML page all you need is a text editor A text editor just saves whatever you type and that’s it. The text editor we will use is called HTML-Kit and is on all your computers
Parts of a HTML page A webpage is broken in HEAD and BODY The header section Begins with the <head> tag, ends with </head> Put global tags that affect the entire web page This includes the title (<title>TITLE</title>) JavaScript or VBScript you want to put in Special information that is used by search engines to figure out what is on your webpage
Parts of HTML The body section begins with <BODY> This is where you put all your data, text, images, and other things you want to display An HTML Page might resemble this: <html> <head> <title>Hello Class</title> </head> <body bgcolor=‘silver’> This is my body </body> </html>
Styling your webpages Style affects the way your web page looks and feels You can control style with the following tags (there are many more though) <b>Bold</b> <i>Italic</i> <u>Underline</u> <marquee>Moving</marquee> <font color='blue'>Blue font</font>
Attributes If you want to change the color for a font or background <font color=“color”> <body bgcolor=“color”> You can use the English name Like red, blue, lime, black (<font color=“red”>) Or you can use a hexadecimal value that corresponds to colors <font color=“#ffffff”> <font color=“#3AB544”> White is #000000 and black is #ffffff, everything else is in between
The font tag The font tag will be important for making your website look a certain way. A font tag can have attributes of color, size, face Face means what type of font (verdana, courier, arial, tahoma). Size usually goes from –3 +3 Color from #000000 -> #ffffff
Other Formatting Tags These other tags can help you format your data <br> - make a new line <p> - make two new lines <hr> - make a line across the screen <center> - center text <div align=“right”> - align your text to the right <div align=“left”> - align your text to the left <li> - Make an item in a list
You’ve created your webpage After you’ve created your webpage and saved it on your computer you can test it by opening Internet Explorer and then going to File->Open, finding the file that you saved and selecting it. But how can other people view it? The file must be put onto a web server that is connected to the Internet
Using webservers You need to upload your files to a webserver. To upload, you must use a FTP (file transfer protocol) program for this There is a FTP program on your computers called FileZilla. Open that program and press connect. You will see a window that asks for information, like host name (www.tihe.org), username and password. Ignore the rest You will connect to the webserver. You will see a folder called public_html, double-click on this folder and open it (this is a folder on the webserver for your website) Now find where you saved the files on your computer on the left side of the screen. When you have find them, select and press the button to transfer to the server. Now you’re done. You can see your webpage at http://www.tihe.org/~your_username/
Web page graphics You have made a basic webpage. There are now many other ways to format and improve upon it. To add pictures on your website, there are a number of steps to follow 1. Get the picture. You can make your own, or save one from the Internet (right click, save target as) 2. Make sure the image is in the same folder as the HTML files, otherwise the browser won’t know where to find the image 3. Then include the right tag <IMG SRC=“name.gif” border=“0”> Where name.gif is the name of the image
Types of web graphics There are three main types of picture formats on the web GIF – best for non-photographic images, can be made small in size JPG – good for pictures of things (people, places) PNG – newer type standard that gives higher resolution pictures at smaller sizes
Links To create hypertext links from one page to another Use the <a> tag <A href="otherfile.html">Click here</a> <a href="http://www.tihe.org">Go to tihe.org</a> <a href="#spot">Go within page</a> Then also use <a name=“spot”>Here is spot inside page</a> <A href=“file.html”><img src=“image.gif” border=“0”></a> Now image.gif is a link to click on <A href="mailto:cbf@tihe.org">Send me email!!</a>
Tables Tables let us format and break data up into smaller cells. It can look like a spread sheet, or it can help you put things into order Example Table: A B C D E F G H
Tables To make tables we use three tags PAGE DISPLAY AAA BBB CCC To start a table we use <table> To start a row use <tr> To start a cell within a row use <td> HTML CODE <table border=“1”> <tr> <td>AAA</td> <td>BBB</td> </tr> <td colspan=“2”>CCC</td> </table> PAGE DISPLAY AAA BBB CCC
Tables Attributes for <table>, <tr>, <td> tags bgcolor –set color for table background – name of a image file to use as background for table width – width in pixels height – height in pixels border – size of border around table (use 0 for none) Examples: <td bgcolor=‘green’ width=‘200’> <table width='500' border='1'> <td background='image.gif'> <tr bgcolor=‘yellow’>
Using Tables for formatting Tables are still the standard way in HTML to format data into alignment. For example, if you want a picture to be next to text <table border='0' width=300> <tr> <td><img src='penguin.gif'></td> <td valign=top>Text goes here <BR>Next to picture</td> </tr> </table> Text goes here Next to picture.
Forms People realized it would be useful if they could get information from people who visited their websites. Forms allow a person visiting at a website to send information back to the webserver. The webserver can then use a program (server side script) to take the information and use it For example, when you check your email, you are using a form to login to the email server That form asks for your username and password A form could ask for any type of information
Forms … Example Form
Forms Example HTML Code <form action="/sendmail.php" method="POST"> <input type="hidden" name="recipient" value="root@tihe.org"> First Name<input type="text" name="firstname" size=10><BR> Password: <input type="password" name="person_password" size="15"><BR> Island: <select name="Island"> <option value="TBU">Tongatapu</option> <option value="HP">Haapai</option> </select><BR> Gender: <input type="radio" name="gender" value="M" checked> M<BR> <input type="radio" name="gender" value="F" >F <BR> <textarea rows=5 cols=45>type here</textarea><BR> <input type=submit value="Click here my friend"> </form>
Form Elements To start a form, use the <form> tag and change two attributes You must tell it where the program is that you want to send the data to (called the action) and you need to tell it how to send the data (called the method) Example: <form action=“/sendmail.php" method="POST"> The method should almost always be "POST". The action must be the full path to where the program lives. We must also remember to end the form with a </form> tag.
Form Elements The actual form is made up of different Input types. An input type is a tag (<input>) that allows the user to enter data in a certain way. Example: <input type="text" name="age" size='10'> This tag will show a text box that the user can type in a line of text. When the data is sent to the server, the data will be called "age" Note the name that you choose can be any name you want, but each Input should have a different name.
Input Types There are a number of input types: Textbox <input type="text" name="Data1"> TextArea <textarea name="Data2"></textarea> Select Box <select name="Data3"> <option value="Type1">Type 1 </option> <option value="Type2"> Type 2</option> </select>
Input types Radio Buttons Submit Buttons: <input type="radio" name="Data3" value="Yes">Yes <input type="radio" name="Data3" value="No">No Submit Buttons: (when you click on a submit button, the web browser sends the data to the program on the server) <input type="submit" value="Submit Button">
Summary This was a brief introduction to HTML and how to use it. There are much more detailed references that you can find on the course web page that will explain more. You will need to use those resources to complete your assignments.