Skip to main content

Posts

Showing posts from July, 2018

css introduction

What is CSS? •Stands for Cascading Style Sheet •CSS allows you to style HTML elements, or define how they are displayed. •Styles are normally stored in Style Sheets •External Style Sheetscan save you a lot of work •External Style Sheets are stored in CSS files •Multiple style definitions will cascadeinto one •Examples: –Changing the color of text –Specifying the size and position of a div What is CSS? (cont.) •CSS is an alternative to the “style” attribute. – <div style=“height:500px; width:200px”></div> •Advantages: –Can control the style of many different elements with a single command. –Separation of function: HTML can focus on content while CSS handles styling. CSS (Cascading Style Sheet) •Simple mechanism for adding style to web page •Code be embedded into the HTML file •HTML tag: <style type=“text/css”>CODE</style> •Also be in a separate file FILENAME.css •HTML tag: <link rel=“stylesheet” href=“scs.css” type=“text/css”> •St
Post a Comment
Read more

Other Elements used in Forms

Option The list items are added to the <SELECT> element by inserting <OPTION></OPTION> elements. The Option Element’s attributes are: § SELECTED : When this attribute is present, the option is selected when the document is initially loaded. It is an error for more than one option to be selected. § VALUE : Specifies the value the variable named in the select element. <HTML> <HEAD></ HEAD> <BODY> <h2><font color=blue>What type of Computer do you have?</font><h2> <FORM> <SELECT NAME=" ComputerType " size=4>    <OPTION  value="IBM" SELECTED> IBM</OPTION>   <OPTION  value="INTEL"> INTEL</OPTION>   <OPTION value=" Apple"> Apple</OPTION>   <OPTION value="Compaq"> Compaq</OPTION> </SELECT> </FORM></BODY></HTML>   Output  
Post a Comment
Read more

SELECT

§ The two following examples are <SELECT></SELECT> elements, where the attributes are set differently. The Select elements attributes are: § NAME : is the name of the variable to be sent to the CGI application. § SIZE : this sets the number of visible choices. § MULTIPLE : the presence of this attribute signifies that the user can make multiple selections. By default only one selection is allowed. Example on <SELECT> <BODY bgcolor = lightblue > <form> Select the cities you have visited: <SELECT name=“list”   size=5> <option> London</option> <option> Tokyo</option> <option> Paris</option> <option> New York</option> <option> LA</option> <option> KL</option> </SELECT> </form> </BODY> Output
Post a Comment
Read more

TEXTAREA

<TEXTAREA></TEXTAREA>: is an element that allows for free form text entry. Browser will display Textarea has the following attributes: § NAME : is the name of the variable to be sent to the CGI application. § ROWS : the number of rows to the textbox. § COLS : the number of columns to the textbox. <BODY bgcolor = lightblue > <form> <TEXTAREA    COLS=40   ROWS=20   Name="comments"   > HTML Hypertext Markup Language is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page The markup. </TEXTAREA>: </form> </BODY> Output
Post a Comment
Read more

File

File Upload : You can use a file upload to allow surfers to upload files to your web server. <INPUT TYPE=“FILE”> File Upload has the following attributes: • TYPE :   file. • SIZE : is the size of the text box in characters. • NAME : is the name of the variable to be sent to the CGI application. • MAXLENGHT : is the maximum size of the input in the textbox in characters. Example on File <BODY bgcolor = lightblue > <form> <H3><font color= forestgreen > Please attach your file here to for uploading to My <font color = red >SERVER...<BR> <INPUT  TYPE="File"  name=" myFile "  size="30"> <INPUT  TYPE="Submit"  value=" Submit File "> </form> </BODY>
Post a Comment
Read more

Reset button

Reset : It is a good idea to include one of these for each form where users are entering data. It allows the surfer to clear all the input in the form. • • <INPUT TYPE=“RESET”> Reset buttons have the following attributes: • TYPE : reset. • VALUE : determines the text label on the button, usually Reset. Example on Reset Button <FORM     Action="URL"         method="get"> First Name: <INPUT TYPE="TEXT" Size=25 name=" firstName "> <BR> Family Name: <INPUT TYPE="TEXT" Size=25 name=" LastName "><BR> <BR> <FONT Color = red> <STRONG><font size=5>Press Here to submit the data:</font></STRONG><BR> <INPUT TYPE="submit" VALUE=" SubmitData "> <INPUT TYPE="RESET" VALUE="Reset"> </FORM> Output
Post a Comment
Read more

Submit

Submit: Every set of Form tags requires a Submit button. This is the element causes the browser to         send the names and values of the other elements to the CGI Application specified by the             ACTION attribute of the FORM element . <INPUT TYPE=“SUBMIT”> Submit has the following attributes: § TYPE: submit. § NAME : value used by the CGI script for processing. § VALUE: determines the text label on the button, usually Submit Query. Example on Submit Button <FORM     Action="URL"         method="get"> First Name: <INPUT TYPE="TEXT" Size=25 name=" firstName "><BR> Family Name: <INPUT TYPE="TEXT" Size=25 name=" LastName "><BR> <BR> <FONT Color=red> Press Here to submit the data:<BR> <INPUT TYPE="submit" VALUE=" Submit Data " > </FORM> Output
Post a Comment
Read more

Push Button

Push Button: This element would be used with JavaScript to cause an action to take place . <INPUT TYPE=“BUTTON”> Push Button has the following attributes: § TYPE: button. § NAME: is the name of the button to be used                 in scripting. § VALUE: determines the text label on the button. Example on Push Button <DIV align=center><BR><BR> <FORM> <FONT Color=red> <h1>Press Here to see a baby crying:<BR> <INPUT TYPE="button" VALUE=" Press Me "><BR><BR> <FONT Color=blue> Click Here to see a baby shouting:<BR> <INPUT TYPE="button" VALUE=" Click Me " > <BR><BR> <FONT Color=green> Hit Here to see a baby eating:<BR> <INPUT TYPE="button" VALUE=" Hit ME " > <BR><BR> <FONT Color=yellow> </FORM></DIV> Output
Post a Comment
Read more

Radio Button

Radio Button : Radio buttons allow the users to select only one option . <INPUT TYPE=“RADIO”> Radio buttons have the following attributes: § TYPE: radio. § CHECKED: is blank or CHECKED as the initial                         status. Only one radio button can be                          checked § NAME: is the name of the variable to be sent to the                  CGI application. § VALUE: usually has a set value. Example on Radio Button <HTML>  <HEAD> <TITLE> CheckBoxType </TITLE>  </HEAD> <BODY> <h1> <font color=green>Please check one of the following</font></h1> <FORM name=" form3 "  Action=" url "  method="get"> <font color=red> Select Country: </font><BR> jordan :<INPUT TYPE= "RADIO"  Name="country"  CHECKED><BR> Yemen<INPUT TYPE=" RADIO "  Name="c
Post a Comment
Read more