Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,194,777 members, 7,955,967 topics. Date: Sunday, 22 September 2024 at 08:02 PM |
Nairaland Forum / Science/Technology / Programming / Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql (7899 Views)
Free Online Training For Html/css, Javascript, Jquery, Mysql, Php, Java, Android / After 10days Of Coding With Html, Css And Javascript Forum4africa Is Ready / I Can Program A Html Css Javascript Website For 1k (2) (3) (4)
(1) (2) (3) (4) (Reply) (Go Down)
Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 4:31pm On Jul 23, 2016 |
Yeah so it just came as an idea i really want to see how far a real (hard-core) web development learning series would go on NL |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 4:41pm On Jul 23, 2016 |
Ok first post, and it all starts with HTML... now if you read on it means you are interested in building web based applications, i'm no typist sp i'm going to save on keystrokes. The fundamental of web pages showing up in your browser is the markup language known as HTML- HyperText Markup Language.. note i said markup language and not programming language. Lets leave the history out HTML is now in version 5 i.e HTML5.. and this versions comes with it interesting features and deprecated some older features.. lets get coding so first fire up notepad (later we would get to using full fledged IDE's like netbeans e.t.c.), then type this
save as an HTML document to do this in notepad, make sure you set (save as type) to "All files" and put a .html at the end of your file name, you might also need to enclose the file name in "" e.g "firstWebPage.html" Next post would explain all what you just typed in notepad... next post would only come after at least two comments... |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by Luizkid(m): 4:50pm On Jul 23, 2016 |
ok, student seated already |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by viadbenzene(m): 4:51pm On Jul 23, 2016 |
am with u bro.. |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 5:25pm On Jul 23, 2016 |
If you saved the contents you typed in notepad properly it should save as a webpage, open it with your favorite browser (FF/Chrome/IE//Opera) and you should see a page with the text -This is a paragraph-, and the title of the page/tab should be -My page Title- Now the part where you typed
is called a doctype declaration and tells the browser what version of HTML you are using, it should always be the first line of your web-page code the doctype is written based on the version of HTML you are adhering to.. through out this series we would be using HTML5 and the doctype for that is simply
|
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 5:33pm On Jul 23, 2016 |
Html is made up of tags. A tag is literally anything in an Html document surrounded by angle braces i.e <>. In the example above <html> is a tag <title> is a tag <p> is a tag .... tags usually come in pairs, an opening and a closing tag, when creating web-pages the <html> tag is usually the ones that surrounds (or encloses) all other tags so you normally start out with something like
comments are also allowed in html to enter a comment use <!-- comment text --> as i did above. Comments do not get parsed/interpreted by the browser |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 5:51pm On Jul 23, 2016 |
The title tag as the name implies sets the title of the page, so modify the title content as desired Note that all content that affects what is visible on a webpage goes inside the <body></body> As i said earlier tags usually come in pairs e.g
The first tag is called the opening tag while the second (the one with the slash /) is called the closing tag. Tags that come in pairs are normally meant to have content within the opening and closing tags some tags however are called empty tags and are not closed, they also do not have content e.g.
1 Like |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 5:57pm On Jul 23, 2016 |
Lets talk about headings. Heading tags are tags used to specify the header of various content in a page, and more importantly are used by search engines to index the structure of your page. There are six different heading tags, the difference between them is actually just the size of the text they produce Edit the body section of your page and add the following lines then save and refresh your browser
|
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 6:02pm On Jul 23, 2016 |
I'm going to introduce CSS Cascading Style Sheets early in this series because of how closely its normally integrated with HTML, please let your comments / questions roll in 1 Like |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by Yteflon(m): 7:06pm On Jul 23, 2016 |
keep it up... waiting on u on JavaScript |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 7:18pm On Jul 23, 2016 |
Yteflon: Thanks bro, but that might still take sometime. Looking to cover HTML/CSS to a good level first |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 1:37am On Jul 24, 2016 |
now lets look at another example showing off more HTML tags
|
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 1:42am On Jul 24, 2016 |
HTML tags describe the structure of a document but are not very good for styling and presentation, thats where CSS (Cascading Style Sheets) come in CSS enables us add colors, fonts, spacing, control positioning and many other things on our HTML Elements. CSS is usually added to an HTML document by linking an external CSS file (called a style sheet). It can however also be added to the head section of the document or in-line as attributes on elements Lets see an example <!DOCTYPE html> <html> <head> <title>CSS Intro</title> <!-- start of CSS tag in head section --> <style> #txt1{ font-size :6em; color :red } </style> <!-- closing the style tag --> </head> <body> <h1 id='txt1'> This text is controlled with CSS </h1> </body> </html> |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 2:42am On Jul 24, 2016 |
In the previous example, notice that within the opening tag of the H1 element we wrote id='txt1' This is called an attribute, attributes provide additional information or functionality to an element, in the case of the example the attribute is called the id attribute and it can be applied to all HTML elements, attrubutes come in the form attributeName="attribute val" standard attributes include 1. title -- which display's as a tool-tip when you mouse-over an element 2. id 3. name 4 class 5. href -- used in links 6. src used in image and other tags In the previous example the <style> tag represents the start of a style section in the document. What we put within the opening and closing style tags are known as style rules, these rules are defined by the CSS language In our example we have the text
the text #txt1 is known as a selector and is used to target elements in the page note that txt1 is the same as the id attribute of our <h1> element in the page. In CSS when a selector starts with #, it means match an element with the id that follows the # character so in our example #txt1 matches the h1 element and the statements enclosed in {} after the selector are applied to the h1 element the sentence font-size: 6em is called a style declaration and consists of two parts font-size is the style property (of which they are numerous and 6em is called the style value. in this case the 6em changes the size of the text,. Sizes and length in CSS can be represented using various units including px (pixels), em (1em is usually 16px) ,pt (points used mostly for text), also inches, cm and others can be used |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:17am On Jul 25, 2016 |
anyone following, do i proceed? 1 Like |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by bestiyke(m): 7:04am On Jul 25, 2016 |
stack1:On the front seat drive on |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 3:00pm On Jul 25, 2016 |
pls i'm a bit busy today but would definitely post during the night, we'll be looking at most text formatting options, elememt borders and background, i might also post on links and images |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:39am On Jul 26, 2016 |
Hi all, by now we should have understood the fact that an HTML document is made up of tags, now this tags which can also be refered to as Elements have different modes of display. some tags/elements when used in an HTML document forces a line break, that is they start on a new line by default, this elements are known as Block Elements. other tags do not cause a line break, but instead are displayed on the same line next to their previous element sibling, this type of elements are known a inline elements ) as they are displayed inline they are ways (mostly using CSS) to force an inline element to display as a block element and vice-versa for examples of block elements in HTML5 see here https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements for examples of inline elements in HTML5 see here https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements block-level elements have several advantages and uses 1. They can be sized, using the CSS width and height property 2. they can be given backgrounds (colour and images) and custom borders 3. the space around them can be controlled using the CSS margin property, also the space inside them can also be controlled using the CSS padding property Lets see some more examples... 1 Like |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:54am On Jul 26, 2016 |
<!-- Here we create four four block elements of different sizes and apply colors and other style properties to them -->
1 Like |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 1:05am On Jul 26, 2016 |
The last example creates different DIV and P elements, notice that each element has an id attribute set, this allows us to target the elements for styling in the CSS section, all elements are centered in the page using the <center> tag DIV 1 which has an id of div1, and thus its selector in CSS is #div1 and the element is given a width, height and background-color style, as shown lenghts (like width and height) can be specified in different units such as px (pixels), em and percentages (which are both relative units) Colors in CSS and be specified uusing the color name such as blue, the hexadecimal value for the color e.g[b] (#fff or #ffffff)[/b] which represents white, rgb colors e.g rgb(255,0,0); which is red and on some browsers even hsl, hsla, cmyk etc and other color spaces, see a comprehensive list of supported CSS colors here http://www.w3schools.com/colors/colors_names.asp For the first and second paragraph elements, you'll notice they are not properly centered the space around them have been altered using the margin-left property, which can add or remove-space from the left of an element by using positive or negative values, there's als a margin-right property for controlling space on the right (remember this works only on block elements) The example also highlights the use of the background-color and color properties to set the background and text color respectively |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 1:17am On Jul 26, 2016 |
<!-- Lets look at some text properties that can be controlled via CSS -->
|
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 1:24am On Jul 26, 2016 |
Ok so we introduce more new stuff in the last paragraph. Here we have 6 paragraph elements with their respective id set But notice the CSS selector where we just wrote p, what we are doing here is using a tag name (a paragraph tag) in this case as a selector, now what this does is to apply any style we define for this selector to all paragraphs in the page, and as you can see we have
and these styles get applied to all the paragraphs, Next we apply different CSS text properties in each paragraph The first has a custom rgb color value the second uses the CSS letter-spacing property to control the spacing btw individual letters the third uses the CSS text-align property to control the alignment of the text (other acceptable values here are center and left) its left to the reader to figure out the CSS text properties in paragraph 4, 5 and 6 |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 9:00pm On Jul 27, 2016 |
this evening we look at linking using the <a> tag and how to style links 1 Like |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by Luizkid(m): 10:37pm On Jul 31, 2016 |
weldone |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 11:47pm On Jul 31, 2016 |
hi all, so lets proceed Now whenever you're working on a web based application, you'll normally have your files/web-pages and other resources like images e.t.c. arranged using a directory structure suitable to the project, you don't just place/save your files in arbitrary locations on your hard-drive. Most web applications have the need for the user to move between pages and sections or access resources in other locations that are not even part of the project, HTML5 links are one way to provide access to other resources from a web-page. Lets assume we have the ff folder structure
So within the project directory we have a CSS folder for external style-sheets (to be explained soon), images, script (JavaScript files), and a server folder to contain other HTML files and also server scripts. Now in the root folder we have an index.html file which would be the start of our web-app Create a similar folder structure before proceeding |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 11:51pm On Jul 31, 2016 |
We have already looked at the basis of an HTML file so assuming you have created the index.html file open it in notepad and edit as follows [code] <!DOCTYPE html> <html> <head> <title>My Web App</title> <!-- our normal style tag where our CSS has been going --> <style> </style> </head> <body> <div id="header"> <span id="header-text"> Welcome to the Application </span> </div> </body> </html> Save and open i your browser, you should see a black line of text saying "Welcome to the Application", also notice that we do not have any CSS declaration within the style tag, we not using the style-tag in this example rather we would be using external style sheets. Also within the <body> tag/element, there contains only a DIV tag/element (remember DIV is a block element) which surrounds another SPAN tag and the SPAN tag contains the text that's displayed, when an element is contained within another its called a CHILD element so the SPAN is a child of the DIV element and the DIV is termed the parent Element. save and view the page in your browser |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:10am On Aug 01, 2016 |
We have seen basic CSS usage in previous examples where we had the the CSS style declarations in the STYLE tag, while this method works, it is not usually recommended combining HTML and CSS in the same file as it could lead to difficulty in maintain and managing your web-pages as time goes by (this is why we left the style tags empty in the last example From Now on we are going to utilize a facility called external style-sheets With external style-sheets we place our CSS style declarations in a separate file and then link that file to our html web-page. Now perform these steps Open up the recently created index.html file for editing open a new notepad and save as index.css, make sure this file is saved in the CSS sub-directory of the project folder structure we earlier created the index.css file we just created is our first external stylesheet so lets put some CSS into it, add the following to the index.css file
save the changes made to the CSS file. |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:31am On Aug 01, 2016 |
Next in the HTML file (opened in notepad for editing) delete the style tag (both start and end tag), then add the following line inside the head tag/element
What we just pasted/typed is a link element and one of its uses is to link external CSS files to web-pages, the link element as shown is an empty tag and doesn't have a closing tag, also you'll notice it has three attributes 1. rel this simply shows the relationship of the kind of document we are linking to and thus its value stylesheet 2. the type attribute provides the mime-type used in recognizing the type of document, every document type has a unique mime-type, and its usually based on the extension of the file, in this case the extension is (.css), a very comprehensive list of mime-types is here http://www.iana.org/assignments/media-types/media-types.xhtml 3. The href attributeis the attribute that really concerns us the most the href attribute points to the actual file we want to linking to, its value in this case is "css/index.css" , this is because the css folder is a sub-folder of the main project folder where index.html resides, and since we are linking from index.html, we need to instruct the browser to first go into the css folder then link with the index.css file within that folder If everything up to this point is done correctly and you save the index.html file and refresh your browser, you should see the background of the body change colour, as that is the only CSS declaration we put into the external style sheet which is now linked to our web page |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:48am On Aug 01, 2016 |
Now that we have successfully linked the external style sheet with the index.html file, lets style the web-page a bit more open the index.css file for editing and add the following
what we have done here is to use the id attributes of elements in the page to style them. First we add a color style to the SPAN element with id header-text, thereby changing its color (note the selector #header-text) We then change the font-size of the same SPAN element Next we add a text-align CSS declaration to the div element, the DIV element contains a span element, so by setting tthe text-align of the DIV element to center, we automatically centralize any text element(s) it contains. Save and refresh your browser, make sure the web-page text is now centralized and bigger |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:52am On Aug 01, 2016 |
We are now going to create another web-page login.html in the server sub-folder, and look at how we can link to it from the index page |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 10:57pm On Aug 01, 2016 |
its obvious no one is following, not even 1 question no, twas meant to b interactive, even for those who don sabi, you could add your own post's for current topics |
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by bestiyke(m): 6:32pm On Aug 02, 2016 |
stack1:Following. Pls any that list out css style rules as specified in css3. Thanks 1 Like |
Sahara Reporters Android And Blackberry 10 App Download / Interview Questions For Programmer/analyst / Nigerian Developers Celebrate Wordpress 15th Anniversary
(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. 82 |