diff options
| -rw-r--r-- | 01_basic.html | 39 | ||||
| -rw-r--r-- | 02_css.html | 55 | ||||
| -rw-r--r-- | 03_sakura.html | 40 | ||||
| -rw-r--r-- | index.html | 15 | ||||
| -rw-r--r-- | sample_markdown.md | 24 |
5 files changed, 173 insertions, 0 deletions
diff --git a/01_basic.html b/01_basic.html new file mode 100644 index 0000000..aa8936f --- /dev/null +++ b/01_basic.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>HTML Elements Demo</title> +</head> +<body> + <h1>This is Heading 1</h1> + <h2>This is Heading 2</h2> + <h3>This is Heading 3</h3> + <h4>This is Heading 4</h4> + <h5>This is Heading 5</h5> + <h6>This is Heading 6</h6> + + <p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and <u>underlined text</u>.</p> + <p>This is a paragraph with a <mark>highlighted text</mark> and <small>smaller text</small>.</p> + + <p>This is a <a href="https://example.com">link to example.com</a></p> + + <h3>Unordered List:</h3> + <ul> + <li>First item</li> + <li>Second item</li> + <li>Third item</li> + </ul> + + <h3>Ordered List:</h3> + <ol> + <li>First item</li> + <li>Second item</li> + <li>Third item</li> + </ol> + + <h3>Image Example:</h3> + <img src="https://picsum.photos/300/200" alt="Placeholder Image"> + <hr> +</body> +</html> diff --git a/02_css.html b/02_css.html new file mode 100644 index 0000000..b06581f --- /dev/null +++ b/02_css.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>HTML Elements Demo</title> +<style> +body { + font-family: Arial, sans-serif; + line-height: 1.6; + padding: 20px; + max-width: 800px; + margin: 0 auto; + color: #333; + } + + /* Headings */ + h1, h2, h3, h4, h5, h6 { + margin: 15px 0; + color: #2c3e50; + } +</style> +</head> +<body> + <h1>This is Heading 1</h1> + <h2>This is Heading 2</h2> + <h3>This is Heading 3</h3> + <h4>This is Heading 4</h4> + <h5>This is Heading 5</h5> + <h6>This is Heading 6</h6> + + <p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and <u>underlined text</u>.</p> + <p>This is a paragraph with a <mark>highlighted text</mark> and <small>smaller text</small>.</p> + + <p>This is a <a href="https://example.com">link to example.com</a></p> + + <h3>Unordered List:</h3> + <ul> + <li>First item</li> + <li>Second item</li> + <li>Third item</li> + </ul> + + <h3>Ordered List:</h3> + <ol> + <li>First item</li> + <li>Second item</li> + <li>Third item</li> + </ol> + + <h3>Image Example:</h3> + <img src="https://picsum.photos/300/200" alt="Placeholder Image"> + <hr> +</body> +</html> diff --git a/03_sakura.html b/03_sakura.html new file mode 100644 index 0000000..d8e5c9b --- /dev/null +++ b/03_sakura.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css" type="text/css"> + <title>HTML Elements Demo</title> +</head> +<body> + <h1>This is Heading 1</h1> + <h2>This is Heading 2</h2> + <h3>This is Heading 3</h3> + <h4>This is Heading 4</h4> + <h5>This is Heading 5</h5> + <h6>This is Heading 6</h6> + + <p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and <u>underlined text</u>.</p> + <p>This is a paragraph with a <mark>highlighted text</mark> and <small>smaller text</small>.</p> + + <p>This is a <a href="https://example.com">link to example.com</a></p> + + <h3>Unordered List:</h3> + <ul> + <li>First item</li> + <li>Second item</li> + <li>Third item</li> + </ul> + + <h3>Ordered List:</h3> + <ol> + <li>First item</li> + <li>Second item</li> + <li>Third item</li> + </ol> + + <h3>Image Example:</h3> + <img src="https://picsum.photos/300/200" alt="Placeholder Image"> + <hr> +</body> +</html> diff --git a/index.html b/index.html new file mode 100644 index 0000000..eb0553c --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <title>Index</title> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css" type="text/css"> +</head> +<body> + <h1>Index</h1> + <ol> + <li><a href="01_basic.html">Basic HTML</a></li> + <li><a href="02_css.html">HTML + CSS</a></li> + <li><a href="03_sakura.html">HTML + Custom Stylesheet</a></li> + </ol> +</body> +</html> diff --git a/sample_markdown.md b/sample_markdown.md new file mode 100644 index 0000000..b6efd26 --- /dev/null +++ b/sample_markdown.md @@ -0,0 +1,24 @@ +# Heading 1 +## Heading 2 +### Heading 3 +#### Heading 4 +##### Heading 5 +###### Heading 6 + +## Ordered Lists +1. Item 1 +2. Item 2 +3. Item 3 + +## Unordered Lists +* Item 1 +* Item 2 +* Item 3 + +Link to [example.com](https://example.com) + +Random image: + + + +<hr> |