User:ZUZU/Winter Break: Difference between revisions
| Line 8: | Line 8: | ||
=== Saturday 9 December === | === Saturday 9 December === | ||
====basic HTML structure==== | ====basic HTML structure==== | ||
<syntaxhighlight lang="html"> | |||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="en"> | <html lang="en"> | ||
| Line 20: | Line 21: | ||
</body> | </body> | ||
</html> | </html> | ||
====compare Block-Level Elements&Inline Elements==== | ====compare Block-Level Elements&Inline Elements==== | ||
{| class="wikitable" | {| class="wikitable" | ||
Revision as of 09:47, 26 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.
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>
</html>
====compare Block-Level Elements&Inline Elements====
{| class="wikitable"
!
!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
| <code><div></code>, <code><p></code>, <code><h1></code> to <code><h6></code>, <code><ul></code>, <code><table></code>
| <code><span></code>, <code><a></code>, <code><strong></code>, <code><img></code>, <code><br></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>
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 |