User:ZUZU/Winter Break: Difference between revisions

Revision as of 10:49, 30 December 2023

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.
Contents
1 WEEK 12
1.1 Saturday 9 December
1.1.1 basic HTML Structure
1.1.2 compare Block-Level Elements&Inline Elements
1.1.3 Header Section
1.1.4 Footer Section

2 WEEK 13
2.1 Wednesday 13 December
2.1.1 Add Links

3 Appendix
3.1 Punctuation Mark

WEEK 12Saturday 9 Decemberbasic 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 13Wednesday 13 DecemberAdd Links<!-- add internal link -->
<a href="//http:www.example.com" target=_self>open on the same page</a>
AppendixPunctuation 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

@@ Line 61: / Line 61: @@
    <p>&copy; 2023 Website Name. All rights reserved.</p>
 </footer>
+</syntaxhighlight>
+== WEEK 13 ==
+=== Wednesday 13 December ===
+====Add Links====
+<syntaxhighlight lang="html">
+<!-- add internal link -->
+<a href="//http:www.example.com" target=_self>open on the same page</a>
 </syntaxhighlight>

	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>`

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