Some More HTML Concepts
Some More HTML Concepts
Embedded Files
The img tag
The img tag
The <img> tag in HTML is a crucial element used to embed images within a web page. It is an empty tag, meaning it does not require a closing tag and is primarily defined by its attributes.
Syntax and Attributes
Syntax and Attributes
The basic syntax of the <img> tag is as follows:
<img src="image_url" alt="alternative_text" width="width_value" height="height_value">
Required Attributes
Required Attributes
src: This attribute specifies the path to the image file. It is essential for the browser to locate and display the image. The path can be a relative URL (pointing to a file on the same server) or an absolute URL (pointing to a file on a different server) .
alt: The alternative text attribute provides a textual description of the image. This is important for accessibility, as it allows screen readers to convey the image's content to visually impaired users. It also serves as a fallback in case the image fails to load .
Optional Attributes
Optional Attributes
width: Specifies the width of the image in pixels. While this attribute can be used, it is often recommended to control image dimensions with CSS instead .
height: Similar to width, this attribute defines the height of the image. CSS is also preferred for styling dimensions .
crossorigin: Allows images to be loaded from third-party sites with cross-origin access .
loading: This attribute can specify whether the browser should defer loading the image until certain conditions are met (lazy loading) or load it immediately .
srcset: Provides a list of image files for different display situations, allowing for responsive design .
usemap: Indicates that the image is part of a client-side image map .
Example Usage
Example Usage
Here is a simple example of how to use the <img> tag:
<!DOCTYPE html>
<html>
<body>
<h3>Example Image</h3>
<img src="https://cdn.pixabay.com/photo/2024/05/26/10/15/bird-8788491_1280.jpg" alt="Description of image" width="500" height="300">
</body>
</html>
In this example, the image will be displayed with specified dimensions, and if it cannot be loaded, the alternative text will be shown instead.
Conclusion
Conclusion
The <img> tag is essential for incorporating images into web pages, enhancing visual appeal and user engagement. It is important to use the src and alt attributes effectively to ensure that images are displayed correctly and are accessible to all users
How To Make an HTML List
How To Make an HTML List
In web design, there are 3 different types of lists which you may wish to add to your site.
Ordered List
The first is an <ol>: This is an ordered list of contents. For example:
An item
Another item
Another goes here.
Inside the <ol> tag we list each item on the list inside <li> </li> tags.
For example:
<body>
<ol>
<li>An item </li>
<li>Another item </li>
<li>Another goes here </li>
</ol>
</body>
Output:
Unordered List
The second type of list that you may wish to include is an <ul> unordered list. This is better known as a bullet point list and contains no numbers.
An example of this is:
<body>
<ul>
<li>This is </li>
<li>An Unordered </li>
<li>List </li>
</ul>
</body>
Definition List
Finally, you may wish to include a definition list <dl> on your page.
Example:
<body>
<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>
</body>
HTML Tables
HTML Tables
HTML tables are used to organize and display data in a tabular format. They consist of rows and columns, with each cell containing data or other elements. The basic structure of an HTML table involves using the <table> element to define the table, <tr> for rows, <th> for header cells, and <td> for data cells. Here's a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Example</title>
</head>
<body>
<h2>Student Grades</h2>
<!-- Define the table -->
<table border="1">
<!-- Table header -->
<thead>
<tr>
<th>Student</th>
<th>Subject 1</th>
<th>Subject 2</th>
<th>Subject 3</th>
</tr>
</thead>
<!-- Table body -->
<tbody>
<!-- First row of data -->
<tr>
<td>John Doe</td>
<td>85</td>
<td>90</td>
<td>88</td>
</tr>
<!-- Second row of data -->
<tr>
<td>Jane Smith</td>
<td>92</td>
<td>88</td>
<td>95</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</body>
</html>
In this example:
<table> is used to define the table.
<thead> contains the header row, which is created using <tr> and <th> (table header) elements.
<tbody> contains the body of the table, where the actual data is placed in rows (<tr>) and cells (<td>).
The border="1" attribute is used to add a border to the table for better visibility (it's not necessary for styling and is often handled with CSS in real-world applications).
Each row in the body contains data for a specific student, with the first cell in each row containing the student's name, and the subsequent cells containing grades for different subjects.
You can customize the table structure, style, and content based on your specific needs. Additionally, for more complex layouts and styling, you might want to use CSS in conjunction with HTML tables.
In HTML tables, the rowspan and colspan attributes are used to control the spanning of cells across multiple rows or columns, respectively. They allow you to create more complex table structures by merging cells.
rowspan attribute:
It is used to make a cell span multiple rows.
It defines the number of rows a cell should span.
Applied to a <td> (data cell) or <th> (header cell) element.
Example:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td rowspan="2">Spanned Cell</td>
<td>Row 2, Cell 2</td>
</tr>
<tr>
<!-- This row only has one cell, as the first cell spans two rows -->
<td>Row 3, Cell 2</td>
</tr>
</table>
In this example, the cell with the content "Spanned Cell" spans two rows in the table.
2.colspan attribute:
It is used to make a cell span multiple columns.
It defines the number of columns a cell should span.
Also applied to a <td> or <th> element.
Example:
<table border="1">
<tr>
<th colspan="2">Header 1 and Header 2 Merged</th>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
In this example, the header cell spans two columns, combining the headers for "Header 1" and "Header 2" into a single cell.
iframe
iframe
An <iframe> (short for inline frame) is an HTML element used to embed another HTML document or external content within the current document. It allows you to display content from another source, such as a different webpage, a video, a map, or any other web document, within the confines of the current page. This is particularly useful when you want to integrate content from external sources into your website.
The basic syntax of an <iframe> looks like this:
<iframe src="URL_of_the_external_content" width="width_value" height="height_value" frameborder="0" allowfullscreen></iframe>
Let's break down the attributes commonly used with the <iframe> element:
src attribute: Specifies the URL of the content you want to embed. This is a required attribute.
width and height attributes: Define the width and height of the iframe. You can set these values in pixels, percentages, or other CSS units.
frameborder attribute: Specifies whether or not to display a border around the iframe. Setting it to "0" means no border.
allowfullscreen attribute: Allows the content inside the iframe to be displayed in fullscreen mode if applicable (e.g., for embedded videos).
Example:
<iframe src="https://example.org" title="Example Iframe" width="400" height="300"></iframe>
HR and BR tag
HR and BR tag
<hr> Tag
<hr> Tag
The <hr> tag is used to insert a horizontal rule or thematic break in an HTML document. Here are a few examples:
Basic usage:
<p>This is some text above the horizontal rule.</p>
<hr>
<p>This is some text below the horizontal rule.</p>
Changing the width with the width attribute:
<hr width="50%"/>
Changing the color with the color attribute:
<hr color="red"/>
Changing the height with the size attribute:
<hr size="10"/>
Aligning the <hr> with the align attribute:
<hr align="right"/>
<br> Tag Examples
<br> Tag Examples
The <br> tag is used to insert a single line break. Here are some examples:
Basic usage to break a line:
This is line one.<br>
This is line two.
Using multiple <br> tags for spacing:
<p>This is a paragraph.</p>
<br><br><br>
<p>This is another paragraph with spacing above.</p>
The <br> tag is an empty element, so it doesn't have a closing tag. It's often used to break lines in contact information:
John Doe<br>
123 Main St.<br>
Anytown, USA
The <br> tag is also useful for writing addresses, poems, and other text that requires specific line breaks.
In summary, the <hr> tag creates a horizontal rule to separate content, while the <br> tag inserts a single line break. Both are useful for structuring and formatting HTML documents.
Exercise
Exercise
HTML Forms
HTML Forms
Web forms are used by virtually all websites for a wide range of purposes. Users of forums and social networks use forms to add content and interact with other users. Websites that can be customized to create a personalized experience, such as customizable newsfeeds, use forms to allow users to control the content that appears on the page. And nearly every website uses forms to allow website visitors to contact the organization or person administering the website. Web forms are made possible by the integration of multiple technologies:
HTML to create the form fields and labels and accept user input.
CSS to style the presentation of the form.
JavaScript to validate form input and provide Ajax-enabled interactions.
Server-side languages such as PHP to process form data.
In HTML forms, various input elements allow users to provide different types of data.
1. Text Input (<input type="text">)
The text input field allows users to enter a single line of text. It is commonly used for names, addresses, or any other short text input.
Example:
Example:
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
2. Password Input (<input type="password">)
2. Password Input (<input type="password">)
The password input field is similar to the text input but masks the characters entered, displaying them as dots or asterisks. This is used for sensitive information like passwords.
Example:
Example:
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
3. Textarea (<textarea>)
3. Textarea (<textarea>)
The <textarea> element allows users to enter multi-line text. It is useful for longer inputs, such as comments or messages.
Example:
Example:
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>
4. Radio Buttons (<input type="radio">)
4. Radio Buttons (<input type="radio">)
Radio buttons allow users to select one option from a set of choices. Only one radio button in a group can be selected at a time.
Example:
Example:
<label>Choose your favorite fruit:</label><br>
<input type="radio" id="apple" name="fruit" value="apple">
<label for="apple">Apple</label><br>
<input type="radio" id="banana" name="fruit" value="banana">
<label for="banana">Banana</label><br>
5. Checkboxes (<input type="checkbox">)
5. Checkboxes (<input type="checkbox">)
Checkboxes allow users to select one or more options from a set. Each checkbox operates independently, meaning multiple checkboxes can be selected at once.
Example:
Example:
<label>Select your hobbies:</label><br>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label><br>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
<label for="traveling">Traveling</label><br>
6. Datepicker (<input type="date">)
6. Datepicker (<input type="date">)
The datepicker input allows users to select a date from a calendar interface. It provides a user-friendly way to input dates.
Example:
Example:
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>
7. Submit Button (<input type="submit">)
7. Submit Button (<input type="submit">)
The submit button is used to send the form data to the server. When clicked, it triggers the form submission process.
Example:
Example:
<input type="submit" value="Submit">
8. Button (<button>)
8. Button (<button>)
The <button> element can be used for various purposes, including submitting a form, resetting a form, or performing custom actions with JavaScript. It is more versatile than the submit button.
Example:
Example:
<button type="button" onclick="alert('Button clicked!')">Click Me!</button>
Here’s a complete HTML example that incorporates all the specified form elements: text input, password input, textarea, radio buttons, checkboxes, a datepicker, a submit button, and a regular button. This example creates a simple user registration form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration Form</title>
</head>
<body>
<h1>User Registration Form</h1>
<form action="/submit-registration" method="post">
<!-- Text Input -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>
<!-- Password Input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<!-- Textarea -->
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" rows="4" cols="50" placeholder="Tell us about yourself..." required></textarea>
<br><br>
<!-- Radio Buttons -->
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
<br><br>
<!-- Checkboxes -->
<label>Select your hobbies:</label><br>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label><br>
<input type="checkbox" id="traveling" name="hobbies" value="traveling">
<label for="traveling">Traveling</label><br>
<input type="checkbox" id="gaming" name="hobbies" value="gaming">
<label for="gaming">Gaming</label>
<br><br>
<!-- Datepicker -->
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate" required>
<br><br>
<!-- Submit Button -->
<input type="submit" value="Register">
<!-- Regular Button -->
<button type="button" onclick="alert('Form reset!')">Reset Form</button>
</form>
</body>
</html>
Explanation of the Code:
Explanation of the Code:
Form Structure: The <form> element contains all the input fields and buttons. The action attribute specifies where the form data will be sent upon submission, and the method attribute indicates the HTTP method to use (in this case, post).
Text Input: The username field is created using <input type="text">.
Password Input: The password field uses <input type="password"> to mask the input.
Textarea: The bio field allows for multi-line text input with the <textarea> element.
Radio Buttons: The gender selection uses <input type="radio">, allowing the user to select one option.
Checkboxes: The hobbies section uses <input type="checkbox">, enabling multiple selections.
Datepicker: The birthdate field uses <input type="date"> for easy date selection.
Submit Button: The form submission is handled by <input type="submit">.
Regular Button: The reset button uses a <button> element that triggers a JavaScript alert when clicked.
This example demonstrates how to create a functional and user-friendly form using various input types in HTML. You can customize the action attribute to point to your server-side processing script.
Exercise
Exercise
Customer Satisfaction Survey Form
You are working on a customer satisfaction survey for a newly launched online service. The survey aims to gather feedback on the user experience and satisfaction levels. Design an HTML survey form that includes the following questions:
Overall Satisfaction:
Use a radio buttons to allow users to rate their overall satisfaction on a scale from 1 to 10.
Service Feedback:
Provide a textarea for users to share detailed feedback on the service.
Feature Satisfaction:
Create a set of checkboxes for users to indicate which features they found most satisfying.
Recommendation:
Include a radio button group asking users if they would recommend the service to others (Yes/No).
Improvement Suggestions:
Add an additional textarea for users to provide suggestions for improvement.
Contact Information (Optional):
Include optional fields for the user's name and email address if they wish to be contacted for further feedback.
Submit Button:
A button to submit the survey.
Instructions:
Construct an HTML form that includes appropriate form elements for each survey question.
Use semantic HTML tags and attributes to enhance the structure and accessibility of the form.
Consider the user experience and make the survey form easy to understand and complete. Provide comments or explanations for any complex or noteworthy code segments.
Page updated
Google Sites
Report abuse