Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,158,104 members, 7,835,732 topics. Date: Tuesday, 21 May 2024 at 02:03 PM |
Nairaland Forum / Science/Technology / Programming / Learn How To Program For Free (1843 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".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: 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: 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: 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: https://full-stack-supabase-user-management.onrender.com/# |
Re: Learn How To Program For Free by Shomek(m): 2:45pm On Apr 03 |
adonainana:Whats the link for |
Re: Learn How To Program For Free by adonainana: 3:13pm On Apr 03 |
Shomek: 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:ok sir i think you said whatsapp group |
Re: Learn How To Program For Free by virginboy1(m): 8:17pm On Apr 04 |
Re: Learn How To Program For Free by Shomek(m): 8:46pm On Apr 04 |
adonainana:allert( this your link is not working ) |
Re: Learn How To Program For Free by adonainana: 9:20pm On Apr 04 |
Shomek: I just got a sign in message now
|
C# Programmer's Club / Nigerian Stock Exchange Api, Rss Feeds & Widgets :: / Advanced Programming Techniques (java)
(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. 105 |