Saturday, September 23, 2023

HTML Colors

                                       HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(186, 41%, 48%);">This is a heading</h1>
<p style="background-color:hsl(129, 100%, 64%);">This is a paragraph.</p>

</body>
</html>

A new webpage opens as shown below:

Text Color

You can also set the color of text:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:hsl(337, 100%, 50%);">This is a heading</h1>
<p style="color:hsl(212, 100%, 50%);">This is a paragraph.</p>

</body>
</html>

A new webpage opens with text coloured as shown below:

Border Color

You can set the color of borders:

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>

A new webpage opens with coloured borders around the text as shown below:

at No comments:

Friday, September 22, 2023

HTML Comments

                             HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

The exclamatory mark is in the begining and it is not at the end.

Note: Comments are not displayed by the browser, but they can help document your HTML source code.

Add Comments

With comments you can place notifications and reminders in your HTML code:

Example

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

Note: comments are not diplayed in the browser

Hide Content

Comments can be used to hide content.

This can be helpful if you hide content temporarily:

Example

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
<!--This is another paragraph-->
<p>Hii</p>

</body>
</html>

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

Example

Hide a part of a paragraph:

<!DOCTYPE html>
<html>
<body>
<!--hiding content inside a paragraph-->
<p>This <!-- great text --> is a paragraph.</p>
<p>Hii</p>

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

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:
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...