HTML II

Factors to consider in designing a website. Organizing your files. HTML Tables. Unordered Lists. Ordered Lists. HTML Forms. Learning Objectives

Factors to consider in designing your website  Function of the page Why are you creating the page? What do you want to convey? Are you displaying data, and or capturing data?  Audience  Sort of structure required Do you require more than one page? Order of Navigation  Sketch out the site on paper  Naming convention for files. Simple Consistent Use lower case names Don’t forget the “.htm” or “.html” extension.

Organizing your Files Decide where to store your files Create a central folder or directory to hold all the material that will be available on the site. Divide the central folder in a way that reflects the organization of your site, i.e. create separate folders for images, HTML documents, other external files, etc. HTML Tables Similar to regular tables in that they are made up of columns and rows. Very useful for organizing a page. By creating a borderless table, you can create a well laid out page. Created with the table tag. The closing tag is not optional, as some browsers would fail to display the table in its absence.

The TABLE tag Indicates the creation of a table. Has the following attributes: BORDER, BORDERCOLOR, ALIGN, WIDTH, HEIGHT, BGCOLOR Example: …….. The Table Row Tag Creates a new row in the table. Also has attributes that can be used to set the appearance of that row, such as BGCOLOR. Has a matching closing tag The Table Data tag Used to add content to the cells of the table. Has attributes that can be used to format the content of the cell. Has a matching closing tag

The Table Header tag Creates a header for a table column, that appears in bold text. Has a matching closing tag Example: FIRST NAME SURNAME JAMES BLOGGS PETER CUNNING

FIRST NAMESURNAME JAMESBLOGGS PETERCUNNING Note that 2 columns were created in this example. More columns could have been created by adding more tags as shown below: FIRST NAME SURNAME AGE JAMES BLOGGS 20 PETER CUNNING 25. This produces: FIRST NAMESURNAMEAGE JAMESBLOGGS20 PETERCUNNING25

Unordered Lists (Bullet points) Very commonly used on the web for organizing a page. Used to list items that have no particular order. Created with the tag and matching closing tag. Has an attribute ‘TYPE’ that allows definition of the shape of the bullet points. : solid round bullet : empty round bullet : square bullet. : Used to add list items. Also uses the attribute ‘TYPE’. When used, overrides the TYPE as defined in. Each list item in an unordered list should be enclosed in and matching tags. The closing tag is inserted after the last tag as shown in the next slide.

……… Computing Marketing Accounting …………. would result in: oComputing oMarketing Accounting Ordered Lists Ideal for explaining step-by-step instructions, e.g. in a form Created with the Ordered list tag.

Has a TYPE attribute that determines the kind of symbol to be used. where x represent the type of symbol to be used in numbering the list items (A for capital letters, a for small letters, I for capital roman numerals, i for small roman numerals, and 1 for numbers, the default) List items are added with the tag. Example: …….. Computing Marketing Accounting ……… would result in: A.Computing B.Marketing C.Accounting

HTML Forms HTML forms enable us to capture data on the web. A form may also be used to display data May be used to return information to the visitor. Common examples??? Essentially comprised of a shell (the layout or structure), and a processing script. The principal tool for processing form data is the CGI script, typically written in Perl or some other programming language. It is also possible to send form data by , even though the data would be poorly formatted. Forms are created with the tag. has the following attributes: METHOD: This is either ‘POST’ (most common), or ‘GET’ ACTION: The processing script is referenced in this attribute. where script.url is the location of the cgi script.

Form Elements Most are created with the tag, which has a TYPE attribute that determines the type of element, such as text box, radio button, checkbox, etc. Text Boxes Can contain one line of free form text, typically for user input. Created with. text indicates to the browser that this is a text box name is used to identify the text box value is the default value you assign to it, and would be sent to the server if user doesn’t enter data in the field. If desired, you can set the SIZE=n where n is the desired width in characters. You may also set the MAXLENGTH =n where n is the maximum number of characters that can be entered in the box.

Password Boxes The difference from a text box is that whatever is typed into a password box is hidden by bullets or asterisks. Note that this data is however not encrypted when sent to the server. Larger Text Areas Unlike text boxes, can be as large as your page, and will expand as needed. Ideal for entering large amounts of data e.g comments. where n is the height of the text area in rows (default value is 4), and y is the width in characters (default value is 40). Radio Buttons Ideal when user has to make a choice from a set of values, as only one value can be selected.

The name links the radio buttons together, and identifies the data sent to the server. The value is the text sent to the server if a particular button is checked. Example: Male Female would result in a group of 2 radio buttons, one labelled Male (with value M) and the other labelled Female (value F). Hidden Fields Do not appear on the browser. Typically used to pass data from one form to another.. They can be placed anywhere between and.

Submit Button Used to submit form data If you omit the VALUE attribute, by default, your submit button would be labelled ‘Submit Query’ by the browser. Reset Button Resets the form to blank state, or to default values when they exist ***Class Assignment*** Find out how to create Checkboxes and Drop down Menus