Computer science
CTI-110 WEB, PROGRAMMING AND DATABASE FOUNDATIONS
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
CTI 110 Page 13
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
Lesson 3
Assignment 3 – Creating a Styled SemanTic table Web Page using internal Css
Objectives:
· Use Basic Table Tags
· Use the semantic <tfoot>, <thead> and <tbody> table tags
· Enhance a table using internal CSS
· Validate your html code
Lab Task Checklist
· It is expected you have read the required reading in this Lesson before starting the lab.
· Review Course Resources/Rules of Engagement (ROE).
· Develop a web page that meets the instructions below.
· Name Convention for HTML Exercise – lastname-table.html
· Use a validation tool to validate your code. Take a snapshot of results and insert into a MS Word document.
· Name Convention for Validation -- lastname-validate-table.docx
· Submit all files/s to Blackboard
Assignment Instructions - Creating a HTML Semantic Table
1. Open your text editor and immediately save the file.
2. Stub out the required minimum code tags for your files. < title > tag is “ Temperatures ”.
3. Ensure the web page structure uses semantic tags:
a. General:
· Header
· Navigation
· Two internal jumper links to the two sections in <main>
· Link to at least one external information page about North Carolina
· Main
· Section for Brief synopsis for North Carolina
· Section for tables on 10- year temperature averages
b. Tables:
· Use common table tags (<th>, <tr>, and <td>)
· Add the additional semantic tags (<caption>, <thead>, <tbody>, <tfoot> )
· Use colspan as needed
· Add additional <th>’s as needed within <tbody> hint: Season Titles and Average Temp
· Structure as rendered in Additional Lab Material to include position of text
· Use Internal CSS to highlight the highest and lowest temperatures.
· Use Internal CSS to Style your Table for choice of colors, font, background etc
c. Add classes as needed (*hint: hottest and coldest will need one and text-align for Month Column)
4. Add the following as INTERNAL CSS:
5. Expected Render of Table:
6. Test your code and make sure code follows key HTML coding conventions as required by this course
7. Save code with the required naming convention
Validating CSS and HTML
W3C's Markup Validation Service is an online tool that lets us validate a web page. The tool is available at https://validator.w3.org/.
W3C's Markup Validation Service is an online tool that lets us validate a CSS. The tool is available at https://jigsaw.w3.org/css-validator/.
More information can be found in Course Resources if needed.
1. Validate your code for html and CSS. Take a snapshot of results and insert into a MS Word document. Save with the required naming convention.