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:

Friday, September 15, 2023

HTML Paragraphs

                             HTML Paragraphs

A paragraph always starts in a new line.

HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Example

<!doctype html>
<html>
    <head>
        <title>paragraphs</title>
    </head>
    <body>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. At consectetur ea assumenda doloribus, harum, quasi ab cum, eaque ullam illo provident repellat excepturi a alias commodi vitae quas dolorem dolore!</p>
        
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non harum quasi voluptatem id optio eaque, magni nostrum inventore, sapiente, fugit natus atque consectetur repellat. Voluptas vero earum autem saepe a.</p>
    </body>
</html>

There are two paragraphs and each paragraph is started in a new line as shown below:

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the page is displayed:

Example

<!doctype html>
<html>
    <head>
        <title>paragraphs</title>
    </head>
    <body>
        <p>
            This paragraph
            contains a lot of lines
            in the source code,
            but the browser
            ignores it.
            </p>
            
            <p>
            This paragraph
            contains         a lot of spaces
            in the source         code,
            but the        browser
            ignores it.
            </p>
    </body>
</html>

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

Example

<!DOCTYPE html>
<html>
<body>

<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis expedita commodi fugit explicabo est culpa consequatur eaque minima velit delectus, maiores soluta exercitationem corrupti reiciendis ipsam ex accusantium, odit deserunt!</h1>
<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 3</h2>
<p>This is some other text.</p>

</body>
</html>

at No comments:

Thursday, September 14, 2023

HTML Headings

                                    HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>
            Headings
        </title>
    </head>
    <body>
        <h1>Hii</h1>
        <h2>Hii</h2>
        <h3>Hii</h3>
        <h4>Hii</h4>
        <h5>Hii</h5>
        <h6>Hii</h6>
    </body>
</html

A new webpage opens with different headings as shown below:

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Bigger Headings

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

Example

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