Intro to Web Development Iowa State University: Create Web page and Code Table
You
must write the code files by hand for all assignments in this class. A
simple text editor, such as Notepad or Notepad++ will suffice (or
TextEdit on the Mac). DO NOT use GUI editors, such as FrontPage,
Dreamweaver, etc. You must write the code for your web pages yourself.
If you are using a PC, it is strongly recommended that you download the
free Notepad++ text editor (https://notepad-plus-plus.org/)
because it contains extra features which assist with debugging, such as
line numbering and color coding of different elements of syntax. Mac users
should use the TextEdit text editor that comes with the Mac OS.
However, if you are a Mac user, make sure you set TextEdit to use Plain
Text by default. You can find instructions for this here: https://www.tekrevue.com/tip/textedit-plain-text-mode/
Make
sure all of your web pages comply with the HTML 5 standards and CSS
standards. DO NOT use obsolete HTML elements and attributes from
previous versions of HTML. By including the HTML 5 DOCTYPE declaration
in your webpages, and validating all of your HTML files at https://validator.w3.org/#validate_by_upload,
you can be sure that your code complies with HTML 5. Starting Week 2,
your external style sheet (.css file) must pass validation at the W3C
CSS Validation Service: https://jigsaw.w3.org/css-validator/#validate_by_upload.
Make sure you use the "Validate by File Upload" option (and NOT the
"Validate by Direct Input" option), on both of these validators since
this is the way your instructor will check your pages when grading your
assignments.
The
home page of your website must be named "LastFirstHomePage.html" where
"Last" is your last name and "First" is your first name. For example,
if your name is John Smith, you would name your home page file
SmithJohnHomePage.html Starting with Week 2, you will also have a CSS
file linked into every HTML page on your website. Name your CSS file
"LastFirstStyleSheet.css" where "Last" is your last name and "First" is
your first name. Your website must only have 1 CSS file and that file
should be linked into all HTML pages on your website. Additional HTML
pages created for your website (During Week 3 through Week 5) should be
hyperlinked together through a navigation menu that appears on all pages
of your website. Naming conventions for each additional page on your
website will be included in each assignment description that requires a
new HTML page.
Specific Instructions for Assignment 4:
For
this assignment, you will add a third page to your website named
"table.html" and code a table on that page. You will also add code to
your CSS file to format your table.
1)
Create a new HTML file in your text editor and name the file
"table.html". Just like last week, your new file should contain all of
the same basic code that is in the head section of your home page. The
body section will contain your new table, which you will create by
following the remaining steps of this assignment. After coding all of
the basic required HTML tags in your new file, save your new file and
validate it using the HTML validator: https://validator.w3.org/#validate_by_upload. Debug and fix any errors identified by the validator until your file passes validation.
2)
Make sure the external CSS style sheet you created in Assignment 2 is
linked into your new "table.html" file with the <link> tag in the
head section of the file. Your website should only have 1 CSS file, and
that same file should be linked into all HTML pages of your website.
3)
Modify your navigation menu on your home page and your "about.html"
page by adding a link to this new page. Then add your navigation menu
to your new "table.html" file, so that users can navigate to your other
pages from this new page.
4) In your table.html file, add the following code:
Create
a table using the <table> tag. Your table must have a row of
headings and at least three rows and three columns of data. Use the
<tr>, <th>, and <td> tags appropriately. You can see
examples of the code for HTML tables here: https://www.w3schools.com/html/html_tables.asp
5)
In your HTML file, give your table a caption, using the <caption>
tag. You can read about adding a caption to your table here: https://www.w3schools.com/html/html_tables.asp
Open your CSS file in your text editor and complete the following steps:
6)
In your CSS file, set the "width" property for the <table>
element, using percentage rather than pixels. You can read about
setting table width here: https://www.w3schools.com/css/css_table.asp
7)
In your CSS file, give your table a background color that is different
from the background color of the body of your webpage. Use the
"background-color" property. You can read about table colors here: https://www.w3schools.com/css/css_table.asp
8)
In your CSS file, set the "border-style", "border-width", and
"border-color" properties for the <table>, <th>, and
<td> elements. Remember that all three of these properties can be
set in the same line of code using the "border" shorthand property.
You can read about the CSS border properties here: https://www.w3schools.com/css/css_border.asp
9)
To avoid double borders, set the "border-collapse" property to indicate
that table borders should be collapsed into a single border. You can
read more about collapsing table borders here: https://www.w3schools.com/css/css_table.asp
10)
Set the CSS "padding" property for your table header <th> and
table data <td> cells. You can read about adding cell padding
here: https://www.w3schools.com/html/html_tables.asp
11)
Set the horizontal alignment of your table header <th> and table
data <td> cells, using the "text-align" property. Set the
vertical alignment of your table header <th> and table data
<td> cells, using the "vertical-align" property. Even if you like
the default settings of these properties, make sure you explicitly set
each of these properties for both your table header <th> and table
data <td> cells in your CSS file, to demonstrate your
understanding of how to set these properties. You can read about
horizontal alignment and vertical alignment here: https://www.w3schools.com/css/css_table.asp
Hint:
You can find examples of all of the HTML elements and CSS properties
required for this assignment in the Week 4 module in the Lessons area of
the classroom.
Before submitting your web site:
Validate all HTML files at https://validator.w3.org/#validate_by_upload,
using the "Validate by File Upload" option, and fix any errors that the
validator identifies before submitting your web site for grading.Validate your CSS file at https://jigsaw.w3.org/css-validator/#validate_by_upload,
using the "Validate by File Upload" option, and fix any errors that the
validator identifies before submitting your web site for grading.
Note:
It is critical that you debug and fix ALL errors identified by these
two code validators before submitting your assignments. Contact your
instructor for assistance if you are having difficulty debugging and
fixing your errors because it is imperative that your code files pass
validation.
Submission Instructions: Create
a zip file containing all files related to your web page (.html files,
.css file, image files, and/or multimedia files). Make sure you
maintain the necessary directory structure in your zip file so that your
webpages will view correctly when unzipped. In other words, if your
images are in a sub-folder on your computer, in relation to the folder
containing your .html file, then you need to maintain that same
directory structure in your zip file, too. Submit only the zip file for
grading.