html

Text and Image

We will learn common text and image related to HTML Tags.

Paragraph <p>
Anchor element <a>
Image <img />
List <ul><ol><li>
Button <button>

Paragraph <p>

<p> is used for paragraph in HTML. Paragraph tag <p> is a paired tag means we need to also close tag by writing </p> at the end of the paragraph.

<p> tag automatically adds spacing before and after the paragraph. Also, it is case insensitive, whatever written inside <p> tag will be rendered as it is in the original case. If we have multiple lines inside paragraph we need to insert <br> tag otherwise it will render as a single line.

<p> tag accepts align attributes. Align attributes helps in aligning text inside the p tag. Acceptable values for the align property are the centre, left and right. Check codelab for example.

Anchor element <a>

Anchor element accepts value in "href" attribute and creates a hyperlink to webpage, email, phone, file or location. Anchor tag accepts the following main attributes.

download: To mark a link to download instead of navigation

href: This contains URL, email or tel details.

target: Inform browser where to display navigation content.

Image <img />

This element embeds image in a webpage. In the src attribute, this element accepts a link to the image. This is unpaired HTML tag so no required to close tag.

Following attributes are mainly used with this HTML element.

alt: attribute of the image is displayed if the image is not loaded

height: height of the image

src: URL of the source of the image

width: width of the image

List <ul><ol><li>

There are two types of lists available in HTML.

Unordered List (<ul>)
Ordered List (<ol>)

Both are followed by list items (<li>).

In the unordered list, points are represented with bullet or symbol. In the ordered list, all points are dynamically given an increasing number instead of the bullet. You can use css to customize bullet and numbers.

Common attributes for <ul>

type: This sets bullet style of the list. Available options are circle, disk and square.

Common attributes for <ol>

type: Indicates format of numbering Available options are "a, A,i,I and 1"

start: This attribute specify the start of counting in the ordered list.

Button <button>

This element defines a clickable button and can be used in forms or anywhere in webpage.

____ is a paragraph tag

<!DOCTYPE html>
        <html>
        <head>
            <title>Text and Images</title>
        </head>
        <body>
            <p> This is First Paragraph. </p>
            <p> This is Second Paragraph .
                This is new line without &lt;br&gt; tag.              
            </p>
            <p> This is Second Paragraph .<br>
                This is new line with &lt;br&gt; tag.              
            </p>
            <p  align="center"> center align</p>
            <p  align="left"> left align</p>
            <p  align="right"> right align</p>
            <hr>
            <a href="https://www.example.com/">External Link</a><br>
            <a href="mailto:nowhere@example.org">Email Link</a><br>
            <a href="tel:+1234567890">Phone Link</a><br>
            <a href="https://www.example.com/" download>Download Link</a><br>
            <hr>
            <img src="https://www.example.com/logo.png"   alt="Our Example Logo">
            <hr>
            <p>Unordered List Examples</p>
            <ul>
                <li>June</li>
                <li>December</li>
                <li>January</li>
                <li>May</li>
                <li>July</li>
            </ul>
            <p>Ordered List Examples</p>
            <ol>
                <li>Monday</li>
                <li>Tuesday</li>
                <li>Wednesday</li> 
                <li>Thursday</li>
                <li>Friday</li>
            </ol>
            <hr>
            <button type="button">Click Here!</button>

        </body>
        </html>