Click the view activity to see our projects in Web System and Technology in this whole sem
Activity 1
Activity 2
Activity 3
Activity 4
Activity 5
Activity 6
Activity 7
This HTML file creates a basic personal information page using simple text formatting. It begins with the <!DOCTYPE html> declaration and includes a <head> with a title and a styled button that links back to the main project page.
Inside the <body>, the user’s autobiography details like name, age, address, birthday, and school are displayed using multiple <p> tags. Each line represents a single piece of information, written in a readable format for quick viewing.
At the bottom, a "Main Page" button is styled with CSS and links back to sonido8.html. This activity helps reinforce the fundamentals of structuring text content using paragraphs and applying basic CSS styles for layout and navigation.
This HTML file creates a simple autobiography web page using basic HTML structure. It begins with <!DOCTYPE html> to define it as an HTML5 document. The <html> tag wraps all content, and the <head> includes the <title> for the browser tab and a <style> block that adds design to the button at the bottom.
Inside the <body>, personal details such as name, age, address, birthday, and school are displayed using <p> tags. Each label is bolded with <b>, and the values are italicized with <i>. The title "AUTOBIOGRAPHY" is centered using the old <center> tag (though modern CSS is preferred).
At the bottom, there's a "Main Page" button styled with blue color and hover effects. When clicked, it takes the user back to the main project page (sonido8.html). Overall, this activity demonstrates how to present personal data in a clean format using basic HTML and simple styling.
This HTML file creates an autobiography page that shares a personal story using structured content and basic tags. The page starts with the <!DOCTYPE html> declaration and uses tags like <head> for the title and embedded styles, and <body> for all visible content.
At the top, it shows basic personal details using <p> tags, and emphasizes labels with <b> and values with <i>. The narrative begins under “MY LIFE” and tells a short story of personal growth using aligned paragraphs (left, right, center, and justify), giving the page a readable and expressive layout.
The bottom of the page includes a styled “Main Page” button linking to the homepage. Overall, this activity combines storytelling and HTML formatting to practice content structure, text alignment, and linking in a meaningful way.
Go to ActivityThis HTML page displays a list of male and female students using ordered and unordered list tags. The structure begins with the <!DOCTYPE html> declaration and includes a basic layout with a <head> section for the title and CSS styling.
The content is organized into two groups: one using an ordered list (<ol>) to number male student names, and the other using an unordered list (<ul>) to show female names with bullet points. Each name is placed inside a <li> tag to represent list items properly.
At the bottom, a “Main Page” button is included and styled using CSS. It links back to the homepage (sonido8.html) and features hover effects to improve interactivity. This activity practices how to present categorized data with HTML lists and basic navigation.
This HTML page displays a table comparing a list of male and female students. It uses the <table> element to structure the data into rows and columns. The first row contains headers labeled "Male" and "Female".
Inside each table cell, ordered lists (<ol>) are used for male names and unordered lists (<ul>) for female names. Each student name is wrapped in a <li> tag to display as list items. The start attribute in the ordered lists ensures the numbering continues correctly across rows.
Styling is applied to center the table and add borders using CSS. At the bottom of the page, a styled “Main Page” button is included for navigation back to the homepage (sonido8.html). This activity demonstrates how to organize list-based data inside tables using proper HTML tags and simple formatting.
This HTML file creates a personal profile page using a combination of text, tables, and images. It begins with the <!DOCTYPE> declaration and includes a title, although the <title> tag is placed incorrectly and should be inside the <head> tag.
The main content displays a photo on the upper right using the <img> tag, styled with fixed width and height. Below the image, personal information such as name, age, birthday, and school details are shown using multiple <p> tags, formatted with bold labels and italicized values for clarity.
A "Main Page" button is included at the bottom, styled using CSS and wrapped in an anchor tag to link back to sonido8.html. This activity demonstrates how to layout personal data visually with basic styling, image insertion, and page navigation.
This HTML page builds a simple interactive form with various input types. It begins with a standard <form> tag and includes JavaScript to show a “SUBMITTED!” alert and reset the form when submitted.
The form collects details like name, age, address, birthday, gender (radio buttons), course (dropdown), school, favorite foods (checkboxes), movie selections, and favorite color. It also embeds a playable video and audio file using the <video> and <audio> tags, respectively.
A "Main Page" button at the bottom links back to sonido8.html. This activity demonstrates the use of form elements, multimedia embedding, color selection, and basic form handling with JavaScript.
Choose a specific module to download: