User:ZUZU/Winter Break: Difference between revisions

From XPUB & Lens-Based wiki
 
(26 intermediate revisions by the same user not shown)
Line 5: Line 5:
With practice over the past month, I've found that using wiki to keep track of my learning process has worked well for me, so I've decided to continue this winter break.
With practice over the past month, I've found that using wiki to keep track of my learning process has worked well for me, so I've decided to continue this winter break.


== WEEK 12 ==
== WEEK 12 ==
=== Saturday 9 December ===
=== Saturday 9 December ===
====start with HTML&CSS====
====basic HTML Structure====
*basic HTML structure
<syntaxhighlight lang="html">
    <!DOCTYPE html>
<!DOCTYPE html>
    <html lang="en">
<html lang="en">
    <head>
<head>
      <meta charset="UTF-8">
  <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>My First HTML Page</title>
  <title>My First HTML Page</title>
      <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="style.css">
    </head>
</head>
    <body>
<body>
    <!-- Content of the page goes here -->
<!-- Content of the page goes here -->
    </body>
</body>
    </html>
</syntaxhighlight>
*compare Block-Level Elements&Inline Elements
 
 
====compare Block-Level Elements&Inline Elements====
{| class="wikitable"
{| class="wikitable"
!  
!  
Line 34: Line 36:
| <code>&lt;div&gt;</code>, <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;table&gt;</code>   
| <code>&lt;div&gt;</code>, <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>, <code>&lt;ul&gt;</code>, <code>&lt;table&gt;</code>   
| <code>&lt;span&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;strong&gt;</code>, <code>&lt;img&gt;</code>, <code>&lt;br&gt;</code>
| <code>&lt;span&gt;</code>, <code>&lt;a&gt;</code>, <code>&lt;strong&gt;</code>, <code>&lt;img&gt;</code>, <code>&lt;br&gt;</code>
|}
====Header Section====
<syntaxhighlight lang="html">
<!-- 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>
</syntaxhighlight>
====Footer Section====
<syntaxhighlight lang="html">
<!-- Footer Section -->
<footer>
  <p>&copy; 2023 Website Name. All rights reserved.</p>
</footer>
</syntaxhighlight>
== WEEK 13 == 
=== Wednesday 13 December ===
====Add Links====
<syntaxhighlight lang="html">
<!-- 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>
</syntaxhighlight>
====Add Images====
<syntaxhighlight lang="html">
<!-- 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>
</syntaxhighlight>
=== Thursday 14 December ===
====Basic Structure of CSS====
<syntaxhighlight lang="css">
/* Element Selector */
p {
  color: blue;
}
/* Class Selector */
.highlight {
  background-color: yellow;
}
/* ID Selector */
#header {
  font-size: 24px;
}
</syntaxhighlight>
== Appendix ==
=== Punctuation Mark ===
{| class="wikitable"
|-
! 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
|-
|&#124;
| Pipe (Vertical Bar)
|-
| !
| Exclamation Mark /ˌekskləˈmeɪʃn/
|-
| ˜
| Tilde /ˈtɪldə/
|-
| -
| Hyphen (Minus)
|-
| _
| Underscore
|}
|}

Latest revision as of 12:36, 1 January 2024

With practice over the past month, I've found that using wiki to keep track of my learning process has worked well for me, so I've decided to continue this winter break.

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
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:ZUZU/Winter_Break&oldid=256857"