Introduction to web technology session 6

(Section 1 Section 2 Section 3 Section 4 Section 5)

Element-specific attributes

These attributes are used with specific HTML elements to provide essential functionality.

<a> (Anchor) tag:

href: Specifies the URL of the page the link goes to.

target: Defines where to open the linked document (e.g., in a new tab with _blank).

<img> (Image) tag:

src: Specifies the path to the image file.

alt: Provides alternative text for an image, which is important for accessibility and SEO.

width and height: Sets the dimensions of an image in pixels.

<form> (Form) tag:

action: Defines where to send the form data when a form is submitted.

method: Specifies the HTTP method for sending form data (get or post).

<input> (Input) tag:

type: Defines the type of input control, such as text, submit, or radio.

placeholder: Provides a hint to the user about the expected input.

<meta> (Metadata) tag:

charset: Specifies the character encoding for the document, such as UTF-8. 

UTF-8 (Unicode Transformation Format - 8-bit) in HTML refers to a character encoding standard that allows web browsers to correctly display a wide range of characters from various languages and symbols. It is the most common character encoding used on the World Wide Web. The first 128 UTF-8 characters directly correspond to the ASCII character set. (American Standard Code for Information InterchangeIt uses 7 bits to represent 128 characters,)

 

<a> (Anchor) tag:

href

target

<img> (Image) tag:

src

alt

width and height

<form> (Form) tag:

action

method

<input> (Input) tag:

type:

placeholder

<meta> (Metadata) tag:

charset

 

Key characteristics of HTML attributes:

Location:

Attributes are always specified within the opening tag of an HTML element.

Syntax:

They typically come in name/value pairs, formatted as name="value". The value is enclosed in quotation marks.

Syntax of HTML Attributes:

Attributes generally follow a name-value pair structure, separated by an equals sign (=), and the value is enclosed in quotation marks (either single or double quotes).

Code

<element attribute-name="attribute-value">Content</element>

Key Components:

element: The name of the HTML element (tag) (e.g., img, a, div, p).

attribute-name: The specific name of the attribute (e.g., src, href, class, id, style). These names are predefined by the HTML specification.

attribute-value: The data or setting associated with the attribute. This value provides the specific information or configuration for that attribute.

Examples:

<h1 title="First program">SGRCM COLLEGE</h1>

<p title="Geeks for Geeks: A computer science portal for geeks">Geeks for Geeks.org </p>

src attribute for <img>: Specifies the source URL of an image.

Purpose:

Attributes modify the default functionality of an element or provide essential information for its proper rendering or interaction.

Scope:

Some attributes are specific to certain HTML elements (e.g., src for <img>, href for <a>), while others are global attributes that can be applied to most HTML elements (e.g., id, class, style).

Optionality:

While many attributes are optional, some are crucial for an element to function as intended (e.g., src for <img> to display an image).

Boolean Attributes:

Some attributes do not require a value; their mere presence in the opening tag indicates a true state (e.g., disabled for an input field). 

The href Attribute

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

Example

<a href="https://www.w3schools.com">Visit W3Schools</a>

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

<img src="img_girl.jpg">

 

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page.

Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain.

Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

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

<img src="img_girl.jpg" width="500" height="600">

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

<img src="img_girl.jpg" alt="Girl with a jacket">

Example

See what happens if we try to display an image that does not exist:

<img src="img_typo.jpg" alt="Girl with a jacket">

The style Attribute

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

Example

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

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.

 

 

 

The following example specifies English as the language and United States as the country:

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

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

<p title="I'm a tooltip">This is a paragraph.</p>

We Suggest: Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.

The title attribute (and all other attributes) can be written with uppercase or lowercase like title or TITLE.

However, W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.

At W3Schools we always use lowercase attribute names.

We Suggest: Always Quote Attribute Values

The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.

W3C, or the World Wide Web Consortium, is the primary international standards organization for the World Wide Web, founded by Tim Berners-Lee in 1994 to develop web standards, promote interoperability, and lead the web to its full potential.

Good:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bad:

<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

Sometimes you have to use quotes. This example will not display the title attribute correctly, because it contains a space:

Example

<p title=Description of W3Schools>

 At W3Schools we always use quotes around attribute values.

 

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:

<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">

Chapter Summary

All HTML elements can have attributes

The href attribute of <a> specifies the URL of the page the link goes to

The src attribute of <img> specifies the path to the image to be displayed

The width and height attributes of <img> provide size information for images

The alt attribute of <img> provides an alternate text for an image

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

The lang attribute of the <html> tag declares the language of the Web page

The title attribute defines some extra information about an element

 

Styles

What are styles in HTML?

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

 

What is the style element in XHTML?

The style element allows an author to put style sheet rules in the head of the document. XHTML permits any number of style elements in the head section of a document. The syntax of style data depends on the style sheet language. Rules for style rule precedences and inheritance depend on the style sheet language.

 

XHTML primarily utilizes Cascading Style Sheets (CSS) for styling, offering flexible and powerful methods to control the presentation of documents. 

Three main approaches exist for applying styles in XHTML:

External Style Sheets: This is the recommended and most common method. Styles are defined in a separate. css file and linked to the XHTML document using the <link> element within the <head> section. This approach promotes separation of concerns, reusability across multiple pages, and easier maintenance.

Code

    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>

Embedded (Internal) Style Sheets: Styles are defined directly within the XHTML document, inside a <style> element placed within the <head> section. This is suitable for styles specific to a single document.

Code

    <head>
        <style type="text/css">
            p {
                color: blue;
                font-size: 14px;
            }
        </style>
    </head>

Inline Styles: Styles are applied directly to individual XHTML elements using the style attribute. While convenient for quick, localized styling, this method is generally discouraged for larger projects as it mixes content and presentation, making maintenance more complex.

Code

    <p style="color: red; font-weight: bold;">This text is red and bold.</p>

Physical Style Tags:

XHTML also includes a set of physical style tags inherited from HTML, which apply specific, immediate styling to text. These include:

<b>: Bold text

<i>: Italic text

<tt>: Teletype (monospaced) text

<u>: Underlined text

<strike> or <s>: Strikethrough text

<big>: Larger text

<small>: Smaller text

<sup>: Superscript text

<sub>: Subscript text

While these tags provide basic styling, using CSS for more comprehensive and maintainable styling is generally preferred.

 (Section 1 Section 2 Section 3 Section 4 Section 5)

Introduction to web technology session 5

 (Section 1 Section 2 Section 3 Section 4 Section 6 )

Boolean attributes

Boolean attributes don't require a value. Their presence on an element implies a "true" value, while their absence implies "false". 

disabled: Renders a form element unusable and unclickable.

required: Specifies that a form element must be filled out before submitting.

checked: Indicates that a checkbox or radio button should be pre-selected on page load.

readonly: Specifies that an input field is read-only and cannot be modified.  

Disabled attributes

The disabled attribute is a boolean HTML attribute that deactivates an element, making it unclickable and unresponsive to user interaction. It can be applied to elements like <button>, <input>, <select>, and <textarea> to prevent them from being focused, edited, or submitted with form data. When present, the element is typically styled differently (e.g., grayed out) to visually signal its inactive state.  

Syntax:  

<tag disabled></tag>

Example:

<!DOCTYPE html>

<html>

<head>

    <title>HTML disabled Attribute</title>

</head>

<body style="text-align:center">

    <h1 style="color: green;">SGRCM DEGREE COLLEGE BALLARI</h1>

    <h2>HTML disabled Attribute</h2>

    <!--A disabled button-->

    <button type="button" disabled>Click Me!</button>

</body>

</html> 

Output 

"Click Me!" button unclickable and visually indicating it is disabled. 

required  attributes

A required attribute is a characteristic or data field that must have a value for a record or form to be complete. In web development, the HTML required attribute, for example, prevents form submission until the user provides a value for a mandatory input field.

Purpose: 

The required attribute is a boolean attribute used on form elements (like <input>, <select>, and <textarea>) to specify that the field must be filled out before the form can be submitted. 

How it works: 

When a user tries to submit a form with a blank required field, the browser will display a validation message prompting them to enter a value. 

Supported Input Types: 

It works with various input types, including text, email, number, checkbox, radio, and file. 

Syntax

<input required> 

Example

<!DOCTYPE html>

<html>

<body> 

<h1>The input required attribute</h1> 

<form action="/action_page.php">

  <label for="username">Username:</label>

  <input type="text" id="username" name="username" required>

  <input type="submit">

</form>

</body>

</html> 

Output 

checked  attributes

The HTML checked attribute is a boolean attribute for <input> elements of type "checkbox" or "radio", specifying that the element should be pre-selected when a page loads. When present, it makes the checkbox or radio button appear checked, and it can also be controlled dynamically using JavaScript to toggle its state after the page has loaded. 

How it works:

·         Boolean Attribute: 

The checked attribute is a boolean attribute, meaning its presence indicates "true" (the item is checked), and its absence indicates "false" (the item is unchecked). 

·         Initial State: 

It sets the default or initial state of a checkbox or radio button when a user first views the page. 

·         Toggling: 

Users can click the element to check or uncheck it, toggling its state. 

Syntax

<input checked>

<input type = "checkbox|radio" checked>

Example

<!DOCTYPE html>

<html>

<body> 

<h1>The input checked attribute</h1> 

<form action="/action_page.php" method="get">

  <input type="checkbox" name="vehicle1" value="Bike">

  <label for="vehicle1"> I have a bike</label><br>

  <input type="checkbox" name="vehicle2" value="Car">

  <label for="vehicle2"> I have a car</label><br>

  <input type="checkbox" name="vehicle3" value="Boat" checked>

  <label for="vehicle3"> I have a boat</label><br><br>

  <input type="submit" value="Submit">

</form> 

</body>

</html>

Output

Example to show radio button

<!DOCTYPE html>

<html> 

<head>

    <title>HTML checked Attribute</title>

</head> 

<body style="text-align: center;">

    <h1 style="color: green;">GeeksforGeeks</h1>

    <h2>HTML checked Attribute</h2>

    <form>

        <!-- Below input elements have attribute "checked" -->

        <input type="radio"

               name="check"

               value="1" checked>

        Selected by default<br>

        <input type="radio"

               name="check"

               value="2">

        Not selected by default<br>

    </form>

</body> 

</html>

Output

readonly  attributes

The readonly attribute is a boolean attribute.

When present, it specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the readonly value, and make the input field editable.

Note: A form will still submit an input field that is readonly, but will not submit an input field that is disabled!

SYNTAX

1<title>readonly attribute</title>

2 <form>

  <label>Name:</label>

  <input type="text" value="John Doe" readonly>

</form> 

Example

<!DOCTYPE html>

<html> 

<head>

    <title>readonly attribute</title>

</head> 

<body>

    <h1>SGRCM DEGREE COLLEGE BALLARI</h1>

    <h2>

        readonly attribute in Input Element

    </h2>

    <form action="">

        Email:

        <input type="text" name="email" />

        <br />

        Country:

        <input type="text"

               name="country"

               value="Noida" readonly />

        <br />

        <input type="submit" value="Submit" />

    </form>

</body>

</html>

 (Section 1 Section 2 Section 3 Section 4 Section 6 )