Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql - Programming

Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,460 members, 7,808,641 topics. Date: Thursday, 25 April 2024 at 02:40 PM

Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql (7727 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


 <!DOCTYPE html>
<html>
<head>
<title>My page Title</title>
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

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


 <!DOCTYPE html>

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


 <!DOCTYPE html>

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



<!DOCTYPE html> <!-- doctype declaration -->

<html>

 ..other tags go here

</html>

comments are also allowed in html to enter a comment use  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


<body></body
<video></video>
<p></p>

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.



<br /> --line break tag
<hr /> -- horizontal rule
<img /> -- image tag

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


 <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

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:
keep it up... waiting on u on JavaScript

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



 <!DOCTYPE html>
<html>
<head>
<title>Tag soup</title>
</head>
<body>

<p>This is a paragraph.</p>
 <h1> This is a header </h1>

 <b> This text is bold </b> 

<i> this text is italicized </i>

 <blockquote>
  This text is inside a blockquote tag. A blockquote defines a section that is quoted from another source or diffrerent from the normal flow of the document
 </blockquote>



</body>
</html>

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>


<style>
#txt1{
font-size :6em;
color :red

}
</style> 
</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


#txt1{
font-size :6em;
color :red

}

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:
anyone following, do i proceed?

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


 <!DOCTYPE html>
<html>
<head>
  <title>Block elements things...</title>

    <!-- below is a style tag to contain our CSS declarations -->
   <style>
	#div1{
         width: 60%;
	height: 6em;
	background-color: red;
	}
	#div2{
         width: 20em;
	height: 6em;
	background-color: #ffa;	
	}

#div3{
         width: 60%;
	height: 8em;
	background-color: rgb(255,0,0);
	margin-top:2em;	
	}

#par1{
         width: 30%;
	height: 8em;
	background-color: #0000FF;
	margin-top:2em;	
	margin-left:15em;
	border:solid 5px black;
	color:#fff
	}

#par2{
         width: 30%;
	height: 8em;
	background-color: #8FBC8F;
	margin-top:2em;	
	margin-left:-15em;
	border:solid 5px #FF1493;
	color:#fff
	}

   </style>


</head>
<body>

 <center> <!-- the center tag centers everything it contains -->
	<div id="div1"> I am a div element </div>
	<div id="div2"> I am a div element </div>
	<div id="div3"> I am a div element </div>

	<p id="par1"> I am a paragraph </p>
	<p id="par2"> I am a paragraph </p>



 </center>



</body>
</html>

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


 <!DOCTYPE html>
<html>
<head>
  <title>CSS text styling...</title>

    <!-- below is a style tag to contain our CSS declarations -->
   <style>
	p{
         width: 80%;
	height: 4em;
	border: solid 4px #D3D3D3;
	font-size:2em
	}

	#par1{
		color: rgb(0,0,255);
	
	}
	#par2{
		letter-spacing: 15px;
	
	}
	#par3{
		text-align: right;
	
	}
	#par4{
		text-decoration: overline;
	
	}
	#par5{
		 text-transform: capitalize;
	
	}
	#par6{
			word-spacing: 20px;
	
	}
	
   </style>


</head>
<body>


	
	<p id="par1"> I am a div paragraph </p>
	<p id="par2"> I am a div paragraph </p>
	<p id="par3"> I am a div paragraph </p>
	<p id="par4"> I am a div paragraph </p>
	<p id="par5"> I am a div paragraph </p>
	<p id="par6"> I am a div paragraph </p>





</body>
</html>

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


 p{width: 80%;
	height: 4em;
	border: solid 4px #D3D3D3;
	font-size:2em;
}

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


   project_root/ ----
                              |___css/
                              |___images/
                              |___scripts/
                              |___server/
                              |___ index.html

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>


<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


 body {
  background-color:#f5f5dc
}

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


 <link rel="stylesheet" type="text/css" href="css/index.css" />

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


 #header-text{
	color:#808080;
	font-size: 3em
}
#header{
 text-align: center
}

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:
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

Following. Pls any that list out css style rules as specified in css3. Thanks

1 Like

(1) (2) (3) (4) (Reply)

Vb 6.0/vb .NET & Intranet/internet Application Development / Learning To Code Is Hard!!!! / 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. 80
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.