Sayadasite: Introduction to web technology session 9

(Section 1 Section 2 Section 3 Section 4 Section 5 Session 7 Session 8)

Forms & formulating instructions & formulation elements

HTML forms are used to collect user input. They consist of the <form> element acting as a container, and various form controls (elements) within it.

Formulating Instructions & Formulation Elements in HTML:

The <form> Element:

This is the container for all form elements.

action attribute: Specifies the URL where the form data will be sent upon submission (e.g., a server-side script).

method attribute: Defines how the data is sent.

"get": Appends form data to the URL (visible in the address bar), suitable for non-sensitive data or search queries.

"post": Sends form data in the body of the HTTP request (not visible in the URL), suitable for sensitive data like passwords or larger data sets.

</form>

Form Elements (Input Controls): These are the interactive components users interact with.

<input>: The most versatile element, its behavior changes based on the type attribute.

type="text": Single-line text input.

type="password": Single-line password input (characters masked).

type="email": Email address input (with built-in validation).

type="number": Numeric input.

type="radio": Radio button (for selecting one from a group).

type="checkbox": Checkbox (for selecting zero or more).

type="submit": Button to submit the form.

type="button": A generic clickable button.

type="date", type="time", type="color", etc.: Specialized input types.

name attribute: Essential for identifying the data when submitted.

id attribute: Used for associating with <label> and for CSS/JavaScript targeting.

value attribute: Sets a default value for the input.

placeholder attribute: Provides a hint to the user about what to enter.

required attribute: Makes the field mandatory.

<label>: Provides a descriptive label for an input element.

for attribute: Links the label to an input element using its id. This improves accessibility.

<textarea>: Defines a multi-line text input area.

rows and cols attributes: Specify the visible dimensions.

<select> and <option>: Create a dropdown list.

<select>: The dropdown container.

<option>: Represents an individual item in the dropdown.

value attribute on <option>: The value sent with the form.

<button>: A general-purpose button.

type="submit": Submits the form.

type="reset": Resets form fields.

type="button": A generic button.

Commenting code

How to Comment in HTML?

1. Single-line Comment in HTML

2. Multiline Comment in HTML

<!--

This is a multi-line comment.

It can span across several lines

to provide more detailed explanations.

-->
How to Comment in CSS?

1. Single-line Comment in CSS

/* This is a single-line comment in CSS */

2. Multiline Comment in CSS

This is a multiline comment in CSS.

It can span multiple lines.

How to Comment in JavaScript?

1. Single-line Comment in JavaScript

// This is a single-line comment in JavaScript

2. Multiline Comment in JavaScript

This is a multiline comment in JavaScript.

It can span multiple lines.

Explanation:

HTML comments begin with .

The content placed between these tags will be ignored by web browsers and will not be displayed on the webpage.

Comments are primarily used for:

Code documentation: Explaining the purpose of specific sections of code.

Leaving notes: Adding reminders or to-do items for yourself or other developers.

Temporarily disabling code: Commenting out sections of code during debugging or development without deleting them.

Backgrounds

The background of a webpage is a layer behind its content, which includes text, images, colors, and various other elements.

It is an essential part of web design that improves the overall look of a web page as well as the user experience. HTML offers multiple attributes and properties for manipulating the background of elements within a document.

By default, our webpage background is white in color. We may not like it, but no worries.

HTML provides the following two good ways to decorate our webpage background:

HTML Background with Colors

HTML Background with Images

Syntax

The value can be an English name of color, an RGB value of color, or a hexadecimal value of color.

Examples of HTML Background

1. Setting Color for Background

2. Setting Image as Background

3. Background Repeat and Position

Setting Color for Background

An elementary method to modify the background is by altering its color. The background-color property facilitates the specification of a color for an element's background. This can be accomplished by incorporating the following style attribute within the opening tag of an HTML element.

1 <div style="background-color: #3498db; ">

<h1>Welcome to My Website</h1>

<p> This is an example of a styled div with a background color and text color. </p>

</div>

2 <style>

body {

background-color: lightblue;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has a light blue background color!</p>

</body>

Setting Image as Background

HTML allows us to specify an image as the background of our HTML web page or table. The background and background-image can be used to control the background image of an HTML element, specifically page body and table backgrounds. We simply need to pass the path of an image as a value to both properties

Example (Red, Green, Blue, Alpha)

1 <body background="/market/public/assets/newDesign/img/logo.svg">

<h1>Welcome to My Website</h1>

<p> This is an example of setting a background image using HTML attributes. </p>

</div>

</body>

2 <style>

body {

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>

Background Repeat and Position

Although you can set an image as the background using just HTML, in order to control it's behavior, like repeating and positioning, we need to use CSS. We recommend watching our CSS background-image for better understanding. CSS offers options for controlling how background images repeat and their positioning. The background-repeat property specifies whether the image should repeat horizontally, vertically, both, or neither. Furthermore, the background-position property empowers developers to determine where the background image should be positioned within the element.

Example

The below HTML program creates a webpage with a centered content div having a repeating vertical background pattern from the specified image. The background color of the container is set to white by default, and the text within the container is styled with a black color, creating a visually appealing and cohesive design.

1 <!DOCTYPE html>

<html>

<head>

<style>

#example1 {

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

padding: 15px;

}

</style>

</head>

<body>

<h1>Multiple Backgrounds</h1>

<p>The following div element has two background images:</p>

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>

2 <style>

body {

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Strange background image...</p>

</body>

Images

Images are embedded in HTML documents using the <img> tag. This is a self-closing tag, meaning it does not require a separate closing tag.

Here's a breakdown of how to use the <img> tag and its essential attributes:

src attribute (Source):

This is a mandatory attribute that specifies the path to the image file. This path can be:

Absolute (URL): If the image is hosted online, you'd provide its full URL (e.g., https://example.com/images/myimage.png).

Relative: If the image is in the same directory or a subfolder within your project, you'd use a relative path (e.g., images/myimage.jpg).

alt attribute (Alternative Text):

This is also a mandatory attribute and provides a text description of the image. It serves several important purposes:

Accessibility: Screen readers use this text to describe the image to visually impaired users.

Fallback: If the image fails to load (e.g., due to a broken link or network issues), this text will be displayed in its place.

width and height attributes:

These attributes define the dimensions of the image in pixels. While not strictly required, it's recommended to include them to help the browser reserve space for the image before it fully loads, preventing layout shifts.

Example

<!DOCTYPE html>

<html>

<body>

<h2>HTML Image</h2>

</body>

</html>

Hyperlinks

A hyperlink is an actual link embedded in hypertext that directs users to different sections, pages, or resources. It contains a webpage’s URL and is activated by clicking on hypertext1. Hyperlinks can be hidden in various media types, such as text, images, videos, and graphics, and appear highlighted on hover2.

Example of Hyperlink

<!DOCTYPE html>

<head>

<title>Hyperlink Example</title>

</head>

<body>

<h1>Example of a Hyperlink</h1>

<p>

This is a paragraph with a

<a href="https://ide.geeksforgeeks.org/">hyperlink</a>

to GeeksforGeeks IDE

</p>

</body>

</html>

Key Differences

Content: Hypertext involves only text, while hyperlinks can involve text, media, audio, video, images, and graphics.

Function: Hypertext contains non-linear links to related information, whereas hyperlinks are references used in hypertext or hypermedia.

Association: Hypertext is associated with keywords, while hyperlinks are associated with anchor tags.

Information: Hypertext-directed information generates related information, while hyperlink-directed links could contain unrelated information.

In conclusion, while hypertext and hyperlinks are closely related and often used together, they serve different purposes in web navigation. Hypertext enhances the browsing experience by providing interconnected text, while hyperlinks are the actual clickable elements that direct users to different web pages or resources

Hyperlinks, or simply links, are a fundamental feature of the web that allow users to navigate from one webpage to another. They can be text, images, or other HTML elements that, when clicked, direct the user to a different webpage or document.

Creating Hyperlinks

In HTML, hyperlinks are created using the <a> tag, where "a" stands for anchor. The most important attribute of the <a> tag is the href attribute, which specifies the URL of the page the link goes to. Here is the basic syntax:

For example, to create a link to W3Schools, you would write:

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

Types of URLs

Hyperlinks can use absolute URLs or relative URLs. An absolute URL includes the full web address, while a relative URL links to a page within the same website.

Absolute URL Example:

<a href="https://www.google.com/">Google</a>

Relative URL Example:

<a href="html_images.asp">HTML Images</a>

Target Attribute

The target attribute specifies where to open the linked document. It can have several values:

_self: Opens the document in the same window/tab (default).

_blank: Opens the document in a new window/tab.

_parent: Opens the document in the parent frame.

_top: Opens the document in the full body of the window.

Example of opening a link in a new tab:

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

Using Images as Links

You can also use images as hyperlinks by placing an <img> tag inside an <a> tag:

</a>

Email Links

To create a link that opens the user's email program, use the mailto: scheme inside the href attribute:

<a href="mailto:someone@example.com">Send email</a>

Button as a Link

You can use an HTML button as a link by adding some JavaScript code:

<button onclick="document.location='default.asp'">HTML Tutorial</button>

ASP(Active Server Pages)

Styling Links

By default, links are styled differently based on their state:

Unvisited link: Underlined and blue.

Visited link: Underlined and purple.

Active link: Underlined and red.

You can customize the appearance of links using CSS:

a {

color: green;

}

a:hover {

color: blue;

}

Conclusion

Hyperlinks are essential for web navigation, allowing users to move between different pages and resources. They can be created using the <a> tag with various attributes to control their behavior and appearance

Lists

Defining Lists in HTML

HTML provides three types of lists to organize related items:

1. Unordered lists,

2. Ordered lists, a

3. Description lists.

Each type of list is defined using specific HTML tags.

Unordered Lists

Unordered lists are used to group items without any specific order. They are created using the <ul> tag, and each item within the list is defined using the <li> tag. By default, the items in an unordered list are marked with bullets (small black circles).

Example

<ul>

<li>Coffee</li>

</ul>

In this example, the list items "Coffee", "Tea", and "Milk" are displayed with bullet points.

Ordered Lists

Ordered lists are used to group items in a specific order. They are created using the <ol> tag, and each item within the list is defined using the <li> tag. By default, the items in an ordered list are marked with numbers.

Example

<ol>

<li>Coffee</li>

</ol>

In this example, the list items "Coffee", "Tea", and "Milk" are displayed with numbers.

Description Lists

Description lists are used to group terms and their descriptions. They are created using the <dl> tag. Within a description list, the <dt> tag is used to define the term, and the <dd> tag is used to describe the term.

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list

The <dt> tag defines the term (name)

The <dd> tag describes each term

Example

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

In this example, "Coffee" and "Milk" are terms, and their descriptions are provided using the <dd> tag.

Attributes and Customization

HTML lists can be customized using various attributes and CSS properties. For example, the type attribute can be used to change the bullet style in unordered lists or the numbering style in ordered lists. Additionally, CSS can be used to style lists in various ways, such as creating horizontal navigation menus.

Example of Customizing Unordered List

</ul>

In this example, the type="circle" attribute changes the bullet style to circles.

Example of Customizing Ordered List

<li>Peach</li>

<li>Apricot</li>

<li>Banana</li>

<li>Strawberry</li>

</ol>

In this example, the type="A" attribute changes the numbering style to uppercase letters.

HTML lists provide a structured way to display related items, making it easier to organize and present information on web pages. By using the appropriate tags and attributes, developers can create various types of lists to suit their needs.

List Item

The <li> tag defines a list item.

The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

In <ul> and <menu>, the list items will usually be displayed with bullet points.

In <ol>, the list items will usually be displayed with numbers or letters.

Tables

HTML Table Element

The <table> HTML element is used to represent tabular data, which is information presented in a two-dimensional table comprised of rows and columns of cells containing data. This element is essential for organizing and displaying data in a structured format on web pages.

Basic Structure

A basic HTML table consists of the following elements:

<table>: Defines the table.
<tr>: Defines a row in the table.
<th>: Defines a header cell in the table.
<td>: Defines a standard cell in the table.

Here is an example of a simple HTML table:

1 <style>

table, th, td {

border:1px solid black;

}

</style>

<table>

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

</table>

2 <html>

<style>

table, th, td {

border:1px solid black;

}

</style>

<body>

<h2>TD elements define table cells</h2>

<tr>

<td>Tobias</td>

<td>Linus</td>

</tr>

</table>

<p>To understand the example better, we have added borders to the table.</p>

</body>

</html>

Advanced Features

HTML tables can also include additional elements to enhance their structure and accessibility:

<caption>: Provides a caption for the table.
<colgroup> and <col>: Define groups of columns and individual columns for styling.
<thead>, <tbody>, and <tfoot>: Group header, body, and footer content in the table.

Here is an example of a more complex table with these elements:

<style>

table, th, td {

border:1px solid black;

}

</style>

<table>

<caption>Monthly Savings</caption>

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>Total</td>

</tr>

</tfoot>

</table>

Styling Tables

Tables can be styled using CSS to improve their appearance and readability. Common properties used for styling tables include border, padding, background-color, and text-align.

Here is an example of a styled table:

1 <!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

border: 1px solid;

}

table {

border-collapse: collapse;

}

</style>

</head>

<body>

<h2>Let the table borders collapse</h2>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>

</tr>

</table>

</body>

</html>

2 <!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid green;

}

</style>

</head>

<body>

<h2>Add a border to a table:</h2>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>

</tr>

</table>

</body>

</html>

3 <!DOCTYPE html>

<html>

<head>

<style>

table, td, th {

border: 1px solid;

padding: 10px;

}

table {

border-collapse: collapse;

}

</style>

</head>

<body>

<h2>The padding Property</h2>

<p>Add space between the border and the content in a table.</p>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>

</tr>

</table>

</body>

</html>

Accessibility Considerations

To make tables accessible, it is important to use the <caption> element to describe the table's purpose and the scope attribute on <th> elements to define the scope of the header cells. This helps assistive technologies understand the structure and content of the table.

In summary, the <table> element is a powerful tool for displaying tabular data on web pages. By using the appropriate HTML elements and CSS properties, you can create well-structured and visually appealing tables that are also accessible to all users.

Frames

HTML frames were a feature used in earlier versions of HTML (prior to HTML5) to divide a web page into multiple independent sections, each capable of displaying a different HTML document. This allowed for layouts where, for example, a navigation menu could remain static while content in another frame was scrolled or updated.

Key Components of HTML Frames (Deprecated in HTML5):

<frameset> tag: This tag replaced the <body> tag in a document that used frames. It defined how the window was divided into rows and/or columns, and specified the size of each division.

Syntax

</frameset>

<frame> tag: This tag was used within a <frameset> to define a specific frame within the layout. It specified the source HTML document to be loaded into that frame, a name for the frame, and options for scrolling and resizing.

Example

Reasons for Deprecation and Alternatives:

Frames were deprecated in HTML5 due to various issues, including:

Accessibility problems:

Screen readers and other assistive technologies often struggled to navigate frame-based layouts effectively.

SEO challenges:

Search engine crawlers had difficulty indexing content within frames.

Usability issues:

Bookmarking specific content within a frame was often problematic, and the back button behavior could be inconsistent.

Lack of flexibility:

Frames offered limited control over layout and responsiveness compared to modern techniques.

Modern Alternatives:

Modern web development uses more flexible and accessible methods to achieve similar layout effects:

Example

CSS Layouts (Flexbox and Grid):

CSS provides powerful tools like Flexbox and Grid for creating complex and responsive page layouts, enabling the separation of content areas without the limitations of frames.

JavaScript:

Dynamic content loading and updates can be achieved using JavaScript to manipulate the DOM or fetch content asynchronously.

Creating Frames in HTML

To make frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame.

Following is the example to create three horizontal frames. If your browser does not support frames, then body element is displayed.

<!DOCTYPE html>

<html>

<head>

<title>HTML Frames</title>

</head>

</frameset>

</html>

Creating vertical Frames

Here we replaced rows attribute by cols and changed their width. This will create all the three frames vertically.

<!DOCTYPE html>

<html>

<head>

<title>HTML Frames</title>

</head>

<body> Your browser does not support frames. </body>

</noframes>

</frameset>

</html>

Sayadasite

Multiple Ads

Search

Menu Bar

Introduction to web technology session 9

No comments: