Skip to content

Commit 7edbbda

Browse files
avihenriavihenri
committed
Formatting update
1 parent 18ced02 commit 7edbbda

File tree

12 files changed

+196
-20
lines changed

12 files changed

+196
-20
lines changed

‎01-introduction-to-html/example.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>My First Webpage</title>
6+
<title>Lesson 1 - HTML Introduction</title>
77
</head>
88
<body>
99
<h1>Hello, World!</h1>

‎01-introduction-to-html/exercise.md

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
# Exercise: HTML Strcuture
22

3+
## Overview
4+
5+
In this exercise, you will learn the foundational structure of an HTML document. Understanding how to set up an HTML page is essential for creating any webpage. You'll use key elements such as `<!DOCTYPE>`, `<html>`, `<head>`, and `<body>` to create a simple but properly structured page.
6+
7+
---
8+
9+
## Task
10+
311
Open your code editor or CodeSandbox.
412
Create a new file called `exercise.html`.
513

@@ -9,5 +17,9 @@ Write the HTML structure for a page with:
917
3. A `heading` in the <body>: "Learning HTML Structure".
1018
4. A `paragraph`: "This is my first step in coding!"
1119

20+
---
21+
22+
## Save and View
23+
1224
Save your `exercise.html`.
13-
Open the file in a browser `<root to repository>/html-css-tutorials/html-example.html`
25+
Open the file in a browser `<root to repository>/html-css-tutorials/01-introduction-to-html/exercise.html`

‎02-html-headings/README.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@
44
Headings are used to define the structure of a webpage. They range from `<h1>` (most important) to `<h6>` (least important).
55

66
### Syntax:
7-
```html
7+
```
88
<h1>This is a heading</h1>
99
<h2>This is a sub-heading</h2>
1010
<h3>This is a smaller heading</h3>
11+
<!-- and so on.. -->
12+
```
1113

12-
<!-- [Next Lesson: HTML Headings](../03-html-/README.md) -->
14+
---
15+
16+
[Next Lesson: HTML Text](../03-html-text/README.md)

‎02-html-headings/example.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,10 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>My First Webpage</title>
6+
<title>HTML Headings</title>
77
</head>
88
<body>
9-
<h1>Hello, World!</h1>
10-
<p>This is my first HTML webpage.</p>
11-
<hr>
9+
<h1>Lesson 2 - HTML Headings</h1>
1210

1311
<h1>Heading 1</h1>
1412
<h2>Heading 2</h2>

‎02-html-headings/exercise.md

+31-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,36 @@
11
# Exercise: HTML Headings
22

3+
## Overview
4+
5+
In this exercise, you will practice using HTML heading tags (`<h1>` to `<h6>`) to organise and structure content on a webpage. Headings are used to define sections of your content, with `<h1>` being the most important and `<h6>` the least important.
6+
7+
By the end of this exercise, you’ll be able to use heading tags effectively to create a structured and visually appealing webpage.
8+
9+
---
10+
11+
## Task
12+
13+
Open your code editor or CodeSandbox.
14+
Create a new file called `exercise.html`.
15+
316
Create a webpage with the following structure:
4-
1. A `<h1>` with the title "My Favorite Foods".
5-
2. A `<h2>` for the section "Breakfast".
6-
3. A `<h3>` for the item "Pancakes".
7-
4. A `<h4>` for the item "Bacon".
8-
5. A `<h5>` for the item "Maple Syrup".
9-
6. A `<h6>` for the item "More bacon".
1017

11-
Bonus: add a title "HTML Headings"
18+
1. A `<h1>` with the text **"My Favourite Foods"**.
19+
2. A `<h2>` with the text **"Breakfast"**.
20+
3. A `<h3>` with the text **"Pancakes"**.
21+
4. A `<h4>` with the text **"Bacon"**.
22+
5. A `<h5>` with the text **"Maple Syrup"**.
23+
6. A `<h6>` with the text **"More bacon"**.
24+
25+
---
26+
27+
## Bonus
28+
29+
1. Add a title to your page: **"HTML Headings"** in the `<title>` tag inside the `<head>` section.
30+
31+
---
32+
33+
## Save and View
1234

13-
Save your file as `exercise.html`.
35+
Save your file as `exercise.html`.
36+
Open the file in a browser `<root to repository>/html-css-tutorials/02-html-headings/exercise.html`

‎03-html-text/README.md

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Lesson 3: HTML Text
2+
3+
## What Are HTML Text Tags?
4+
5+
HTML text tags are used to style and format text on a webpage. They allow you to emphasise, highlight, or structure text in different ways, making your content more readable and visually appealing.
6+
7+
Text tags help define the purpose of specific text. For example, you can make text bold to emphasise importance, italicise to indicate subtle emphasis, or even mark text as deleted or inserted. These tags give you control over how text is displayed.
8+
9+
---
10+
11+
### Syntax:
12+
13+
Here’s a list of common HTML text tags and their usage:
14+
15+
1. **Bold Text**: `<b>Bold text</b>`
16+
- Example: `<b>This text is bold</b>`
17+
18+
2. **Important Text**: `<strong>Important text</strong>`
19+
- Example: `<strong>This is important</strong>`
20+
21+
3. **Italic Text**: `<i>Italic text</i>`
22+
- Example: `<i>This text is italic</i>`
23+
24+
4. **Emphasised Text**: `<em>Emphasised text</em>`
25+
- Example: `<em>This is emphasised</em>`
26+
27+
5. **Marked Text**: `<mark>Marked text</mark>`
28+
- Example: `<mark>This text is highlighted</mark>`
29+
30+
6. **Smaller Text**: `<small>Smaller text</small>`
31+
- Example: `<small>This is small text</small>`
32+
33+
7. **Deleted Text**: `<del>Deleted text</del>`
34+
- Example: `<del>This text was removed</del>`
35+
36+
8. **Inserted Text**: `<ins>Inserted text</ins>`
37+
- Example: `<ins>This text was added</ins>`
38+
39+
9. **Subscript Text**: `<sub>Subscript text</sub>`
40+
- Example: `H<sub>2</sub>O`
41+
42+
10. **Superscript Text**: `<sup>Superscript text</sup>`
43+
- Example: `x<sup>2</sup>`
44+
45+
46+
<!-- [Next Lesson: HTML ](../04-html-/README.md) -->

‎03-html-text/example.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Lesson 3 - HTML Text</title>
7+
</head>
8+
<body>
9+
<h1>Lesson 3 - HTML Text</h1>
10+
11+
<p>This is a paragraph.</p>
12+
<hr><!-- Horizontal Rule: is a horizontal break, used to separate content -->
13+
14+
<p>
15+
<b> Bold text </b> </div>
16+
</br><!-- Break: line break within a block of text-->
17+
<strong> Important text </strong> </br>
18+
<i> Italic text </i> </br>
19+
<em> Emphasised text </em> </br>
20+
<mark> Marked text </mark> </br>
21+
<small> Smaller text </small> </br>
22+
<del> Deleted text </del> </br>
23+
<ins> Inserted text </ins> </br>
24+
<sub> Subscript text </sub> </br>
25+
<sup> Superscript text </sup> </br>
26+
</p>
27+
</body>
28+
</html>

‎03-html-text/exercise.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Exercise: HTML Text
2+
3+
## Overview
4+
5+
In this lesson, you will practice using various HTML text-related tags to style and format text on a webpage. These tags include bold, italic, emphasised, marked, and more.
6+
7+
---
8+
9+
## Task
10+
11+
Create a webpage with the following structure:
12+
13+
1. A `<p>` with **bold text** using the `<b>` tag.
14+
2. A `<p>` with **italic text** using the `<i>` tag.
15+
3. A `<p>` with **emphasised text** using the `<em>` tag.
16+
4. A `<p>` with **deleted text** using the `<del>` tag and **inserted text** using the `<ins>` tag.
17+
5. A `<p>` with **subscript** (`<sub>`) and **superscript** (`<sup>`) text.
18+
6. A `<mark>` tag highlighting some important text.
19+
20+
---
21+
22+
## Bonus
23+
24+
1. Add a title to your page: **"HTML Text"** in the `<title>` tag inside the `<head>` section.
25+
2. Use a `<h1>` heading: **"Lesson 3 - HTML Text"** at the top of the page.
26+
3. Add a horizontal line (`hr`) between `h1` heading and the first paragraph to separate the content.
27+
28+
---
29+
30+
## Save and View
31+
32+
Save your file as `exercise.html`.
33+
Open the file in a browser `<root to repository>/html-css-tutorials/03-html-text/exercise.html`

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ Happy coding!
1717
---
1818

1919
### Terminology
20-
- `Repository`: a repository is a storage location where your project files and their revision history are managed, often using version control systems like Git (future tutorial). It helps keep track of changes, collaborate with others, and organize your code or content.
21-
- `Directory`: a directory is like a folder which contains files. It is used to organize files on a computer or in a project structure.
20+
- `Repository`: a repository is a storage location where your project files and their revision history are managed, often using version control systems like Git (future tutorial). It helps keep track of changes, collaborate with others, and organise your code or content.
21+
- `Directory`: a directory is like a folder which contains files. It is used to organise files on a computer or in a project structure.
2222
- `File types`:
2323
- - `.html`: HTML files are used to create the structure and content of web pages. They use tags to define elements such as headings, paragraphs, links, images, and more.
2424
- - `.md`: Markdown (.md) files are used to write formatted text using plain text. They are commonly used for documentation, README files, and blogs, allowing easy conversion to HTML for web display.

‎html-example.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h6>Heading 6</h6>
2424
</br><!-- Break: line break within a block of text-->
2525
<strong> Important text </strong> </br>
2626
<i> Italic text </i> </br>
27-
<em> Emphasized text </em> </br>
27+
<em> Emphasised text </em> </br>
2828
<mark> Marked text </mark> </br>
2929
<small> Smaller text </small> </br>
3030
<del> Deleted text </del> </br>

‎solutions/02-html-headings-solution.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Intro to HTML</title> <!-- Bonus -->
55
</head>
66
<body>
7-
<h1>My Favorite Foods</h1> <!-- Point 1 -->
7+
<h1>My Favourite Foods</h1> <!-- Point 1 -->
88
<h2>Breakfast</h2> <!-- Point 2 -->
99
<h3>Pancakes</h3> <!-- Point 3 -->
1010
<h4>Bacon</h4> <!-- Point 4 -->

‎solutions/03-html-text-solution.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>HTML Text</title> <!-- Bonus -->
5+
</head>
6+
<body>
7+
<h1>Lesson 3 - HTML Text</h1> <!-- Bonus -->
8+
<hr> <!-- Bonus -->
9+
10+
<!-- Point 1 -->
11+
<p><b>Bold text</b></p>
12+
13+
<!-- Point 2 -->
14+
<p><i>Italic text</i></p>
15+
16+
<!-- Point 3 -->
17+
<p><em>Emphasised text</em></p>
18+
19+
<!-- Point 4 -->
20+
<p>
21+
<del>Deleted text</del> and <ins>Inserted text</ins>
22+
</p>
23+
24+
<!-- Point 5 -->
25+
<p>
26+
H<sub>2</sub>O (Water) and x<sup>2</sup> (Superscript)
27+
</p>
28+
29+
<!-- Point 6 -->
30+
<p><mark>This is highlighted text</mark></p>
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)