IT581: Practicum in Web Development, Summer 2015 (Hybrid)

• Web pages are just simple, text-only documents/files (source documents) , mainly containing ASCII text.
• The text contents are marked up by angle brackets ( < and > ).
• HTML elements, such as headings, paragraphs, bold text, underscore text, links can all be defined this way.
• Go to http://www.learningwebdesign.com/4e/materials/chapter02/kitchen.html to see the example page. (Opens in new tab)Then right-click on the page and choose "View Page Source" (Firefox and Chrome).

Here is a file containing the basic text for the web page. Instead of typing it in, you can copy it for this exercise.

1. To make a copy, copy (Edit|Copy or Ctrl-C) the text into the clipboard and then paste (Edit|Paste or Ctrl-V) into a new Notepad++ document.
2. After you have it in the editor, save your document on your z-drive or a portable drive.
3. Give your saved document the file name blackgoose.html. Don't forget to type the .html part.
4. Be sure you know where you saved it.
5. Warning: do not save files on the local C-drive. They may be removed at any time.

1. Open your saved document (menu choice: File|Open) in the browser, and look at it
2. The browser view will be all run together because there is not yet any HTML markup.

• The DOCTYPE identifies the type of document and how to use it - printed book, film, audio CD
• The HTML element is like the book itself - the covers and everything inside.
• The head element is like the title page with title, author and publisher - information that the librarian uses.
• The body element is like all the chapters of the book - the content that you read.

Empty elements

• Some elements do not contain any text. They are called "empty" elements.
• Empty elements do not have a closing tag
• Some empty elements are
  • Line break - <br>
  • Thematic break (Horizontal rule) - <br>
  • Image - <img>

---

Attributes

• Elements can have attributes
• Attributes are instructions that clarify or modify an element.
• They are writtn as attributename="value"
• Attributes go after the element name in the opening tag only, never in the end tag.
• There may be several attributes for an element. They are separated by spaces in the opening tag. The order is not important.
• Most attributes take values, which follow an equals sign (=).
• A value might be a number, a word, a string of text, a URL, or a measurement, depending on the attribute.
• Some attributes are required, such as the src and alt attributes in the img element.
• The image tag and its attributes
  

---

HTML Comments

• HTML comments let you put notes in the source code.
• Comments are only visible in the source code - the are not displayed in the browser.
• Comments are written with a kind of empty tag with special characters at the beginning and end
  
  <!-- -->. (Important: the hyphens are required.)
• The comment text can split over more than one line

      <!-- This is a comment -->
      
      <!-- This is a
          multiple-line comment
          that ends here. -->

• Comments are for you and your fellow developers. Not the general public.

---

Lab 1, Part 4: Add an image, breaks, and comments

Add the image

1. Get a copy of the image file.
   
   • Right-click on the image and select "Save image as..." (or similar) from the pop-up menu.
   • Name the file blackgoose.png.
   • Be sure to save it in the same folder as blackgoose.html.
2. Insert the image element at the beginning of the main heading

   <h1><img src="blackgoose.png" alt="Black Goose logo">Black Goose Bistro</h1>

   (We're putting it inside the h1 because we think of it as part of the heading.)
3. Take a look at your page in the browser before continuing.
   

---

Add some inline breaks

1. The inline element <br> lets you create line preaks in a page.
2. Put one immediately after the image tag so it will appear above the text.

   <h1><img src="blackgoose.png" alt="Black Goose logo"><br>Black Goose Bistro</h1>

3. The location and hours information in the last section is all run together. Insert a couple of <br> tags inside the paragraph at the spots where the lines should break.

---

Add developer comments

1. Identify yourself as the creator of the page
   • Add comments with your name and lab number

         <!-- Name: Insert your own name here -->
         <!-- Assignment: Lab 1 -->
         <!-- Date: Insert today's date here --> 

2. Insert the comments in the head, just after the title.

---

Look at your page in the browser before continuing.

• The comments don't show up. (That's the whole point of comments.)
• If you View Source, you will see your comments.

---

Step 5: Change the look with a stylesheet

• Style rules are instructions to the browser on how the present the document. They can speficy fonts, colors, spacing, size, and much more.
• A stylesheet is a set of such rules.
• We'll look at styles later in the semester.

---

Lab 1, Part 5: Add a stylesheet

For now, just add a stylesheet to the Black Goose document as follows

1. Add the opening and closing tags for a style block inside the document head:

               <head>
                 <title>Black Goose Bistro</title>
                 <style>
   
   
                 </style>
               </head>

2. Next type the following rules inside the style block.

           body {
             background-color: #faf2e4;
             margin: 0 15%;
             font-family: sans-serif;
             }
           
           h1 {
             text-align: center;
             font-family: serif;
             font-weight: normal;
             text-transform: uppercase;
             border-bottom: 1px solid #57b1dc;
             margin-top: 30px;
           }
           
           h2 {
             color: #d1633c;
             font-size: 1em;
           }
       

---

Troubleshooting - What can go wrong

Check your document in the browser. It should look approximately like this:

The proportions may be different, depending on your browser settings.

---

Help!

• Help! My page doesn't look like the screenshot.
  Check your typing. Look for:
• Missing left or right angle brackets
• Missing ending tags
• Missing or backwards slashes
• Incorrect element names
• Help! My page still looks the same when I refresh.
  Check the following:
  • Did you save it?
  • Did you accidentally save it in a different directory (folder)?
• Help! Some or all of my page disappeared.
  Check for
  • Missing right angle bracket
  • Missing closing quotation mark or mismatched quotation marks.

---

Submit your lab

When you have finished the lab, submit the document file and the image file via Blackboard.

Checklist: Lab 1

• File blackgoose.html and blackgoose.png submitted on time through Blackboard.
• All five parts of the exercise completed.

---

---

Additional notes (not directly related to Lab 1)

Paragraphs and breaks

• the paragraph
  • Is a container element
  • uses paired tags <p></p>
  • is commonly (but not necessarily) presented (displayed) with a blank line before and after the paragraph.
  • adds structural meaning to the text contained in it.
• the line break
  • is not a container
  • does not have a separate closing tag
  • is written with a single tag <br>
  • normally causes the text to break and start a new line
  • can be at the end of a source code line or the beginning or in the middle

---

Example

Here the first example has been modified by adding paragraphs and breaks.

This sample only shows the body. Look at the source code of the linked page to see the complete document.

    <body>

     <p>
     this example shows the basic parts of an XHTML document.  <br>
     you should look at the source code to see the structure.
     </p>
     <p>
     This example includes meta-information about the document.  <br>
     The DOCTYPE tag in the opening section tells the document type standard to use. <br>
     The meta tag in the head tells the character encoding to use.
     </p>

    </body>

---

Document Organization

• HTML describes the organization and structure of a document, NOT the appearance.
• Different kinds of browsers (technically called user-agents) can handle the content differently.
• An audio browser that uses a speech-synthesizer might pause slightly at line breaks and for a longer time between paragraphs.
• A small portable device might not add much space between paragraphs to keep more visible.
• HTML has a number of other elements, besides paragraphs, that specify parts of a document.

---

Heading elements

• are intended to identify sections of a document in a hierarchical way, like an outline.
• provide six levels of headings.
• h1: Main heading, such as a book title
• h2: Major subdivision, such as a volume or chapter
• h3: Next level subdivision, such as a chapter or section
• h4: Sub-subdivision
• h5: Sub-sub-subdivision
• h6: Sub-sub-sub-subdivision
• should be used in order (do not skip from h1 to h3, for example.)
• should NOT be used solely to achieve visual effects.
• are usually dislayed using different font sizes and weights (by graphic browsers such as IE and Firefox).
• will be presented differently by other kinds of browsers.

---

Example

    <body>

    <h1>Document illustrating headings </h1>    
     <p>The elements used are indicated in brackets. This, for example, is a paragraph. </p>
       <h2> First section heading </h2>
         <p>A short paragraph under the first section</p>

       <h2> Second section heading </h2>
          <h3> Subsection heading </h3>
            <p>A short paragraph</p>
          <h3> Subsection heading </h3>
            <p>A short paragraph</p>

       <h2> third section heading </h2>
         <p>A short paragraph under the first section</p>
    </body>

---

General categories of elements: Block elements

• Block elements
  • Define distinct blocks of text.
  • include paragraphs and all the headings.
  • are normally displayed the full width of the page, with a break before and after them, creating a distict separate block of text.
  • Should be separate, not nested within each other.

---

General categories of elements: Inline elements

• Inline elements
  • are used within a block
  • do not automatically create extra space around the content
  • may contain only data and other inline elements
  • include the br element
  • include a number of elements that add meaning to portions of text
  • two of these are <em> (emphasis) and <strong> (strong emphasis)
  • <em>
    • indicates the content should be emphasized
    • is frequently rendered as italic by graphic browsers.
  • <strong>
    • indicates the content should be strongly emphasized
    • is frequently rendered as boldface by graphic browsers.

---

Example

    <body>

       <h1>Document illustrating emphasis and string emphasis </h1>

       <p>
       This is a single paragraph.
       <em>This part shows emphasis</em>
       <strong>This part shows strong emphasis</strong>
       This is just another sentence in the paragraph.
       In this sentence, <em>this portion uses emphasis with
       a <strong>strong portion</strong> within it</em>.
       </p>
    <body>

---

Elements that affect the appearance of text

• Some elements only specify the appearance of text in a graphic browser
• They do not indicate any meaning
• They are called presentation elements
• Officially, they are deprecated. That is, they shoudld not be used because they may be eliminated from future versions.
• You should not use them in this class.
• We will learn more about controlling the appearance of documents later.

---

Horizontal rule

• provides a simple way of visually separating portions of a page.
• The horizontal rule is a block element.
• is not a container
• so it does not have a separate closing tag.

---

Example

Only the body is shown here. Look at the source code of the linked page to see the complete document.

    <body>

      <h1>Document illustrating horizontal rules </h1>

      <hr>
      <p>This is a paragraph with horizontal rules before and after it.</p>
      <hr>
      <p>This is some more text.</p>
      <hr>
      <p>This is some additional text.</p>
      <hr>

    </body>

---

Adding comments to your HTML

• it is useful to add informative or explanatory notes to your pages
• you don't want the notes to be seen by the reader of the page
• you want them to be visible to someone who views the source code
• use the comment element
• the comment tag is invisible to the reader of the page
• it is visible in the source code

---

The comment tag

• The form of a comment, or comment tag, is:

      <!-- the comment text -->
  

•  <!-- (an exclamation point followed by two dashes, with no spaces between them) signals the beginning of a comment
•  -->(two dashes, with no spaces) signals the end of the comment
• the browser ignores everything in between
• text in a comment can be anything, with one exception
• you canNOT have two consective dashes (--) inside a comment.
• from now on our examples will include comments. View the source code to see them.

---

Whitespace

• whitespace refers to line breaks, spaces, and tabs.
• whitespace in the source code is different from whitespace in the displayed document
• all three kinds of whitespace in the source code are usually shown as a single space in the displayed document
• consecutive whitespace characters in the source code are collapsed together into a single space
• spacing between blocks of text, such as headings and paragraphs, is determined by the browser
• you will learn how to better control whitespace later lessons

---

Applications and documents

• Applications are programs that let you work with a web document in different ways.
• Different applications will treat the file differently.
• A browser will
  • interpret the markup tags for an XHTML document
  • decide how to present it.
  • display it on the screen for you to view
• A text editor will
  • show you the source code itself
  • let you change the source code

---

Saving a document

When you save a document

• give it a name.
• do not use spaces or punctuation in the file name.
• ALSO give it a file extension.
• type a dot and the extension at the end of the name
• OR choose the appropriate type from the pull-down list in the dialog box.
• File Extensions are used to indicate what kind of content is in a document.
• Some examples are:
  • doc - Microsoft Word document
  • xls - Microsoft Excel spreadsheet document
  • txt - plain text
  • html - HTML or XHTML web document
  • jar - Java program archive file
• For your web documents in this course, use the extension .html

---

Accessing a document

• To see a document over the Internet, it must be published on a server.
• We will discuss publishing in the next class.

• Even if you do not publish a document you created, you can still view it yourself locally on your own computer.
• • use the "Open" action on the browser's "File" menu
  • OR type in a URL that begins with "file:///" instead of "http://". (Notice that the first has three slashes, the second two.)

---

Validation

• How can you be sure your HTML is correct?
• validate your source code - have it checked for correctness against the standard
• W3C provides an online validation service
• validate an online page by submitting its URL
• or uploading a copy of the file for validation
• or pasting in the page's source code

The Web Developer Toolbar extension for Firefox and Chrome (See the Resources page) has tools for validating the page that is currently being displayed in the browser. The report opens in a new tab.

---

Browser Support

Not every browser supports every element of HTML5. In fact, as yet no browser supports all of them, though Chrome (V 32) and Opera (V 18) are getting close, and Firefox (V 26) isn't far behind. Safari (V 7.0) and Internet Explorer (V 11) trail badly.

Check...

• your browser's overall support for HTML5: HTML 5 TEST (http://html5test.com)
• if a browser supports a specific HTML5 element: Can I use... (http://caniuse.com/)
• the extent of browser use (market share): StatCounter Global Stats(http://gs.statcounter.com/)

---

Important Advice

<

• Use the Chrome or Firefox browser
• Use the Web Developer Toobar extension
• Set your Windows Folder Options to show (not hide) extensions for known file types.

---

Quirks Mode

• Even if a page is invalid, the browser will usually manage to display it
• but it may not come out exactly the way you intended.
• the browser will shift into what is called "Quirks Mode"
• if the document does not have a proper DOCTYPE
• if the browser encounters invalid source code
• it uses a limited set of rules that are compatible with older versions of browsers and HTML.

---

Character sets

• a character set is a system of representing a set of characters in computer- readable form
• browsers can interpret many character sets, including those for languages other than English
• the data in the document will be interpreted differently, depending on the characters set the browser uses for it
• you should always tell the browser what character set to use for the document
• if the document was written expecting one character set to be used, and the browser displays it using another, it will not appear correctly
• this is one reason why you sometimes see email messages that seem to be made up of nonsense symbols.

---

Some character sets

• US ASCII (Also called ANSI) - The basic representation of the characters on the keyboard, Based on the original telegraph encodings (128 chars total).
• ISO 8859-1 (Latin-1) - Similar to ASCII with additional characters that cover most European languages (256 chars total).
• ISO 8859-5 (Latin-5) - Russian character set (256 chars total).
• Windows-1252 - A Microsoft character similar to, but not identical with, ISO 8859-1.
• ISO 10646--the Universal Character Set (UCS) - A character coding system that can handle all the characters in all the world's languages within a single system.
• UTF-8 - One implementation of Unicode.
• Examples of Unicode - See http://www.unicode.org/iuc/iuc10/languages.html.

---

Declaring Character sets

• Web documents should always specify the character set.
• The character set can be specified in a <meta> tag in the document <head>

      <meta charset="character set" />

• fill in the specific character set, UTF-8.

     
      <head>
        <meta charset="UTF-8" >
      </head>
      

---

Character Sets: Handling characters that can't be typed.

• Some characters are reserved for special purposes in XHTML.
• The angle brackets used to delimit tags are one example
• you cannot just type a < because it will be interpreted as the beginning of a tag.
• There are also commonly used characters that are not on the keyboard
• Examples are slanted quotation marks (“ ”) and the copyright symbol (©).
• So how do you get them into a document?

---

HTML Character entities

• Characters can be represented with codes called character entities
• You use these character entity codes to include special characters in the document.
• these codes are written using the basic characters on the keyboard in a special way, somewhat like XHTML tags,
• The pattern is an ampersand followed by a numeric code or name, followed by a semicolon.
• The copyright symbol is © (numeric version) or © (name version).

---

Some important HTML character entities

Characters that should be encoded (often referred to as "escaped characters") in an HTML document are

Character	Numeric code	Named code (case sensitive)
"	"	"
&	&	&
<	&#60;	&lt;
>	&#62;	&gt;
non-breaking space	&#160;	&nbsp;

Note: You can usually get away with not encoding quotation marks in the body of the text, but not inside URLs or other values that are themselves quoted.

---

Other character entities

• To use additional characters, look the values up in a chart.
• Here is a chart listing many of the character entities.

---

Coding Guidelines

Basic structure rules

• Your documents should always be complete XHTML documents, with html, head, and body elements.
• Your documents should always have a title element.
• All content should be contained in some structure, such as a heading or paragraph.
• Container tags should always be properly closed. (<p> paired with </p>, for example.)
• Unpaired tags should be self-closed. (<br>, for example
• Tags should always be written in lower case. (<body>, not <BODY>, for example.)
• You should not use any non-standard or deprecated elements or attributes.