Bhavitha Cherukuri

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.

Saturday, September 9, 2023

HTML Elements

HTML Elements

Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained

The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

Example

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

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but it is recommended to use lowercase in HTML, and demands lowercase for stricter document types like XHTML.

Bhavitha Cherukuri

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

Saturday, September 9, 2023

HTML Elements

Nested HTML Elements

Example

Example Explained

Never Skip the End Tag

Example

Empty HTML Elements

Example

HTML is Not Case Sensitive

Building Static Website(part6) HTML Lists

Report Abuse