I Want To Build Websites All By Myself. Can I? - Webmasters (3) - Nairaland
Nairaland Forum / Science/Technology / Webmasters / I Want To Build Websites All By Myself. Can I? (4427 Views)
I Build Websites...... Any Kind Of Websites @cheap Rates / Build Websites For Your Business, E-commerce And Many More At Cheap Rates....... / What Can I Use To Build Websites Like This One (2) (3) (4)
(1) (2) (3) (4) (5) (Reply) (Go Down)
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 3:26pm On Sep 15, 2020 |
*HTML - FORMS 2* *Text Input Controls* There are three types of text input used on forms: Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input>tag. Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password. Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea>tag. Following is the list of attributes for <textarea> tag. name - Used to give a name to the control which is sent to the server to be recognized and get the value. rows - Indicates the number of rows of text area box. cols - Indicates the number of columns of text area box. *Checkbox Control* Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox. *Radio Button Control* Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio. *Select Box Control* A select box, also called drop down box which provides option to list down various options in the form of drop down list, from where a user can select one or more options. Example: <!DOCTYPE html> <html> <head> <title>Text Input Control</title> </head> <body> <form> <label>First name:</label> <input type="text" /> <br/><br/> <label>Last name:</label> <input type="text" /> <br/><br/> Description: <br /> <textarea rows="5" cols="50"> Enter description here... </textarea> <br/><br/> <input type="checkbox" name="subject" value="on">Maths <input type="checkbox" name="subject" value="on"> Physics <br/><br/> <input type="radio" name="options" value="maths">Maths <input type="radio" name="options" value="physics"> Physics <br/><br/> <select name="dropdown"> <option value="Maths" selected>Maths</option> <option value="Physics">Physics</option> <option value="Geography">Geography</option> <option value="Economics">Economics</option> </select>my </form> </body> </html> Note: You can not select both radio buttons: when one is selected, the other becomes unselected. As long as their carry the same name value, it works. It is however not the same with check boxes. Check boxes are meant to offer more than one selection if needed while radio buttons are used when one option is to be chosen out of many. Also, on click of the select button, there is a drop-down with options to be selected from. Before clicking it, an option has already been set as selected by default, using the 'select' attribute. Try placing the 'select' attribute in another option, see what changes. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:35am On Sep 18, 2020 |
To all followers of this Web Programming thread: For some reasons not yet known, it was not possible to send posts for Wednesday and Thursday on this platform, this message kept coming up at every trial: "You can not do that right now, try again in a few hours." However it seems to have been sorted out. Still, to be prepared is to consider the past, present and look into the future whilst planning. For this reason, a WHATSAPP group has been created for the same purpose as this thread: "to teach the practice of web coding in simple, understandable terms, provide essential programming skills relevant to the times and people, create a network of uniquely motivated, creative and skillful programmers with clear foresight and discipline." Below is the link, on click you will be taken to the group where lessons will be posted. Thank you so much. You are blessed to be a blessing ... Remember that! https:///HJevgHpwDYJ6oOSDn7WkCw Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:45am On Sep 18, 2020 |
*HTML - FORMS 3* *File Upload Box* If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file. *Button Controls* There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button. Type values for button control include: submit - This creates a button that automatically submits a form. reset - This creates a button that automatically resets form controls to their initial values. button - This creates a button that is used to trigger a client-side script when the user clicks that button. image - This creates a clickable button but we can use an image as background of the button. *Hidden Form Controls* Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page will be displayed next based on the passed current page. Example and result uploaded below. Some <form> attributes: accept - Specifies the types of files that the server accepts (applies to file upload box). accept-charset - Specifies the charset used in the submitted form (default: the page charset). action - Specifies an address (url) where to submit the form (default: the submitting page). autocomplete - Specifies if the browser should autocomplete the form (default: on). enctype - Specifies the encoding of the submitted data (default: is url-encoded). method - Specifies the HTTP method used when submitting the form (default: GET). name - Specifies a name used to identify the form (for DOM usage: document.forms.name). novalidate - Specifies that the browser should not validate the form. target - Specifies the target of the address in the action attribute (default: _self). No need to worry, you will get the handle of this soon. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself. Can I? by Vnn2868(m): 4:37pm On Sep 19, 2020 |
eesyy: I must commend your effort from the beginning of this thread to this end. I recently stumbled on this thread this morning and was dumbfounded by the amount of powerful information dropped here free of charge. Indeed, there still exist hope for Nigeria. God bless you infinitesimally. My pleasure to be among your students. |
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 5:16pm On Sep 19, 2020 |
Vnn2868: You're welcome! 1 Like |
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 10:32am On Sep 24, 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
|
| 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
|
| 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
|
| 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
|
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:00pm On Sep 25, 2020 |
*HTML - FORMS (Some extra)* When to Use GET? You can use GET (the default method): If the form submission is passive (like a search engine query), and without sensitive information. When you use GET, the form data will be visible in the page address: action_page.php?firstname=Mickey&lastname=Mouse Note: GET is best suited to short amounts of data. Size limitations are set in your browser. When to Use POST? You should use POST: If the form is updating data, or includes sensitive information (password). POST offers better security because the submitted data is not visible in the page address. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:18am On Sep 26, 2020 |
*HTML – ENTITIES* Some characters are reserved in HTML and they have special meaning when used in HTML document. For example, you cannot use the greater than and less than signs or angle brackets within your HTML text because the browser will treat them differently and will try to draw a meaning related to HTML tag. HTML processors must support following five special characters listed in the first table uploaded below. Example: If you want to write <div id="character"> as a code, then you will have to write as follows- <!DOCTYPE html> <html> <head> <title>HTML Entities</title> </head> <body> <div id="character"> </body> </html> There is also a long list of special characters in HTML 4.0. In order for these to appear in your document, you can use either the numerical codes or the entity names. For example, to insert a copyright symbol you can use either of the following: © 2007 or © 2007 Powered by Programmers Community... 1 Like 2 Shares
|
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 8:43am On Sep 28, 2020 |
*HTML ─ PLUGINS* The purpose of a plug-in, is to extend the functionality of the HTML browser. Helper applications are computer programs that extend the standard functionality of a web browser. Helper applications are also called plug-ins. Examples of well-known plug-ins are Java applets. Plug-ins can be added to web pages with the <object> tag or the <embed> tag. Plug-ins can be used for many purposes: display maps, scan for viruses, verify your bank id and bank transactions, scan fingerprints, face or eye retina, play media, access and open files of different formats including compressed files, print receipts, access other softwares etc. The point is whenever a function is needed in a web application (like any of those mentioned above), the programmer can include such a function simply with the use of a plug-in (another application) that can do that, instead of writing out files of code for that purpose. Hence plug-ins can be referred to as helper applications; they are actually programs - files of programming code written by a programmer. Note: To display video and audio: Preferably, use the <video> and <audio> tags. But if the video format is not one supported by HTML5 standard then converting to an HTML5 standard supported format will be necessary. The <object> and <embed> elements defines an embedded object within an HTML document. They are used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages and to include HTML in HTML or images if you like. Example shown in first image uploaded below. However to save the stress of converting video files from one unsupported format to a format supported by HTML5 standard, they can be played on webpages using YouTube by following the necessary steps as mentioned below: upload the video to YouTube, take a note of the video id, define an <iframe> element in your web page, let the src attribute point to the video URL, use the width and height attributes to specify the dimension of the player and finally add any other parameters available for YouTube (like autohide, autoplay, controls, loop, playlist) to the URL. You’ll have a code that looks like that in the second image uploaded below. The <object> and <embed> elements are also for this YouTube video application but they were deprecated as at 2015. Deprecated: (in computing) meaning Obsolescent; said of a construct in a computing language considered old, and planned to be phased out, but still available for use. Powered by Programmers Community... 1 Like 2 Shares
|
| 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
|
| 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
|
| Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 6:38pm On Sep 29, 2020 |
*HTML - LAYOUTS 3* *HTML Layouts - Using DIV, SPAN* The <div> element is a block level element used for grouping HTML elements. While the <div> tag is a block-level element, the HTML <span> element is used for grouping elements at an inline level. Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data. Note: This example makes use of Cascading Style Sheet (CSS), so before understanding this example you need to have a better understanding on how CSS works. Example: Here we will try to achieve same result using <div> tag along with CSS, whatever you have achieved using <table> tag in previous example. <!DOCTYPE html> <html> <head> <title>HTML Layouts using DIV, SPAN</title> </head> <body> <div style="width:100%"> <div style="background-color: #b5dcb3; width: 100%"> <h1>This is Web Page Main title</h1> </div> <div style="background-color: #aaa; height: 200px; width: 100px; float: left;"> <div><b>Main Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color: #eee; height: 200px; width: 350px; float: left;"> <p>Technical and Managerial Tutorials</p> </div> <div style="background-color: #aaa; height: 200px; width: 100px; float: right;"> <div><b>Right Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color: #b5dcb3; clear: both"> <center> Copyright © 2007 Tutorialspoint.com </center> </div> </div> </body> </html> Note: You can create better layout using DIV, SPAN along with CSS. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself. Can I? by josephjuwon75(m): 1:48pm On Sep 30, 2020 |
Nice one, how much does it take to own a website for upcoming company? |
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 4:40pm On Sep 30, 2020 |
josephjuwon75: What type of website? And what would the website do? |
| Re: I Want To Build Websites All By Myself. Can I? by eesyy(m): 4:53pm On Sep 30, 2020 |
*HTML - CONCLUSION* Hypertext markup language is the basics of every website; it can however not stand alone. We have done a bit of CSS in the course of our lessons. There is a lot more to talk about as far as CSS is concerned. It is the beauty of HTML, simply put. A friend of mine puts it well this way, "HTML is the lady who just took a good bath and dressed up casually, CSS is the make-up and accessories." What do you say? Using layouts and all we have covered, by now you can do a pretty good job of any simple website. But looking at pages online, you can tell there is still a lot of miles to cover. We will continue into CSS properly. Follow the lessons as you have been - practicing as you go. If you have not been doing enough practice with each lesson, this is the time to do so; CSS can not be learnt without adequate practice, or at the least not very well to get a firm handle on it. Please practice ... Practice hard! See you... Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 8:16pm On Sep 30, 2020 |
*HTML – STYLE SHEET (inline CSS)* Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the consortium was founded in 1994. Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon ( : ). Each property declaration is separated by a semi-colon ( ; ). Example: First let's consider an example of HTML document which makes use of <font> tag and associated attributes to specify text color and font size. <p><font color="green" size="5">Hello, World!</font></p> We can re-write above example with the help of Style Sheet as follows: <p style="color:green;font-size:24px;">Hello, World!</p> You can use CSS in three ways in your HTML document: 1) Inline Style Sheet: Define style sheet rules directly along-with the HTML elements using style attribute. 2) Internal Style Sheet: Define style sheet rules in header section of the HTML document using <style> tag. 3) External Style Sheet: Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag. Let's see all the three cases one by one with the help of suitable examples. *Inline Style Sheet* You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag. This should be done only when you are interested to make a particular change in any HTML element only. Rules defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined in <style> element for internal CSS. That is to say whatever value given to an element property inline will override whatever value is given to that same element property in the internal or external CSS. Example: Let's re-write above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements. <!DOCTYPE html> <html> <head> <title>HTML Inline CSS</title> </head> <body> <p style="color: red;">This is red</p> <p style="font-size: 20px;">This is thick</p> <p style="font-style: italic;">This is green</p> <p style="color: green; font-size: 20px;">This is thick and green</p> </body> </html> Results displayed in the image uploaded below. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself. Can I? by Paul2love: 9:08pm On Sep 30, 2020 |
Why not. You can even make use of WordPress, unless you are good in coding or probably using blogger. I will also recommend you try python with some help, you can have outstanding [url=thegadgethelper.com]website[/url] |
| Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 10:09am On Oct 01, 2020 |
*HTML - STYLE SHEET (internal CSS)* *Internal Style Sheet* If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section of the HTML document using <style> tag. Rules defined in internal style sheet overrides the rules defined in an external CSS file. Example: Let's re-write above example once again, but here we will write style sheet rules in the same HTML document using <style> tag. <!DOCTYPE html> <html> <head> <title>HTML Internal CSS</title> <style type="text/css"> .red{ color: red; } .thick{ font-size: 20px; } .green{ color: green; } </style> </head> <body> <p class="red">This is red</p> <p class="thick">This is thick</p> <p class="thick red">This is thick and green</p> </body> </html> Results displayed in the image uploaded below. Powered by Programmers Community... 2 Shares
|
3 SEO Big Mistakes To Avoid When Creating The Design For Your New Website / Tutorial: Building A Facebook Chat With Jquery/php / Whats ur forum address(link)
(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. 90 |