Introduction to web technology Section 4

(Section 1 Section 2 Section 3  Section 5)

HTML attributes

HTML attributes are special words used within the opening tag of an HTML element to provide additional information about that element. They configure and adjust the element's behavior, appearance, or functionality. 

 

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"

 

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

(Section 1 Section 2 Section 3  Section 5)

Introduction to web technology Section 3

(Section 1 Section 2  Section 4 Section 5)

Control the appearance and semantics of text.

Headings: <h1> to <h6> (for different levels of headings)

Paragraphs: <p>

Strong/Emphasis: <strong>, <em>

Lists: <ul> (unordered list), <ol> (ordered list), <li> (list item)

Hyperlink Tag:

Anchor Tag: <a> (used to create hyperlinks to other pages or sections)

Media Tags: Embed multimedia content.

Image: <img> (used to embed images)

Audio: <audio>

Video: `<video>

<audio>: This tag is used to embed (fixing )audio content, such as music or sound effects. It can include attributes like src (source file), controls (to display playback controls), autoplay, and loop.

Who invented html language?

1989: Tim Berners-Lee invents the Web with HTML as its publishing language.

Who invented xhtml language?

XHTML (eXtensible HyperText Markup Language) was developed by the World Wide Web Consortium (W3C). 

It was released in 2000 and was designed as a stricter, XML-based version of HTML, aiming to bring the rigorous syntax rules of XML into web development for improved consistency, compatibility, and data handling.

Who invented html5 language?

HTML5 was first released in a public-facing form on 22 January 2008, with a major update and "W3C Recommendation" status in October 2014. Its goals were to

Web design principles

What are Principles of Design?

The principles of design are basic rules that help make designs look good and work well. They guide how to arrange elements in a design to make it visually appealing and effective.

These rules include balance, contrast, emphasis, movement, pattern, rhythm, and unity. By using these principles, designers can create more attractive and effective designs.

Here are the main principles of design:

Balance: Distributing elements evenly to create a sense of stability.

Contrast: Using differences in color, shape, or size to make elements stand out.

Emphasis: Highlighting the most important parts of a design.

Movement: Guiding the viewer's eye through the design in a specific way.

Pattern: Repeating elements to create a sense of order and consistency.

Rhythm: Creating a sense of movement by repeating elements at regular intervals.

Unity: Making sure all parts of the design work together as a whole.

Web design principles, while not exclusive to HTML, are fundamental concepts that guide the creation of effective and user-friendly websites, many of which are implemented and structured using HTML. These principles aim to enhance usability, accessibility, and visual appeal.

Here are key web design principles and how they relate to HTML:

Simplicity:

A clean and uncluttered design improves usability. In HTML, this means avoiding excessive elements, complex nesting, and ensuring clear content organization using semantic tags like <header>, <nav>, <main>, <footer>, <article>, and <section>. (uncluttered - not having or impeded by too many objects)

Consistency:

Maintaining a uniform look and feel across all pages builds trust and predictability. HTML elements, combined with CSS, should consistently apply styles for headings, paragraphs, buttons, and navigation elements.

Visual Hierarchy:

Guiding the user's eye to important information through visual cues. HTML structure, along with CSS, can achieve this through varying heading sizes (<h1> to <h6>), bolding, color, and strategic placement of elements.

Navigation:

Providing clear and intuitive (understand, know) ways for users to move around the site. HTML's <a> tags create hyperlinks, and the <nav> element explicitly defines navigation sections, often containing lists (<ul>, <li>) for menu items.

Responsiveness and Mobile Friendliness:

Ensuring the website adapts to different screen sizes and devices. While primarily achieved with CSS media queries, a well-structured HTML document with a responsive viewport meta tag is crucial for this to function correctly.

Readability and Typography:

Making content easy to read and understand. HTML provides elements for text formatting, and developers use CSS to control font families, sizes, line heights, and colors for optimal readability.

Fast Load Times:

Optimizing for speed to prevent user frustration. HTML structure, image optimization (using <img> with loading="lazy" and appropriate src and srcset), and efficient use of external resources (CSS, JavaScript) contribute to faster loading. Faster page loading times, which is a critical design principle for user experience.

Accessibility:

Designing for all users, including those with disabilities. HTML elements like alt attributes for images, semantic tags, proper heading structure, and ARIA attributes are vital for creating accessible web content.

User-Centric Design:

Prioritizing the needs and experience of the user. This overarching principle influences all design decisions, from content organization in HTML to interactive elements.

 

Introduction to web technology Section 2

(Section 1 Section 3 Section 4 Section 5)

Types of HTML Tags:

HTML tags can be broadly categorized based on their function and behavior:

There are generally two types of tags in HTML 

Paired Tags: These tags come in pairs i.e. they have both opening(< >) and closing(</ >) tags.

Empty Tags: These tags are self-closing and do not require a closing tag.”

Empty tags in HTML, also known as "void elements" or "self-closing tags," are HTML elements that do not require a closing tag because they do not contain any content or other nested elements. They are used to insert or define specific elements within the document structure.

 

Examples of Paired HTML Tags:

Paragraphs: <p>This is a paragraph.</p>

Headings: <h1>This is a heading.</h1>

Bold Text: <b>This text is bold.</b>

Italic Text: <i>This text is italic.</i>

Divisions: <div>This is a content division.</div>

HTML Document Structure: <html>...</html>, <head>...</head>, <body>...</body>

 

Here are some common examples of empty tags in HTML:

<br> (Line Break): Inserts a single line break.

<img> (Image): Embeds an image into the document, using attributes like src for the image source and alt for alternative text.

<input> (Input Field): Creates an input control for web forms, with various types like text, password, checkbox, etc.

<link> (External Resource Link): Links the current document to an external resource, most commonly used to link CSS stylesheets.

<meta> (Metadata): Provides metadata about the HTML document, such as character set, viewport settings, or keywords for search engines.

<hr> (Horizontal Rule): Creates a thematic break or a horizontal line to separate content.

<embed> (External Content): Inserts external applications or interactive content.

<source> (Media Source): Specifies multiple media resources for <audio> and `

 

Structural Tags:

Define the overall structure of the document.

<html>, <head>, <body>, <title>, <meta>, <link>, <script>

Structural tags in HTML are used to define the overall layout and organization of a web page, providing semantic meaning to different sections of content. They help browsers, search engines, and assistive technologies understand the purpose of each part of the document.

 

Fundamental Structural Tags:

<!DOCTYPE html>:

This declaration is not an HTML tag but a declaration that defines the document type and version of HTML being used, ensuring proper rendering by the browser.

<html>:

The root element of an HTML page, encapsulating all other HTML content.

<head>:

Contains meta-information about the HTML document, such as the page title, character set, links to external stylesheets, and scripts. This content is not directly displayed on the web page.

<title>:

Defines the title of the HTML document, which appears in the browser tab or window title bar.

<body>:

Contains all the visible content of the HTML document, including text, images, links, videos, and other elements that make up the web page.

 

HTML5 Semantic Structural Tags:

HTML5 introduced new semantic tags to provide more meaningful structure and improve accessibility and SEO:

<header>:

Represents introductory content for a section or the entire page, often containing headings, navigation, or a logo.

<nav>:

Defines a section containing navigation links.

<main>:

Represents the dominant content of the <body>, unique to that document and not repeated across other pages.

<article>:

Represents a self-contained composition, such as a blog post, news article, or forum post, that can be independently distributed or reused.

<section>:

Represents a generic standalone section of a document, often with a heading.

<aside>:

Represents content that is tangentially related to the content around it, often displayed as a sidebar.

<footer>:

Represents the footer for its nearest sectioning content or the entire page, often containing copyright information, contact details, or related links.

<figure> and <figcaption>:

Used to group media content (like images, videos, or code snippets) with a caption.

<details> and <summary>:

Used to create interactive widgets that can be expanded or collapsed to show or hide content.

A widget is a small, interactive element that displays dynamic information or provides quick access to features without needing to open the full application. 

Desktop & Web:

Widgets can include clocks, calendars, news feeds, and even small tools like calculators or translators. 

 

Text Formatting Tags:

HTML provides a set of tags specifically for formatting text within a web document. These tags can be categorized into physical and logical tags, though in modern web development, CSS is often preferred for styling for better separation of concerns.

 

Physical Tags:

Physical tags are concerned with the visual presentation of text. They directly dictate how the content should appear on the screen, focusing on specific formatting styles.

Examples:

<b> (bold): Renders text in a bold font.

<i> (italic): Renders text in an italic font.

<u> (underline): Underlines the text.

<strike> or <del> (strikethrough): Draws a line through the text.

 

Logical Tags:

Logical tags, also known as semantic tags, focus on the meaning and structure of the content rather than just its appearance. They convey the importance or type of information to browsers, search engines, and assistive technologies, which can then determine the appropriate rendering.

Examples:

<strong> (strong importance): Indicates that the enclosed text has strong importance, typically rendered as bold by default but can be styled differently.

<em> (emphasis): Indicates emphasis, typically rendered as italics by default but can be styled differently.

<blockquote> (block quotation): Defines a section that is quoted from another source.

<cite> (citation): Used for the title of a work.

<code> (code): Represents a piece of computer code.

 

Common HTML Text Formatting Tags:

Bold/Strong Importance:

<b>: Renders text in bold. This is a physical tag, primarily for visual appearance.

<strong>: Renders text in bold and indicates strong importance or semantic emphasis. This is a logical tag.

Italic/Emphasized Text:

<i>: Renders text in italics. This is a physical tag.

<em>: Renders text in italics and indicates emphasis. This is a logical tag.

 

Other Formatting Tages:

<mark>: Highlights text, typically with a yellow background.

<u>: Underlines text. While still functional, its use for stylistic underlining is often discouraged in favor of CSS.

<del>: Strikes through text, indicating content that has been deleted.

<ins>: Underlines text, indicating content that has been inserted.

<sup>: Renders text as superscript (slightly above the normal line).

<sub>: Renders text as subscript (slightly below the normal line).

<small>: Renders text in a smaller font size.

<code>: Displays text in a fixed-width (monospace) font, typically used for code snippets. 

<pre>: Renders preformatted text, preserving whitespace and line breaks.

 (Section 1 Section 3 Section 4 Section 5)

Introduction to web technology Section 1

(Section 2 Section 3 Section 4 Section 5)

Unit 1

Introduction: Introduction to web technology – HTML – types of HTML tags basic Structure of HTML – Web design principles – HTML attributes – styles – Hypertext - Formatting text – Forms & formulating instructions & formulation elements – Commenting code – Back grounds – Images- Hyperlinks – Lists Tables – Frames.

Unit 1 

Introduction:

Introduction to web technology

Web technology encompasses the tools, protocols, and languages that enable the creation, delivery, and interaction with content over the internet. It's the foundation upon which websites, web applications, and online services are built, allowing users to access and share information, communicate, and conduct various activities online. 

Here's a more detailed breakdown:

Core Concepts:

World Wide Web (WWW):

The system of interconnected hypertext documents accessed via the internet. 

Web Browser:

Software applications like Chrome, Firefox, or Safari that render web pages and allow users to interact with them. 

Web Server:

A computer that stores and delivers web pages and other resources to users' browsers. 

Web Pages:

Documents formatted using HTML (HyperText Markup Language) that display content, including text, images, and multimedia. 

Web Development:

The process of creating and maintaining websites and web applications, involving both frontend (user interface) and backend (server-side) development. 

Key Technologies:

HTML (HyperText Markup Language): The foundation of web pages, defining the structure and content. 

CSS (Cascading Style Sheets): Used to style the appearance of web pages, controlling colors, fonts, layout, and more. 

JavaScript: A scripting language that adds interactivity and dynamic behavior to web pages. 

Protocols (e.g., HTTP, TCP/IP): Rules that govern how data is transmitted and exchanged over the internet. 

Web APIs: Interfaces that allow different software systems to communicate and exchange data. 

Databases: Systems used to store and manage the data that powers web applications. 

Frontend vs. Backend:

Frontend Development:

Focuses on the user interface, the part of the website or application that users directly interact with.

Backend Development:

Deals with the server-side logic, database management, and other behind-the-scenes operations. 

In essence, web technology is the comprehensive framework that enables the internet as we know it, from the simple display of information to the complex interactions of online applications. 

 

HTML

What is HTML?

HTML stands for Hyper Text Markup Language

HTML is the standard markup language for creating Web pages

HTML describes the structure of a Web page

HTML consists of a series of elements

HTML elements tell the browser how to display the content

HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link

HTML is generally not case-sensitive 

 

Types of HTML tags basic Structure of HTML

HTML documents are structured using various tags that define the content and its presentation.

 

To declare an Indian language, you would use its corresponding ISO 639-1 language code as the value for the lang attribute. For example: Hindi: <html lang="hi"> Bengali: <html lang="bn"> Tamil: <html lang="ta"> Telugu: <html lang="te"> Marathi: <html lang="mr"> Gujarati: <html lang="gu"> Kannada: <html lang="kn"> Malayalam: <html lang="ml"> Punjabi: <html lang="pa">

Basic Structure of an HTML Document:

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content=

        "width=device-width, initial-scale=1.0" />

    <title>Structure of HTML Document</title>

</head>

<body>

    <!-- Main content of website -->

    <h1>GeeksforGeeks</h1>

    <p>A computer science portal for geeks</p>

</body>

</html>

 

Every HTML document follows a fundamental structure to organize its content:

<!DOCTYPE html>:

This declaration defines the document type and version of HTML being used, typically HTML5 for modern web pages.

<html>:

The root element that encloses all other HTML content on the page. It often includes a lang attribute to specify the document's language (e.g., <html lang="en">). 

<head>:

<meta charset="UTF-8">: Specifies the character encoding for the document (UTF-8 supports most characters from all languages).

<meta name="viewport" content="width=device-width, initial-scale=1.0">: Controls the layout on mobile devices by setting the viewport width and scaling.

Contains metadata about the HTML document, such as the page title, character set, links to external stylesheets (CSS) Cascading Style Sheets, and scripts (JavaScript). This content is not directly displayed on the web page.

<title>: Sets the title that appears in the browser's title bar or tab. 

<meta>: Provides various metadata like character encoding (charset="UTF-8") or viewport settings.

<link>: Links external resources like CSS files.

<script>: Embeds or links external JavaScript files.

<body>:

Contains the visible content of the HTML document, including text, images, links, forms, and other elements that users interact with.

(Section 2 Section 3 Section 4 Section 5)