Iyenimofe's Posts
Nairaland Forum › Iyenimofe's Profile › Iyenimofe's Posts
1 2 3 4 5 6 7 8 9 10 11 (of 11 pages)
 Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 12:04am On Sep 05, 2013 |
Apart from HTML elements like p, h1 e.t.c you can use other items as selectors. This is what we'll discuss in the afternoon. So far, we have covered PART 1: Introduction to CSS PART 2: CSS Inheritance and Cascading PART 3: CSS Syntax 4 Likes 2 Shares |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 11:59pm On Sep 04, 2013 |
To combine a selector and a declaration, the syntax is: Selector {Property:Value;}NOTE: The declaration(property and value) are contained in curly brackets and end with a semi-colon. However, if the selector had more than one declaration, they will be seperated by semi-colons and "a space". Selector {Property:Value; Property:Value; Property:Value;}E.g p (color:green; font:Verdana;} 2 Likes 2 Shares |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 11:48pm On Sep 04, 2013 |
PART 3: CSS Syntax When we began HTML we talked about HTML syntax-opening and closing tags, empty elements, e.t.c- and now we are going to discuss its CSS equivalent. A CSS statement-or more specifically, a rule- is made of two main parts. 1) Selector: This is the element that is to be styled. E.g <p>, <h2>,e.t.c. However, the angle brackets are not compulsorily placed with the elemnt keyword. So it will just be p or h2 as the selector. 2) Declaration: A declaration consists further of two parts a)Property- This is the attribute of the element to be styled. The property of a selector "p" could be "color". b)Value- The value is the way the attribute has been changed, and thus the way the element has been modified. The value of attribute "color" of selector "p" cold be "green". A CSS's property and value are separated with a colon property:value E.g color:green NOTE: Interestingly, when compared to an HTML's attribute and value syntax, the difference is that HTML separates attribute and value with =, while in CSS they are separated with : 5 Likes 3 Shares |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 12:15pm On Sep 04, 2013 |
New post later tonight. Very busy since Monday. @brownlord and @dhtml, no one must make noise oh!  1 Like |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 10:47pm On Sep 02, 2013 |
It is high time we now discuss CSS Syntax. The main thing, what is contained in the internal styles, internal and external sheets |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 10:41pm On Sep 02, 2013 |
The style that will be used when there is more than one style specified for an element is defined as the Cascading order An inline style which is closest to the element has the highest priority. This is followed by the internal sheet and then the external sheet. This means 1-An inline style will override an internal style and an external style sheet. 2-An internal style sheet will override an external sheet. 3-An external sheet will override the element's default properties. Once more, remember the image. NOTE: If an external style sheet (its link) is placed after the internal style sheet and thus closer to the element to be modified, the external sheet will override the internal style sheet. Simple logic! 1 Like 3 Shares |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 10:21pm On Sep 02, 2013 |
Tos87: Thanks Op for ȧȴȴ said ãпԃ done so far..............pls is ЂΞ styles sheet already desgned ѳπ ЂΞ css or are we going to do that ourself before using Ţ☹ enhance d html?.We'll treat that starting from the 2nd part to the previous one. |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 9:59pm On Sep 02, 2013 |
dhtml: Uhm, i dont fully agree (maybe for HTML 4 sha), except you can explain why my site validates - http://.net/ - http://validator.w3.org/check?uri=.net&charset=%28detect+automatically%29&doctype=Inline&group=0 without using type?  And a coup began...  I checked W3C.org and discovered the rel attribute is required. Thank you, that's why you be boss. @brownlord you now have a deputy-*dhtml/dhtml//dhtml5. 2 Likes 1 Share |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 12:52pm On Sep 02, 2013 |
Consider this image 4 Likes 3 Shares
|
| Webmasters › Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 10:27am On Sep 02, 2013 |
Other elements included in the <head> section are: b)The <base> element: It is used to create a base or default URL for all link on the page. c)The <link> element: It links the document to an external document. E.g a style sheet(for beautifying a page). d)The <meta> element: It provides keywords, document description, author of document, e.t.c. The meta tag elements are very useful for Search Engine Optimization (SEO), thus they will be discussed in full later. e)The <script> element: It is used to attach a client-side script like JavaScript in the document. f)The <style> elements: It is used to include CSS rules in the document. NOTE: The elements above will be treated later when we apply them as to their respective uses. 1 Like |
| Webmasters › Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 10:25am On Sep 02, 2013 |
What you had previously typed in your text editor as: <html> <head> <title> </title> </head> <body> </body> </html> will now be: Supposing you're writing in XHTML 1.0 : < ! DOCTYPE html PUBLIC "-// W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/ xhtml1/DTD/xhtml1- transitional.dtd"> <html> <head> <title>Learn Web Design</title> </head> <body> </body> </html> TIP: Just change the doctype declaration for HTML 4.01 or HTML 5. |
| Webmasters › Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 10:23am On Sep 02, 2013 |
After the !DOCTYPE has been declared, the next element is - PART 6:The <html> element: This element covers the whole document i.e. All other elements are nested within it. After all the contents of document have been typed in, its closing tag </html> is typed in. Simply put, the <html> tag tells the browser your document is an HTML file. Next, we have - Sub-Section-The <head> element: It contains elements that describe the contents of the web page. All elements nested between the <head> and </head> tags are NOT visible in the webpage displayed by the browser to the viewer. Instead, they are used by search engines for indexing the page. The most important element in the <head> section is - a)The <title> element: This element signifies the title of the document. The title of the document is what is visible in the upper properties bar of the browser. It is what appears as the document's title when the page is bookmarked. This title is also what is given as a search engine result. Thus, the element <title>Learn Web Design</title> will appear as: Learn Web Design |
| Webmasters › Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 10:21am On Sep 02, 2013 |
PART 5:The <!DOCTYPE> declaration As stated in an earlier post HTML comes in diferent versions, so you have to specify the version you're writing in if not your page shall be rendered in quirk mode( the browser will interpret it anyhow). The following are the <!DOCTYPE> declarations for the commonly used versions: WARNING: Doctype declarations must contain no errors. HTML 4.01 < ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML 5 < ! DOCTYPE html> NOTE: Be careful when using HTML 5 as it is not supported in old browsers. The < ! DOCTYPE> declaration is thus the first item to be inserted in the document. 2 Likes |
| Webmasters › Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 10:17am On Sep 02, 2013 |
PART 4:The Basic HTML Page Structure An HTML page must have this structure for it to be called an HTML Page. <html> <head> <title> </title> </head> <body> </body> </html> NOTE: To type any HTML content, you'll use a text editor( explained in a previous post . Using Notepad: 1- Click on the Start menu 2-Click on All Programs 3-Click on Accessories and then Notepad Using Notepad++ : Steps 1 and 2 above Click on Notepadp++ Using TextEdit: Open TextEdit from the Applications folder. To save as an HTML file: 1- Click on File in the properties bar. 2- Click on Save As 3- In file name type in a name that is relateted to the document and also one you'll remember. 4-Use the .html file extension to save it as an HTML file. To View the Page in a Browser: 1- Open your browser. 2- Click on File in the properties bar. 3- Click on Open 4- Select the file TIP: Double click the file in its source folder and it'll be opened automatically by your default browser. Before we treat the <html>, <head>, <title> and <body> elements in details, we need to treat a very important aspect: The <!DOCTYPE> declaration. 2 Likes |
| Webmasters › Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 10:14am On Sep 02, 2013 |
PART 3: HTML Syntax NOTE:Syntax in this context simply means the way the elements are arranged. A) An HTML element consists of: a-The opening tag b-The element content c- The closing tag Syntax: <opening tag> element content </closing tag> B) Some HTML elements do not have contents and are called empty elements. They have only the start tag and the forward slash. This is the only time when the / is in the start tag. C) HTML elements can have attributes which makes the element specific. They have a value written in double quotation marks. It gives information on how the attribute qualifies the element. All are written in the opening tag. Syntax: < opening tag attribute:"value"> content </closing tag> Examples will be given later and you'll see how they work. HTML elements and their attributes should be written in lower case. |
| Webmasters › Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 10:10am On Sep 02, 2013 |
GraphicsPlus: @OP, you are really making these things to be difficult for you. And you will end up straining yourself. Just do this html tutorial once on your system and copy everything and post at once. Stop posting today, then next week u post, then another week u post. You have finished the html in the other thread, now get the whole html part and post here. And go face css. You have to know what you have decided to do and if you dont want stress, you have to do this tutorial once and post, then you can focus on answering questions that will arise.Yes Boss |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 10:07am On Sep 02, 2013 |
dhtml: Can we use <link rel="Boss, the type attribute is compulsory nah. |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 2:05am On Sep 02, 2013 |
The external style sheet is a jolly good fellow as it saves programmers the burden of styling individual elements or pages. All you need to do is link a style sheet to every page in your website and Voila! all pages on your site would be styled. It should also be noted that you can add more than one style sheet to a page. You can even combine inline styles, inline sheets and multiple external sheets on a single page. However, what happens if the same element is styled in three different ways in the inline style, internal and external sheets? Confusion? Not necessarily if you understand CSS Inheritance- the next part of our CSS tutorials. 2 Likes 2 Shares |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 1:58am On Sep 02, 2013 |
3- External Style Sheets: External Style Sheets is the main tool used in Css, This is because it solves the major problems that lead to the creation of CSS. An external style sheet contains codes that style a document(these codes are what we will definitely treat throughout these tutorials). It is then saved as a CSS file with the extension .css After this is done, the CSS document, which we shall now call a style sheet has to be attached to the HTML document that has to be styled. This done with the HTML tag <link>. If you remember, we talked about this tag briefly when talking about elements nested in the head section opf an HTML document. Suitably, the <link> tag always lies in the <head>. The appropriate syntax for linking a style sheet would be: <link type="text/css" href="stylesheet.css"/> As you can see the <link> tag has two required attributes: a)The type attribute- The value"text/css" specifies that the linked document contains text content. b)The href attribute-The value specifies the address of the style sheet. You can use either an absolute(full address e.g http://www.site.com/folder/sylesheet.css) or relative(stlesheet.css) naming convention(This will ne explained fully in the HTML exclusive thread https://www.nairaland.com/1418387/learn-html-live-nairaland ) 4 Likes 3 Shares |
| Webmasters › Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 1:39am On Sep 02, 2013 |
These are the basic tools needed to begin the learning of HTML. As time goes on and we progress in this field of interest, we will acquaint ourselves of more tools that are deemed fit to be handled by advanced students. |
| Webmasters › Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 1:37am On Sep 02, 2013 |
PART 2- Tools Needed to Begin HTML Coding A) Text Editor: To write HTML codes you will need a basic text editor. Windows users already have Notepad pre-installed in their Operating System (OS) while Mac users have Text Edit. However, I personally use a more advanced text editor called Notepad++ for tutorial purposes. The advantage of Notepad++ over basic text editors is that it has the facility of color coding. In other words it colours pre-defined codes depending on the type of file you are working with(which in this case is html). It also displays your code in a structured way and easily detects errors. You can download Notepad++ for free by typing the key word "Notepad++" in the Google Search Engine. However, if you choose to stick to your basic text editor, you will experience no problems when examining my examples and adapting it as the differences are negligible B) Web Browser: This is needed to view your HTML document. A web browser interprets your HTML codes and show you(or the user) the end result. The most popular browsers are Internet Explore(IE), Mozilla Firefox, Google Chrome, Opera Mini and Mac's Safari. Throughout these tutorials, I will use most of these browsers to explain certain ideas. This is so because browsers tend to interpret HTML codes in quite different ways. So, in a case, where differences occur, you shall be noted. |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 8:30am On Sep 01, 2013 |
brownlord: NOTICE: All student of this class are required to submit their assignment latest Monday, Sign Class capoIf ma lady catch you and your grandma ehn?! dhtml: what of banned students like *dhtml? How them go take submit their assignments?You just gotta beg Mr Moderator. But why does Mr Moderator like you this much? 1 Like |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 12:59am On Sep 01, 2013 |
2-Inline Style Sheet: This method is used to modify several elements in an HTML document making it easier than using an inline style. Inline Style Sheets are placed within the <head> and </head> section of the document and is defined with the opening and closing <style> tags. E.g <head> <style> body { background: #eeeeee; font-family:Verdana; } p { color:yellow; font:18px; } </style> </head> Definitely, this solves the problem of repeating styles for different elements in a document which reduces stress and error in coding. Inline Style Sheets are used mainly to style a single webpage. Adding stles to different webpages is done with external style sheets. 6 Likes 4 Shares |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 12:58am On Sep 01, 2013 |
Before we talk about inheritance we need to know what is being inherited. There are 3 ways in which CSS can be applied to an HTML document. 1-Inline Style: When using this type of CSS, the modifications are applied to a single element. They are defined next to the element that is styled E.g <p style="color:yellow;"> All text within this tag will be yellow. </p> NOTE: Hold on if you don't understand 'style="color:yellow;"', it will be explained soon. The inline style method is useful when styling just an element in an HTML document. Thus, it will be unwise using the inline style method for all the elements on a page. This can be done with the Internal Style Sheet. 4 Likes 6 Shares |
| Webmasters › Re: Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 11:11am On Aug 31, 2013 |
PART 1: Introduction to HTML HTML is an acronym for Hyper Text Markup Language. A markup language composes of predefined tags for laying out a document. HTML is a markup language that defines the way a webpage can be structured. HTML was introduced by Tim Berners-Lee in 1991 and has undergone many modifications over the years resulting in different versions arising which include HTML 2.0, HTML 3.2, HTML 4.0, HTML 4.01 and HTML 5. Some of these versions have become obsolete and is no longer accepted by the W3C (World Wide Web Consortium)-the body in charge of setting HTML standards. The HTML versions currently in use are HTML 4.01, XHTML 1.0 and HTML 5. The major differences between this versions shall be treated in a later part- DOCTYPE. Before you delve into writing HTML however, you will need to know some tools that are need to begin. 1 Like |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 10:55am On Aug 31, 2013 |
PART 1: Introduction to CSS CSS is an acronym for Cascading Style Sheets. If HTML were the building block of websites, then CSS would be the beautifier of the building blocks. CSS is used to modify the appearance of an HTML document, which include colors,fonts,backgrounds,spacing,e.t.c CSS was introduced to solve a big problem. In the early days of writing HTML codes, Web developers had a problem of making multiple web pages look beautiful. Normally, to modify the default appearance of a Web page, the developer had to include a new style in every page he wants to modify. This brought a problem if a developer wanted to modify a website containing 1,000 pages. CSS was introduced in 1994 and since then, it has undergone modifications from CSS1 to CSS2, CSS 2.1 to get to its current status, which is CSS3. In the subsequent posts we shall treat the basics of CSS but let us first begin by understanding something called the inheritance rule, as without this we may not be able to appreciate and/or utilize the power of CSS. 8 Likes 3 Shares |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 11:48am On Aug 30, 2013 |
CSS After successfully dealing with HTML lets now move to CSS. 1 Like |
| Webmasters › Learn HTML LIVE On Nairaland!!! by iyenimofe(op): 11:30am On Aug 30, 2013 |
This thread is a sequel to the thread "Learn Web Design LIVE On Nairaland!!!". On this thread HTML tutorials shall be treated. All subjects relating to HTML shall be posted here. It will cover everything that has been treated on the thread "Learn Web Design LIVE On Nairaland!!!" ( https://www.nairaland.com/1383359/learn-web-design-live-nairaland ) but in details. Please note that posts from other users will not be allowed on this thread as this will inadvertently cause breaks in the tutorials and constitute to confusion. All questions, suggestions and comments regarding whatever that is treted on this thread should be posted on https://www.nairaland.com/1383359/learn-web-design-live-nairaland . Thanks to the NL community for supporting this idea and it is our hope that those entering the Web Design/Development career would find this thread useful. 4 Likes 1 Share |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 11:34am On Aug 29, 2013 |
Of course, we have just scratched the surface of HTML. The 14 topics we have considered still need in-depth analysis. However, due to breaks in the tutorials, many have found it confusing trying to link all the topic's fragments. To solve this, I have come up with this idea: 1)Create another thread that will deal with HTML topics only. It will treat the 14 previous topics and a host of new ones in a deeper vein. However, on this new thread, no external comments/questions will be allowed as this will inevitably disrupt the flow of the topics. 2)This thread (Learn Web Design LIVE On Nairaland) will continue to exist and will continue to accommodate questions and suggestions regarding posted topics. 3)I will work on the e-book version of the HTML tutorial. 4)We will move on to CSS (at last) on this thread and after we're through with it, we'll also create a thread for it as well. 4 Likes 2 Shares |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 11:12am On Aug 29, 2013*. Modified: 11:36am On Aug 29, 2013 |
This is what we have considered so far: 1- Introduction to HTML 2- Brief History of HTML 3- Tools for Writing HTML 4- Summary of HTML Syntax 5- The <!DOCTYPE> Declaration 6- The <head> tag and its nested elements (<title>, <script>, <style>, <base>,<meta> ) 7- The <body> element and its basic nested elements (<h1>-<h6>, <p> ) 8- Text Formatting Tags (<b>, <i>, <sub>, <sup>, e.t.c) 9- Links 10-Images 11-Lists 12-Tables 13-Colors 14-Forms 7 Likes 2 Shares |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 11:02am On Aug 29, 2013 |
Forms conclude our Basic HTML Tutorial. 1 Like |
| Webmasters › Re: Learn Web Design LIVE On Nairaland!!! by iyenimofe(op): 11:01am On Aug 29, 2013 |
Thus, the complete code for the form is: <form> First name:<input type="text" name="firstname" size="6"> <input type="text" name="lastname" size="6"> <br> Password:<input type="password" name="password" maxlength="20"> <br> I am Human: <input type="radio" name="human" value="yes">Yes <input type="radio" name="human" value="no">No <br> I have never used a: <br> <input type="checkbox" name="neverused" value="phone">Phone <br> <input type="checkbox" name="neverused" value="keyboard">Keyboard <br> <input type="checkbox" name="neverused" value="monitor">Monitor <br> <input type="checkbox" name="neverused" value="tablet">Tablet <br> Attribute <b>"value"</b> is required for input type="radio" and input type="checkbox" <br> Are You satisfied With Our Services? <select name="dropdown"> <option value="Very Good" selected>Very Good</option> <option value="Good">Good</option> <option value="Fair">Fair</option> <option value="Bad">Bad</option> <option value="Very Bad">Very Bad</option> </select> <form action="http://www.mysite.pageforform.asp" method="get"> <input type="submit" name="submit" value="Submit"> </form> 11 Likes 7 Shares |
