Assignment 1 ITSE 1411--Beginning Web Programming

Reading

Design Text, Chapter 3, Pages 21 - 32 (HTML Kick-Start)
Design Text, Chapter 4, Pages 33 - 38 (CSS Kick-Start sections 4.1 - 4.4)
Design Text, Chapter 14, pgs 265 - 279 (XHTML)
JavaScript Text, Chapter 1, Creating and Validating Web Pages, Pages 8 - 25

Discussion

HTML, HyperText Markup Language
- The predominant markup language for web pages.
- Defines the structure and rules for the page, such as paragraphs, bullets, line breaks, headings, etc.
- Written using "tags" that are descriptors contained in by angle brackets such as <p>, <li>, <h3>, <br />, etc.
- Used to embed text, multimedia, hyperlink, and scripts.
XHTML, eXtensible HyperText Markup Language
- A partial merge of XML and HTML standards.
- Written for internationalization, accessibility, device-independence, usability and document structuring.
- Elements must be properly nested, always closed, lowercase, and nested within the <html> root element.
- More often renders on hand held devices.
- Renders faster than HTML.
HTML/XHTML tags
- The user does not see that tag, only the text (or other media) displays.
- The first part of the tag (the part immediately after the left angle bracket <, is the tag element.
- Writing the tag is called coding, and the tag is the code.
- The rules for writing the code are called syntax.
- Many tags have one or more attributes with values that allow modification of the element.
  - In XHTML strict, the attribute is assigned the value and the value is always contained in quotes. The = operator is called the assignment operator and assigns the value to the attribute. For example:
    <tag attribute = "value">
    <tag attribute = "value" attribute = "value" >
- Elements are either block, non-block, or inline levels
  - Block level elements - may contain inline elements and other block-level elements.
    - blockquote tag - blockquote. Formats as a blockquote (margins indented on both sides of the text).
    - div tag - division. Used with CSS in formatting the page. It is used for grouping and contains other block level elements.
    - h tags - heading. Designated as h1 (the largest), h2, h3, h4, h5, and h6(the smallest).
    - p tag - paragraph. Formats as a paragraph with a space below the text.
    - pre tag - preformatted Preserves the layout defined in the text including whitespace, word wrap, and line breaks.
    - form tag - form. Defines a form and requirest an action attribute. If no action is to be taken, then it is written as:
      <form action="">
    - table tag - table. Defines a table and can be nested inside other block elements.
  - Non-block level elements
    - br tag - line break. This tag is self-closing and is written <br />
    - hr tag - horizontal rule. This tag is self-closing and is written <hr />
  - Inline level elements - must be contained in a block level element
    - Typically contain text and other inline elements.
    - When rendered visually, do not usually begin on a new line.
      - span tag - generic containter
      - b tag - bold
      - i tag - italics
      - u tag - underline (be careful that an underline is not mistaken for a link)
      - input tag - used on a form for user input
      - img tag - image
- Comments are not elements, but allow you to insert a comment in the source code. Comments are ignored by the browser. Also, if you have a coding error that you cannot find, you can comment out the code and then remove the comment line by line until you pinpoint your error.
An HTML page
- Certain tags and instructions are required on all html pages.
  - Click on template
  - Right click and view source.
    - DOCTYPE instruction
      - First thing in an HTML document.
      - Not a tag but an instruction to the web browser describing the version of HTML in the document.
      - Refers to a Document Type Definition (DTD) that specifies the rules for the version used.
      - Available DOCTYPEs in XHTML
        
        XHTML 1.1 - Must be written as well-formed XML and allows you to add modules.
        
        XHTML 1.0 strict - must be written as well-formed XML.
        
        XHTML 1.0 transitional - must be written as well-formed XML and allows some deprecated elements.
        
        XHTML 1.0 frameset - the same as XHTML transitional and allows the use of frameset content.
    - html tag
      - Required
      - The root element. All other elements contained within html tags.
        
        xmlns attribute
        
        Required in XHTML
        
        Assigned the value http://www.w3.org/1999/xhtml
        
        Specifies the namespace (a context for identifiers, items which must have unique names) to use for XHTML documents
        
        lang attribute
        
        language_code
        
        Specifies a language code for the content in an element.
        
        xml:lang attribute
        
        language_code
        
        Specifies a language code for the content in an element, in XHTML documents.
    - head tag
      - Required if the page is well-formed
      - First section of the web page
      - Encloses other header elements
      - Header elements provide search engines with information
    - title tag
      - Contains the text that appears on the title bar.
      - Search engines use the text in the title tag as the link to the page.
      - Used as the default name when the page is bookmarked.
    - meta element
      - Used to describe identify properties of a document
      - Name attribute identifies the type or purpose of the meta tag
      - Content attribute is the description attached to the name
      - Used with the http-equiv attribute to simulate HTTP headers.
      - Used to show the encoding (server dependent).
    - body tag
      - Required
      - Holds all the content of the page.
    - p tag
      - paragraph tag
      - block element
      - displays space before and after the paragraph
    - a tag
      - anchor tag
      - used as a link
      - Used with the href attribute to link to another page.
      - Used with href and # to create a bookmark inside a document (requires the location to have the name attribute).
    - img tag
      - Embeds an image in a web page.
      - Requires the attributes src and alt.
      - The src attribute gives the source or location of the image.
      - The alt attribute contains text which is read by page reading software and displayed when images do not display.
      - Self-closing.
  - Notice that the first tag is the html tag and the last tag is the closing html tag. Inside the html tag is the head tag. Notice that the head tag closes before the body tag opens. You can "nest" tags inside of other tags depending on the type of tag; however, you must close tags opposite the way they were created. In programming this is called nesting. For XHTML strict complaince, you must properly nest your elements.
  - Since all pages require most of the tags described above, it is much easier to start each page with the template.
  - The paragraph at the bottom of the page contains images and links to the W3C site validation service. This is a quick, easy way to check to see that you HTML and your CSS (covered later) are written without errors.
- JavaScript Code
  - Textbook files.
    - The JavaScript text tells you that the data files are available on a CD-ROM with your book.
      - If you did not receive a CD-ROM, you may download the files from the publisher. student data files. I have also posted them for easier download
      - The suggested method for saving your pages described in the text is complicated. I have you set up an easier method in the practice below.
    - On page 15 of the JavaScript book, in the html code for Figure 1-4, the text A&E Network is used.
      - Special characters entities are used to show text that is not on the keyboard. For example, the last line of the ForestvilleFunding page had a copyright symbol. In order for that symbol to show, a character entity was used, ©.
      - Since the ampersand is used to denote a character entity, you cannot just enter an ampersand and have it validate. If you want an ampersand to display correctly, you need to use the character entity &
      - To display A&E Network correctly enter:
        A&E Network
  - Always runs within a web page. Cannot run independently.
    - A client-side scripting language.
    - Used to create interactive pages.
    - Code contained inside HTML script tags.
      - The script tag either contains scripting statements or it points to an external script file through the src attribute.
      - Use the type attribute and assign the value "text/javascript" written
        <script type="text/javascript">
    - The W3C does not validate JavaScript code.
  - Possible data interpretation problems
    - The browsers recognize two types of data.
      - PCDATA - parsed character data
        
        Allows html tags to work and recognizes the < and > angle brackets as denoting an html tag.
      - CDATA - character data
        
        JavaScript can be written to include HTML elements. But when it is, it confuses the browser because the angle brackets are recognized as PCDATA. To instruct the browser to treat the code as CDATA you must create a block of CDATA.
        
        Immediately below the open script tag write
        /* <![CDATA[ */
        Immediately before the close script tag write
        /* ]]> */
    - Unlike HTML, if you make an error in your JavaScript code, it is likely that the page will not render, or will not render as expected.
- CSS Code
  - Defines the presentation of the page (the way things appear on the page).
  - You create style rules to define the page styles.
  - Enables the separation of the document presentation from the document content.
  - The term cascade means the priority level of how styles are applied.
    - Inline styles
      - Can override an embedded or external style rule.
      - Coded into each each HTML element each time you want to override the defaiult, embedded, or external style.
      - Written inside an element tag much like an element attribute.
      - Affects only the element that contains the CSS code. For example
        
        <p style="font-size: x-large; color: #ff9900">
      - This sets the font-size to x-large. The relationship between sizes is not precisely defined in CSS, but there is a suggested scaling factor of about 1.2. The default size is medium which is approximately 12 pt.
      - Also, the color is set to the hex value #ff9900. (see color names that validate below)
    - Embedded styles
      - Written in the head section of the page inside an HTML style tag.
      - Can override an external style rule.
      - Written for each element type, not each individual element.
      - Embedded Styles are written in the head between style tags. Syntax:
        
        <style type="text/css">
        (your css code)
        </script>
        
        The format for the css code is the same as the format for external styles. See below.
    - External styles
      - Linked from the head section of a page, but written as an external file.
      - Applies to all pages that link to the page.
      - Syntax for external style
        
        selector {property:value}
        Example will change the text of your page to blue:
        body {color: blue;}
        Example will change the text inside of p tags: (see centering problems below)
        
        p {text-align:center; color:blue; font-family:arial; }
        
        Do not start your external CSS page with the HTML page template. Only CSS is written on an external style page.
      - Syntax for linking to external style
        
        <link href="address of css page" rel="stylesheet" type="text/css" />
        
        The link in the head page of the HTML page will link to the CSS page.
        
        The link tag is self-closing.
        
        Do not put the link tag inside of style tags. External styles do not use the style tag.
        
        The optional attriubte media specifies the medium or media to which the style sheet should be applied. Possible values are
        
        screen - for computer screens
        
        print - for output to a printer (will show in print preview mode)
        
        projection - for projectors
        
        aural - for speech synthesizers
        
        braille - for presentation on braille tactile feedback devices
        
        tty - for character cell displays (using a fixed-pitch font)
        
        tv - for televisions
        
        all - for all output devices
        
        Be very careful using CSS if your pages are used in multiple formats. The settings for printer and screen are different on the browser. If someone prints your page, it does not look the same as on the screen because the CSS for the screen is ignored by the printer.
    - Full property table recommendation 23 April 2009 for CSS
      - http://www.w3.org/TR/CSS2/propidx.html
    - Color names that validate in CSS
      - There is some confusion about what web safe colors mean. This is a very old term that means nothing now. A few years ago, many monitors did not have the color spectrum that current monitors have. Because of that, the 216 web safe colors were established as working on multiple browsers. Don't worry about that at all anymore.
      - But, the bigger problem is that there are only 16 colors that will validate in CSS.
        
        http://www.hiddenboston.com/webmasters/colornames.html
      - All others should use the hex value
        
        http://en.wikipedia.org/wiki/Web_colors
  - All style types can be applied to the same page.
  - Separate multiple styles for the same element with a semicolon.
- Centering
  - 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>

Practice:

Create an assignment1 folder (no spaces in the name, no uppercase) in your public_html folder.
If you are using a PC, use the Less Than Slash editor, not Notepad.
Your first web page
- On page 24 of the Design book you are instructed to open your first web page. Follow the instructions for opening a page in your browser, only I want you to open the template page that you created in your pre-assignment.
- The book does not start a page with the DOCTYPE. Your template has a DOCTYPE. I require that you use the DOCTYPE so that we can use the W3C validator.
- Create a "Better World" web page, explained on pages 19 and 32 of the design book.
  - Start with your template.
  - Add your text. Remember, be sure that all text is contained inside either p tags or div tags.
  - Write three paragraphs that describes your idea of what would make a better world.
    - The first paragraph should use inline styles.
    - The second paragraph should use embedded styles.
    - The third paragraph should use external styles.
  - Save your HTML page as betterWorld.htm in your assignment1 folder.
  - Save your CSS page as betterWorldStyles.css in your assignment1 folder.
  - Check to see that your page validates (Your LTS editor only validates HTML. To validate your CSS, upload both your assignment1 folder containing your betterWorld.htm page and your betterWorldStyles.css page to your site. After uploading, go to your page and click on the images to test your validation.
Forestville Funding Page (JavaScript Textbook)
- Click on ForestvilleFunding.html.
- Right click on the page.
- View Source
- Save as ForestvilleFunding.html (notice you use the uppercase this time and the l in the extension.) in the assignment1 folder.
- Do not make your changes in the window that opened when you viewed your page! Invoke your HTML editor.
Second Forestville Funding Page
- Open your template.htm page in your editor.
- Save your template as ForestvilleFunding2.html in your assignment1 folder. (notice you still use the uppercase this time and the l in the extension, but you add a 2 to the name.
- Copy only the lines of code that are contained in the body tags from your ForestvilleFunding.html page to your ForestvilleFunding2.html page.
- Make the changes noted on page 16 of the text (you remove the font tags and make the hr and br tags self-closing.
- Save ForestvilleFunding2.html in your assignment1 folder.
- Make sure that your new page validates. It should look like the page displayed on page 11 (no colors).
Forestville Funding Page with inline CSS
- If necessary, open your ForestvilleFunding2.html page in your editor.
- Make the modifications shown on page 19 of your text.
- Save you page as ForestvilleFunding3.html in your assignment1 folder. (notice the 3 in the name)
- ForestvilleFunding3.html and ForestvilleFunding.html should look the same (the colors should show), but this last page should validate.
Forestville Funding Page with internal Styles
- If necessary, open yourForestvilleFunding2.html (notice the number 2) page in your editor.
- Add the internal style in the head section of the page as shown on page 21 of the text.
- Save as ForestvilleFunding4.html.
- Compare ForestvilleFunding3.html and ForestvillleFunding4.html. They should view the same and they should both validate.
Forestville Funding Page with external Styles
- If necessary, open your ForestvilleFunding4.html page (notice the number 4) page in your editor.
- Using the ForestvilleFunding4.html page, follow the instructions on pages 22 and 23 steps 2, 3, 4, and 5 to create forestvillefunding_styles.css.
- Make the changes ForestvilleFunding4.html page shown on step 6 and save as forestvilleFunding.htm (notice the lowercase spelling and no l in the extension).

Uploading

Upload your assignment1 folder with the files:
- betterWorld.htm
- betterWorldStyles.css
- forestvillefunding_styles.css
- forestvilleFunding.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.