Web Prog. Snippets IPAM Coding Community – Learn –
Description: Web Prog. Snippets IPAM Coding Community Learn Collaborate - Conquer HTML Headings Paragraphs Basic HTML structure with headings and a paragraph. !DOCTYPE html html body h1Main Headingh1 pThis is a paragraph.p body
Related Topics
Download Presentation
"Web Prog. Snippets IPAM Coding Community – Learn –" is the property of its rightful owner. Permission is granted to download and print the materials on this website for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Presentation Transcript
slide1. Web Prog. Snippets IPAM Coding Community – Learn – Collaborate - Conquer<br>
slide2. HTML Headings & Paragraphs Basic HTML structure with headings and a paragraph. <!DOCTYPE html> <html> <body> <h1>Main Heading</h1> <p>This is a paragraph.</p> </body> </html><br>
slide3. HTML Links & Images Example of an anchor link and image tag. <a href="https://example.com">Visit Example</a> <img src="image.jpg" alt=”Example" width="200"><br>
slide4. CSS Styling Internal CSS to style HTML elements. <style> body { background-color: lightblue; font-family: Arial; } h1 { color: darkblue; } </style><br>
slide5. CSS Box Model Illustrating the box model with margin, border, and padding. .box { margin: 10px; border: 5px solid black; padding: 20px; }<br>
slide6. Inline JavaScript Runs JS code directly in HTML tag using onclick attribute. <button onclick="alert('Hello!')">Click Me</button><br>
slide7. Internal JavaScript JavaScript inside the HTML document using script tags. <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello from JS!"; </script><br>
slide8. External JavaScript Linking an external JS file. <script src="script.js"></script><br>
slide9. JS Output Methods Different ways to show output in JavaScript. alert("This is an alert!"); console.log("This is in the console."); document.write("Written on page."); document.getElementById("demo").innerHTML = "Changed text.";<br>
slide10. JavaScript Variables Declaring variables using var, let, const. var oldVar = "I am var"; // function-scoped let newLet = "I am let"; // block-scoped const fixedValue = 100; // constant<br>
slide11. JavaScript Data Types Different JS data types. let num = 42; let str = "Hello"; let bool = true; let arr = [1, 2, 3]; let obj = {name: "Tejan"}; let empty = null; let undef;<br>
slide12. JavaScript Operators Arithmetic, comparison, and logical operators. let a = 10, b = 5; console.log(a + b); // 15 console.log(a > b); // true console.log(a > 5 && b < 10); // true<br>
slide13. JavaScript Functions Defining and calling a function. function greet(name) { return "Hello, " + name; } console.log(greet("Adina"));<br>
slide14. JavaScript If/Else Using if/else for conditions. let age = 18; if (age >= 18) { console.log("Adult"); } else { console.log("Minor"); }<br>
slide15. JavaScript Events Using events like onclick and addEventListener. document.getElementById("btn").onclick = function() { alert("Button clicked!"); }; document.getElementById("btn").addEventListener("dblclick", function() { alert("Double clicked!"); });<br>
slide16. Python Variables Declaring and printing variables. name = "Keturah" age = 25 print("Name:", name) print("Age:", age)<br>
slide17. Python Data Types Different Python data types. num = 42 pi = 3.14 is_valid = True fruits = ["apple", "banana"] person = {"name": "Adina", "age": 2} nothing = None<br>
slide18. Python Type Conversion Converting data types. num_str = "123" num_int = int(num_str) print(num_int)<br>
slide19. Python Operators Arithmetic, comparison, and logical operators. a = 10 b = 5 print(a + b) # 15 print(a > b) # True print(a > 5 and b < 10) # True<br>
slide20. Python If/Elif/Else Using if/else in Python.
If --- run code if a condition is true
Elif ----- run if the previous if was false, but this one is true
Else --- run if none of the above is true age = 20
if age > 18:
print("Adult")
elif age == 18:
print("Exactly 18!")
else:
print("Minor")<br>
slide21. Python Loops For and while loops in Python. for i in range(3): print("Loop", i) count = 0 while count < 3: print(count) count += 1<br>
slide22. Python Functions Defining and calling a Python function. def greet(name): return "Hello, " + name print(greet("TZY"))<br>
slide2. HTML Headings & Paragraphs Basic HTML structure with headings and a paragraph. <!DOCTYPE html> <html> <body> <h1>Main Heading</h1> <p>This is a paragraph.</p> </body> </html><br>
slide3. HTML Links & Images Example of an anchor link and image tag. <a href="https://example.com">Visit Example</a> <img src="image.jpg" alt=”Example" width="200"><br>
slide4. CSS Styling Internal CSS to style HTML elements. <style> body { background-color: lightblue; font-family: Arial; } h1 { color: darkblue; } </style><br>
slide5. CSS Box Model Illustrating the box model with margin, border, and padding. .box { margin: 10px; border: 5px solid black; padding: 20px; }<br>
slide6. Inline JavaScript Runs JS code directly in HTML tag using onclick attribute. <button onclick="alert('Hello!')">Click Me</button><br>
slide7. Internal JavaScript JavaScript inside the HTML document using script tags. <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello from JS!"; </script><br>
slide8. External JavaScript Linking an external JS file. <script src="script.js"></script><br>
slide9. JS Output Methods Different ways to show output in JavaScript. alert("This is an alert!"); console.log("This is in the console."); document.write("Written on page."); document.getElementById("demo").innerHTML = "Changed text.";<br>
slide10. JavaScript Variables Declaring variables using var, let, const. var oldVar = "I am var"; // function-scoped let newLet = "I am let"; // block-scoped const fixedValue = 100; // constant<br>
slide11. JavaScript Data Types Different JS data types. let num = 42; let str = "Hello"; let bool = true; let arr = [1, 2, 3]; let obj = {name: "Tejan"}; let empty = null; let undef;<br>
slide12. JavaScript Operators Arithmetic, comparison, and logical operators. let a = 10, b = 5; console.log(a + b); // 15 console.log(a > b); // true console.log(a > 5 && b < 10); // true<br>
slide13. JavaScript Functions Defining and calling a function. function greet(name) { return "Hello, " + name; } console.log(greet("Adina"));<br>
slide14. JavaScript If/Else Using if/else for conditions. let age = 18; if (age >= 18) { console.log("Adult"); } else { console.log("Minor"); }<br>
slide15. JavaScript Events Using events like onclick and addEventListener. document.getElementById("btn").onclick = function() { alert("Button clicked!"); }; document.getElementById("btn").addEventListener("dblclick", function() { alert("Double clicked!"); });<br>
slide16. Python Variables Declaring and printing variables. name = "Keturah" age = 25 print("Name:", name) print("Age:", age)<br>
slide17. Python Data Types Different Python data types. num = 42 pi = 3.14 is_valid = True fruits = ["apple", "banana"] person = {"name": "Adina", "age": 2} nothing = None<br>
slide18. Python Type Conversion Converting data types. num_str = "123" num_int = int(num_str) print(num_int)<br>
slide19. Python Operators Arithmetic, comparison, and logical operators. a = 10 b = 5 print(a + b) # 15 print(a > b) # True print(a > 5 and b < 10) # True<br>
slide20. Python If/Elif/Else Using if/else in Python.
If --- run code if a condition is true
Elif ----- run if the previous if was false, but this one is true
Else --- run if none of the above is true age = 20
if age > 18:
print("Adult")
elif age == 18:
print("Exactly 18!")
else:
print("Minor")<br>
slide21. Python Loops For and while loops in Python. for i in range(3): print("Loop", i) count = 0 while count < 3: print(count) count += 1<br>
slide22. Python Functions Defining and calling a Python function. def greet(name): return "Hello, " + name print(greet("TZY"))<br>