Mid-Term Review - Information Arts and Technologies by sofiaie


									                             COSC415 Mid-Term Exam Review

The World Wide Web was invented by Tim Berners-Lee at CERN, the European Nuclear Energy Agency.
Mr. Berners-Lee developed it to facilitate communication between researchers and links between
research papers. The first widely used graphical web browser, Mosaic, was developed at NCSA
(National Center for Supercomputing Applications). Mr. Berners-Lee now works for the World Wide
Web Consortium, the organization that takes a proactive role in developing recommendations and
prototype technologies related to the Web.
The Web functions as one of many communications protocols on the Internet. The Internet functions
by means of Internet Protocol (IP), and messages are transferred between IP addresses that are
expressed as a group of four numbers between 0 and 255. The TCP protocol, which works in
conjunction with IP, serves to ensure the integrity of the communication. File Transport Protocol (FTP)
is used for efficient and reliable file transfers.

E-mail uses several protocols. Simple Mail Transport Protocol (SMTP) is used to transfer messages
between mail servers and clients, while Post Office Protocol (POP3) and IMAP are used by clients to
retrieve messages from mail servers.

The Web functions through the use of the HTTP (Hypertext Transport Protocol). Web pages were
originally written in Hypertext Markup Language (HTML). As the Web has progressed, HTML has been
upgraded and extended. The latest version is called XHTML (eXtensible Hypertext Markup Language),
which combines the formatting strengths of HTML 4.0 and the data structure and extensibility
strengths of XML (eXtensible Markup Language).

In order to make it easier for people to remember Internet locations, there is a distributed database
called the Domain Name System (DNS) in which a domain name, a unique text-based Internet address
is associated with a unique IP address.

Organizations can purchase rights to use a particular domain name. An authority is assigned to assign
domain names for each of the Top Level Domains (TLDs). The most well-known TLDs are .com, .gov,
.edu, .org and .net. The use of a particular TLD is suggested, but not rigidly followed; i.e., the use of
.com is not restricted to commercial organizations, nor is .org restricted to charitable or social
organizations. Even with the 2-character country codes, there is no prohibition for a non-resident to
obtain a domain name with that TLD.

HTML and XHTML are the protocols used to write web pages. You are encouraged to make all future
web pages conform to the XHTML specification. As such, all tags should be specified in lower case. An
XHTML document has two main container objects: <head> and <body>. Information to be displayed is
contained in the body object. The head object contains information about the web page and about how
the content is to be displayed.

Some of the tags that are commonly used are:

Name                   Tag                                 Remarks

Paragraph              <p> </p>

Name                   Tag                                 Remarks

New line               <br />                              Has no close tag, so slash is included in tag

Ordered List           <ol> </ol>                          XHTML list that will automatically place a
                                                           number in front of the items

Unordered List         <ul> </ul>                          XHTML list that will place a disk or bullet in
                                                           front of the items

List Item              <li> </li>

Blockquote             <blockquote>.. </blockquote>        Used to indent text or web page content

Strong                 <strong>…</strong>                  Used to display text in bold font

Emphasized             <em> </em>                          Used to display text in emphasized format;
                                                           usually italics

Hyperlink              <a href=”url”>[link text]</a>

Horizontal Line        <hl />

Image                  <img src=”url” height=y             Displays file “url” with height y and width x.
                       width=x alt=”alt text” />           Alt text will be displayed if image can’t be

Hyperlinks are created by using the <a> tag with an href attribute. If the file to be linked is in the same
folder as the current HTML file, only the filename and extension is required; e.g. “resume.htm”. If the
file is in a child folder, the directory path should be given; e.g., “photos/me.jpg”. When linking to a page
on an external web site, you need to use a fully qualified URL in a hyperlink. If you include an e-mail
link, the browser will launch the default e-mail application for the visitor's browser with your e-mail
address as the recipient.

Hyperlinks should be built around text that explains the function of the link. Avoid the use of the phrase
“Click here” either in the linked text or in the phrase that contains the linked text.
<a href=“news.htm”>Important News</a>
is better than either
Click to read our <a href=“news.htm”>important news!</a>
Click to read our <a href=“news.htm”>important news!</a>

The anchor or <a> tag can also be used to define an internal bookmark or named reference within an
HTML document. For example, you could define an internal bookmark or named reference at the top

of a page, called “top” by coding <a name=“top” id=“top”></a>. You would link to that anchor like
this: <a href=”#top”>Go to Top</a>.
You can also link to anchors on other web pages. To link to the bookmark #school on the page
resume.htm from the home page of the site, you could enter <a
href=“resume.htm#school”>Educational Background</a>.

The target attribute of the anchor tag can cause the new web page to open in its own browser window.

Images can be used as links by enclosing an image tag within the <a> tags. For example, to create an
image link to the school.htm page when the school.gif graphic is clicked, you could type:
<a href="school.htm"><img src="school.gif" /></a>

Although they are not required, it is useful to include height and width attributes on an <img /> tag
because to help the browser render the page faster because it reserves the appropriate space for the
image. The Alternate text (alt=) is used to provide accessibility by configuring a text alternative that is
available to browsers and other user agents that do not support graphics.

Early on, experts noticed that HTML didn’t have enough formatting capability to render what would be
considered to be professional documents. They decided the best way to provide this capability was to
implement the idea of style sheets (from the printing industry). The initial specification was written in
1992, and the capability was called Cascading Style Sheets.

Styles can be applied in three ways:

      Inline: In the body section within the tag to be styled; only affects that element
      Embedded: In the head section between the <style> and </style> tag; can be used by multiple
      External: In a file with a .css extension; Invoked by a <link> in the head section; can be used by
        any number of html files
If a web page contains both a link to an External Style Sheet and Embedded Styles, the External Styles
will be applied first, then the Embedded Styles will be applied. If an Inline Style is given for an XHTML
element in the body section, it is applied last. Whichever style is applied last is the one that rules.

Stated another way, the CSS rules of precedence (i.e., the order in which they are applied) are:
external, embedded, inline.
Styles consist of a selector and a declaration. The declaration consists of an attribute and a value.
External and embedded styles use all three parts, while inline styles use only the declaration (because
the selector is the element in whose tag the style is contained). Selectors can be an XHTML element, a
class name or an id name.
 To assign style called “offer” with blue text, 20 pixels                     When to use
               and Arial or Sans Serif font
Element p {color:blue; font-size:20px; font-family:          the style is used for all elements on a page
Class      .offer {color:blue; font-size:20px; font-         the style could apply to more than one
           family: Arial,sans-serif}                         element on a page
Id         #offer {color:blue; font-size:20px; font-         the style will apply to only one element on a

            family: Arial,sans-serif}                       page

                                        Representative CSS Items
Attribute          Description                      Representative Values
font-weight        Configure boldness of text       normal, bold, lighter
color              Text color                       Names; i.e., red, blue
                                                    Hexadecimal; i.e., #ff0000, #0000ff
                                                    RGB; i.e., rgb(255,0,0), rgb(0,0,255)
                                                    Websafe; i.e., #336699
background-        Color of the background in a     Same as above. Sample usage: body
color              block-level element              {background-image:url(parchment.gif); }
                                                    To repeat horizontally across a Web page, use
                                                    background-repeat: repeat-x;
                                                    To repeat vertically across a Web page, use
                                                    background-repeat: repeat-y;

The Web Safe Color Palette is a collection of 216 colors that display the most similar on both the Mac
and PC platforms.
There are two XHTML tags that have no inherent styles, but rather are used to group portions of the
web page together so that styles can be applied to them. Use the <div>…</div> tag to create logical
areas on a web page that are physically separated from others; i.e., it is a block-level element. Use the
<span>… </span> tag to create logical areas that are inline with their surroundings.

Graphics are an important feature of web pages. In addition to the attributes shown in the table shown
above, you can use the align attribute to display an image to the right or left of a block of text.
Graphics are a visual medium, and the information they provide is not accessible to visually
handicapped persons. When a web page uses graphics for the main navigation links, provide
accessibility by using alt attributes and providing text links on the bottom of the page.

A smaller version of a larger image that usually links to the larger image is called a thumbnail image.

An image map is an image that is configured so that parts of the image can be used as one or more

The box model consists of a content area surrounded by padding, border, and margin.

Web Site Design
The three most common methods of organizing web sites are hierarchical, linear, and random.

Here are some recommended practices for web design:

     Design your site to be easy to navigate.
     Design your pages to load quickly
     Limit the use of animated items
     Avoid the use of frames
     Design the page to display optimally for the most commonly used screen resolution (800 by 600)
       and to gracefully adjust to larger sizes
     Remember that different browsers and even different browser versions will display your web
       page in different ways.

CSS Positioning
Use absolute positioning (position:absolute;) property along with the left, right and/or top property to
precisely configure the position of an element. Use relative positioning (position:relative;) to slightly
change the location of an element in relation to where it would otherwise appear when rendered by a

If an element is configured with float:right; the other content on the page will appear to its left.

The following example shows the CSS to create the class called myfloat that floats to the right of the
other page content, has a 10px margin, and a solid border is:
       .myfloat { float:right; margin:10px; border:solid; }

The z-index property is used to modify the stacking order of elements on a web page. The CSS rule
.blog{z-index:4}; will configure a class called blog to stack on top of other elements that have a z-index
of 3.

When a single value is supplied for a margin, padding or border, it is applied to all four sides. If two
values are supplied, the first value is applied to the top and bottom and the second value is applied to
the left and right sides. When four values are supplied, they are applied to the top, right, bottom and
left, respectively. For example, the following configures a margin for an element with the following
values: top margin 30 pixels, left margin 150 pixels, right margin 0 pixels, and bottom margin 0 pixels:
        margin:30px 0 0 150px;

The CSS declaration display:none; will cause an object not to display. Other values for the display
attribute are block and inline.

By default, unvisited hyperlinks display as underlined blue text, with visited links being displayed in
magenta. CSS provides four pseudo-classes so that styles can be provided for each of four states; these
pseudo-classes, in the order in which they should be coded, are link, visited, hover and active. Just
remember the mnemonic LoVe HAte.


To top