Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,194,196 members, 7,953,720 topics. Date: Friday, 20 September 2024 at 12:48 AM |
Nairaland Forum / Science/Technology / Programming / Lets Start A Real Web-deveopment Course Here Html+css+javascript+php+mysql (7889 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: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: 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
next open the index.html page for editing add a link under the div tag so the code should look like this
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: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: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: 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
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
and if serving from a server the src attribute may be something like
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
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
next open the index.css file in the css sub-directory and add the following
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: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: 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: 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: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: 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: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
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
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 |
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. 69 |