I Want To Build Websites All By Myself - Programming (3) - Nairaland
Nairaland Forum / Science/Technology / Programming / I Want To Build Websites All By Myself (7313 Views)
Teach People To Build Websites And Apps And Earn Money / I Build Websites And Mobile Apps / Please Help, I Want To Learn To Build Websites, Web Design... (2) (3) (4)
(1) (2) (3) (4) (5) (Reply) (Go Down)
| 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
|
| 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
|
| 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
|
| Re: I Want To Build Websites All By Myself by Sologzy(m): 3:05pm On Sep 25, 2020 |
nice please continue am following 1 Like |
| Re: I Want To Build Websites All By Myself by eesyy(m): 7:57pm 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 by eesyy(m): 8:09am 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... 2 Shares
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 10:40am 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... 2 Shares
|
| 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
|
| Re: I Want To Build Websites All By Myself by geektechlife: 12:10am 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... 2 Shares
|
| Re: I Want To Build Websites All By Myself by geektechlife: 6:37pm 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 by eesyy(m): 4:54pm 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 by geektechlife: 8:14pm 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 by geektechlife: 10:10am 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
|
| Re: I Want To Build Websites All By Myself by geektechlife: 10:59am On Oct 01, 2020 |
*HTML - STYLE SHEET (external CSS)* *External Style Sheet* If you need to use your style sheet to various pages, then it’s always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag. Example: Consider we define a style sheet file "mystyle.css" which has following rules. .red{ color: red; } .thick{ font-size: 20px; } .green{ color: green; } Here we defined three CSS rules which will be applicable to three different classes defined for the HTML tags. The above code will be written in the CSS style sheet "mystyle.css" as it is, nothing added, nothing less. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS. Now let's make use of the above external CSS file in our following HTML document: <!DOCTYPE html> <html> <head> <title>HTML External CSS</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <p class="red">This is red</p> <p class="thick">This is thick</p> <p class="green">This is green</p> <p class="thick green">This is thick and green</p> </body> </html> Result is shown in the image uploaded below. *Imported CSS - @import Rule* @import is used to import an external stylesheet in a manner similar to the <link>element. Here is the generic syntax of @import rule. Example: Following is the example showing you how to import a style sheet file into an HTML document. <head> <@import “mystyle.css”; </head> This will yield same result as the <link> tag used above. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by geektechlife: 10:05pm On Oct 01, 2020 |
*HTML - STYLE SHEET (CSS Rules Overriding)* We have discussed four ways to include style sheet rules in an HTML document. Here is the rule to override any Style Sheet Rule. Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>...</style> tags or the rules defined in any external style sheet file. Any rule defined in <style>...</style> tags will override the rules defined in any external style sheet file. Any rule defined in the external style sheet file takes the lowest priority, and the rules defined in this file will be applied only when the above two rules are not applicable. Example: Consider we define a style sheet file "mystyle.css" which has following rules. .row1{ color: red; } .thick{ font-size: 20px; } .row2{ color: green; } Now let's make use of the above external CSS file in our following HTML document which has both internal CSS and inline CSS. Example shown in first image uploaded below. Result is shown in the second image uploaded below. You can see that the values for the classes thick and row2 are different in our external style sheet from our internal style sheet, and the browser choose to follow the rules stated in the internal style sheet. Also where an inline CSS occurs stating the value of color property to be blue, the browser displays the text of that element in blue instead of the class row2 assigned to the same element which points the color property to purple. The page is read from top to bottom, right from left. It sees the external style sheet first, then the internal, before the inline; so the inline comes out on top after the internal. Note: External CSS comes in a separate CSS file linked to the actual HTML document. The difference between it and the internal CSS is simply creating a <style> element in the head section of the HTML document, preferably after the title element, and then placing the same thing you would write in your external style sheet in-between the open and close tags of the <style> element. An inline style sheet is simply using the style attribute inside an element to state the properties and their respective values. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by Sologzy(m): 11:01pm On Oct 01, 2020 |
following sir please if for instance, I want to create a web site.. will I write all the code in one file or different file.. like doing heading, body, paragraph... first and the image,table,etc. in another file... |
| Re: I Want To Build Websites All By Myself by eesyy(m): 7:19am On Oct 02, 2020 |
Sologzy: You write them in one file; one HTML file. Every thing inside the <body> segment except those that should be in the <head>: like your <title> and <style> elements stay in the <head>, your <table>, <h1> to <h6>, <p>, <img>, <a>, <div>, <span>, <up>, <ol>, <b>, <i> and all the others we've talked about go in your <body>. That's it. Understand? |
| Re: I Want To Build Websites All By Myself by Sologzy(m): 10:42am On Oct 02, 2020 |
eesyy:oh okay |
| Re: I Want To Build Websites All By Myself by Sologzy(m): 10:46am On Oct 02, 2020 |
I have issues with the image<img> will I create a folder with testpic.png or ... I don't understand please explain |
| Re: I Want To Build Websites All By Myself by eesyy(m): 7:46pm On Oct 02, 2020 |
*CSS COMMENTS* Many times, you may need to put additional comments in your style sheet blocks. So, itis very easy to comment any part in the style sheet. You can simply put your comments inside /*.....this is a comment in style sheet.....*/. You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++ programming languages. For example: /* This is an external style sheet file */ H1, h2, h3 { Color: #36C; Font-weight: normal; Letter-spacing: .4em; Text-transform: lowercase; } /* end of style rules */ *Handling Old Browsers* There are still many old browsers who do not support CSS. So, we should take carewhile writing our Embedded CSS in an HTML document. The following snippet shows howto use comment tags to hide CSS from older browsers: <style type=”text/css”> <!-- Body, td { Color: blue; } --> <style> Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 7:56pm On Oct 02, 2020 |
Sologzy: Let's take an example. You have a picture named "testpic.png" in the same folder as your HTML document. To display the picture on the web page, this is the code: . . . <img src="testpic.png" width="50px" height="50px" alt="picture"> . . . The value you give to the "alt" attribute there will display only when the image fails to show for whatever reason; maybe network failure or file corruption. You get the point? |
| Re: I Want To Build Websites All By Myself by Sologzy(m): 11:14pm On Oct 02, 2020 |
eesyy:okay can you pls drop your WhatsApp number.. pls post another update |
| Re: I Want To Build Websites All By Myself by Hendris(m): 5:16am On Oct 03, 2020 |
Do you have a smart TV or andriod and iPhones? Subscribing to Netflix for Nigerians has been made easier, I sell Netflix Premium accounts at a very affordable price and I have accounts ranging from 1month to 2year subscription fully paid.. 1month is 1500 3months is 4k 1year us 8k Drop your WhatsApp number if you are interested or contact me on 081...311..231..93 |
| Re: I Want To Build Websites All By Myself by geektechlife: 7:39am On Oct 03, 2020 |
Sologzy: Message only, no calls please. +2348144157769 |
| Re: I Want To Build Websites All By Myself by geektechlife: 7:47am On Oct 03, 2020 |
*CSS MEASUREMENT UNITS* CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You need these values while specifying various measurements in your style rules e.g. border: 1px solid red; width: 3cm; font-size:7em; margin: 3%; We have listed out all the CSS Measurement Units along with proper examples in the image uploaded below. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 2:07pm On Oct 03, 2020 |
*CSS─ SYNTAX 1* A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts: Selector: A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc. Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc. Value: Values are assigned to properties. For example, color property can have the value either red or #F1F1F1 etc. You can put CSS Style Rule Syntax as follows: Selector {property: value;} Example: You can define a table border as follows: table {border: 1px solid #C00;} Here table is a selector and border is a property and the given value 1px solid #C00 is the value of that property. You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one. *The Type Selectors* This is the same selector we have seen above. Again, one more example to give a color to all level 1 headings: H1 {color: #36CFFF;} *The Universal Selectors* Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type: * {color: #000000;} This rule renders the content of every element in our document in black. *The Descendant Selectors* Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, the style rule will apply to <em> element only when it lies inside the <ul> tag. ul em {color: #000000;} *The Class Selectors* You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule. .blue {color: blue;} This rule renders the content in black for every element with class attribute set to black in our document. You can make it a bit more particular. For example: H1.blue {color: blue;} This rule renders the content in black for only <h1> elements with class attribute set to black. You can apply more than one class selectors to a given element. Consider the following example: <p class="center bold"> This paragraph will be styled by the classes center and bold. </p> *The ID Selectors* You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule. #green {color: green;} This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example: H1#green {color: green;} This rule renders the content in black for only <h1> elements with id attribute setto black. The true power of id selectors is when they are used as the foundation for descendant selectors. For example: #green h2 {color: green;} In this example, all level 2 headings will be displayed in black color when those headings will lie within tags having id attribute set to black. Let's give a comprehensive example. See the images uploaded below, result included. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 7:50am On Oct 04, 2020 |
*CSS - SYNTAX 2* *The Child Selectors* You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality. Consider the following example: body > p {color: #000000;} This rule will render all the paragraphs in black if they are a direct child of the <body> element. Other paragraphs put inside other elements like <div> or <td> would not have any effect of this rule. *The Attribute Selectors* You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text: input[type=”text”] {color: #000000;} The advantage to this method is that the <input type="submit" /> element is unaffected, and the color applied only to the desired text fields. The following are rules applied to attribute selector. p[lang] - Selects all paragraph elements with a lang attribute. p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly "fr". p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word "fr". p[lang|="en"] - Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-". *Multiple Style Rules* You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example: h1 { color:#36C; font-weight: normal letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } Here all the property and value pairs are separated by a semicolon ( ; ). You can keep them in a single line or multiple lines. For better readability, we keep them in separate lines. For a while, don't bother about the properties mentioned in the above block. These properties will be explained in the coming chapters and you can find the complete detail about properties studying CSS References. *Grouping Selectors* You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example: h1, h2, h3 { color:#36C; font-weight: normal letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them. You can combine the various ID selectors together as shown below: #content, #footer, #supplement { position: absolute; left: 510px; width: 200px; } Here is a comprehensive example with result shown in images uploaded below. Notice the difference between using the child selector in this example and using the descendant selector in the example from the last lesson. Descendant selector 'selects' any child, grand-child, great grand-child of that element that the selector points to. However you can see here that the child selector only 'selects' the child elements pointed to - like the em child-element of the up tag in our example below is selected by the 'ul > em' but the em element inside the li tag is not selected because it not a child element of the ul tag, it is a grand-child element. Please carefully observe this two examples, you will get a better understanding. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by geektechlife: 9:51pm On Oct 04, 2020 |
*CSS - COLOURS* CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or for the background of the element. They can also be used to affect the color of borders and other decorative effects. You can specify your color values in various formats. The following image uploaded displays a table list of all the possible formats: 1) keywords or color names e.g black, purple. 2) HEX code e.g #000000, #ffaaff. 3) short HEX e.g #000, #faf. 4) RGB % e.g rgb(50%,50%,0%), rgb(0%,10%,80%). 5) RGB absolute e.g rgb(0,0,0), rgb(40,90,255). Study our lesson(s) on HTML - COLOURS to better refresh your memory. Thank you. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 8:05pm On Oct 05, 2020 |
*CSS - BACKGROUNDS 1* This lesson teaches you how to set backgrounds of various HTML elements. You can set the following background properties of an element: 1) The background-color property is used to set the background color of an element. 2) The background-image property is used to set the background image of anelement. 3) The background-repeat property is used to control the repetition of an image in the background. 4) The background-position property is used to control the position of an image inthe background. 5) The background-attachment property is used to control the scrolling of animage in the background. 6) The background property is used as a shorthand to specify a number of other background properties. *Set the Background Color* Following is the example, which demonstrates how to set the background color for an element. . . . <div style=”background-color:yellow;”> This text has a yellow background color. </div> . . . Check out the example uploaded below. *Set the Background Image* . . . <table style=”background-image:url(/images/pattern1.gif);”> <tr><td>This table has a background image set.</td></tr> </table> . . . Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 1:56pm On Oct 06, 2020 |
*CSS - BACKGROUNDS 2* *Repeat the Background Image* The following example demonstrates how to repeat the background image if an image is small. You can use no-repeat value for the background-repeat property if you don't want to repeat an image. In this case, the image will display only once. By default, the background-repeat property will have a repeat value. . . . <table style=”background-image:url(/images/pattern1.gif); background-repeat: repeat;”> <tr><td>This table has a background image set which will repeat multiple times.</td></tr></table> . . . The following example which demonstrates how to repeat the background image vertically. . . . <table style=”background-image:url(/images/pattern1.gif); background-repeat: repeat-y;”> <tr><td>This table has a background image set which will repeat vertically.</td></tr> </table> . . . The following example demonstrates how to repeat the background image horizontally. . . . <table style=”background-image:url(/images/pattern1.gif); background-repeat: repeat-x;”> <tr><td>This table has a background image set which will repeat horizontally.</td></tr> </table> . . . The following example demonstrates how to not repeat the background image at all. . . . <table style=”background-image:url(/images/pattern1.gif); background-repeat: repeat-x;”> <tr><td>This table has a background image set which will repeat horizontally.</td></tr> </table> . . . *Set the Background Image Position* The following example demonstrates how to set the background image position 100 pixels away from the left side. . . . <table style=”background-image:url(/images/pattern1.gif); background-position: 100px;”> <tr><td>Background image positioned 100px away from the left.</td></tr> </table> . . . The following example demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top. . . . <table style=”background-image:url(/images/pattern1.gif); background-position: 100px 200px;”> <tr><td>This table has background image positioned 100px away from the left and 200px away from the top.</td></tr> </table> . . . You can also use pre-defined values like top, left, right, bottom. See the example uploaded below. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 5:57pm On Oct 06, 2020 |
*CSS - BACKGROUNDS 3* *Set the Background Attachment* Background attachment determines whether a background image is fixed or scrolls with the rest of the page. The following example demonstrates how to set the fixed background image: . . . <p style=”background-image:url(pattern1.gif); background-attachment: fixed;”> This paragraph has a fixed background image.</p> . . . The following example demonstrates how to set the scrolling background image. . . . <p style=”background-image:url(pattern1.gif); background-attachment: scroll;”> This paragraph has a scrolling background image.</p> . . . *Shorthand Property* You can use the background property to set all the background properties at once. For example: . . . <p style=”background:url(pattern1.gif) repeat fixed 100px 50px;”> This paragraph has a fixed repeated background image.</p> . . . See example uploaded below. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by AIlahuAkbar: 10:17am On Oct 07, 2020 |
omo this thing hard oh no be small  |
Javascript In Pidgin!!! / Programming Videos And Books For FREE / Can I Learn Medicine And Practice Coding At Same Time
(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. 116 |