Scribd
Upload
8 views

Unit 2 - HTML for Content Structure

This document provides an overview of HTML as a foundational programming language for web development, detailing its structure, essential tags, and best practices for creating and organizing web pages. It includes learning objectives, practical tasks for students to build a basic web page, and emphasizes the importance of testing across different browsers for compatibility. Additionally, it covers the significance of proper file naming and organization, as well as the role of various HTML tags in structuring content.

Uploaded by

Mark Anthony Arenas Gioketo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Unit 2 - HTML for Content Structure

This document provides an overview of HTML as a foundational programming language for web development, detailing its structure, essential tags, and best practices for creating and organizing web pages. It includes learning objectives, practical tasks for students to build a basic web page, and emphasizes the importance of testing across different browsers for compatibility. Additionally, it covers the significance of proper file naming and organization, as well as the role of various HTML tags in structuring content.

Uploaded by

Mark Anthony Arenas Gioketo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

UNIT II.

HTML FOR CONTENT STRUCTURE


Overview

Developers use a foundational programming language called Hypertext Markup


Language (HTML) to build and structure web pages. HTML serves as the backbone of web
development, using special markup tags to define the organization and presentation of
content. This unit will delve into the basics of HTML, teaching you how to utilize various
HTML tags to construct simple and effective web pages. Through this exploration, you will
understand how HTML forms the structural framework of web content.

This unit begins by introducing essential HTML tags and their functions. You'll learn
how these tags help create different sections of a webpage, such as the head, body, and footer.
By the end of this unit, you will be equipped to build basic web pages, understand the
significance of file extensions and naming conventions, and follow best practices for saving
and organizing HTML files. Additionally, you'll explore how to view your HTML pages across
different web browsers to ensure compatibility and consistency.
Learning Objectives

At the end of the unit, students will be able to:


1. explain the purpose of each section (head, body, and footer) in a web page;
2. describe the importance of proper file extensions and naming conventions;
3. identify best practices for saving and organizing HTML files;
4. use basic HTML tags to structure the content of a webpage; and
5. view a created HTML webpage in different browsers to check compatibility.
Setting Up

Name: ___________________________________________ Date: ___________________


Year/Section: ____________________________________

Pre-Test 2
Web Page Builder Challenge
Directions: In this activity, students are tasked to build a web page, organize their files
correctly, and test it for compatibility across multiple browsers. As they advance, students
engage in an interactive experience while learning HTML and web design.
Execution:

• In this activity, students will work individually. They will complete the tasks and
answer questions using any text editor available on their PC. Afterward, each student
will present their output to the class and receive feedback.
Task 1: Create a basic web page that includes your personal information. Your task is to
include the following sections:
Head: Add a title that will describe your web page.

Body: Structure the content using basic HTML tags (heading, paragraph, etc.) and use
appropriate HTML tags for each element.
Footer: Include copyright information for the footer.
Task 2: Save your file using the .html as the extension. Use proper naming conventions for
your files.
Task 3: Test your web page across at least three different browsers. Check if your page
displays correctly on each one, and note any issues or layout discrepancies you encounter.
Task 4: Share your experience with your classmate during the cross-browser testing. What
problems did you face and how did you fix them.
Lesson Proper

Structural Elements

Today, many people - individuals, students, teachers, business executives, web


developers, and others - are developing web pages for personal or professional reasons. Each
person has his or her style, and the resulting web pages are as diverse as the people who
create them.

Understanding the basic structure of a web page is crucial before embarking on web
development. A web page is typically organized into a few fundamental components that
define its layout and content. The structure begins with the <!DOCTYPE html> declaration,
which informs the browser about the version of HTML used in the document. Following this
are the <html></html> tag pairs, which serve as the root element encompassing all other
HTML elements. Within the <html></html> tag pairs, the web page is divided into two
primary sections: the <head> and the <body>. The <head> section contains meta-information
such as the title of the document, links to external stylesheets, scripts, and other metadata
that help configure the document’s behavior and appearance but do not appear directly on
the page.
The <body> section is where the main content of the web page resides. This includes
text, images, videos, links, and any interactive elements that the user can engage with. Proper
structuring within the <body> is essential to ensure content is well-organized and accessible.
Developers use various HTML tags such as headings (<h1> to <h6>), paragraphs (<p>), lists,
and sections like <header>, <footer>, and <main> to logically organize content and provide a
clear layout. Understanding this basic structure is fundamental to creating web pages that are
not only visually appealing but also functional and user-friendly. It ensures that the content
is appropriately displayed and enhances the overall user experience.

Writing and Saving an HTML File

To begin creating a web page, you will need a text editor or a source code editor
installed on your computer. You can use simple tools like Notepad, or more advanced editors
such as Sublime Text or Notepad++. The first step is to open your chosen editor and create a
new file. It's a good practice to save this file before you start writing your HTML code. When
saving, make sure to choose the "Save As" option, and save the file with an .html extension
(e.g., mypage.html). This tells the computer that the file is an HTML document.
Once your file is saved, you can begin writing your HTML code inside the editor. After
you've written your code, you can view the results by simply double-clicking on the saved
HTML file. This action will open the file in your default web browser, displaying the contents
as a web page. It's important to note that since this file is saved on your local computer and
not hosted on a web server, only you can view it. Other users won’t be able to access your file
unless it is uploaded to a web server. This local setup is perfect for learning and testing your
web pages before making them available online.

Naming and Organizing HTML Files

Proper organization of HTML files is essential for efficient web development and long-
term project maintenance. When working on a web project, it's important to establish a clear
directory structure. Typically, you should have separate folders for different types of files,
such as images for all your graphics, css for stylesheets, and js for JavaScript files. This
structure helps in keeping your project organized, making it easier to find and update specific
files. A well-organized project not only saves time but also reduces the likelihood of errors,
especially in larger projects.
In addition to folder organization, consistent and descriptive naming conventions are
crucial. File names should be meaningful and reflect their content or purpose. For example,
instead of naming a file page1.html, use a more descriptive name like about-us.html. Avoid
using spaces in file names; instead, use hyphens or underscores. Also, maintain a consistent
case (preferably lowercase) throughout your project. Following these practices will make
your project more manageable, especially when working in teams or when revisiting the
project after some time.

Basic HTML Tags

Now that you have successfully created, saved, and displayed an HTML file, it's
important to delve deeper into its contents to understand the fundamental building blocks.
Every HTML file is structured using specific tags that define the overall framework of the
webpage. HTML tags are special keywords enclosed within angle brackets, such as <html>.
These tags usually come in pairs, with a start tag (e.g., <body>) and an end tag (e.g.,
</body>). The start tag opens the element, while the end tag closes it, enclosing the content
in between. Tags like <br /> or <hr /> are self-closing and do not require an end tag.
The first tag in any HTML file is the <!DOCTYPE html> declaration, which tells the
browser that the document follows HTML5 standards. This declaration ensures that your
webpage is rendered correctly. Following the <!DOCTYPE> declaration, the <html> and
</html> tags encapsulate the entire HTML document, marking its start and end. Inside these
tags, the document is typically divided into two main sections: the <head> section, which
contains metadata, links to stylesheets, and scripts, and the <body> section, which holds the
actual content visible on the webpage. For consistency and best practices, it's recommended
to use lowercase letters for all tags, as this aligns with modern web standards. Here’s what
the basic structure should look like:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Your Name - Personal Website</title>
</head>
<body>
<!--Your content goes here -->
</body>
</html>

The <meta> element in HTML is used to provide metadata about a web page, which
can include information such as the character encoding, author, description, keywords, and
viewport settings. It is typically placed within the <head> section of the HTML document. The
<meta> tag does not affect the content displayed on the page but plays a crucial role in
enhancing SEO (Search Engine Optimization), improving page rendering, and ensuring
proper accessibility. Common attributes of the <meta> tag include name, content, http-equiv,
and charset. For example, setting the charset attribute ensures the correct encoding of the
text, while the name="viewport" attribute is essential for responsive web design. Overall, the
<meta> element allows web developers to configure how their page is interpreted by
browsers and search engines.
The HTML comment element, represented by <!-- comment here -->, is used to
insert comments within an HTML document. These comments are not displayed in the
browser, but they provide valuable information for developers, such as explanations, notes,
or reminders within the code. HTML comments can span multiple lines and help improve
code readability and maintainability, especially when working in teams or revisiting code
after some time. They can also be used to temporarily disable code without deleting it.
However, it is important to note that comments are visible in the page's source code, so
sensitive information should never be placed within them. Overall, HTML comments serve as
an effective tool for documentation and collaboration during web development.
To display a webpage's title in the browser's tab, the <title></title> tag pairs
are used within the <head> section. The title provides a brief description of the page's content
and is essential for user navigation and SEO. For content structuring, paragraphs are created
using the <p></p> tag pairs, which helps in formatting text into distinct blocks. Additionally,
line breaks can be inserted using the <br /> tag to control the flow of text. For styling, the
<b> and <i> tags are used to apply bold and italic formatting, respectively. Proper use of
these tags ensures your content is organized, readable, and visually appealing.
Headings are another crucial aspect of content structuring, defined by tags ranging
from <h1> to <h6>, with <h1> representing the largest and most important heading and
<h6> the smallest. Headings help organize content hierarchically, making it easier for users
to navigate. Lastly, horizontal rules, created using the <hr /> tag, provide a visual separation
between sections of content, enhancing readability and structure. By understanding and
properly applying these tags, you can create well-structured, visually coherent web pages.

Using a Browser to View a Web Page

Viewing a created HTML webpage in different browsers is essential to ensure


compatibility and a consistent user experience across various platforms. Each web browser—
such as Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge—has its rendering engine,
which may interpret and display HTML, CSS, and JavaScript differently. By testing the
webpage across multiple browsers, developers can identify issues related to layout
discrepancies, missing features, or broken functionality. Some older or less popular browsers
may not fully support the latest web standards, leading to inconsistencies in how the page
appears or behaves. Therefore, testing across a range of browsers helps ensure that the
webpage is accessible and functional for all users, regardless of their browser choice.

Moreover, cross-browser testing is crucial for achieving responsiveness and user


interface (UI) consistency. Modern websites must adapt to various screen sizes, and testing
across different browsers is essential to ensure that pages display correctly on both desktop
and mobile devices. Additionally, this testing allows developers to check for specific browser
quirks or bugs that could affect user experience, such as issues with form validation or
animations. Tools like browser developer tools and cross-browser testing services can help
streamline this process by simulating different browsers and devices, making it easier to
debug and optimize a webpage for compatibility. Finally, viewing the HTML webpage in
multiple browsers ensures that users enjoy a smooth and uniform experience regardless of
their preferred browser.
Assessing Learning

Seatwork 2
Name: ___________________________________________ Score: __________________
Year/Section: ____________________________________ Date: ___________________
Directions: Read each question carefully and select the correct answer by encircling the
corresponding letter. Any form of erasure will invalidate your answer.

1. What is the purpose of the <!DOCTYPE> declaration in an HTML document?


a. To define the title of the document
b. To indicate the HTML version being used
c. To close the HTML document
d. To link an external stylesheet
2. What tag is used to define the root of an HTML document?

a. <html></html>
b. <body></body>
c. <head></head>
d. <root></root>
3. Where is the <title> tag typically placed in an HTML document?
a. Inside the <body> section
b. Inside the <head> section
c. Inside the <footer> section
d. At the end of the document
4. Which tag is used to create a paragraph in HTML?
a. <p></p>
b. <div></div>
c. <section></section>
d. <article></article>
5. What is the correct tag to create a heading in HTML?
a. <head>
b. <h1> through <h6>
c. <heading>
d. <hgroup>
6. What tag is used to add a horizontal line in an HTML page?
a. <line />
b. <hr />
c. <hline />
d. <br />
7. Which tag is used to create a line break in HTML?
a. <break />
b. <br />
c. <lb />
d. <line />
8. What should the file extension of an HTML file be?
a. .html
b. .htm
c. .docx
d. .css
9. What is the correct syntax to begin an HTML document?
a. <html><head><body></body></html>
b. <!DOCTYPE html><html><head></head><body></body></html>
c. <html><body><head></body></html>
d. <html><body></html><head></body>

10. What is the purpose of the <head> section in an HTML document?


a. To define the content visible on the webpage
b. To define metadata, such as the title and links to external resources
c. To display images and videos
d. To create the footer section
11. When saving an HTML file, what is the best practice for naming it?

a. Use uppercase letters and spaces


b. Use lowercase letters and avoid spaces (e.g., index.html)
c. Use numbers and symbols
d. Use random characters
12. Which of the following is a good practice for organizing HTML files in a project folder?
a. Place all files in the root directory
b. Organize related files into folders (e.g., css, images, scripts)
c. Keep all files in the desktop folder for easy access
d. Rename all files randomly
13. What is the correct tag to define the title of an HTML document?
a. <meta />
b. <title></title>
c. <head></head>
d. <header>
14. How do you save a newly created HTML file?
a. Save it as .txt
b. Save it as .html
c. Save it as .css
d. Save it as .js
15. Which of the following tags is used to define the main content area of an HTML page?

a. <header>
b. <footer>
c. <body></body>
d. <main>
16. What is the function of the <html> tag in an HTML document?
a. It defines the metadata of the page
b. It defines the body of the page
c. It is the root element that contains all other HTML elements
d. It is used to add links to external stylesheets
17. Which of the following is the correct way to add a comment in HTML?
a. // This is a comment
b. <!-- This is a comment -->
c. /* This is a comment */
d. # This is a comment
18. How do you ensure that your HTML file is compatible across different browsers?
a. Test the webpage on multiple browsers and devices
b. Use only one browser for testing
c. Avoid using JavaScript in the HTML file
d. Use external libraries that are not browser-specific
19. What should the HTML file structure begin with to ensure it adheres to the HTML5
standard?
a. <!DOCTYPE html>
b. <meta charset="UTF-8">
c. <html lang="en">
d. <head></head>
20. Where would you typically include the external CSS files in an HTML document?
a. Inside the <body> section
b. Inside the <head> section using the <link> tag
c. Inside the <footer> section
d. Inside the <header> section
Laboratory Exercise 2
Building a Basic HTML Web Page
Name: ___________________________________________ Score: __________________

Year/Section: ____________________________________ Date: ___________________


Directions: Create a folder named "ITWS01_laboratoryExercises" for all your laboratory
activities in this course. Follow the instructions carefully.
Instructions:

1. Using a Source Code Editor, create an HTML file that will produce the same output as
shown below.

2. The title should be “Laboratory 2”.

3. Save the file as Laboratory2.html.


Outcome: Through this laboratory exercise, you have learned how to create a simple HTML
page, add basic elements like headings, paragraphs, and line breaks, and save and organize
HTML files. You also test your page in different browsers and reflect on the differences in
rendering. This experience will help you build well-structured web pages in the future.
Laboratory Exercise 3
Building your Personal Website
Name: ___________________________________________ Score: __________________

Year/Section: ____________________________________ Date: ___________________


Directions: Create a simple personal website using HTML. Start by organizing your content to
include your personal information, portfolio, and contact details. Apply basic HTML tags to
structure this content effectively. Finally, test your website on different browsers to ensure
compatibility and a consistent user experience across platforms.
Instructions:

1. On your root folder named ITWS01_laboratoryExercises, create a new folder named


Personal_Website.

2. Inside Personal_Website, create these subfolders:

• images/ (for pictures and other media)


• css/ (for stylesheets)

3. Open your text editor (e.g., Notepad, Sublime Text, Visual Studio Code).

4. In the Personal_Website folder, create a new file and name it index.html.

5. Write the basic structure of the HTML document. You may consider this as a template.
6. Open your website in at least three different browsers (Google Chrome, Mozilla
Firefox, Microsoft Edge).

7. Check if all elements appear correctly. Identify any issues with layout or text
alignment that may differ between browsers.
Outcome: By completing this exercise, you will have created a personal website that displays
your bio, portfolio, and contact information. You will also practice organizing HTML files,
using basic HTML tags, and ensuring browser compatibility. This simple personal website can
serve as a portfolio or an introduction to potential audiences or collaborators.

You might also like