User:ZUZU/Study/Web01: Difference between revisions

Revision as of 00:44, 3 February 2024

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 Section -->
<footer>
  <p>&copy; 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;
}

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

1. **Set Up a GitHub Repository:**

  - Create a new GitHub repository to host your project.
  - Initialize the repository with a README file or any other initial files you have.

2. **Clone the Repository:**

  - Clone the GitHub repository to your local machine using Git.

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

@@ Line 199: / Line 199: @@
 | Underscore
 |}
+. **Set Up a GitHub Repository:**
+   - Create a new GitHub repository to host your project.
+   - Initialize the repository with a README file or any other initial files you have.
+. **Clone the Repository:**
+   - Clone the GitHub repository to your local machine using Git.
+=== 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:
+<syntaxhighlight lang="bash">
+git clone https://github.com/blacktableone/SI23
+</syntaxhighlight>
+-Install BrowserSync:
+<syntaxhighlight lang="bash">
+npm install -g browser-sync
+</syntaxhighlight>
+-Navigate to project directory
+-Initialize a package.json file:
+<syntaxhighlight lang="bash">
+npm init -y
+</syntaxhighlight>
+-Install BrowserSync:
+<syntaxhighlight lang="bash">
+npm install browser-sync --save-dev
+</syntaxhighlight>
+-Create a bs-config.js file in  project directory:
+<syntaxhighlight lang="bash">
+code bs-config.js
+</syntaxhighlight>
+-Add the following configuration to bs-config.js:
+<syntaxhighlight lang="bash">
+module.exports = {
+    server: {
+        baseDir: "./"
+    },
+    files: ["*.html", "*.css", "*.js"]
+};
+</syntaxhighlight>
+-In project directory,run BrowserSync:
+<syntaxhighlight lang="bash">
+browser-sync start --config bs-config.js
+</syntaxhighlight>