Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,151,922 members, 7,814,102 topics. Date: Wednesday, 01 May 2024 at 06:49 AM

Learn How To Program For Free - Programming (3) - Nairaland

Nairaland Forum / Science/Technology / Programming / Learn How To Program For Free (1742 Views)

How To Program Outseal Arduino PLC / First Thing First, Learn To Program! / Solutions To Java How To Program By Deitel, 9th Edition (2) (3) (4)

(1) (2) (3) (4) (Reply) (Go Down)

Re: Learn How To Program For Free by adonainana: 4:13am On Mar 07
Every HTML element has a default display value, depending on what type of element it is.

The two most common display values are block and inline.

Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.


THE FOLLOWING ARE BLOCK LEVEL ELEMENTS IN HTML
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>
Re: Learn How To Program For Free by adonainana: 4:15am On Mar 07
The <div> Element
The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:


The <span> Element
The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text

Chapter Summary
A block-level element always starts on a new line and takes up the full width available
An inline element does not start on a new line and it only takes up as much width as necessary
The <div> element is a block-level and is often used as a container for other HTML elements
The <span> element is an inline container used to mark up a part of a text, or a part of a document
Re: Learn How To Program For Free by adonainana: 4:34am On Mar 07
HTML class Attribute

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

Using The class Attribute
The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section:


CLASS EXERCISE


PLS OPEN YOUR CODE EDITOR PREFERABLY MICROSOFT VISUAL CODE EDITOR AND TYPE THE FOLLOWING CODE


<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>LAGOS</h2>
<p>LAGOS is the commercial capital of NIGERIA .</p>
</div>

<div class="city">
<h2>ABUJA</h2>
<p>ABUJA is the capital of NIGERIA.</p>
</div>

<div class="city">
<h2>Ibadan</h2>
<p>The Capital of Oyo State is Ibadan .</p>
</div>

</body>
</html>
Re: Learn How To Program For Free by adonainana: 4:41am On Mar 07
SAVE THE FOLLOWING CODE IN YOUR TEXT EDITOR M VISUAL CODE

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>LAGOS</h2>
<p>LAGOS is the commercial capital of NIGERIA .</p>
</div>

<div class="city">
<h2>ABUJA</h2>
<p>ABUJA is the capital of NIGERIA.</p>
</div>

<div class="city">
<h2>Ibadan</h2>
<p>The Capital of Oyo State is Ibadan .</p>
</div>

</body>
</html>


SAVE THE FILE AS index.html

if you dont save the file as index.html

IT WILL NOT WORK

AFTER SAVING IT AS index.html

click on it you should see something like this on your browser

Re: Learn How To Program For Free by adonainana: 5:04am On Mar 07
In the following example we have two <span> elements with a class attribute with the value of "note". Both <span> elements will be styled equally according to the .note style definition in the head section:


CLASS EXERCISE NUMBER 2

open your code editor and type the following code and save it as INDEX.HTML ( if you dont save it as index.html, the code will not work )

<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>


After saving the code, ( YOU MUST SAVE IT AS index. html if you dont the code willnot work ) open it via any browser of your choice you will see the following attached picture

Re: Learn How To Program For Free by adonainana: 5:09am On Mar 07
NEXT TOPIC HTML id Attribute

The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

Using The id Attribute
The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:
Re: Learn How To Program For Free by adonainana: 5:13am On Mar 07
CLASS EXERCISE number 3 ON HTML ID ATTRIBUTE
COPY AND PASTE THE FOLLOWING CODE INTO YOUR TEXT EDITOR OR VISUAL STUDIO CODE OR NOTEPAD

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body>
</html>

SAVE THE CODE ABOVE as index.html and open it via your prefered browser (opera, chrome, etc)

Re: Learn How To Program For Free by adonainana: 5:19am On Mar 07
CLASS EXERCISE number 4 DIFFERENCES BETWEEN A CLASS HTML ATTRIBUTE AND AN HTML ID ATTRIBUTE

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:


COPY THE CODE BELOW AND PASTE IT IN YOUR EDITOR, save it as index.html and open it via any browser of your choice

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>

Re: Learn How To Program For Free by adonainana: 5:29am On Mar 07
NEXT TOPIC: HOW TO USE JAVASCRIPT TO CHANGE HTML ELEMENTS

Javascript

JavaScript is a scripting language, it is also known as the language of the web as 90 percent of all websites and mobile apps were built with JavaScript.

JAVASCRIPT AND HTML go hand in hand

just like how a typical html document starts with <html> and ends with <html/>

Javascript codes start with <script> and end with <script/>

You can insert javascript codes into a HTML document to make it more interactive

FOR EXAMPLE
YOU CAN USE THE[b] ID ATTRIBUTE IN A HTML ELEMENT [/b]to perform a particular task

this is done via the getElementById() method:

CLASS EXERCISE NUMBER 5

COPY THE FOLLOWING CODE INTO YOUR TEXT EDITOR and save it as index.html and open the file with a browser
<!DOCTYPE html>
<html>
<body>

<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
document.getElementById("myHeader"wink.innerHTML = "Have a nice day!";
}
</script>

</body>
</html>



AS YOU can see in the browser the text was changed from HELLO WORLD TO HAVE A NICE DAY USING javascript

Re: Learn How To Program For Free by adonainana: 5:33am On Mar 07
akaahs:

Im interested and have all the requirements

New lessons have been uploaded on the thread

message me on +234 91 243 254 79 so i can add you to the group chat of the mentees i currently teach FOR FREE

1 Like

Re: Learn How To Program For Free by adonainana: 5:33am On Mar 07
Chikemn:

More of the lectures Sir.




New lessons have been uploaded on the thread

message me on +234 91 243 254 79 so i can add you to the group chat of the mentees i currently teach FOR FREE
Re: Learn How To Program For Free by adonainana: 2:35pm On Mar 07
konkonbilo:
Hey bro, you've just got a new student. though i just started reading your thread and have got a paper, pen and a laptop.thanks! Is there a way i can reach you, i'd like to ask some question or rather seek an advice from you about IT

I have uploaded new lessons on the thread

Message me on what’s app ‪+234 912 432 5479‬ if you run into issues or you want to join my WhatsApp group of mentees
Re: Learn How To Program For Free by adonainana: 10:45pm On Mar 07
HTML File Paths

File Path Examples
Path Description
<img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page
<img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the current folder
<img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the root of the current web
<img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder
Re: Learn How To Program For Free by adonainana: 10:47pm On Mar 07
HTML - The Head Element

The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML <head> Element
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML <title> Element
The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The <title> element is required in HTML documents!

The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine-results
So, try to make the title as accurate and meaningful as possible!

A simple HTML document:
Re: Learn How To Program For Free by adonainana: 10:49pm On Mar 07
CLASS EXERCISE 6

copy this code into your editor and save as index.html

<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>

<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>

</body>
</html>

Re: Learn How To Program For Free by adonainana: 10:51pm On Mar 07
HTML Layout Elements
HTML has several semantic elements that define the different parts of a web page:

HTML5 Semantic Elements
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

Re: Learn How To Program For Free by adonainana: 10:55pm On Mar 07
HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

CLASS EXERCISE 6

copy and paste this code and open it with any browser of ur choice

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>

Re: Learn How To Program For Free by adonainana: 5:13pm On Mar 27
How to create a snake game with HTML, JSS AND JAVASCRIPT

The live version of the following source code can be found here
https://mrkiksysnakegame.netlify.app/
Re: Learn How To Program For Free by adonainana: 5:19pm On Mar 27
HOW TO MAKE A SNAKE GAME WITH HTML, CSS , AND JAVASCRIPT

STEP 1 Create a NEW Folder on your Desktop and name the Folder Snake Folder
Step 2 Open your Microsoft Visual Studio code and create 3 different separate new text files

Step 3. Save the 3 text files INSIDE THE snake folder in the desktop. Save the first file as INDEX.HTML save the second file as styles.css and the last file as index.js

These 3 files must be saved inside the SNAKE FOLDER

STEP 4- in the index.html copy and paste the following INDEX. HTML code
STEP 5- in the styles.css copy and paste the following STYLES.CSS code
STEP6- in the index.js copy and past the attached index.js code

ADDITIONAL NOTES
Addittional Notes
In web development, we have whats acalled a RELATIVE source path
and an ABSOLUTE source path

An absolute source path is the original destination of a file LOCATION
Absolute File Paths
An absolute file path is the full URL to a file:
E.G <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
Relative File Paths
A relative file path points to a file relative to the current page.
In the following example, the file path points to a file in the images folder located at the root of the current web:
E.G Example
<img src="/images/picture.jpg" alt="Mountain">
Try it Yourself »
In the following example, the file path points to a file in the images folder located in the current folder:
Example 3
<img src="images/picture.jpg" alt="Mountain">
Try it Yourself »
In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:
Example 4
<img src="../images/picture.jpg" alt="Mountain">
Try it Yourself »
________________________________________
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.

SUMMARY OF THE SNAKE GAME
If you RIGHT CLICK the index.html file and AND you click PROPERTIES, WHAT YOU SEE AS LOCATION ABOVE is called the absolute source path
SUMMARY: For your code to work, the styles.css must be saved in the same folder as the index.html file
AND

and in the index.html ON LINE 8: AFTER THE WORDS HREF: ( YOU MUST INSERT THE ABSOLUTE PATH OF THE STYLES.CSS FILE )

Re: Learn How To Program For Free by adonainana: 5:32pm On Mar 27
FIND ATTACHED

Re: Learn How To Program For Free by adonainana: 5:37pm On Mar 27
Pages 5- 8 of the source code

Re: Learn How To Program For Free by adonainana: 5:38pm On Mar 27
Final Page

The additional notes on page 8 are not part of the javascript code. I am just trying to explain how absolute and relative html file paths work

Re: Learn How To Program For Free by adonainana: 6:17pm On Mar 27
I have a FREE WEBSITE TOO where i upload weekly lectures on web design

We are currently on Class exercise 9

Sign up with only your email

https://full-stack-supabase-user-management.onrender.com/#

Re: Learn How To Program For Free by Shomek(m): 11:18pm On Mar 27
Hi bro you really did a great work add me up to your whatsapp group this is my number 07015434962
Re: Learn How To Program For Free by adonainana: 7:33am On Apr 03
Shomek:
Hi bro you really did a great work
add me up to your whatsapp group
this is my number
07015434962

https://full-stack-supabase-user-management.onrender.com/#
Re: Learn How To Program For Free by Shomek(m): 2:45pm On Apr 03
adonainana:


https://full-stack-supabase-user-management.onrender.com/#
Whats the link for
Re: Learn How To Program For Free by adonainana: 3:13pm On Apr 03
Shomek:
Whats the link for

My free webs site design class

I am teaching html css and JavaScript for free
I am also teaching React js node js and mongo db
Re: Learn How To Program For Free by Shomek(m): 3:21pm On Apr 03
adonainana:

My free webs site design class
I am teaching html css and JavaScript for free I am also teaching React js node js and mongo db
ok sir i think you said whatsapp group
Re: Learn How To Program For Free by virginboy1(m): 8:17pm On Apr 04
smiley
Re: Learn How To Program For Free by Shomek(m): 8:46pm On Apr 04
adonainana:


https://full-stack-supabase-user-management.onrender.com/#
allert( this your link is not working )
Re: Learn How To Program For Free by adonainana: 9:20pm On Apr 04
Shomek:
allert( this your link is not working )

I just got a sign in message now

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

Fortran / Easily Convert PDF Files To HWP For Processing Properly / Python Masters, Kindly Help Me Rectify This Python Problem.

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