Geektechlife's Posts
Nairaland Forum / Geektechlife's Profile / Geektechlife's Posts
 Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 12:09am On Sep 29, 2020 |
*HTML – LAYOUTS 2* *Multiple Columns Layout - Using Tables* You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. Example: Here is an example to create three column layout. <!DOCTYPE html> <html> <head> <title>Three-Column HTML Layout</title> </head> <body> <table width="100%" border="0"> <tr valign="top"> <td bgcolor="#aaa" width="20%"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor="#b5dcb3" height="200" width="50%"> Technical and Managerial Tutorials </td> <td height="200" width="10%"> Aside content </td> <td bgcolor="#aaa" width="20%"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr> <tr> <td colspan="4" bgcolor="#b5dcb3"> <center> Copyright © 2007 stackoverflow.com </center> </td> </tr> <table> </body> </html> Powered by Programmers Community... 1 Like 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 5:58pm On Sep 28, 2020 |
*HTML – LAYOUTS 1* A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel. Now- a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags. This chapter will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes. *HTML Layout - Using Tables* The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like. Example: The following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute. <!DOCTYPE html> <html> <head> <title> Table Layout-ing </title> </head> <body> <table width="100%" border="0"> <tr> <td colspan="2" bgcolor="#b5dcb3"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign="top"> <td bgcolor="#aaa" width="50px"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor="#eee" width="100px" height="200"> Technical and Managerial Tutorials </td> </tr> <tr> <td colspan="2" bgcolor="#b5dcb3"> <center> Copyright © 2007 Tutorialspoint.com </center> </td> </tr> </table> </body> </html> Powered by Programmers Community... 1 Like 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 5:57pm On Sep 28, 2020 |
*HTML – LAYOUTS 1* A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel. Now- a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags. This chapter will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes. *HTML Layout - Using Tables* The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like. Example: The following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute. <!DOCTYPE html> <html> <head> <title> Table Layout-ing </title> </head> <body> <table width="100%" border="0"> <tr> <td colspan="2" bgcolor="#b5dcb3"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign="top"> <td bgcolor="#aaa" width="50px"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor="#eee" width="100px" height="200"> Technical and Managerial Tutorials </td> </tr> <tr> <td colspan="2" bgcolor="#b5dcb3"> <center> Copyright © 2007 Tutorialspoint.com </center> </td> </tr> </table> </body> </html> Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 7:14am On Sep 25, 2020 |
*HTML - FORMS 6* *Input Restrictions* Here is a list of some common input restrictions (some are new in HTML5): disabled - Specifies that an input field is disabled i.e. un-usable, un-clickable and will not be submitted with the rest of the form. max - Specifies the maximum value for an input field. maxlength - Specifies the maximum number of character for an input field. The attribute does not provide any feedback. If you want to alert the user, you must write JavaScript code. min - Specifies the minimum value for an input field. pattern - Specifies a regular expression to check the input value against. readonly - Specifies that an input field is read only (cannot be changed). required - Specifies that an input field is required (must be filled out) else the form will not be submitted. optional - Specifies that an input field is optional, not required to be filled out, yet the form will be submitted. size - Specifies the width (in characters) of an input field. step - Specifies the legal number intervals for an input field. value - Specifies the default value for an input field. Example: <! DOCTYPE html> <html> <head> <title> Form restrictions </title> </head> <body> <form> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> <br/><br/> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> <br/><br/> <input type="text" value="Jake" readonly> <input type="range" name="points" step="2" min="0" max="10"> </form> </body> </html> Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 12:09am On Sep 25, 2020 |
*HTML - FORMS 5 (Continued)* <!DOCTYPE html> <html> <head> <title> Form Elements </title> </head> <body> <form action="action_page.php"> <fieldset> <legend>Personal information:</legend> <label>First name:</label><br> <input type="text" name="firstname" value="Mickey"><br> <label>Last name:</label><br> <input type="text" name="lastname" value="Mouse"><br><br> </fieldset> <fieldset> <legend>Other information:</legend> <label>Course of choice:</label><br> HTML - <input type="checkbox" name="course" value="HTML"> CSS - <input type="checkbox" name="course" value="CSS"> JS - <input type="checkbox" name="course" value="JS"> <br> <label>Time:</label><br> Morning - <input type="radio" name="time" value="morning"> Afternoon - <input type="radio" name="time" value="afternoon"> Evening - <input type="radio" name="time" value="evening"> <br><br> </fieldset> <button type="button"> Submit </button> <input type="reset" value="Reset"> </form> </body> </html> Result is also shown below. Note what the 'reset' button does when you click on it? It sets everything back to default (i.e. how it was when the page loads). Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 12:05am On Sep 25, 2020 |
*HTML - FORMS 5* *The <button> Element* The <button> element defines a clickable button. Illustrated in the example below. *Some Form Elements Attributes* type - Indicates the type of input control and for text input control it will be set to text (do not apply to select). name - Used to give a name to the control which is sent to the server to be recognized and get the value. value - This can be used to provide an initial value inside the control. size - Allows to specify the width of the text-input control in terms of characters (do not apply to checkbox and radio button). maxlength- Allows to specify the maximum number of characters a user can enter into the text box (do not apply to checkbox, radio button and select). checked - Set to checked if you want to select it by default (do not apply to textbox, password and select). multiple - If set to "multiple" then allows a user to select multiple items from the menu (applies to select). selected - Specifies that this option should be the initially selected value when the page loads (applies to select). label - An alternative way of labeling options (applies to select). *The Name Attribute* To be submitted correctly, each input field must have a name attribute. Apart from this, you get why radio buttons require the name attribute, right? Well, you can go back to our first 2 form lessons for a better understanding. *Grouping Form Data with <fieldset>* The <fieldset> element groups related data in a form. The <legend> element defines a caption for the <fieldset> element. Example next... Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 12:01am On Sep 25, 2020 |
*HTML - FORMS 6* *Input Restrictions* Here is a list of some common input restrictions (some are new in HTML5): disabled - Specifies that an input field is disabled i.e. un-usable, un-clickable and will not be submitted with the rest of the form. max - Specifies the maximum value for an input field. maxlength - Specifies the maximum number of character for an input field. The attribute does not provide any feedback. If you want to alert the user, you must write JavaScript code. min - Specifies the minimum value for an input field. pattern - Specifies a regular expression to check the input value against. readonly - Specifies that an input field is read only (cannot be changed). required - Specifies that an input field is required (must be filled out) else the form will not be submitted. optional - Specifies that an input field is optional, not required to be filled out, yet the form will be submitted. size - Specifies the width (in characters) of an input field. step - Specifies the legal number intervals for an input field. value - Specifies the default value for an input field. Example: <! DOCTYPE html> <html> <head> <title> Form restrictions </title> </head> <body> <form> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> <br/><br/> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> <br/><br/> <input type="text" value="Jake" readonly> <input type="range" name="points" step="2" min="0" max="10"> </form> </body> </html> Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 3:27pm On Sep 24, 2020 |
*HTML - FORMS 5 (Continued)* <!DOCTYPE html> <html> <head> <title> Form Elements </title> </head> <body> <form action="action_page.php"> <fieldset> <legend>Personal information:</legend> <label>First name:</label><br> <input type="text" name="firstname" value="Mickey"><br> <label>Last name:</label><br> <input type="text" name="lastname" value="Mouse"><br><br> </fieldset> <fieldset> <legend>Other information:</legend> <label>Course of choice:</label><br> HTML - <input type="checkbox" name="course" value="HTML"> CSS - <input type="checkbox" name="course" value="CSS"> JS - <input type="checkbox" name="course" value="JS"> <br> <label>Time:</label><br> Morning - <input type="radio" name="time" value="morning"> Afternoon - <input type="radio" name="time" value="afternoon"> Evening - <input type="radio" name="time" value="evening"> <br><br> </fieldset> <button type="button"> Submit </button> <input type="reset" value="Reset"> </form> </body> </html> Result is also shown below. Note what the 'reset' button does when you click on it? It sets everything back to default (i.e. how it was when the page loads). Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 2:52pm On Sep 24, 2020 |
*HTML - FORMS 5* *The <button> Element* The <button> element defines a clickable button. Illustrated in the example below. *Some Form Elements Attributes* type - Indicates the type of input control and for text input control it will be set to text (do not apply to select). name - Used to give a name to the control which is sent to the server to be recognized and get the value. value - This can be used to provide an initial value inside the control. size - Allows to specify the width of the text-input control in terms of characters (do not apply to checkbox and radio button). maxlength- Allows to specify the maximum number of characters a user can enter into the text box (do not apply to checkbox, radio button and select). checked - Set to checked if you want to select it by default (do not apply to textbox, password and select). multiple - If set to "multiple" then allows a user to select multiple items from the menu (applies to select). selected - Specifies that this option should be the initially selected value when the page loads (applies to select). label - An alternative way of labeling options (applies to select). *The Name Attribute* To be submitted correctly, each input field must have a name attribute. Apart from this, you get why radio buttons require the name attribute, right? Well, you can go back to our first 2 form lessons for a better understanding. *Grouping Form Data with <fieldset>* The <fieldset> element groups related data in a form. The <legend> element defines a caption for the <fieldset> element. Example next... Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 11:12pm On Sep 23, 2020 |
*HTML - FORMS 4* *HTML5 <datalist> Element* The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of pre-defined options as they input data. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element. . . . <form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> . . . *HTML5 Input Types* HTML5 added several new input types: color date datetime datetime-local month number range search tel time url week Example: . . . <form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <br/> Birthday: <input type="date" name="bday"> <br/> Select your favorite color: <input type="color" name="favcolor"> <br/> E-mail: <input type="email" name="email"> <br/> Add your homepage: <input type="url" name="homepage"> </form> . . . Powered by Programmers Community... 2 Shares
|
(Go Up)
| Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 32 |