Bold, Italic and Underline


Page sections

1-10 A 1 Discover 1-10 A 2 1-10 A 3 StarfruitJuice09.html 1-10 A 4 1-10 A 5 Discover 1-10 A 6 Rereading the yellow sections 1-10 A 7 StarfruitJuice10.html 1-10 A 8 1-10 B 1 1-10 B 2 VegetablesAndFruits 1-10 B 3 DreamsAndReality 1-10 B 4 Your own HTML file 1-10 Example 1: The bold, italic and underline styles 1-10 Explanation 1: Bold, italic and underline 1-10 Explanation 2: Several styles for a single style-attribute 1-10 Explanation 3: Distance between list items 1-10 Orientation 1: Bold, italic and underline 1-10 Orientation 2: Adjusting practice files' property values 1-10 Submit 1: Study motivation

Workbook pages

1. Settings. Line breaks and paragraphs.

2. Commenting code and checking your StarfruitJuice files

3. Style Terms

4. Headings

5. Fonts and Colors.

6. Simplified HTML structure. Colors.

7. Ordered and unordered lists

8. More List Styles

9. Font Families and Font Sizes

10. Bold, Italic and Underline

11. Tables. Online HTML Editor.

12. Including images in Tables

13. Visual Studio Code. Table Colors.

14. Table Headings and Heights of Table Rows

15. Table Sizes, Borders and Alignments

16. Rice Files

17. Hyperlinks

18. Further studies

1-10 Orientation 1: Bold, italic and underline

The following sections show how to display bold, italic and underlined text.

1-10 A 1 Discover

In the Exercises01 folder, create an HTML file with these elements:

<html>
<body>

<p style="font-weight:bold;">This is bold text.</p>
<p style="font-style:italic;">This is italic text.</p>
<p style="text-decoration:underline;">This is underlined text..</p>

</body>
</html>


Open the file in a browser and explain these styles:

font-weight:bold
font-style:italic
text-decoration:underline





































1-10 Explanation 1: Bold, italic and underline

These styles are used to display bold, italic or underlined text:

font-weight:bold
font-style:italic
text-decoration:underline

1-10 Example 1: The bold, italic and underline styles

The bold, italic and underline styles can be applied in the opening tags of HTML tag pairs such as <h1></h1>, <h2></h2> and so on, the paragraph tag pair: <p></p>, or the span tag pair: <span></span>. The following three examples demonstrate how to apply these styles to the opening tag of the span element:

<span style="font-weight:bold;">This is a little text.</span> This is a little text
<span style="font-style:italic;">This is a little text.</span> This is a little text
<span style="text-decoration:underline;">This is a little text.</span> This is a little text

1-10 Explanation 2: Several styles for a single style-attribute

Bold, italic and underline style declarations can be combined to create a single style attribute.

1-10 A 2

Using the span tag, create an HTML file that shows this content:

HTML pages have been designed with the help of experts , so that they may be written in many different languages, with different characters.

1-10 B 1

Create an HTML file that shows the content below. Use the Verdana type for the text of the last item.

  1. Hello.
  2. Hello.
  3. Hello.
  4. Hello.

1-10 A 3 StarfruitJuice09.html

  1. within the StarfruitJuiceFiles folder, create a copy of the StarfruitJuice08.html file
  2. rename the copy of the StarfruitJuice08.html file to StarfruitJuice09.html

At this point you have 2 identical files, named StarfruitJuice08.html and StarfruitJuice09.html.

  1. modify StarfruitJuice09.html, so it looks exactly like this.
  2. save StarfruitJuice09.html

1-10 A 4

Using these styles:

  • font-family:Arial
  • font-size:115%
  • list-style-type:lower-alpha

    • create an HTML file that shows the list below:
    1. peanuts
    2. almonds
    3. hazelnuts

    1-10 A 5 Discover

    1. within the StarfruitJuiceFiles folder, create a copy of the file for the previous exercise
    2. save the copy with the name of this exercise
    3. update the code as shown below:

    <html>
    <body>

    <ol style="font-family:Arial;font-size:115%;list-style-type:lower-alpha;">
            <li style="margin-bottom:10px;">peanuts</li>
            <li style="margin-bottom:10px;">almonds</li>
            <li>hazelnuts</li>
    </ol>

    </body>
    </html>

    1. open the HTML file in a browser
    Explain the margin-bottom:10px; style declaration here:




































    1-10 Explanation 3: Distance between list items

    With n being the number of pixels, the margin-bottom:npx style declaration can be used to set the distance between list items:

    <li style="margin-bottom:npx;">List item 1</li>

    1-10 Orientation 2: Adjusting practice files' property values

    For the next three exercises, modify the latest HTML files from previous exercises according to the instructions provided. Adjust the property values for the color, font-size, font-family, font-weight, font-style, and text-decoration properties to style the text. You can add extra text.

    1-10 B 2 VegetablesAndFruits

    Modify the VegetablesAndFruits file by adjusting the property values for the color, font-size, font-family, font-weight, font-style, and text-decoration properties.

    1-10 B 3 DreamsAndReality

    Modify the DreamsAndReality file by adjusting the property values for the color, font-size, font-family, font-weight, font-style, and text-decoration properties.

    1-10 B 4 Your own HTML file

    Modify your own HTML files by adjusting the property values for the color, font-size, font-family, font-weight, font-style and text-decoration properties.

    1-10 A 6 Rereading the yellow sections

    Now that you have gone through the exercises on this page, reread the yellow sections.

    1-10 A 7 StarfruitJuice10.html

    1. within the StarfruitJuiceFiles folder, create a copy of the StarfruitJuice09.html file
    2. rename the copy of the StarfruitJuice09.html file to StarfruitJuice10.html

    At this point you have 2 identical files, named StarfruitJuice09.html and StarfruitJuice10.html. To modify StarfruitJuice10.html to make it look like this, apply these styles:

    1. place the Ingredients title in the middle and apply these styles:
      • font-size:150%
      • font-family: Times New Roman
    1. apply these styles for the list:
      • font-family:Arial
      • font-size:115%
      • list-style-type:lower-alpha
    1. save StarfruitJuice10.html

    1-10 A 8

    What might be the reason for not including a specific style in the code of the last list item of the Ingredients list of StarfruitJuice10.html?

    1-10 Submit 1: Study motivation

    Click here.

    This page was created by Hanspeter Amend
    Previous page   Table of contents

    Solution proposals

     

    1-10 A 2

    <html>
    <body>

    <span style="font-weight:bold;text-decoration:underline;">HTML pages</span> have been designed <span style="font-style:italic;text-decoration:underline;">with the help of experts</span>, so that they may be written in many <span style="font-style:italic;font-weight:bold;text-decoration:underline;">different languages</span>, with <span style="font-style:italic;font-weight:bold;text-decoration:underline;">different characters</span>.

    </body>
    </html>



     

    1-10 B 1

    <html>
    <body>

    <ol style="list-style-type:lower-roman;">
            <li style="font-size:100%;">Hello.</li>
            <li style="font-size:130%;font-style:italic;">Hello.</li>
            <li style="font-size:130%;font-style:italic;text-decoration:underline;">Hello.</li>
            <li style="font-family:Verdana;font-size:150%;font-style:italic;text-decoration:underline;font-weight:bold;">Hello.</li>
    </ol>

    </body>
    </html>



     

    1-10 A 3

    <html>

    <!- - Set style attribute for the color style of the page background. - ->
    <body style= "background-color:lightblue;">

    <!– – Title: Set style attribute for text style. – –>
    <h1 style= "text-align:center;color:blue;">About the Star Fruit</h1>

    <!– – Line break – –>
    The starfruit, also called carambola, is a sweet and sour fruit that is in the shape of a five-point star.<br>
    The skin is edible and the flesh has a mild, sour flavor that makes it popular in a number of dishes.

    <!– – Paragraph – –>
    <p>The starfruit is yellow or green in color. It comes in two main types: a smaller, sour variety and a larger, sweeter one.</p>

    <!– – Set heading – –>
    <h1>Starfruit Juice Recipe</h1>

    <!– – Set style attribute for font styles. – –>
    <p style= "text-align:left;font-weight:bold;text-decoration:underline;font-family:Courier;font-size:150%;">Starfruit Healing Properties</p>

    <!– – Set style attribute for list style and font styles. – –>
    <ul style="list-style-type:circle;font-size:110%;font-family:Verdana;">
             <li>low calories</li>
             <li>supports metabolism</li>
    </ul>
    </body>

    </html>



     

    1-10 A 4

    <html>
    <body>

    <ol style="font-family:Arial;font-size:115%;list-style-type:lower-alpha;">
            <li>peanuts</li>
            <li>almonds</li>
            <li>hazelnuts</li>
    </ol>

    </body>
    </html>



     

    1-10 A 7

    <html>

    <!- - Set style attribute for the color style of the page background. - ->
    <body style= "background-color:lightblue;">

    <!- - Title: Set style attribute for text style. - ->
    <h1 style= "text-align:center;color:blue;">About the Star Fruit</h1>

    <!- - Line break - ->
    The starfruit, also called carambola, is a sweet and sour fruit that is in the shape of a five-point star.<br>
    The skin is edible and the flesh has a mild, sour flavor that makes it popular in a number of dishes.

    <!- - Paragraph - ->
    <p>The starfruit is yellow or green in color. It comes in two main types: a smaller, sour variety and a larger, sweeter one.</p>

    <!- - Set heading - ->
    <h1>Starfruit Juice Recipe</h1>

    <!- - Set style attribute for font styles. - ->
                                 <p style= "text-align:left;font-weight:bold;text-decoration:underline;font-family:Courier;font-size:150%;">Starfruit Healing Properties</p>

    <!- - Set style attribute for list style and font styles. - ->
    <ul style="list-style-type:circle;font-size:110%;font-family:Verdana;">
             <li>low calories</li>
             <li>supports metabolism</li>
    </ul>

    <!- - Set style attribute for the second title. - ->
    <p style="text-align:center;font-size:150%;font-family:'Times New Roman';">Ingredients</p>

    <!- - Ordered list. Set style attributes for font styles and for spacing style between list items.- ->
    <ol style="font-family:Arial;font-size:115%;list-style-type:lower-alpha;">
             <li style="margin-bottom:6px;">3 starfruits</li>
             <li style="margin-bottom:6px;">1 cup of water</li>
             <li style="margin-bottom:6px;">1 cilantro leaf</li>
             <li style="margin-bottom:6px;">3 mint leaves</li>
             <li style="margin-bottom:6px;">2 cups of water</li>
             <li>some cinnamon</li>
    </ol>
    </body>

    <html>



     

    1-10 A 8

    In this list, the margin-bottom property defines the distance between the list items. There is no need to define a distance after the last list item, as it doesn't affect the overall appearance of the list. Omitting this extra margin helps maintain a clean and concise look, ensuring that the list appears visually balanced without unnecessary spacing.

    This page was created by Hanspeter Amend Previous page   Table of contents