Thursday, September 21, 2023

HTML Text Formatting

                     HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

HTML Formatting Elements

Formatting elements were designed to display special types of text:

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

HTML <small> Element

The HTML <small> element defines smaller text:

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:

<!doctype html>
<html>
    <head>
        <title>Text Formating</title>
    </head>
    <body>
        <p>This is normal text</p>
        <p>This is <b>bold</b> text</p>
        <p>This is<strong>strong</strong></p>
        <p>This is <i>italic</i> text</p>
        <p>This is <u>underlined</u> text</p>
        <p>This is <del>deleted</del> text</p>
        <p>This is <big>big</big> text</p>
        <p>This is <small>small</small> text</p>
        <p>This is <sub>subscript</sub> text</p>
        <p>This is <sup>superscript</sup> text</p>
        <p>This is <tt>monospaced</tt> text</p>
        <p>This is <mark style="background-color:lightgreen">normal text</mark></p>
        <p>This is <mark style="background-color:red">normal text</mark></p>
        <p>This is <mark style="background-color:yellow">normal text</mark></p>
    </body>
</html>
at No comments:

Wednesday, September 20, 2023

HTML Fonts

                                           HTML Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>

Text Size

The CSS font-size property defines the text size for an HTML element:

Example

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:500%;">This is a heading</h1>
<p style="font-size:100%;">This is a paragraph.</p>

</body>
</html>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;"> Heading</h1>
<p style="text-align:center;">paragraph.</p>

</body>
</html>
at No comments:

Tuesday, September 19, 2023

HTML Styles

                                       HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example

A new webpage opens as shown below:

Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to yellow:

Example

Setting background color for two different elements:

A new webpage opens as shown below:

Text Color

The CSS color property defines the text color for an HTML element:

Example

The text color is set according to the colors that have been chosen.

at No comments:

Sunday, September 17, 2023

HTML Paragraphs(2)

                     HTML Paragraphs(2)

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph<br>with line breaks.</p>

</body>
</html>

A new webpage open as below:

The <br> tag is an empty tag, which means that it has no end tag.

The Song Problem

This Song will display on a single line:

Example

<!DOCTYPE html>
<html>
    <head>
        <title> My song lyrics</title>

    </head>

    <body>
        <p>
            We're talking away
            I don't know what I'm to say
            I'll say it anyway
            Today is another day to find you
            Shyin' away
            Oh, I'll be comin' for your love, okay
            
            Take on me
            (Take on me)
            Take me on
            (Take on me)
            I'll be gone
            In a day or two
            
            So needless to say
            I'm odds and ends
            But I'll be stumblin' away
            Slowly learnin' that life is okay
            Say after me
            It's no better to be safe than sorry
            
            Take on me
            (Take on me)
            Take me on
            (Take on me)
            I'll be gone
            In a day or two
            
            All the things that you say, yeah
            Is it life or just to play my worries away?
            You're all the things I've got to remember
            You're shyin' away
            I'll be comin' for you anyway
            
            Take on me
            (Take on me)
            Take me on
            (Take on me)
            I'll be gone
            In a day
            
            (Take on me)
            (Take on me)
            (Take me on)
            (Take on me)
            I'll be gone
            (Take on me)
            In a day
            
            (Take me on)
            (Take on me)
            (Take on me)
            (Take on me)
            (Take me on)
            (Take on me)  
        </p>

    </body>
</html>

A new webpage open as below:

So, to solve this problem we have a solution.

Solution — The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Example

<!DOCTYPE html>
<html>
    <head>
        <title> My song lyrics</title>

    </head>

    <body>
        <pre>
            We're talking away
            I don't know what I'm to say
            I'll say it anyway
            Today is another day to find you
            Shyin' away
            Oh, I'll be comin' for your love, okay
            
            Take on me
            (Take on me)
            Take me on
            (Take on me)
            I'll be gone
            In a day or two
            
            So needless to say
            I'm odds and ends
            But I'll be stumblin' away
            Slowly learnin' that life is okay
            Say after me
            It's no better to be safe than sorry
            
            Take on me
            (Take on me)
            Take me on
            (Take on me)
            I'll be gone
            In a day or two
            
            All the things that you say, yeah
            Is it life or just to play my worries away?
            You're all the things I've got to remember
            You're shyin' away
            I'll be comin' for you anyway
            
            Take on me
            (Take on me)
            Take me on
            (Take on me)
            I'll be gone
            In a day
            
            (Take on me)
            (Take on me)
            (Take me on)
            (Take on me)
            I'll be gone
            (Take on me)
            In a day
            
            (Take me on)
            (Take on me)
            (Take on me)
            (Take on me)
            (Take me on)
            (Take on me)  
        </pre>

    </body>
</html>

A new webpage open as below:

at No comments:
Subscribe to: Posts (Atom)

Building Static Website(part6) HTML Lists

  Building Static Website (part6) HTML Lists Today, let us add some lists to our detailed view section by using html lists. Lists: List is a...

  • Advantages and disadvantages of MySQL
                 MySQL Advantages and                     Disadvantages Advantages: L ike other relational database system, MySQL database serve...
  • HTML Text Formatting
                               HTML Text Formatting HTML contains several elements for defining text with a special meaning. HTML Formatting Ele...
  • HTML Table Colspan & Rowspan
      HTML Table Colspan & Rowspan HTML tables can have cells that span over multiple rows and/or columns. HTML Table — Colspan To make a ce...