Reading
Design Text, Chapter 5, pgs 55 - 57 (line breaks, alignment), 60 - 61 (Bold and italic) 68 (preformatted text)
Design Text, Chapter 11, pgs 193 - 222 (Tables)
JavaScript Text, Chapter 2, pgs 59-75(Arrays and Tables)
Discussion
- Formatting
- The W3C (World Wide Web Consortium) sets the standards for writing HTML. However, not all
browsers comply with the W3C standards.
- The writers of the browsers invent new tags that have not been previously defined.
- The differences among browsers sometimes render tags differently on different browsers.
- Sometimes the web designers and web developers are able to change the tag properties so that
pages on the web will look the same cross browsers. This is done using CSS, Cascading Style Sheets.
- Using only the HTML tags, your pages may not render exactly the same from browser to browser.
- Whitespace
- In HTML when you enter multiple spaces of press the enter key, you still view one space on the screen. For example:
Hello
World
appears as
Hello
World
- To create multiple spaces, you may code the special entity which stands for non-breaking space.
Special entities begin with an ampersand and end with a semi-colon.
- To create a line break inside of a block element, use the <br /> tag.
- When using a paragraph tag, the paragraph will have a blank line before and after the paragraph.
- Divisions
- Parts of a page can be separated into sections. The div tag does not add any spaces or blanks. It is used to organize
content. You can nest divisions inside other divisions.
- Align
- The align attribute is used in HTML to align content. However, in XHTML strict, CSS is used for alignment. Unfortunately,
the method to center differs from element to element and browser to browser.
- margin-left: auto; margin-right: auto; centers a block level element.
- text-align: center; centers the inline content of a block level element.
- <h1 style="text-align: center;">Centers h tags</h1>
- <h1 style="margin-left: auto; margin-right: auto;">Required centering for IE block level tags.</h1>
- <h1 style="margin-left: auto; margin-right: auto; text-align: center;">Combine both methods to center
in multiple browsers.</h1>
- <div style="text-align:center;margin:0 auto 0 auto">Will center the content of the div</div>
- Bold and italic text
- Both the b (bold) tag and the strong (strong) tag are used to bold text. Visually they look the same. However,
when a screen reader stresses the strong text.
- Both the i (italic) and the em (emphasis) tag are used to display text in italics. The em tag is stressed by screen readers.
- Preformatted text
- The pre tag will render text exactly as written in the source code. Use pre tags sparingly because they
override the defaults of that allow HTML pages to adjust to multiple screens and browsers.
- Tables
- A table can consist of a single table data cell, a row, a column, or a grid of rows and columns.
- Click on tableExample.htm
- View the source.
- Save in your Forms folder in the public_html folder of your H drive.
- Open tableExamle.htm in LTS.
- Resize this page on the left of your screen.
- Resize the tableExample.htm page on the right of your screen.
- Explanation of the table on the tableExample.htm page
- The table tag designates that there will be a table. Unlike formatting the all other text in XHTML,
the formatting of tables inside the table tags is allowed in XHTML strict.
- Optional attributes of the table
- Tables can be sized in html in either pixels or percentages. If no measurement is shown, then
the default is pixels. To designate sizes in other measurements, such as points, em, cm, etc.,
you must use CSS.
- Unless specified, a table border will not show in a table. See
W3Schools table border example.
- Cellpadding is the space between the contents of the cell and the cell wall. The default is 1.
(Think of being locked in a padded cell.)
- Cellspacing controls the space between table cells. When no cellpadding is designated, the default
is usually 2.
- Colgroup tag is used to group columns in a table for formatting. The order that you place the
colgroup is the order of the columns of the table from left to right. The colgroup formatting will not
show up in Firefox.
- The width attribute designates the width of the element.
- The align attribute defines the horizontal alignment.
- The span attribute can apply the colgroup to more than one column.
- In tableExample.htm the first column is used for labels and is formatted differently than the next four
columns.
- A table is divided into rows (with the <tr> tag)
- Each row is divided into data cells with the <td> tag (table data) or <th> tag (table heading).
- A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
- Unless specified, a table will be the width that the browsers decide it
will be according to the cell contents.
- Hiding HTML tags in JavaScript
- The examples in the JavaScript text sometimes use an older style method to hide the HTML tags from
JavaScript. Use either this method or the CDATA instruction.
- <script type="text/javascript">
<!--
(your JavaScript code)
-->
</script>
- JavaScript Variables
- JavaScript Data Types
- Variables are assigned values. There are five types of values in JavaScript that the variables represent:
- Number - numbers are of two different types:
- Integers - whole numbers with no decimal points.
- Float numbers - numbers with a decimal point.
- Boolean - a logical value that is either true or false.
- String - text.
- Undefined - a variable that has been declared but has not been defined (assigned a value).
- Null - an empty value. (In JavaScript you actually assign the reserved word "null".) For example:
var myName = "null";
- JavaScript is loosely typed meaning that a variable can be assigned different types.
var myVariable = "Hello World";
myVariable = 6
- Arrays
- A set of data represented by a single variable name.
- Used to store groups of data.
- Declare arrays using the array object
- var arrayName = new Array(number of elements);
- When referencing an array element, use the array name and the index (an element's numeric position within the array).
- The array position begins with 0. Therefore, the first element of the array is referenced arrayName[0];
- In JavaScript, you can add new elements to the array even when you declare the array of a different size. Warning: If you
have an array size of 10, and accidentally assign a value to array[59], you actually create 50 more array elements and
assign the 60th element (remember the 60th element is referenced as 59).
- Every array has a length property which, when used, returns the number of elements in an array. For example:
var arraySize = arrayName.length();
will tell you how many elements are in the array.
Practice
- Displaying Variables
- Create an assignment3 folder (no spaces in the name, no uppercase) in your public_html folder.
- Daytona500 page
- Study the coding using string and float variables in the Daytona500.html example on pages 64 and 65 in the JavaScript text.
- Click on Daytona500.html.
- Right click on the page.
- View Source
- Save as Daytona500.html (notice you use the uppercase this time and the l in the extension.) in the assignment3 folder.
- This page refers to js_styles.css. You saved that file in your assignment2 folder. Since you are going to re-use this
file, (and other files) make a new folder, jsfiles in the public_html folder.
- Make a copy of js_styles.css from your assignment2 folder and save in your jsfiles folder.
- To refer to the file you must link to the location where your file is stored. The link is written as
<link rel="stylesheet" href="js_styles.css" type="text/css" />
This assumes that your file is in the same folder as your html page.
You can change the link to be an absolute link or a referential link.
- Open Daytona500.html in your editor and change the link to one of the choices below using the correct name for
login.
- <link rel="stylesheet" href="http://cois-linux.austincc.edu/~login/jsfiles/js_styles.css" type="text/css" />
- <link rel="stylesheet" href="../jsfiles/js_styles.css" type="text/css" />
- Numerical Data Types
- MetricPrefixes page
- The MetricPrefixes.html example, on pages 68 - 70 of the JavaScript text uses a table.
- Click on MetricPrefixes.html.
- Right click on the page.
- View Source
- Save as MetricPrefixes.html (notice you use the uppercase this time and the l in the extension.) in the assignment3 folder.
- Be sure to add the validation icons to the page.
- Open MetricPrefixes.html in your editor and change your link to refer to your js_styles.css page.
- Modifying Elements Using Arrays
- Update Daytona500.html
- Open Daytona500.html in your editor.
- Save as daytona500.htm in your assignment3 folder.
- Make the changes noted on pages 74 and 75 of your text.
- Page 75 of the text, step 7 should read "Open the daytona500.htm" ..."
Case Project:
- Complete Case Project 2-2 found on pages 112 - 113 of your text.
- Open your template.htm page.
- Save as CO2Emissions.htm in your assignment3 folder.
- Follow the steps described in the text but start with the template so that you will
have the validation icons on your page.
- Also, remember that numbers are not in quotes. Text is in quotes. I want you to use
numbers without quotes in this assignment.
- Put a heading on the page. Center and italicize the heading.
Update your index page:
- Add links on your index page to the pages in your assignment3 folder that are to be graded:
- daytona500.htm
- MetricPrefixes.html
- CO2Emissions.htm
Uploading:
- Upload your revised index.htm page to the public_html folder.
- Upload your jsfiles with your js_styles.css page.
- Upload your assignment3 folder with the files:
- daytona500.htm
- MetricPrefixes.html
- CO2Emissions.htm
Testing uploaded pages
- Follow the checklist for grading shown on
the schedule page.
- Make any corrections for any page that does not validate or display correctly.
