ITEC 50 - Web System and Technologies 1

Balaba, Edward Hunter C.

BSInfoTech 301- A

● HTML Heading Tags

- In HTML (HyperText Markup Language), heading tags are used to define
headings or titles within a web page. Headings provide a hierarchical structure to the
content, indicating its importance and aiding in the organization and readability of the
page. HTML provides six levels of headings, from <h1> for the highest level of
importance to <h6> for the lowest:

➔ <h1></h1> → This is the highest level of heading and usually represents the
main heading or title of the page.
➔ <h2></h2> → This tag represents a subheading or a section within the main
content.
➔ <h3></h3> → Represents a subsection within a <h2> section.
➔ <h4></h4> → Represents a subsection within a <h3> section.
➔ <h5></h5> → Represents a subsection within a <h4> section.
➔ <h6></h6> → This is the lowest level of heading and represents the least
importance within the hierarchy.

● HTML List
- In HTML (HyperText Markup Language), a list is a way to display a group of
related items or information in a structured and organized manner. There are three main
types of lists in
HTML: unordered lists, ordered lists, and definition lists.

1. Unordered List (<ul>)

- An unordered list is a list where the order of items does not matter. It is typically
displayed with bullet points or other markers to indicate each item. Each item is
represented by a <li> (list item) element.

Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

● Item 1
● Item 2
 ● Item 3

2. Ordered List (<ol>)

- An ordered list is a list where the order of items is important. It is displayed with
numbers or other markers to indicate each item's position. Like unordered lists, each
item is represented by a <li> element.

Example:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

First item
Second item
Third item

3. Definition List (<dl>)

- A definition list consists of terms (<dt> - definition term) and their definitions
(<dd> - definition description). It's often used to display glossaries or key-value pairs.

Example:
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>

Term 1
Definition 1
Term 2
Definition 2
 ● HTML Links Links
- In HTML (HyperText Markup Language), links are used to create a clickable
connection between one web page and another, or between different sections of the
same web page. Links are a fundamental feature for navigation on the web.

​ Creating a Basic Link (<a> - Anchor Tag)

- The most common way to create a link is using the anchor (<a>) tag. The href
attribute specifies the URL or the destination of the link.

<a href="https://example.com">Visit Example Website</a>

​
​ Linking to Sections within the Same Page
- You can link to specific sections within the same page using the # symbol
followed by the id of the target element.

​ <a href="#section1">Go to Section 1</a>

​
​ <h2 id="section1">Section 1</h2>
​ <p>This is section 1 content.</p>

​ Opening Links in a New Tab/Window

-You can use the target attribute to specify how the link should be opened.
"_blank" opens the link in a new tab or window.

<a href="https://example.com" target="_blank">Open in New

Tab</a>
​
​ Linking to Email Addresses
-You can create a link that opens the user's default email client with a pre-filled
email address.

<a href="mailto:[email protected]">Email Us</a>

​ Linking to Phone Numbers

- You can create a link that allows users to make a phone call when clicked on
mobile devices.

<a href="tel:+1234567890">Call Us</a>

​ Linking to Files (e.g., PDF, Word, Excel)

- You can link to various types of files using the href attribute with the file path.
​ <a href="path/to/your/file.pdf">Download PDF</a>
 ​
​ Linking with Image
​ -You can use an image as a link by placing the <img> tag within the <a> tag.

<a href="https://example.com">
<img src="path/to/image.jpg" alt="Image Description">
</a>

● HTML Image
- To display an image in HTML, you use the <img> (image) element.

<img src="image_path" alt="alternate_text">

Explanation of the attributes:

❖ src (source): Specifies the URL or file path to the image. It's required.
❖ alt (alternate text): Provides alternative text for the image. This text is displayed if the
image cannot be loaded or is read by screen readers for accessibility. It's recommended
for accessibility and SEO purposes.

Example:

<img src="path/to/your/image.jpg" alt="Description of the

image">

Optional attributes for more control

❖ width: Specifies the width of the image in pixels or percentage.

❖ height: Specifies the height of the image in pixels or percentage.
❖ title: Provides additional information about the image when the user hovers over it.

Example:

<img src="path/to/your/image.jpg" alt="Description of the image"

width="200" height="150" title="Image Title">
 ● HTML Video
- To embed a video into an HTML document, you can use the <video> element.
The <video> element allows you to play video files directly within a web page.

Syntax:

<video controls>
<source src="video_path" type="video/file_type">
Your browser does not support the video tag.
</video>

Explanation of the attributes and elements:

➢ controls: This attribute displays the default video controls (play, pause, volume, etc.) for
the user.
➢ <source>: This element specifies the source of the video using the src attribute and the
type of the video using the type attribute. You can include multiple <source> elements to
provide different file formats for cross-browser compatibility.
○ src: Specifies the URL or file path to the video.
○ type: Specifies the MIME type of the video file (e.g., video/mp4, video/webm,
video/ogg).
➢ Fallback text: The text "Your browser does not support the video tag." is displayed if the
browser does not support the <video> element.

Example:

<video controls>
<source src="path/to/your/video.mp4" type="video/mp4">
<source src="path/to/your/video.webm" type="video/webm">
<source src="path/to/your/video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>

● HTML Audio
-To embed audio into an HTML document, you can use the <audio> element. The
<audio> element allows you to play audio files directly within a web page.

Syntax:

<audio controls>
 <source src="audio_path" type="audio/file_type"> Your
browser does not support the audio tag.
</audio>
Explanation of the attributes and elements:

➢ controls: This attribute displays the default audio controls (play, pause, volume, etc.) for
the user.
➢ <source>: This element specifies the source of the audio using the src attribute and the
type of the audio using the type attribute. You can include multiple <source> elements to
provide different file formats for cross-browser compatibility.
○ src: Specifies the URL or file path to the audio.
○ type: Specifies the MIME type of the audio file (e.g., audio/mp3, audio/wav,
audio/ogg).
➢ Fallback text: The text "Your browser does not support the audio tag." is displayed if the
browser does not support the <audio> element.

Example:

<audio controls>
<source src="path/to/your/audio.mp3" type="audio/mp3">
<source src="path/to/your/audio.wav" type="audio/wav">
<source src="path/to/your/audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>

● HTML Tables
- In HTML (HyperText Markup Language), the <table> element is used to create
tables for organizing and displaying data in rows and columns.

Syntax:

<table>
<tr>
<th>Header 1</th> <th>Header 2</th>
<!-- Add more headers as needed -->
</tr>
<tr>
<td>Data 1,1</td> <td>Data 1,2</td>
<!-- Add more data cells as needed -->
</tr>
<tr>
<td>Data 2,1</td> <td>Data 2,2</td>
<!-- Add more data cells as needed -- >
 </tr>
<!-- Add more rows as needed -->
</table>
● HTML divs and css
- HTML <div> elements and CSS (Cascading Style Sheets) are commonly used
together to structure and style web content. <div> elements are generic containers that
allow you to group and style various elements in your HTML document, providing
structure and organization to your webpage. CSS is used to control the appearance,
layout, and styling of HTML elements, including <div> elements.

HTML (<div> Elements):

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Welcome to our Website</h1>
</div>

<div class="content"> <p>This is some content.</p>

</div>

<div class="footer">
<p>&copy; 2023 Your Website</p>
</div>
</div>
</body>
</html>
CSS (styles.css)

/* Define styles for the container */

.container {
width: 80%;
margin: 0 auto;
}
/* Define styles for the header */
.header {
background-color: #3498db;
color: white; padding: 20px;
}
/* Define styles for the content */
.content {
padding: 20px;
}
/* Define styles for the footer */
.footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}