HTML Assignment
Due Date: See Syllabus.
Due Time: 5:00 p.m. (Central)
Points: 150 points
Location: Canvas
This activity requires "several hours" to complete and is NOT a thirty-minute assignment. Please plan accordingly.
Each group must consist of no more than five students.
This assignment allows for both individual and group completion. If you choose to work in a group, your first task is
to appoint a leader and a scribe. If working individually, you assume both roles.
Leader Responsibilities:
Accept the role of leader.
Ensure timely submission of the assignment.
Assign each group member a specific programming code part (each member must complete an HTML code
section; points will be deducted from any member who does not).
Keep all group members informed and focused on the task.
Adapt plans if a group member becomes unavailable or fails to complete their part. If a group member fails to
get their code to you, move on without them and assign their part to someone else.
Assign reasonable deadlines.
Arrange alternative meeting options (e.g., phone or zoom) for group discussions.
Include the scribe document (mandatory) in the zipped folder before submission on Canvas.
Scribe Responsibilities:
Ensure the leader includes you in all communications.
Document all communication details (time sent, method used, recipients).
Record all communications from group members.
Document which coding parts (both back-end and front-end) were assigned to each member.
Record instances where a member did not participate as expected (assignment details and timing).
Maintain comprehensive records, especially regarding non-participation.
If all members participate without issue, simply note "Everyone participated equally" and specify the leader
and scribe roles in the document. Send the completed scribe document to the leader.
Important Notes:
Every group member must complete a portion of the HTML code; failure to do so will result in code point
deductions. Ensure the scribe document is included in your folder before submission.
Use of AI is permitted only where explicitly mentioned in the assignment (e.g., using AI for images or
paragraph writing). Use of AI outside these specified areas will be considered cheating and will be reported.
Objective
Page 1 of 13
The objective is to develop a website focusing on Texas A&M University traditions. You will document an existing
tradition and introduce a new tradition specifically for this assignment that you will create. This project will guide you
in creating and publishing a web page while emphasizing collaboration with your peers. Designing and implementing
a website involves crucial decisions regarding content selection.
Please refer to the deliverables section at the end of this document for submission details on Canvas.
Post-Assignment Sharing:
The Group Leader will the be only person who submits the assignment if working in a group.
After completing the assignment, the leader has the option to share the folder with other group members if
they wish to have a copy.
Required Tags
The following are tags that must be used on your website.
<!DOCTYPE html> <html></html> -- defines HTML <head></head> -- defines
document document head and beginning of
the page.
<title></title> -- title of webpage <body></body> -- defines the <table></table> -- table
document body and designates the
beginning of the viewable page.
<tr></tr> -- table row <td></td> -- table data (cell) <h#></h#> -- heading
<hr /> --- horizontal rule <a></a> -- anchor <img /> -- image
<br> - creates a line break <p></p> -- paragraph <ul></ul> -- bullet list
<b></b> -- boldface <li></li> -- list items used for <i></i> -- italics
ordered and unordered items.
<u></u> -- underline <ol> </ol> - ordered list <footer></footer>
hyperlink to a new tab <th> </th> font size
font color <em> <mark>
marquee img link hidden comment
description code Any code listed in the required
directions.
HTML code typically consists of elements enclosed within opening and closing tags. For instance, an opening tag is
denoted by <html> and its corresponding closing tag by </html>. These tags define HTML elements and attributes.
You can explore more about HTML elements and their usage at HTML Elements Resource.
Common code will be initially created on the index page (Home Page) and then replicated across other pages.
Page 2 of 13
Getting Started to Build Your Website Account
1.3 HTML: Getting Started with Basic Elements (located in MyEducator)
Watch the video titled "HTML: Getting Started in an Editor and First Page."
Watch the video titled "HTML: Validating Code to HTML5 Standards at [Link]."
Steps:
1. Install Visual Studio Code software (all group members):
o Download and install Visual Studio Code on your Mac or PC. This software is required for the
assignment.
o The first video recommends various software options, but for this assignment, use Visual Studio Code
as instructed in "HTML: Getting Started in an Editor and First Page."
2. Create a folder named "Texas A&M Website" on your computer:
o Each group member should create this folder to organize project files.
Reminder: Each group member will email their completed code to the leader when complete. The leader will
combine the code into the appropriate pages.
Step 3: Texas A&M Website Folder Requirements (especially for the leader)
Ensure the Texas A&M Website Folder (especially for the leader) includes the following:
One picture showcasing a well-known Texas A&M tradition (such as a building, landmark, garden, or any
agreed-upon item).
One picture of each group member.
One picture representing a newly proposed tradition that you created (such as a building, landmark, garden, or
any agreed-upon item).
All pictures must be suitable for viewing by people of all ages, including grandmothers, parents, and children. Ensure
the pictures are appropriate, legal, and not copyrighted. You do not need explicit permission if the images are
appropriate and legally usable.
Step 4: Create and Save Documentation in Texas A&M Website Folder
Create, save, and add a Microsoft Word and PDF document containing the following information to your Texas A&M
Website folder:
The document should include:
a. Name of a Texas A&M tradition of your choice. b. Name(s) of the creator(s) of the tradition. c. Date the tradition
was established (if unknown, provide an estimated date). d. Time of year the tradition occurs. e. Detailed explanation
of the Texas A&M tradition, including participants, in two or more paragraphs.
To convert to PDF:
1. Open the Word document.
2. Click on File.
3. Select Save As.
Page 3 of 13
4. Choose PDF from the "Save as type" dropdown menu.
5. Click Publish. Save the file as [Link] and [Link].
Ensure that Visual Studio Code displays the added pictures and both the Word and PDF versions of the tradition
document. You may name the file as per your preference.
Step 5: Create HTML Pages and Organize in Texas A&M Website Folder
Create four HTML pages and place them into the Texas A&M Website Folder:
[Link]
[Link]
[Link]
[Link]
Refer to the video tutorial in MyEducator for guidance: "HTML: Getting Started in an Editor and First Page"
(Located in Lesson 1.3).
Ensure your Texas A&M Website Folder contains:
The four HTML pages mentioned above.
Microsoft Word and PDF versions of the tradition document ([Link] and [Link]).
Required pictures as discussed.
Verify your folder to confirm the presence of all files and content.
Example picture only of pages, pictures, and documents:
Reminder: Each group member must contribute to the code. The leader will assign specific tasks to each person. The
common code is used across all four pages, while individual code for each page is detailed below. For example, the
leader assigns the common code and distributes the middle section code for each page among the group members.
Each member is responsible for organizing the information displayed for viewers.
Ready to Begin:
Step 1: Open your [Link] The [Link] page serves as the Home Page.
Step 2: Type <!DOCTYPE html> at the top of the page.
Refer to the resource "HTML: html, head, body, title, h1" located in Lesson 1.3. The DOCTYPE tag is the first tag on
the page, indicating it is an HTML document. This tag does not require a closing tag.
Page 4 of 13
Step 3: Type <html> tag next. If not already present, type </html> to close it. Press Enter until the closing
</html> tag is on line 20. See example picture below.
All subsequent code will be placed between the opening <html> and closing </html> tags. Refer to the resource
"HTML: html, head, body, title, h1" in Lesson 1.3. The <html> tag is the second tag on the page and should always
be the opening and closing tag on every webpage.
Step 4: Copy the <head> tag code provided below and paste it after the opening <html> tag.
<head>
<title>Tradition Name</title>
<!-- Designed By: Group Member Name: Semester (fall, spring, or summer) -->
</head>
Replace "Tradition Name" with the actual name of the tradition in your code.
Replace "Group Member Name: Semester (fall, spring, or summer)" with each group member's name and the current
semester.
Click Save.
Refer to the resource "HTML: html, head, body, title, h1" in Lesson 1.3. The <head> tag contains metadata such as
the document's title and keywords. This information is not visible on the webpage when viewed in a browser.
The <title> tag specifies the title of the webpage, which appears in the browser tab.
For more information on <head> and <title> tags, visit: HTML Head and Title Resource
Body Section:
Step 1: Setting up the Body Section
The body section of your webpage is where content is displayed for viewers on the World Wide Web. It includes
paragraphs, images, hyperlinks, headings, and more.
Copy and paste the following code under the closing </head> tag in your HTML page:
<body>
<table align="center" width="800px" cellpadding="15px">
<tr>
<td>
Page 5 of 13
The information for each page will be different. Replace this paragraph with your specific content. You will continue
working with the common code for all your pages.
</td>
</tr>
</table>
</body>
After making changes, remember to click Save on each page you are working on. Place your cursor before the closing
</td> tag and hit Enter about 10 times to add space.
Ensure there is no space between the closing </body> tag and </html> tag. The ending tags on all four pages, when
completed and copied to other pages, should look like this:
</td>
</tr>
</table>
</body>
</html>
Open your webpages in a browser to view your progress. You should see the paragraph displayed in the browser.
Resource: HTML body Tag
Step 2: Adding Background Colors
Add a bgcolor attribute to the <body> and <td> tags you copied earlier:
<body bgcolor="color">
<td bgcolor="color">
Replace "color" with the hexadecimal or RGB color code of your choice. The bgcolor attribute sets the background
color for your webpage and table. Do not create additional <body> and <td> tags. You have already copied and
pasted these tags in the steps above. You will have one body bgcolor and one td bgcolor.
Resource: HTML bgcolor Attribute, HTML Color Codes
Step 3: Creating Heading and Center Tags
Create three heading tags (<h1>, <h2>, <h3>) and center tags (<center>) for each line listed below:
a. Tradition Name - Replace "Tradition Name" with the actual name of the tradition.
b. Group Members: - List each group member's name below this heading.
c. Date: - Specify any date relevant to the tradition.
Page 6 of 13
Place these heading tags and text after the opening <td> color tag you copied earlier. There are six types of heading
tags: <h1> through <h6>. <h1> defines the largest text size and signifies the most important heading, while <h6>
denotes the smallest text size and is used for less important headings.
Resource: HTML Heading Tags, HTML Center Tag
Example Only:
Step 4: Add and Center an <hr> Tag.
After the Date in the earlier step, add and center an <hr> tag. Ensure the <hr> tag is not the full width of the page.
The <hr> tag is used to create a horizontal line on the webpage, indicating a break in the content. You cannot use 50%
for the width that is listed in the resource.
Resource for <hr> Tag: HR Tag Width Attribute
Step 5: Add and Center Navigation Links
After creating the <hr> line in the earlier step, add and center your navigation links. The links will be listed as:
Example: Home | <a href="page [Link]">Page Name</a>
In this example:
Home does not have an active link (<a> tag without href attribute).
Tradition, Group Members, and New Tradition have active links (<a> tags with href attributes pointing to
their respective HTML pages).
After starting, remember to save each page you are working on. Ensure that the navigation link codes in your HTML
pages match the names of your saved HTML file names for the links to work correctly.
The navigation links should follow the structure described in the Link Structure section of the resource below.
Replace "page name" with the actual names of your saved HTML pages. <a> is called an anchor and recognizes it
has a hyperlink. Href is used to make the hyperlink active.
Resource: HTML Source - Basic Links
Step 6: Add an <hr> Tag After the Navigation Links
Page 7 of 13
After creating the navigation links in the previous step, add an <hr> tag to create a horizontal rule divider centered on
the page. Ensure it is not the full width of the page and matches the length of the previous <hr> tag.
Example picture only:
Footer Section
Step 1: Add an hr tag above the closing </td> tags in your code and center it on the page.
Step 2: Add the footer tag after the hr tag.
Step 3: The footer code section will include your email address with a phrase like "Get in Touch." You can use any
made-up email address. Ensure not to use the phrase "Contact Me." You must use email code and center the email
code in your footer section.
Step 4: Add your closing footer tag.
Ensures all three horizontal lines (hr tags) are the same length and centered on the page. Email Address:
[Link] Footer Resource: [Link]
Example picture. Only:
You should have the following showing on the page:
● Tradition Name
● Group Members
● Date
● HR Line
● Nav Links
● HR Line
● HR Line
● Email Footer
Page 8 of 13
Copy the Code to Other Pages
Step 1: Copy and paste your HTML code from your index page to your other pages. Ensure all links are tested and
working correctly. Then, replicate the code on your Tradition, Group Members, and New Tradition pages. Update the
navigation links as per the instructions provided earlier to ensure they are not active when on the current page.
Adding Information to Home Page ([Link])
Home Page ([Link]) information will be placed between the second and third hr tags <hr> you created on the
index page. All code, text, and pictures will be entered where the “Read this paragraph.” added in an earlier step. The
Home page will describe what your website is about.
Step 1 for adding an image of an Aggie tradition place on campus:
1. Choose an Image: You should already have your pictures in your folder. Select or generate an image of a
place on campus that represents an Aggie tradition. This could be a building, a landmark, a garden, or any
relevant location.
2. Save the Image: Save the image with an appropriate filename, ensuring it matches what you'll use in the
HTML code (e.g., [Link]). You should already have your pictures in your folder.
3. Prepare HTML Code: Update your [Link] file to include the image below the second <hr> line. Use
the <center> tag to center the image and adjust its width and height if necessary. Also, use the alt attribute to
provide a brief description of the image.
4. Citation: If you generated the image using AI, cite the tool or software used to create it in a comment or
elsewhere on your website.
5. Image Code: The image code name must match the saved picture. If your picture is saved as [Link], it must
appear in the code as [Link] within the img code. You can right click on the picture and view properties to
see the file extension.
6. Test: Save your changes and preview the [Link] file in your web browser to ensure the image displays
correctly and is centered as intended.
For more information on using images in HTML, refer to the HTML Images resource.
7. Paragraph: Type one paragraph (eight sentences) describing the already in place tradition.
8. Center: Center the paragraph
9. Formatting: Italicize, bold, and underline any or the same word in the paragraph using all three tags at least
once.
10. Cite: If you AI wrote your paragraph, you must cite that AI created it.
<p> tags in HTML are used specifically for defining paragraphs. For more information on how to use <p> tags
effectively, you can visit the following resource: Paragraph Resource.
Page 9 of 13
Additionally, if you're interested in formatting text with bold, italic, or underline styles in HTML, you can find useful
details here: Bold, Italic, and Underline Resource.
11. Hyperlinks: Create two hyperlinks to external websites in your paragraph. The external websites must open in
a new window. For example, you can link to any website that is fit for grandma, mom, or kids. If you're
unsure how to code the links to open in a new window, refer to Lesson 1.3 on HTML links or click the link
W3Schools HTML Links Guide W3Schools.
12. Table Title: Create a title above the table of your choice and center the title.
13. Table Rows: Below the title, you will create a table with three columns and three rows below the paragraph.
The first row will be your header row as shown in the table example.
Table Example:
Tradition Name Date Created Created By
Link Where does it Why this
happen on tradition?
campus?
Any Any Any
14. Header Row: The header row will have the Tradition Name, Date Created, Created By. For example,
Tradition Name with the name of the tradition you are explaining like Midnight Yell.
15. Second Row: The second row will link to a page for your viewers to read more, where the tradition takes
place, and why this tradition. For example, Midnight Yell takes place at Kyle Field.
16. Third Row: The third row can have any detail(s) you wish to add in the three cells.
17. Center Tag: Center the table on the page.
Watch HTML: table, tr, td, th in Lesson 1.3 on how to create a table. Click save, refresh the browser, and view
your changes. HTML Table Resource: [Link] If using this
resource, you only copy and paste the table tags and not the opening and closing body tags.
Adding Information to Tradition Page ([Link])
Beginning the Tradition Page ([Link])
Page 10 of 13
1. Formatting: Center, bold, and underline: Tradition Name (Replace Tradition Name with the name of
the tradition.)
2. Description: Describe your tradition using at least four lines and center the paragraph. Use the
paragraph tag. Do not repeat what was used on the Home Page. You cannot use AI on this paragraph.
3. Headers: Create three headers about your tradition. See picture below for example.
4. Each Header: Under each header, list two goals. The two goals will have the following for each of the
three. Center and underline each header.
5. Requirements:
Header One: When and Where Takes Place
The first goal list must be a number list.
Header Two: Who Is Involved? (Meaning faculty, staff, students, community, and/or others)
The second goal list must be a Roman numeral list.
Header Three: Your Choice (create your own header)
The third goal list must be a bullet list.
Watch HTML: ol, ul, li, lists, unordered, ordered, list item in Lesson 1.3.
****Your number list, Roman number list, and bullet list may not look centered on the page. That is a display
monitor thing depending on the user's settings. You are fine if you have the center tags. This would be a good place to
use the <br> tag. <br> tag works like enter on a keyboard. HTML List Resource:
[Link]
6. Sentences: Type and center two sentences that will have the hyperlinks to your Tradition word
document and in pdf and word format. The sentences will be placed above the footer and hr line.
Hyperlink resources were provided earlier in the instructions.
Example picture only:
Group Member Page ([Link])
1. Pictures: Add a picture of each group member. Pictures can be generated using AI. You need to cite
the pictures created by AI.
2. Name: List the name of each group member under their picture.
3. Bio: Write a short bio of themselves. Three lines will suffice. Write about anything or make it up.
4. Email: List an email address. It can be made up.
Page 11 of 13
New Tradition ([Link])
1. New Tradition Name: List name of new tradition.
2. Format: Center the new tradition name.
3. Font Color: Change the font color for the Aggie tradition name to any color.
4. Font Size: Change the font size to any size.
Resource: Font color, Font size
5. Picture: Insert the new tradition picture. Pictures can be generated using AI. You need to cite the
pictures created by AI.
6. Hyperlink: Hyperlink the picture to any external website that is fit for grandma, mom, or kid.
Scroll down to HTML Links - Use an Image as a Link
[Link]
7. Comment: Type a hidden comment below the picture. Comment needs to be one sentence describing
the picture.
See resource link: Hidden Comments
8. Header: Create a header of your choice using a header tag for your description list.
9. Description List: Create a Description List using Description List HTML Code.
10. Description Term: Create a Description Term (Need at three)
11. Description Definition: Need one definition under each term.
See resource Link: Description List Code
Description list, term, and definition can be of your choice.
12. Paragraph: Type one paragraph (4 sentences or more) describing anything about the new tradition.
13. Highlight: Use the mark element to highlight any word in the paragraph.
14. Emphasized: Use the emphasized element on any word in the paragraph.
15. Format: Center the paragraph.
See resource link: Mark and Emphasized Code
16. Marquee: Create an HTML Marquee with all group members' names below the paragraph.
See resource link: Marquee Code
Example picture only:
Page 12 of 13
Email Files to Group Members
You have completed the HTML assignment. This is only for those who are working in a group. The scribe will need
to send the leader the scribe document on participation from each group member. The word document will be placed
in the Texas A&M Website folder. Once the leader has zipped the file, the leader will email the zipped folder to each
group member if they want a copy. The leader will be the only person to submit the file for grading.
Deliverables
1. Submit: Submit your completed work on Canvas. To submit a deliverable on the course website, you must do
the following:
2. Zip Folder: You will right click on the folder, click Send To, and click Compressed (zipped folder). The files
in the folder are in the zipped folder. **Do not open and check it. If you cannot attach the zip folder, attach
each individual file before submitting.
3. Click: “Start Assignment”.
4. Upload File: Click the “Upload File”. Click the “Browse” button and upload a zipped file and click the
“Submit” button. If Canvas gives you a security warning, you can attach each individual file. You will click
“Browse” and click on each file to attach before submitting the assignment.
Page 13 of 13