User:ZUZU/Study/Web01
WEEK 12
Saturday 9 December
basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Content of the page goes here -->
</body>
compare Block-Level Elements&Inline Elements
| Block-Level Elements | Inline Elements | |
|---|---|---|
| Structure | Each block-level element generate a block-level container that takes up the full width available. | They do not create a new line,they flow within the context. |
| Examples | <div>, <p>, <h1> to <h6>, <ul>, <table>
|
<span>, <a>, <strong>, <img>, <br>
|
Header Section
<!-- Header Section -->
<header>
<h1>Website Name</h1>
<nav>
<!-- Navigation Links -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!-- Footer Section -->
<footer>
<p>© 2023 Website Name. All rights reserved.</p>
</footer>
WEEK 13
Wednesday 13 December
Add Links
<!-- title attribute -->
<a href="https://www.examples.com title="Example webpage">Look at examples</a>
<!-- target attribute -->
<a href="https://www.example.com" target="_self">open on the same page</a>
<a href="https://www.example.com" target="_blank">open in new tab</a>
<!-- relative paths -->
<a href="/about">About Us</a>
<a href="/">Home</a>
<!-- link to E-mail -->
<a href=mailto:information@example@.com>Email Us</a>
<!-- link to Sections within the Same Page -->
<h1 id="top">Header1</h1>
<a href="#top">Go back to Top</a>
Add Images
<!-- basic syntax -->
<img src="example/imagines.jpg" alt="example image">
<!--width and height Attributes -->
<img src="example.jpg" alt="An example image" width="300" height="200">
<!-- add image as link -->
<a href="https://www.example.com">
<img src="example/imagines.jpg" alt="Description of the image">
</a>
Thursday 14 December
Basic Structure of CSS
/* Element Selector */
p {
color: blue;
}
/* Class Selector */
.highlight {
background-color: yellow;
}
/* ID Selector */
#header {
font-size: 24px;
}
3 Feb
Basic Properties of CSS
WEEK 7
Wednesday 14 Feb
Basics JavaScript
The placement of JavaScript within an HTML
<!-- Inside <head> tags, allows the browser to load the script before rendering the page content -->
<head>
<script src="script.js"></script>
</head>
<!-- Inside <body> tags before closing </body> tag allow the page content to load before executing the scripts-->
<body>
<!-- Page content -->
<script src="script.js"></script>
</body>
Use Node.js
Node.js is a runtime environment that could run JavaScript code outside of a web browser, on servers or other devices.Open your terminal,navigate to the directory
node example.js
var,let,const
| Symbol | Symbol | Description | Sample |
|---|---|---|---|
var: variables declared with var are function-scoped or globally-scoped, but not block-scoped. That they are accessible anywhere within the function or global scope in which they are declared.
function example() {
var x = 10;
if (true) {
var y = 20;
}
console.log(x); // Output: 10
console.log(y); // Output: 20
}
let: variables declared with let are block-scoped, they are only accessible within the block (enclosed by curly braces)
function example() {
let x = 10;
if (true) {
let y = 20;
console.log(x); // Output: 10
console.log(y); // Output: 20
}
console.log(x); // Output: 10
console.log(y); // Error: y is not defined
}
const: means constant, variables declared with const are block-scoped like let, but they must be initialized with a value, and once declared, their value cannot be re-assigned.
function example() {
const x = 10;
// x = 20; // Error: Assignment to constant variable
console.log(x); // Output: 10
}
//for objects and arrays declared with const, their properties or elements can still be modified, but the variable itself cannot be re-assigned.
const person = {
name: 'John',
age: 30
};
person.age = 31; // Valid
console.log(person); // Output: { name: 'John', age: 31 }
// person = {}; // Error: Assignment to constant variable
Appendix
Punctuation Mark
| Punctuation Mark | English Name |
|---|---|
| . | Full Stop |
| , | Comma |
| ; | Semicolon |
| : | Colon |
| ' | Apostrophe /əˈpɒstrəfi/(Single Quote) |
| " | Quotation Mark (Double Quote) |
| ` | Backtick |
| ( | Opening Parenthesis |
| ) | Closing Parenthesis |
| [] | Square Bracket |
| {} | Curly Brace |
| / | Forward Slash |
| \ | Backslash |
| * | Asterisk/ˈæstərɪsk/ |
| & | Ampersand/ˈæmpəsænd/ |
| # | Hash (Octothorpe) |
| < | Less Than |
| > | Greater Than |
| | | Pipe (Vertical Bar) |
| ! | Exclamation Mark /ˌekskləˈmeɪʃn/ |
| ˜ | Tilde /ˈtɪldə/ |
| - | Hyphen (Minus) |
| _ | Underscore |
Set up automatic synchronization
Using automatic synchronization between Visual Studio Code and Firefox using GitHub and BrowserSync. -Set up a GitHub Repository
-Clone the Repository:
git clone https://github.com/blacktableone/SI23
-Install BrowserSync:
npm install -g browser-sync
-Navigate to project directory
-Initialize a package.json file:
npm init -y
-Install BrowserSync:
npm install browser-sync --save-dev
-Create a bs-config.js file in project directory:
code bs-config.js
-Add the following configuration to bs-config.js:
module.exports = {
server: {
baseDir: "./"
},
files: ["*.html", "*.css", "*.js"]
};
-In project directory,run BrowserSync:
browser-sync start --config bs-config.js