Bhavitha Cherukuri

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

Wednesday, September 13, 2023

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.

You can see all the language HTML ISO languge Code reference here:

Google Drive: Sign-in

Access Google Drive with a Google account (for personal use) or Google Workspace account (for business use).

drive.google.com

The following example specifies English as the language and India as the country:

<!DOCTYPE html>
<html lang="en-IN">
<body>
...
</body>
</html>

You can see all the language HTML ISO Country Code referencehere:

Google Drive: Sign-in

Access Google Drive with a Google account (for personal use) or Google Workspace account (for business use).

drive.google.com

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example

<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="This is my website">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut voluptas voluptatum ea tempora nisi iusto, facilis laudantium odit aspernatur sunt doloribus delectus aliquid dolorum sequi vel assumenda neque officiis explicabo.</p>

</body>
</html>

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

<!DOCTYPE html>
<html>
<body>

<h2>Single or Double Quotes?</h2>
<p>In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:</p>
<p>Move your mouse over the paragraphs below to see the effect:</p>

<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>

</body>
</html>

Tuesday, September 12, 2023

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

Example

<!DOCTYPE html>
<html>
    <head>
        <title>
            Dog
        </title>
    </head>

    <body>
        <img src="images/dog.jfif"
        height ="200" width="200">
        <h3>woof woof!</h3>
        
    </body>
</html>

This is how a new webpage opens and images are displayed.

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>
            Dog
        </title>
    </head>

    <body>
        <p>The alt attribute should reflect the image content, 
           so users who cannot see the image get an 
           understanding of what the image contains:</p>
        <img src="images/cutedog.gif"
        alt="cute dog" width="200">
        
    </body>
</html>

The style Attribute

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

Example

<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>

<p style="color:red;">This is a red paragraph.</p>

</body>
</html>

Monday, September 11, 2023

HTML Attributes

HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes

All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name=”value”

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example

<!DOCTYPE html>
<html>
    <head>
        <title>
            My website>

        </title>

    </head>
    <body>

        <a href="https://medium.com" 
        target ="_blank"
        title = "Goes to google">
        click me</a>

        <br>

        <a href = "lyrics.html">
        song lyrics
        </a>

        <br>

        <a href="test@fake.com">
        email me
        </a>

        
    </body>


</html>

Webpage opened in browser and it contains 3 hyperlinks. So after clicking on song lyrics, another webpage opens as it is shown below:

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example

<!DOCTYPE html>
<html>
    <head>
        <title>
            Dog
        </title>
    </head>

    <body>

        <h1>This is a cute dog</h1>
        <a href="https://en.wikipedia.org/wiki/Dog">
        <img src="images/dog.jfif"
        alt="This is a picture of a dog"
        height ="200">
        </a>

        <img src = "images/cutedog.gif"
        alt="dog"
        height="200">


        
        <h3>woof woof!</h3>
        
    </body>
</html>

This is how a new webpage opens and it displays the images of cute dog.

Let us continue remaining html attributes in the next medium story.

Bhavitha Cherukuri

Thursday, September 14, 2023

HTML Headings

HTML Headings

Example

Headings Are Important

Bigger Headings

Example

Wednesday, September 13, 2023

HTML Attributes(3)

The lang Attribute

Google Drive: Sign-in

Access Google Drive with a Google account (for personal use) or Google Workspace account (for business use).

Google Drive: Sign-in

Access Google Drive with a Google account (for personal use) or Google Workspace account (for business use).

The title Attribute

Example

Single or Double Quotes?

Tuesday, September 12, 2023

HTML Attributes(2)

The width and height Attributes

Example

The alt Attribute

Example

The style Attribute

Example

Monday, September 11, 2023

HTML Attributes

HTML Attributes

The href Attribute

Example

The src Attribute

Example

Building Static Website(part6) HTML Lists

Report Abuse