Scribd
Upload
4 views

Html programming

The document outlines the creation of a basic HTML structure for a webpage focused on unit conversions, specifically for temperature, weight, and distance. It includes instructions for setting up sections, navigation, and conversion functionalities, along with input fields and buttons for user interaction. The document also provides specific HTML code snippets for implementing these features.

Uploaded by

Talha Mustafa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Html programming

The document outlines the creation of a basic HTML structure for a webpage focused on unit conversions, specifically for temperature, weight, and distance. It includes instructions for setting up sections, navigation, and conversion functionalities, along with input fields and buttons for user interaction. The document also provides specific HTML code snippets for implementing these features.

Uploaded by

Talha Mustafa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 46

2.

Insert the basic HTML document structure into your file, including both
the <head> and <body> tags. Add a <title> tag with title Unit Conversions

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <!-- This is your page title that appears on the browser window or

tab -->

5. <title>Unit Conversions</title>

6. </head>

7. <body>

8.

9. </body>

10. </html>
Copied!
3. Create a section with id home, within the body. This section will represent the
top section of your webpage.

1. 1

2. 2

1. <section id="home">

2. </section>
Copied!
4. Within the home section, create a header, using the <header> tag, with the
text Unit Conversions . Bold the text to make it stand out
1. 1

2. 2

3. 3

4. 4

1. <section id="home">

2. <!-- This is the main heading -->

3. <header><b>Unit Conversions</b></header>

4. </section>
Copied!
4. Create a navigation bar inside the home section, after the header tag

1. 1

2. 2

3. 3

1. <nav>

2. <!-- This will have the main unit conversion buttons -->

3. </nav>
Copied!

 You need to create unit conversions for:

i. Temperature
ii. Weight
iii. Distance
 We will create anchor tags with buttons which redirect users to certain sections
of the same page.
 We will be using the id attribute to reference these sections. id s are
represented with the # symbol.
5. Add 3 anchor & button tags for the 3 types of conversions (temperature, weight,
and distance) inside the navigation bar

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8
1. <nav>

2. <!-- Button for redirecting users to the temperature section -->

3. <a href="#temperature"><button>Temperature</button></a>

4. <!-- Button for redirecting users to the weight section -->

5. <a href="#weight"><button>Weight</button></a>

6. <!-- Button for redirecting users to the distance section -->

7. <a href="#distance"><button>Distance</button></a>

8. </nav>
Copied!
6. Save your code.
Click here to see how your code should look so far

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.
1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.

15.

16.

17.

18.

19.

20.

21.
PreviousNext

Ask AI

Task 2: Temperature (Celsius


to Fahrenheit) Conversion
You will now create a button for Temperature conversions (Celsius to Fahrenheit)

1. Create a div tag, which will be used to hold all the conversion sections.

1. 1

2. 2
3. 3

4. 4

5. 5

1. <!-- Code that was previously added in the preceeding steps-->

2.

3. <div id="all-conversion-sections">

4. <!-- This will have the conversion sections for Temperature, Weight,

and Distance -->

5. </div>
Copied!
2. Add a section tag inside and set its attribute id to temperature inside this all-
conversion-sections div tag

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

1. <div id="all-conversion-sections">

2. <!-- This will have the conversion sections for Temperature, Weight,

and Distance -->

3.

4. <section id="temperature">

5. <!--Temperature conversion section -->

6.

7. </section>

8. </div>
Copied!
3. Create a div tag with id set to tmp . Add a figure tag inside this div tag, where
you will be adding a visual depiction of the conversion.

1. 1
2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

1. <section id="temperature">

2. <div id="tmp">

3. <figure>

4.

5. <!-- Figure and its caption will come here -->

6.

7. </figure>

8. </div>

9. </section>
Copied!
4. Add an image tag inside the figure, having src attribute set to the URL
“https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/
IBMDeveloperSkillsNetwork-CD0101EN-SkillsNetwork/labs/Theia%20Labs/02%20-
%20HTML5%20Elements/images/thermo.png“ and a width set to 200px. Then,
add a figcaption tag to give a caption to this figure.

1. 1

2. 2

3. 3

4. 4

1. <figure>

2. <img src="https://cf-courses-data.s3.us.cloud-object-

storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-

SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/

thermo.png" width="200px"/>
3. <figcaption>Celsius to Fahrenheit Conversion</figcaption>

4. </figure>
Copied!
Next you will complete the following:
 Display temperature as a heading
 Create two input fields and two labels
 Create a button to convert
5. Add an article tag to the tmp div tag to contain an article that will hold the
elements for temperature conversion. We are using the article tag since this
conversion is meaningful on its own.

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

1. <div id="tmp">

2. <figure>

3. <img src="https://cf-courses-data.s3.us.cloud-object-

storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-

SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/

thermo.png" width="2000px"/>

4. <figcaption>Celsius to Fahrenheit Conversion</figcaption>

5. </figure>

6.

7. <article>

8. <!-- This contains the specific elements for temperature

conversion-->

9.
10. </article>

11. </div>
Copied!
6. Add fieldset and legend tags inside the article to group the fields pertaining to
temperature conversion.

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

1. <article>

2. <!-- This contains the specific elements for temperature conversion

-->

3. <fieldset>

4. <legend>Temperature</legend>

5.

6. <!-- The fields and button for temperature input will come here -->

7.

8. </fieldset>

9. </article>
Copied!
7. Add labels and input fields, within the fieldset tag, for the temperature input (in
Celsius) and output (in Fahrenheit). Use the number input type for both these
fields.

1. 1

2. 2

3. 3

4. 4

5. 5
6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

1. <fieldset>

2. <legend>Temperature</legend>

3. <!-- Label for Temperature input -->

4. <label for="Temperature">Celsius</label> <br/>

5.

6. <input type="number" id="c"> <br/>

7.

8. <!-- Label for Temperature output -->

9. <input type="number" id="f"> <br/>

10.

11. <label for="Temperature">Fahrenheit</label>

12. </fieldset>
Copied!
The input field uses the type attribute for specifiyng the input type (e.g. text,
number, etc.). The label tag is used to identify to a user the type of input
they should be providing, which is also specified in the id of the input tag.
8. Insert a “Convert” button between the input and output fields.

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8
9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

1. <fieldset>

2. <legend>Temperature</legend>

3. <!-- Label for Temperature input -->

4. <label for="Temperature">Celsius</label> <br/>

5.

6. <input type="number" id="c"> <br/>

7.

8. <!-- The conversion button -->

9. <button id="temperature"> Convert </button> <br/>

10.

11. <!-- Label for Temperature output -->

12. <input type="number" id="f"> <br/>

13.

14. <label for="Temperature">Fahrenheit</label>

15. </fieldset>
Copied!
9. Add an aside tag after the article to teach a user how to do this calculation
themselves.

1. 1

2. 2

3. 3

1. <aside>

2. To convert celsuis to fahrenheit yourself, use this formula replacing

the `C` with your temperature in celsuis: (C × 9/5) + 32

3. </aside>
Task 3: Weight (Kilograms to
Pounds) Conversion
1. After the temperature section in the all-conversion-sections container,
add another section tag and set its id attribute to weight . Within this new
section, insert the following:
1. A div tag with its `id` set to `wgt`
2. A figure tag to represent the heading, having `img` and `figcaption` tags within
it
i. Set the image source URL to be: "https://cf-courses-data.s3.us.cloud-
object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-
SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/
images/weight.png"
ii. Set the width of the image to be 200px
iii. Set the caption to be "Kilograms to Pounds Conversion"
2. Inside the <div id="wgt"> tag, add the following tags:
 Figure (with img and figcaption)
 Article
 Fieldset
 Legend (set to "Weight")
 Input and output labels being Kilograms and Pounds respectively
 Aside (with the calculation "kg x 2.205")
The structure and rest of the tags should be the same as in the tmp div tag.
3. The section id="weight" tag should resemble the following:

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12
13. 13

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19

20. 20

21. 21

22. 22

23. 23

24. 24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

1. <section id="weight">

2. <!-- Weight conversion section -->2024-06-19 14:10:08 Wednesday

3. <div id="wgt">

4. <figure>

5. <img src="https://cf-courses-data.s3.us.cloud-object-

storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-

SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/

weight.png" width="200px"/>

6. <figcaption>Kilogram to Pound Conversion</figcaption>

7. </figure>
8.

9. <article>

10. <!-- This contains the specific elements for weight

conversion -->

11. <fieldset>

12. <legend>Weight</legend>

13. <!-- Label for Weight input -->

14. <label for="Weight">Kilograms</label> <br/>

15.

16. <input type="number" id="kg"> <br/>

17.

18. <!-- The conversion button -->

19. <button id="weight"> Convert </button> <br/>

20.

21. <!-- Label for Weight output -->

22. <input type="number" id="lbs"> <br/>

23.

24. <label for="Weight">Pounds</label>

25. </fieldset>

26. </article>

27.

28. <aside>

29. To convert kilograms to pounds yourself, use this formula

replacing the `kg` with your weight in kilograms: kg x 2.205

30. </aside>

31. </div>

32. </section>
Copied!
4. View your application using the Live Server extension. It should render like this:
Previous

Task 4: Distance (Kilometers


to Miles) Conversion
1. Add another section, after the weight section, and set its id attribute
to distance . Within this new section, insert the following:
 A div tag with its `id` set to `dst`
 A figure tag to represent the heading, having `img` and `figcaption` tags within
it
o Set the image source URL to be: "https://cf-courses-data.s3.us.cloud-
object-storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-
SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/
images/speedo.png"
o Set the width of the image to be 200px
o Set the caption to be "Kilometer to Mile Conversion"

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

1. <section id="distance">

2. <!-- Distance conversion section -->

3. <div id="dst">

4. <figure>

5. <img src="https://cf-courses-data.s3.us.cloud-object-

storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-

SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/

speedo.png" width="200px"/>
6. <figcaption>Kilometer to Mile Conversion</figcaption>

7. </figure>

8.

9. </div>

10. </section>
Copied!
2. Inside the <div id="dst"> tag, add the following tags:
 Article
 Fieldset
 Legend (set to "Distance")
 Input and output labels being Kilometers and Miles respectively
 Aside (with the calculation "km ÷ 1.609")
The structure and rest of the tags should be the same as in the tmp and wgt div tag
3. The section id="distance" tag should resemble the following:

1. 1

2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19
20. 20

21. 21

22. 22

23. 23

24. 24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

1. <section id="distance">

2. <!-- Distance conversion section -->

3. <div id="dst">

4. <figure>

5. <img src="https://cf-courses-data.s3.us.cloud-object-

storage.appdomain.cloud/IBMDeveloperSkillsNetwork-CD0101EN-

SkillsNetwork/labs/Theia%20Labs/02%20-%20HTML5%20Elements/images/

speedo.png" width="200px"/>

6. <figcaption>Kilometer to Mile Conversion</figcaption>

7. </figure>

8.

9. <article>

10. <!-- This contains the specific elements for distance

conversion -->

11. <fieldset>

12. <legend>Distance</legend>

13. <!-- Label for Distance input -->


14. <label for="Distance">Kilometers</label> <br/>

15.

16. <input type="number" id="km"> <br/>

17.

18. <!-- The conversion button -->

19. <button id="distance"> Convert </button> <br/>

20.

21. <!-- Label for Distance output -->

22. <input type="number" id="m"> <br/>

23.

24. <label for="Distance">Miles</label>

25. </fieldset>

26. </article>

27.

28. <aside>

29. To convert kilometers to miles yourself, use this formula

replacing the `km` with your distance in kilometers: km &divide; 1.609

30. </aside>

31. </div>

32. </section>
Copied!
4. View your application using the Live Server extension. It should render like this:
This completes all conversion calculators within the
body tag.
Previous

Additional HTML Elements:


HTML and <fieldset> <legend>
Estimated time needed: 35 minutes

Special HTML Elements


In this section, you will explore two tags found within the <form> tag, namely
the <fieldset> and <legend> tags.

Objectives
After completing this reading section, you will be able to:

1. Use the <fieldset> tag appropriately in HTML pages


2. Use the <legend> tag to decorate your fieldset

HTML fieldset tag


 The HTML <fieldset> tag is found within the <form> tag and is used to group
related elements in an HTML form, often by enclosing them within a box.
 There is no restriction to the kind of elements that can be inside a fieldset, but
they are mostly used to group related input type of elements, as shown in the
example below.
 The fieldset element is especially useful in large forms, where readability and
ease of access can be improved with segmentation. Browsers will most likely
render a frame around the grouped controls.

Syntax
<fieldset> Contents… </fieldset>

Attributes
1. disabled: It specifies that the elements belonging to the fieldset should be
disabled.
2. form: It specifies the id of the form that the fieldset is to be considered a part of.
3. name: It specifies the name for the fieldset.

Example
In the first example we will create a form with two fieldsets separating personal and
professional details:

1. 1

2. 2

3. 3

4. 4

5. 5
6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19

20. 20

21. 21

22. 22

23. 23

24. 24

25. 25

26. 26
27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33

34. 34

1. <!DOCTYPE html>

2. <html>

3. <body>

4. <h1>The fieldset element</h1>

5.

6. <form>

7. <fieldset name="personal_details">

8. <label for="fname">First name:</label>

9. <input type="text" id="fname" name="fname"><br>

10. <label for="lname">Last name:</label>

11. <input type="text" id="lname" name="lname"><br>

12. <label for="email">Email:</label>

13. <input type="email" id="email" name="email"><br>

14. <label for="phone">Phone Number:</label>

15. <input type="tel" id="phone" name="phone"><br>

16. </fieldset>

17.

18. <br>

19.

20. <fieldset name="professional_details">

21. <label for="occupation">Occupation:</label>


22. <input type="text" id="occupation"

name="occupation"><br>

23. <label for="company">Company:</label>

24. <input type="text" id="company" name="company"><br>

25. <label for="start">Start Date:</label>

26. <input type="date" id="start" name="start"><br>

27. <label for="end">End Date:</label>

28. <input type="date" id="end" name="end"><br>

29. </fieldset>

30. <br>

31. <input type="submit" value="Submit">

32. </form>

33. </body>

34. </html>
Copied!

Output
HTML legend tag
A fieldset can additionally have a title or name, which can be provided by legend.
The <legend> tag is used with the <fieldset> element as a first child (the first inner
tag) to define the caption for the grouped related fields
By using the <legend> tag with <fieldset> elements, it is easy to understand the
purpose of grouped form elements.

Example
To understand the <legend> tag, let’s add this tag to the above example and see the
output:

1. 1
2. 2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19

20. 20

21. 21

22. 22
23. 23

24. 24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33

34. 34

35. 35

36. 36

37. 37

38. 38

1. <!DOCTYPE html>

2. <html>

3. <body>

4. <h1>The fieldset element</h1>

5.

6. <form>

7. <fieldset name="personal_details">

8. <legend>Personal Details</legend>

9.

10. <label for="fname">First name:</label>

11. <input type="text" id="fname" name="fname"><br>

12. <label for="lname">Last name:</label>

13. <input type="text" id="lname" name="lname"><br>

14. <label for="email">Email:</label>


15. <input type="email" id="email" name="email"><br>

16. <label for="phone">Phone Number:</label>

17. <input type="tel" id="phone" name="phone"><br>

18. </fieldset>

19.

20. <br>

21.

22. <fieldset name="professional_details">

23. <legend>Professional Details</legend>

24.

25. <label for="occupation">Occupation:</label>

26. <input type="text" id="occupation"

name="occupation"><br>

27. <label for="company">Company:</label>

28. <input type="text" id="company" name="company"><br>

29. <label for="start">Start Date:</label>

30. <input type="date" id="start" name="start"><br>

31. <label for="end">End Date:</label>

32. <input type="date" id="end" name="end"><br>

33. </fieldset>

34. <br>

35. <input type="submit" value="Submit">

36. </form>

37. </body>

38. </html>
Copied!

Output
Congratulations! You have completed the
exercise.

HTML and HTML5 Elements


Cheat Sheet
Element Description

All HTML documents must start with this declaration. It tells the br
<!DOCTYPE html> what document type to expect. Note that this element has no end
tag.
This tag, called an "anchor tag" creates hyperlinks using the href
<a href= "path"> attribute. In place of path enter the URL or path name to the page
want to link to.

Identifies a self-contained piece of content that could be distribute


other websites and platforms as a stand- alone unit. Similar to <d
<article>
tag in that it does not render as anything special in the browser u
it is styled with CSS.

Defines some content aside from the content it is placed in. Simila
<aside> <div> tag in that it does not render as anything special in the bro
unless it is styled with CSS.

<body> Contains the contents of the HTML document. It should contain all
tags besides the <head> element to display the body of the docu
Often used to separate sections in the body of a document in orde
<div>
style that content with CSS.

<fieldset> Groups related elements in a form and puts a box around them.
<figcaption> Used in conjunction with the <figure> tag to mark up an image.

<figure> Used to mark up an image in conjunction with the <figcaption> ta


Contains a footer of a document and often contains information su
<footer>
authoring, copyright info, contact info, sitemap, and related docum

<form> Creates an HTML form for user input.


<h1> Adds a level 1 heading to the HTML document.

Contains metadata and should be placed after the <html> tag an


<head>
before the <body> tag.

<header> A container for introductory content such as heading elements, lo


authoring information.
The root element of an HTML document. All other tags in the docu
<html>
should be contained in this tag.

<img src="path" This tag is used to place an img. In place of path insert a URL or a
width="dim1" relative file path to the image location. Other optional attributes in
height="dim2"> width and height of the image in pixels.
Specifies an input field on a form with the type attribute. Common
types include: "color," "date," "datetime- local," "email," "number,
<input type="?">
"range," "search," "url," "tel," "datalist," "select," "text," "option,"
"placeholder."

<li> Element that creates bulleted line items in an ordered or unordere


Should be used in conjunction with the <ul> or <ol> tags.
<link> Used to link a CSS document to an HTML document.

<meta> Used to provide metadata about the HTML document.

<nav> Used to define a set of navigational elements.


Element that creates an ordered list using numbers. Should be us
<ol>
conjunction with the <li> tag.

This tag is used to identify a paragraph. It places a line break afte


<p>
text it is enclosed in.

<script> Used to embed Javascript in an HTML document.


Defines an important section of a document. Can be used within
<section>
headers and footers as well.

<style> Used to apply simple CSS to an HTML document.


<table> This tag is used to denote a table. Should be used with <tr> (defin
table row) and <td> (defines a table cell within a row) tags. The <
tag can also be used to define the table header row.
<td> Denotes a cell within a row, within a table.
<th> Denotes the header cells within a row within a table.
Defines the title of the HTML document displayed in the browser's
<title> bar and tabs. It is required in all HTML documents. It should be
contained in the <head> tag.

<tr> Denotes a row within a table.


Element that creates an unordered list using bullets. Should be us
<ul>
conjunction with the <li> tag.
1. <!DOCTYPE html>

2. <html>

3. <head>

4. <title>Solar System</title>

5. </head>

6. <body>

7. <h1>Solar System</h1>

8. <img

src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Planets2013.sv

g" alt="Solar System image" height= "250px" width="700px">

9. <p>The solar system consists of the sun and everything that

orbits the sun. This includes the eight planets and their moons, the

dwarf planets, asteroids, comets and other small objects.

10. </p>

11.

12. <p> All the planets and dwarf planets, the rocky

asteroids, and the icy bodies in the Kuiper belt move around the Sun in

elliptical orbits in the same direction that the Sun rotates. This

motion is termed prograde, or direct, motion.

13. </p>

14. <p><strong><u> Planets in the solar system: </u></strong>

</p>

15. <table>

16. <tr>

17. <th>No. </th>

18. <th>Planet Name </th>

19. <th>Distance from Sun (in million km)</th>

20. </tr>

21. <tr>

22. <td>1 </td> <td>Mercury</td> <td>57.91 m km</td>


23. </tr>

24. <tr>

25. <td>2 </td> <td>Venus</td> <td>108.2 m km</td>

26. </tr>

27. <tr>

28. <td>3 </td> <td>Earth</td> <td>149.6 m km</td>

29. </tr>

30. <tr>

31. <td>4 </td> <td>Mars</td> <td>227.9 m km</td>

32. </tr>

33. <tr>

34. <td>5 </td> <td>Jupiter</td> <td>778.5 m km</td>

35. </tr>

36. <tr>

37. <td>6 </td> <td>Saturn</td> <td>1.434 b km</td>

38. </tr>

39. <tr>

40. <td>7 </td> <td>Uranus</td> <td>2.871 b km</td>

41. </tr>

42. <tr>

43. <td>8</td> <td>Neptune</td> <td>4.495 billion

km</td>

44. </tr>

45. </table>

46. </body>

47. </html>

You might also like