Posted: September 4th, 2022

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

,

and

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 x

·

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

· 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 (

,

, and

)

· Add the additional semantic tags (

,

,

,

)

· Use colspan as needed

· Add additional

’s as needed within

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:

Selector

Property

Value **Your choice

Notes

table

font-family
border
width

**
3px solid color**
50%

primary with 2 backup

th, td

border
text-align

solid color**
center

3px

tbody >tr >th

background-color
border-bottom
font-weight

**
solid color**
normal

10px

thead>tr>th

border
font-family
background-color
color

solid color**
**
**
**

2px
Primary with 2 backup

tfoot>tr>td

font-weight
background-color
color

bold
**
**

**Class for low temp

background-color
color
font-weight

**
**
bold

**class for high temp

background-color
color
font-weight

**
**
bold

Background-color
Color
Font-weight

**class for month alignment

text-align

left

caption

Minimum of 2 properties: values styled

**

ul

list-style-type
padding

None
0

h1

color

**

h2

color

**

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.

image2

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

,

and

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 x

·

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

· 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 (

,

, and

)

· Add the additional semantic tags (

,

,

,

)

· Use colspan as needed

· Add additional

’s as needed within

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:

Selector

Property

Value **Your choice

Notes

table

font-family
border
width

**
3px solid color**
50%

primary with 2 backup

th, td

border
text-align

solid color**
center

3px

tbody >tr >th

background-color
border-bottom
font-weight

**
solid color**
normal

10px

thead>tr>th

border
font-family
background-color
color

solid color**
**
**
**

2px
Primary with 2 backup

tfoot>tr>td

font-weight
background-color
color

bold
**
**

**Class for low temp

background-color
color
font-weight

**
**
bold

**class for high temp

background-color
color
font-weight

**
**
bold

Background-color
Color
Font-weight

**class for month alignment

text-align

left

caption

Minimum of 2 properties: values styled

**

ul

list-style-type
padding

None
0

h1

color

**

h2

color

**

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.

image2

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

,

and

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 x

·

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

· 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 (

,

, and

)

· Add the additional semantic tags (

,

,

,

)

· Use colspan as needed

· Add additional

’s as needed within

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:

Selector

Property

Value **Your choice

Notes

table

font-family
border
width

**
3px solid color**
50%

primary with 2 backup

th, td

border
text-align

solid color**
center

3px

tbody >tr >th

background-color
border-bottom
font-weight

**
solid color**
normal

10px

thead>tr>th

border
font-family
background-color
color

solid color**
**
**
**

2px
Primary with 2 backup

tfoot>tr>td

font-weight
background-color
color

bold
**
**

**Class for low temp

background-color
color
font-weight

**
**
bold

**class for high temp

background-color
color
font-weight

**
**
bold

Background-color
Color
Font-weight

**class for month alignment

text-align

left

caption

Minimum of 2 properties: values styled

**

ul

list-style-type
padding

None
0

h1

color

**

h2

color

**

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.

image2

Expert paper writers are just a few clicks away

Place an order in 3 easy steps. Takes less than 5 mins.

Calculate the price of your order

You will get a personal manager and a discount.
We'll send you the first draft for approval by at
Total price:
$0.00