Scribd
Upload
23 views46 pages

Group 1 Presenting

Uploaded by

jhonloyd.estrera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views46 pages

Group 1 Presenting

Uploaded by

jhonloyd.estrera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 46

Group 1

Presenting
HTML Semantics
HTML provides a set of semantic tags that go beyond mere
presentation. These tags have specific meanings and purposes,
helping to structure the content of a webpage in a meaningful way.
In this topic, we will explore the importance of HTML semantics,
the usage of semantic tags, and how they contribute to SEO (Search
Engine Optimization) and web accessibility.
Understanding the Importance of HTML Semantics
HTML semantics refers to the practice of using appropriate HTML
tags to accurately represent the meaning and structure of the
content within a webpage. By using semantic tags, you provide
context and clarity to both human readers and search engines.
This helps improve the overall user experience, supports better
indexing and ranking in search results, and ensures accessibility for
individuals using assistive technologies.
Using Semantic Tags
Let's explore some commonly used semantic tags and their purposes:

<header>
The <header> tag represents the introductory content or a container for the
navigational elements of a webpage. It typically includes the site logo, page title, and
primary navigation.

1 <header>
2 <h1>Website Title</h1>
3 <nav>
4 <!-- Navigation links here -->
5 </nav>
6 </header>
<main>
The <main> tag represents the main content area
of a webpage. It should contain the primary
content unique to that page.
1 <main>
2 <!-- Main content here -->
3 </main>
<section>
The <section> tag is used to group related content within a
webpage. It helps organize the content into meaningful
sections.
1 <section>
2 <!-- Content related to a specific topic or theme -->
3 </section>
<article>
The <article> tag represents a self-contained
composition within a webpage. It encapsulates content
that
> can be distributed or independently syndicated.
1 <article>
2 <!-- Standalone content, such as blog posts or news
articles -->
3 </article>
<aside>
The <aside> tag is used for content that is tangentially
related to the main content. It can contain sidebars, pull
quotes, or advertisements.
1 <aside>
2 <!-- Additional information or related
content -->
3 </aside>
<footer>
The <footer> tag represents the footer section of a
webpage. It typically contains information about the
author, copyright notices, and links to related
documents.
1 <footer>
2 <!-- Footer content here -->
3 </footer>
<!DOCTYPE html>
<html>
<head> <title>Using Semantic Tags Example</title>
</head>
<body> Your Website Title
<header>
h1>Your Website Title</h1>
<nav> • Home
<ul>
<li><a href="#">Home</a></li> • About Us
<li><a href="#">About Us</a></li>
</ul>
</nav> About Us
</header>
<main> Some information.
<section>
<h2>About Us</h2>
<p>Some information.</p> Latest News
</section>
<article> Read the latest news article here.
<h2>Latest News</h2>
<p>Read the latest news article here.</p>
</article> Related Links
<aside>
<h3>Related Links</h3> • Link 1
<ul>
<li><a href="#">Link 1</a></li>
• Link 2
<li><a href="#">Link 2</a></li>
</ul>
</aside> © 2023 Your Company. All rights reserved.
</main>
<footer>
<p>&copy; 2023 Your Company. All rights reserved.</p> </footer>
</body>
</html>
The Role of Semantic Tags in SEO (Search Engine Optimization)
and Web Accessibility
Semantic tags play a crucial role in improving the SEO and accessibility of a
webpage. Search engines rely on the HTML structure and the meaning of the
content to understand and index the page properly. Semantic tags help search
engines identify the key sections and content of a webpage, enhancing its
visibility in search results.
Moreover, semantic tags provide valuable information to assistive technologies
such as screen readers. These technologies rely on the underlying HTML
structure to convey the content to users with disabilities. By using semantic
tags, you ensure that the webpage is more accessible and usable for individuals
with different abilities.
Conclusion
Understanding and utilizing HTML semantics is essential
for creating well-structured webpages that are both search
engine friendly and accessible to all users. By using
semantic tags such
as <header>, <main>, <section>, <article>, <aside>,
and <footer>, you provide meaning and structure to your
content, improve SEO, and enhance web accessibility .
HTML
Tables
HTML tables provide a structured way to present tabular data on
a webpage. Tables are commonly used for displaying data in
rows and columns, making them an essential component in web
development. In this topic, we will explore how to create tables
using HTML tags such as <table>, <tr>, <td>, and <th>. We will
also delve into table attributes like colspan and rowspan that
allow for more complex table structures.
Creating Tables
To create a basic table structure, we use the following HTML
tags:

• <table>: Represents the entire table.


• <tr>: Defines a table row.
• <td>: Defines a table cell (data cell).
• <th>: Defines a table header cell.
Here's an example of a simple table with two rows and two columns:
1 <table>
2 <tr>
3 <th>Header 1</th>
4 <th>Header 2</th>
5 </tr>
6 <tr>
7 <td>Data 1</td>
8 <td>Data 2</td>
9 </tr>
10 </table>
The <th> tag is used for header cells, while the <td> tag is used for data cells. The <tr> tag
defines table rows that contain cells.
Understanding Table Attributes
colspan Attribute
The colspan attribute allows a cell to span across multiple columns. It is useful when you
want to merge cells horizontally. Here's an example:
1 <table>
2 <tr>
3 <th colspan="2">Header</th>
4 </tr>
5 <tr>
6 <td colspan="2">Merged Cell</td>
7 </tr>
8 <tr>
9 <td>Data 1</td>
10 <td>Data 2</td>
11 </tr>
12 </table>
In this example, the header cell spans across two rows, and the data cells are placed below it.
rowspan Attribute
The rowspan attribute allows a cell to span across multiple rows. It is helpful
when you want to merge cells vertically. Here's an example:
1 <table>
2 <tr>
3 <th rowspan="2">Header</th>
4 <td>Data 1</td>
5 </tr>
6 <tr>
7 <td>Data 2</td>
8 </tr>
9 </table>
In this example, the header cell spans across two rows, and the data cells are
placed below it.
<!DOCTYPE html>
<html>
<head> Simple Table:
<title>Tables with Rowspan and Colspan</title>
</head>
body> Header 1 Header 2 Header 3
<h3>Simple Table:</h3>
table>
<tr>
Cell 1 Cell 2ader Cell 3
<th>Header 1</th>
<th>Header 2</th> Cell 4 Cell 5 Cell 6
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
Table with Rowspan and Colspan:
<td>Cell 3</td>
</tr>
<tr>
Header 1 Header 2
<td>Cell 4</td>
<td>Cell 5</td> Cell 2 Cell 3
<td>Cell 6</td> Cell 1
</tr>
</table>
Cell 4
<h3>Table with Rowspan and Colspan:</h3>
<table>
<tr>
<th>Header 1</th>
<th colspan="2">Header 2</th>
</tr>
<tr>
<td rowspan="2">Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>

Diagram: Table Structure


</tr>
<tr>
<td colspan="2">Cell 4</td>
</tr>
</table>
</body>
</html>
Conclusion
HTML tables are a powerful tool for presenting tabular data on
webpages. By using the <table>, <tr>, <td>, and <th> tags, you
can create structured tables with rows and columns. The colspan
and rowspan attributes provide additional flexibility for merging
cells across columns and rows. Understanding how to create and
manipulate tables using HTML is essential for organizing and
displaying data effectively.
HTML Horizontal
Line
The <hr> tag in HTML is used to insert a horizontal
line, also known as a "horizontal rule," on a webpage.
It is a self-closing tag, meaning it does not require a
closing tag. Horizontal lines can be used to visually
separate sections of content, or create a visual break.
Inserting a Horizontal Line
To insert a horizontal line using the <hr> tag, simply include the
tag in your HTML code. Here's an example:
1 <p>This is some text.</p>
2 <hr>
3 <p>This is more text.</p>

In this example, a horizontal line is inserted between two


paragraphs of text. When rendered in a browser, the line will
extend across the width of its containing element.
Inserting a Horizontal Line
To insert a horizontal line using the <hr> tag, simply
include the tag in your HTML code. Here's an
example:
1 <p>This is some text.</p>
2 <hr>
3 <p>This is more text.</p>
Diagram: Horizontal Line
Here is a diagram illustrating the This is some text.
placement and appearance of the
horizontal line:
This is more text.
!DOCTYPE html>
<html>
<head> appearance of the horizontal line:
<title>HTML Horizontal Line
Here is a diagram illustrating the placement and
Diagram: Horizontal Line
Example</title>
</head>
<body>
<p>This is some text.</p>
<hr>
<p>This is more text.</p>
</body>
</html>
Conclusion
The <hr> tag is a simple yet effective way to insert
a horizontal line on a webpage. It can be used to
visually separate content sections, or create a break
in the layout.
HTML
Forms
HTML forms provide a powerful way to gather user input
and interact with website visitors. Forms allow users to
enter data, make selections, and submit information. In this
topic, we will explore the essential HTML tags used to
create forms,
including <form>, <input>, <textarea>, <button>, <select>,
and <option>. Understanding how to create forms is crucial
for building interactive and user-friendly web applications.
Creating a Form
To create a form, we use the <form> tag. The <form> tag
acts as a container for all the form elements.
Here's an example of a basic form structure:
1 <form>
2 <!-- Form elements go here -->
3 </form>
Form Elements
Input Fields

Input fields are used to capture various types of user input, such as
text, email, passwords, numbers, and more. They are created using
the <input> tag.
•The placeholder attribute in the <input> tag provides a hint or
example value for the input field. This hint is displayed in the field
before the user enters a value.
Text Input

The text input field (<input type="text">) allows


users to enter single-line text.

1 <input type="text" placeholder="Enter your


username">
Password Input

The password input field (<input type="password">) masks


the entered text to hide sensitive information.

1 <input type="password" placeholder="Enter your


password">
Email Input

The email input field (<input type="email">)


validates that the entered text is in the format of an
email address.

1 <input type="email" placeholder="Enter your


email">
Number Input

The number input field (<input type="number">)


allows users to enter numeric values only.

1 <input type="number" placeholder="Enter your


age">
Textarea

The <textarea> tag is used to create a multi-line


text input field. It also supports
the placeholder attribute.

1 <textarea placeholder="Enter your


message"></textarea>
Select Menu
The select menu (<select>) is used to create a dropdown menu of
options, allowing users to select one or more choices.
1 <select>
2 <option>USA</option>
3 <option>Canada</option>
4 <option>UK</option>
5 </select>
Label
In the context of HTML forms, the <label> element serves an important role, it
is used to define a label for several form elements. The main utility of
the <label> element is to provide a textual description for a form control,
improving the user experience and accessibility.
It's worth mentioning that the <label> element is not just a convenience but a
critical component of making forms accessible to vision-impaired users and
users who rely on assistive technologies like screen readers.
A label is associated with a form control through the use of the for attribute,
which takes as its value the id of a form control element. The form control
element is usually an <input>, but it can also be a <select>, <textarea>, or a few
others.
Here's an example of how to use the <label> tag:
1 <label for="username">Username:</label>
2 <input type="text" id="username" name="username">

In this example, the label "Username:" is associated with the text


input field through the matching id ("username") and for attribute.
When the label is clicked, the associated field gets focus, increasing
the hit area and enhancing usability, especially on touch devices.
Multiple labels can be associated with the same form control, and a
label can be associated with multiple form controls (though this is
less common).
Another way to associate a label with a form control is to wrap the label
around the form control:
1 <label>
2 Username:
3 <input type="text" name="username">
4 </label>

In this case, the label is implicitly associated with the input field, and you
don't need to use the for attribute and id. This is often simpler and avoids the
potential for mismatched for and id values.
Remember that properly labeled form controls not only help users
understand what input data is expected but also improve accessibility,
allowing assistive technology to present descriptive labels to users.
Button
The <button> tag is used to create clickable buttons
within a form.

1 <button type="submit">Submit</button>
<!DOCTYPE html>
<html> Name:
<head> <title>Form Example</title>
</head>
<body> Email:
<form>
<label for="name">Name:</label> Message:
<input type="text" id="name" placeholder="Enter your name">
<label for="email">Email:</label> Country:
<input type="email" id="email" placeholder="Enter your email">
<label for="message">Message:</label>
<textarea id="message" placeholder="Enter your
appearance of the horizontal line:
Submit
message"></textarea>
Here is a diagram illustrating the placement and
<label for="country">Country:</label>
Diagram: Horizontal Line
<select id="country">
<option>Select</option>
<option>Philippines</option>
<option>Japan</option>
<option>Korea</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
</html>
Conclusion
HTML forms are essential for creating interactive web applications
and gathering user input. By utilizing form elements such
as <input>, <textarea>, <select>, <option>, and <button> , you can
build forms that collect and submit data efficiently.
The placeholder attribute provides users with helpful hints or example
values for input fields, improving the usability of your forms.
HTML
that provides a way todiv
In HTML, the <div> tag is a versatile and commonly used element
group and organize other elements within a
web page. The <div> tag itself does not carry any semantic
meaning, but it serves as a container or a division that helps
structure the content.
In this topic, we will explore how to use the <div> tag for general
grouping and organization within HTML documents.
Using
the
The <div>
<div> tag is Tag
represented by <div></div>
usually placed around a group of related elements.
and is

Here's an example of using the <div> tag to group


elements:
Here's an example of using the <div> tag to
group elements: Section Title
<!DOCTYPE html>
<html>
<head> <title>HTML Div Example</title> Paragraph of text.
</head>
<body>
<div> appearance of the horizontal line: • List item 1
<h2>Section Title</h2>
Here is a diagram illustrating the placement and
Diagram: Horizontal Line
• List item 2
<p>Paragraph of text.</p> • List item 3
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</body>
</html>
Conclusion
The <div> tag is a fundamental element in HTML that
provides a flexible way to group and organize other
elements within a web page. It offers benefits such as
structural organization. By using the <div> tag wisely, you
can create well-structured web pages.

You might also like