Computer science

lsn3_lab_lp4.docx

Home >Computer Science homework help >Computer science

CTI-110 WEB, PROGRAMMING AND DATABASE FOUNDATIONS

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

AY2022 Page 13

Lesson 3

Lab 3 – Create and Style WEB Landing Page (LP)

Objectives:

1. Use the HTML Tree Structure Diagram to develop a Landing Page

2. Add INTERNAL CSS Styling to the Landing Web Page

3. Create a jumper/linkage within a web page

4. Apply HTML5 Coding Conventions

5. Validate your code

Lab Task Checklist

· It is expected you have read the required reading in this Lesson before starting the lab.

· Name Convention for the HTML Exercise -- lastname-lp-l3.html (Your lastname)

· Modify the attached ”starter.html” to meet the Lab Instructions below

· 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-lp-l3.docx

· Submit all files/s to BlackBoard.

Lab Instructions

1. Open your text editor/Notepad++ and immediately save the attached file ”starter.html” stub with the correct naming convention.

2. Adding Tables:

· Review the hierarchy from Lesson 2. This lab adds to the hierarchy.

· Review the additional hierarchy needed for the tables. This new addition adds tables to the 2nd Section.

3. Use the tree hierarchy diagram to complete/finish the ”starter.html” file to meet the required web page structure.

· Enter the missing tags

· Enter the missing content to meet the tree hierarchy and required content.

· Add the tables

4. See Additional Details below for the tree hierarchy, expected content and example of expected render (your content and CSS should differ as to values chosen per chart in#6 below).

5. Add the required INTERNAL CSS styling for your web page.

Selector

Property

Value Your choice

Notes

body

font-family

background-color

primary with 2 backups

h1

color

font-size

40px

ul

list-style-type

none

.white

color

white

Apply to <a>

.fctr

text-align

background-color

Center

Element styled: footer

caption

color

font-size

table

border

thead>tr>th

background-color

color

tr, td

border

img

border

nav ul

padding

font-size

0

**

6. Validate your HTML. See Validating Your HTML (Validating HTML.docx) in Course Resources/Web Resources for more information. Take a screenshot of completed validation for each required file and put in a word document.

ADDITIONAL DETAILS

Additional Tree Hierarchy Diagram for the lab:

EXPECTED CONTENT.

1. Choose a band/concert to design a web page for.

a. You will need 4 paragraphs of content about your chosen band/concert.

2. Adjust any naming, linkage, or file names (for example the image you use will most likely have a different file name than the “starter.html” stub).

3. You will provide your own image. The “starter.html” provides the sizing.

a. You can use a URL to an image

b. You can use a separate image file. Make sure you use relative addressing.

4. You can use the following content from expected render:

a. Navigation section

7. Tables Section

· You can use the content from the expected render for the tables

· Contains two tables. One for Dates and Location and one for Costs

· Both Tables will use the <caption> tag for table headings and basic table tags (th and td).

· Dates and Location Table, add the sematic tags thead and tbody.

· Costs Table, add the semantic tags for thead, tbody and tfoot.

5. The footer should have the current year and your LAST NAME

6. Test your code and make sure code follows key HTML coding conventions as required by this course:

· Declare the document type for HTML (<!DOCTYPE html)

· Use lowercase element names

· Close all elements for compatibility with XML and XHTML

· Use lowercase attribute names

· Always quote attribute values

· HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

· Do not add blank lines, spaces, or indentations without a reason.

· For readability, add blank lines to separate large or logical code blocks.

· For readability, add two spaces of indentation. Try not to use the tab key.

· Use lowercase file names separated by a hypen (-). For example, halliday-tables.html. Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg"

Example of Expected Render. Your content and CSS will differ, but your code should reflect a similar render as seen below:

main

footer

section

table

caption

thead

tbody