Task 1: Build a Simple Webpage
Objective:
Create a webpage that includes the following elements and concepts covered in examples 1 to 5.
This task reinforces their understanding of basic HTML structure, headings, paragraphs, links,
horizontal rules, and basic attributes.
Instructions:
1. Start by creating a new HTML document.
2. Follow these requirements for your webpage:
o Use the <!DOCTYPE html> declaration at the top to define the document type.
o Include the root <html> element with nested <head> and <body> elements.
o Add a meaningful title to your page inside the <title> tag.
o In the <body> section, include:
A large heading (<h1>) as the main title of your webpage.
At least two smaller subheadings (<h2> and <h3>).
A paragraph that introduces your page's content.
A second paragraph that includes a line break using the <br> tag.
A hyperlink (<a> tag) that redirects users to Google or W3Schools. Use
the href attribute correctly.
Add a thematic break (<hr>) to separate sections of the page.
Include an empty paragraph for practice (it should render as blank space).
3. Ensure proper use of opening and closing tags for all elements. Avoid relying on the
browser's ability to handle missing end tags.
4. Save your file as task1.html and open it in your browser to ensure it displays correctly.
Bonus Challenge:
Use the style attribute to change the font size of your <h1> element to 50 pixels.
Add another paragraph explaining what you learned about HTML so far.
Task 2: HTML Line Breaks, Preformatted Text, Styles, and Formatting
(Examples 6-11)
Objective:
Create a webpage that demonstrates the use of HTML line breaks, preformatted text, inline
styles, and text formatting elements, based on Examples 6-11.
Instructions:
1. Create a new HTML document named task2.html.
2. Implement the following elements and concepts from Examples 6-11:
o Line Breaks (<br>) - (Example 6)
Add a paragraph that contains multiple line breaks.
o Preformatted Text (<pre>) - (Example 7)
Add a section displaying a poem or formatted text inside the <pre> element.
o Inline CSS Styles (style attribute) - (Examples 8-9)
Set the background color of the page to powderblue.
Create a heading with a blue text color.
Create a paragraph with red text color.
o Text Formatting Elements - (Examples 9-11)
Use <b> and <strong> for bold text.
Use <i> and <em> for italic and emphasized text.
Use <mark> to highlight text.
Use <del> and <ins> to show deleted and inserted text.
Use <sub> and <sup> for subscript and superscript text.
3. Bonus Challenge:
o Add an abbreviation using <abbr> with a title attribute (Example 10).
o Include an HTML comment explaining the purpose of the page (Example 11).
4. Save your file as task2.html and open it in your browser to check the output.
Task 3: Applying HTML and CSS Styling
Related to Examples 11 to 17
Task Description:
Create an HTML page that demonstrates various color styling techniques using inline, internal,
and external CSS. Your page should include:
1. A heading with a background color set using a color name.
2. A paragraph with a text color set using an RGB value.
3. A bordered section with a HEX color for the border.
4. A div with an HSL color for the background.
5. An element using RGBA for a transparent effect.
6. An element using HSLA for a semi-transparent effect.
7. A link styled with an external CSS file, demonstrating different colors for visited, unvisited, and
active states.
Your HTML file should include an internal <style> section, an inline style example, and link to
an external CSS file (styles.css).
Task 4: Comprehensive Web Page with Navigation and Styled Elements
Task Description:
Create a web page that incorporates the following elements. This task is related to Examples 18
to 22:
1. Button as a Link: Create a button that redirects the user to another page when clicked. Use
JavaScript for the redirection functionality. This is related to Example 18 (Button as a Link).
2. HTML Link Colors: Style at least two links with CSS so that they change colors based on their
state (unvisited, visited, hover, active). This is related to Example 19 (HTML Link Colors).
3. Link Styled as a Button: Style a link as a button using CSS, and make sure it redirects to another
page when clicked. This is related to Example 20 (Link Buttons).
4. Bookmarks: Implement bookmarks on the page that allow users to jump between different
chapters. Use anchor links with IDs for navigation. This is related to Example 20 (Create a
Bookmark in HTML).
5. Images with Float: Include images that float to the left or right of the text, causing the text to
wrap around the image. This is related to Example 22 (Image Floating).
Specific Requirements:
1. The page should have at least three chapters (using <h2> tags) with relevant content under
each.
2. Create a JavaScript button that redirects to a page called "chapter.html" when clicked.
3. Create at least two links and style them based on the states: unvisited (green), visited (pink),
hover (red), and active (yellow).
4. Style a link as a button that redirects to "bookmark.html".
5. Create bookmark links that allow users to jump between chapters.
6. Add floating images with the text wrapping around them. Ensure the images float either left or
right, and adjust the layout accordingly.
Task 5: Image Maps and Background Images
This task is related to Examples 23 to 27.
Task Description:
In this task, you will practice working with image maps, background images, and the <picture>
element. You will create a webpage that demonstrates the following concepts:
1. Image maps with clickable areas.
2. Background images applied to various HTML elements.
3. Using the <picture> element for responsive images.
Your task is to:
Create an image map with at least two clickable areas.
Add a background image to a div element and a p element.
Use the <picture> element to show different images based on the screen size.
Requirements:
1. Image Map:
o Use the <map> and <area> elements to create an image map with clickable areas. The
image should be a map of a workplace with clickable areas for the computer and phone.
o Each clickable area should redirect to a different page when clicked.
2. Background Image:
o Add a background image to a div element and a p element. The background image
should repeat itself by default.
o Modify the div and p elements to set the background image to "no-repeat" and "cover"
in the respective elements.
3. Picture Element:
o Use the <picture> element to display different images based on the viewport size. If
the screen width is less than 600px, show one image; if greater than 600px, show a
different image.
Task 6 Description:
This task is related to Examples 28 to 34 which introduce HTML tables, unordered and ordered
lists, and inline/block elements. The task will cover the following concepts:
1. Creating and styling a basic HTML table with headers and data cells.
2. Adding borders to the table and making them collapse into one.
3. Styling the text alignment, padding, and spacing within the table.
4. Using CSS to customize unordered lists with different marker styles.
5. Creating horizontal navigation lists and nested lists.
6. Understanding and working with inline and block-level elements using the <span> and
<div> tags.
The task includes creating a table, customizing its appearance, adding a list, and using block and
inline elements to style content.
Task 7 Description:
This task is related to Examples 35 to 40, which cover HTML forms, input fields, buttons,
labels, and basic form validation. The task will include the following concepts:
1. Creating an HTML form with input fields, checkboxes, radio buttons, and a submit
button.
2. Adding labels for accessibility and proper alignment.
3. Using placeholders and required attributes to guide users.
4. Applying CSS styling to improve the form's appearance.
5. Implementing basic form validation using the required and pattern attributes.
6. Structuring form elements using the <fieldset> and <legend> tags.
Task 8: Creating and Using HTML Forms
Related Examples: 39 to 43
Task Description:
In this task, you will create an HTML form that collects user information, including their first
name, last name, gender, and favorite car brand. The form should include:
A text input for the first name.
A text input for the last name.
A radio button group for gender selection (Male, Female, Other).
A dropdown menu (<select>) for selecting a car brand with multiple options.
A submit button to send the form data.
Ensure that:
Each input field has a corresponding <label> element.
The form uses the POST method when submitting data.
The selected attribute is used to pre-select one car option in the dropdown.
The multiple attribute is added to allow selecting multiple car brands.
The form submits data to "submit_form.php".
Task 9: Interactive Form with Various Input Elements
Related Examples: 44 to 54
Concepts Covered:
<textarea> for multi-line input
<button> for interactive actions
<fieldset> and <legend> for grouping form elements
<datalist> for predefined options
Various <input> types (text, password, checkbox, color, date, etc.)
Task Description:
Create an interactive form that includes different types of input elements to collect user
information. The form should include:
1. A textarea for users to enter a short bio.
2. A fieldset to group personal information (name, email, password).
3. A datalist for users to choose their favorite browser.
4. A color picker to select their favorite color.
5. A checkbox group to select multiple interests (e.g., Coding, Music, Sports).
6. A date picker to select their birthdate.
7. A submit and reset button to submit or clear the form.
Task 10: Advanced Form with Input Validations and Attributes
Description:
This task is related to Examples 55 to 64 and focuses on various <input> types and attributes
such as email, file, number, range, tel, time, url, required, autofocus, and
autocomplete.
You will create a form that integrates these input types and attributes while ensuring proper
validations and user experience enhancements.
Requirements:
1. Create a User Registration Form that includes the following fields:
o Full Name (text, autofocus)
o Email Address (email, required)
o Phone Number (tel, pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}")
o Profile Picture Upload (file, required)
o Age (number, min="18", max="100", required)
o Preferred Volume Level (range, min="0", max="50")
o Preferred Meeting Time (time)
o Personal Website (url)
o Username (text, required, autocomplete="on")
2. Ensure that the email, phone, age, and file fields are required.
3. Use the autocomplete="on" attribute for username but autocomplete="off" for email.
4. The Full Name field should get focus automatically when the page loads (autofocus).
5. The Phone Number should follow the format 123-45-678 (pattern validation).
6. Provide a Submit button to send the form data.
