Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,591 members, 7,809,145 topics. Date: Friday, 26 April 2024 at 01:14 AM

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

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

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by bestiyke(m): 6:35pm 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 can I get any book that list out all css style rules as specified in css3? Thanks
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 6:43pm On Aug 02, 2016
bestiyke:
Following. Pls can I get any book that list out all css style rules as specified in css3? Thanks


i have some books, but low on data to upload fir now, this page is however very sufficient
http://www.w3schools.com/cssref/
or this

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

1 Like

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by ferdyferd: 10:55pm On Aug 02, 2016
stack1 you are doing a fantastic job. please keep it up
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by excogee: 5:07am On Aug 03, 2016
God bless u for this, but i will be pleased if i can get all the notes in my mail box
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by chainsaw11: 9:12am On Aug 03, 2016
JOIN Our Web Developers whatsapp group. Get you your questions solved quickly by experts free. Get new infos and jobs easier. Join us now. Newbies and Gurus are welcomed. Add with this number 2349036159313
Or add your number in the comment box bellow
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 8:16am On Aug 07, 2016
[size=14pt]Linking with the <a> -Anchor Tag[/size]

Links are parts of an HTML document that point or link to other resources — other HTML documents, text files, PDF files, etc. Some links are followed automatically by the browser, like the <link> elements we used to add external CSS files to the document earlier. But generally, when we talk about links we mean those that are created by the page author and are meant to be activated (or clicked) by the user. These Elements are called anchors, and you add them to the HTML document using the <a> element/tag.

1 Like

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 8:32am On Aug 07, 2016
we'll continue to use the folder structure created earlier, so if you do not have that in-place now would be a good time time to create it

Ok so open a new notepad document and save it as page2.html in the same directory as our index file.
Then add the following code to page2



<!DOCTYPE html>
 
<html >
<head>
  <title>page2</title>

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

</head>
<body>

  <h1>This is Page 2</h1>
  <p><a href="index.html" Link to the index page">Go back to the index page</a></p>

</body>
</html>




next open the index.html page for editing
add a link under the div tag so the code should look like this


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

<p><a href="page2.html" title="Link to page 2">Go to page2</a></p>


</body>
</html>



save both pages and open the index.html file in your browser, you should now have a link element that enables you navigate to the page2.html, and another link on page2.html that takes you back to the index page

1 Like

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 8:32am On Aug 07, 2016
If you typed in the codes correctly both pages should now link to each other. So lets look at the anatomy of the Anchor tag

The Anchor tag represented by <a> is a non-empty (i.e it has an opening and closing tag) tag as well as an inline-tag (i.e. it displays inline and so doesn't cause a line-break)

The link we put in page2.html was written as 
 <a href="index.html" Link to the index page">Go back to the index page</a>


So first we started with the opening <a> tag, you'll notice the tag has some attributes, the most important attribute in an anchor tag
is called the href

The href attribute is what we use to specify the resource we are linking to, if its another web-page as in our example we simply put the name and extension of the page, though if the page was in another folder we would also append the folder's name, the value we put in the href attribute is called URL - Uniform Resource Locator.

URL's could be relative or absolute the one, if the URL contains the full-path of what we're linking to, it's called an absolute URL, else if it doesn't contain the full path it is a relative URL.
see this Wikipedia page for more info on URL's https://en.wikipedia.org/wiki/Uniform_Resource_Locator


The <a> element can play several roles, depending on which attributes are set. The most common attribute you'll use is the href attribute, which defines what resource the link points to. This attribute can contain different values:

A URL relative to the current folder, e.g., "../../help/help.html" (two dots means "go up one level in the site folder hierarchy" ), or a URL absolute to the server root, e.g., "/help/help.html" (a forward slash at the beginning of the URL means the address starts at the root of the folder hierarchy the current page is on).
A URL on a different server, for example "ftp://ftp.gnu.org/" or " https://developer.mozilla.org ".
A fragment identifier or id preceded by a hash sign, e.g., "#menu". This points to a target inside the current document rather than an external URL.
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by abdeiz(m): 1:56pm On Aug 07, 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
Your style of tutoring is unique, I like it. Would be following you closely now.

2 Likes

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by General2COAS(m): 5:48pm On Aug 08, 2016
stack1:
anyone following, do i proceed?
Following seriously try add images as u post will definitely help a lot am also practising once I get done 2 a certain level, gonna update with pics. Thanks Ahead Ahead

1 Like

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by DabFrankNG: 7:07pm On Aug 08, 2016
God bless you for this initiative. A guy called Iyenimofe attempted to do this on a thread titled LEARN WEB DESIGNING LIVE and it was one of the greatest threads ever having more than 40 pages and so many viewers. However he suddenly stopped leaving many people in the lurch. For this initiative to be effective 1. Prepare on your laptop a thorough and comprehensive notes on each topic with screenshots and images
2. Copy and paste on your thread in bits and be around to answer questions. 3. Be through with HTML before jumping to CSS and take each course topic by topic.
You can go through Iyen's thread for guidance.
Best Regards.

3 Likes

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 11:45pm On Aug 08, 2016
DabFrankNG:
God bless you for this initiative. A guy called
Iyenimofe attempted to do this on a thread
titled LEARN WEB DESIGNING LIVE and it
was one of the greatest threads ever
having more than 40 pages and so many
viewers. However he suddenly stopped
leaving many people in the lurch.
For this initiative to be effective
1. Prepare on your laptop a thorough and comprehensive
notes on each topic with screenshots
and images

2. Copy and paste on your thread in bits
and be around to answer questions.
3. Be through with HTML before jumping
to CSS and take each course topic by
topic.

You can go through Iyen's thread for
guidance.

Best Regards.

might not had been the guys fault for stopping the tutorials really, atimes time itself and situation's doesn't permit, but i'll try

1 Like

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:01am On Aug 09, 2016
[size=14pt]Let's look at the basics of adding Images to an HTML5 document[/size]

The <img> element, like most elements, is a container. It is not an image in and of itself, but is used to embed an Image that exists as an external file.

Browsers can handle various image formats but for most cases, web-developers limit images used to three types

JPEG: This is a commonly used format for digital images, JPEG files end in a .jpg or .jpeg extension, JPEG is an acronym for the Joint Photographic Experts Group, a group which created and maintains the JPEG standard

PNG : Portable Network Graphics is a Raster Image format also popularly used on the web, its appropriate for embedding vector based images into your web page, PNG files have the extension .png

GIF : Graphics Interchange Format is a bitmap image format usually used for embedding short animations and movie-clips in a webpage, though it can as well be used for still images, GIF files have a .gif extension
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:22am On Aug 09, 2016
The <img> tag is an empty tag, so it doesn't have a closing tag pair

The basic form of an Image tag/element is


<img src="imageFileName.jpg" alt="alternateName"  />



The src (source) attribute is what points to the actual image file we are trying to embed in the document, it points the browser to the location on the server or file system where the image is actually located.

For example if servin an image from the file-system the src value might be something like

 <img src ="file:///C:/Users/user/Desktop/an_image_file.jpg" alt="alternate name"/>


and if serving from a server the src attribute may be something like

 <img src ="http://example.com/images/border.jpg" alt="alternate name" />

 or may be

 <img src ="/images/border.jpg" alt="alternate name" />  //This is a relative file-path, and would be relative to the HTML page embedding the image



The alt (alternative text) or "fallback content", is a recommended attribute which value is displayed if the user's browser for some reason cannot load the image. The alt attribute also plays a role in SEO (Search Engine Optimization)

Lets see some images in action

download the image at this location https://pixabay.com/en/coupe-limousine-pkw-auto-vehicle-1374436/
it should be named coupe-1374436_960_720.jpg

now copy the image to the images folder, which is part of the folder structure we earlier created

No open the index.html file for editing, and modify by adding the image tag a shown




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

<p><a href="page2.html" title="Link to page 2">Go to page2</a></p>

<img src="images/coupe-1374436_960_720.jpg" alt ="Buggati Model" />

</body>
</html>



save and open the index file you should have a page that looks like this

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:24am On Aug 09, 2016
If the image doesn't show up first make sure you actually copied it to the images folder, and check you did not mis-spell the file name in the src value
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:32am On Aug 09, 2016
The image element also has a width and height attribute for controlling its size, however i would be showing examples based on CSS
Like all other elements, the <img> can have the ID attribute which among other uses can be used to reference the <img> element in CSS

So next we set a width and height for the image using CSS declarations

Open up the index.html file for editing an add an ID attribute to the <img> tag, am using image_1 for the ID but you can use whatever you want



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

<p><a href="page2.html" title="Link to page 2">Go to page2</a></p>

<img src="images/coupe-1374436_960_720.jpg" alt ="Buggati Model" id="image_1" />

</body>
</html>



next open the index.css file in the css sub-directory
and add the following


 #image_1 {
    width: 200px;
    height: 150px
}


save and refresh the page, here's the result i got

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:37am On Aug 09, 2016
so we have successfully used CSS to resize the image

1 Like

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by Patoskid(m): 5:43am On Aug 09, 2016
Boss, I didn't get the css linking. The folder you asked us to create which contains the css, images index.html and the likes, are we to create it on the desktop background??
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by Patoskid(m): 6:00am On Aug 09, 2016
Patoskid:
Boss, I didn't get the css linking. The folder you asked us to create which contains the css, images index.html and the likes, are we to create it on the desktop background??
Okkk I have gotten where the error was and have rectify. Waiting for more updates

1 Like

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 8:21am On Aug 09, 2016
Patoskid:
Okkk I have gotten where the error was and have rectify. Waiting for more updates

kk i created the folder structure a few post back you might want to review it
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by paragon40(m): 1:58am On Aug 10, 2016
Stack welldone bro having been reading ur post since day one you are doing a wonderful job i sabi html and css small my pblm is javascript php and mysql, i must say this, i like the way u simplify ur tut, mark sense..i hope u will be able to complete it, it will help alot.
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 2:32am On Aug 10, 2016
paragon40:
Stack welldone bro having been reading ur post since day one you are doing a wonderful job i sabi html and css small my pblm is javascript php and mysql, i must say this, i like the way u simplify ur tut, mark sense..i hope u will be able to complete it, it will help alot.

Thanks i'll definitely try to complete it

1 Like

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by Patoskid(m): 7:57pm On Aug 10, 2016
Waiting for more updates
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by ferdyferd: 11:57pm On Aug 13, 2016
stack1:

Thanks i'll definitely try to complete it
good job man, pls continue
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by paragon40(m): 11:02pm On Aug 14, 2016
Op where u dey nw ur students are waiting for u.
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 10:20am On Aug 15, 2016
paragon40:
Op where u dey nw ur students are waiting for u.

Make una no vex my system has been having ish.. hoping to get it fixed today

1 Like

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by Patoskid(m): 3:51pm On Aug 15, 2016
stack1:


Make una no vex my system has been having ish.. hoping to get it fixed today
Alright boss
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 11:00am On Aug 16, 2016
Hi all, i have been away for a while, i want to change the flow of things a bit, while i know there's still quite some HTML and CSS that needs to be introduced, i want to make the approach even more Hands on, so here's what we are going to do, we would all work individually on a project -a website which we shall all put online (for free) We'll be using https://www.000webhost.com/ as they offer a free hosting plan + free sub-domain, we would be creating an Hotel site with full reservation feature e.t.c, and as we go i'll introduce other neccessary HTML and CSS elements and also move into JavaScript PHP and Mysql, it would take a bit of time to conclude, as when we get to a certain stage we would be installing Apache/PHP/MySQL etc, but we should be able to meetup

So lets start like this

Create a new folder and name it hotel_website, within this folder, create several sub-folders as follows
css, js, server, images, and also create an empty index.html

Note don't go registering on https://www.000webhost.com/ just yet, we would fully create the Home-page before setting up our hosting plan then we'll take things from there

Grab the zip file here containing some of the images we would be using (some not all, more might be needed later)
https://drive.google.com/open?id=0B_OBMh7vaCg0U2JBdTFLRm9odDg

I'll be back in a few hours so we can get started
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:01pm On Aug 17, 2016
If you have created the needed folder structure, lets proceed
open up the index.html file and type in


<!DOCTYPE html>


<!DOCTYPE html>
<html>
<head>
  <title>Hotel Web-Site</title>


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

     <div id="header">
      </div>




  </body>
</html>



save the html file, notice we set the page title to Hotel Web-Site, and also we are linking to an external style sheet in the[b] CSS[/b] subfolder
(though we haven't yet created the stylesheet, and for now the body contains just one div element with an[b] id[/b] attribute having the value header..

Next go into the css folder and create a new file index.css, edit this file as follows



 body {
  background-color:#f5f5dc;
 
}


#header{
 width: 100%;
 height: 2.5em;
 background-color:#000;

}


In the CSS file we change the background of the body element from its default white, we also style the DIV element giving it a width of 100% so it stretches out on the whole page, a height of 2.5em and a background color value #000 (which is black in Hexadecimal color format)
Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by stack1(m): 12:05pm On Aug 17, 2016
View the HTML file in your browser you should have something similar to his...

Re: Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql by abdeiz(m): 1:20pm On Aug 17, 2016
Nice one stack1 keep it up, we're following wink

(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. 77
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.