User:ZUZU/Study/Web01

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
2.1.2 Add Images

2.2 Thursday 14 December
2.2.1 Basic Structure of CSS


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<!-- 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 DecemberBasic Structure of CSS/* Element Selector */
p {
  color: blue;
}

/* Class Selector */
.highlight {
  background-color: yellow;
}

/* ID Selector */
#header {
  font-size: 24px;
}
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

	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