3.02

Front 1

1. Webpage

Back 1

a document stored on a web server which can be accessed and viewed using a web browser on a computer or mobile device.
a. Can contain graphics, audio and video.

Front 2

2. Website

Back 2

a collection of related webpages.
3. A website is developed to build a relationship with a target audience and is created for the following reasons:

Front 3

a. Sell

Back 3

sells products or services:
i. Advertises, demonstrates, and describes the features of a product or service
ii. Provides customer support
iii. Often includes a database (or catalog) of products and services

Front 4

b. Inform

Back 4

provides information about a cause, event, or organization
i. May sell products, but not for profit
ii. May provide online tutorials and demonstrations

Front 5

c. Entertain

Back 5

– provides information or links to movies, music, magazines, etc.
d. Social Networking - provides a network where people can interact online.

Front 6

e. Hybrid

Back 6

may be a combination of any of the four purposes listed above.
B. Webpage Development Standards

Front 7

1. Standards

Back 7

basic set of guidelines for authoring languages used to make webpages.
2. They are enacted to make websites accessible to everyone regardless of:
a. Culture
b. Education
c. Ability
d. Resources
e. Physical Limitations

Front 8

3. The World Wide Web Consortium (W3C) develops webpage development standards

Back 8

a. Helps ensure webpages display consistently in all browsers.
b. Results in faster website development.
c. Results in faster downloading of websites.
d. Provides equal access to information regardless of browser, operating system or hardware.

Front 9

C. United States Website Accessibility Legislation

Back 9

1. Section 508 Amendment to the Rehabilitation Act requires US Federal Agencies to make information and data equally accessible to individuals and employees with disabilities.
2. Applies only to US government agencies.
D. Authoring Languages

Front 10

1. HTML

Back 10

Hypertext Markup Language

Front 11

b. Embedded tags

Back 11

define the layout and appearance of the webpage.
c. HTML is platform independent.
d. HTML 4.01 is the current version.

Front 12

2. XML

Back 12

Extensible Markup Language
a. Designed to carry data, not to display it.
b. Uses author-defined tags to identify data so that the data can be easily imported into other applications.

Front 13

3. XHTML

Back 13

Extensible Hypertext Markup Language – uses XML code along with the HTML programming language to develop webpages.
a. Results in cleaner code
b. Tags are more descriptive of the data they contain

Front 14

E. Style Sheets

Back 14

1. Describe how browsers should present or display information on a webpage.
2. Give web developers more control over layout and page formatting.

Front 15

3. CSS

Back 15

Cascading Style Sheets is a popular style sheet language.
4. Advantages
a. One style sheet can control the formatting for multiple webpages. An entire website can be reformatted by editing one file.
b. Styles can also be set internally.
5. Disadvantage - may alter the ability of some devices to accurately read and display information.

Front 16

F. Text Editors

Back 16

allow developers to write code in plain text.
1. Examples – Notepad, Notepad 2 and WordPad
2. Microsoft Word should not be used to create webpages.

Front 17

G. Website Organization

Back 17

1. Storyboard the website and determine the best website structure for the purpose and content of the site.

Front 18

Linear

Back 18

Use for pages that users need to read in order
i. Topics arranged in chronological, alphabetical, or series order
ii. Include links to next page and back to previous and index page

Front 19

b. Hierarchical

Back 19

– Use to organize complex bodies of information
i. Looks like a family tree or a chain of command
ii. Pages are organized and linked by categories and subcategories

Front 20

c. Webbed

Back 20

Use when the order in which the user views the pages does not matter

Front 21

1. HTML Tags

Back 21

a. Define text, graphics, hypertext links, and other multimedia elements found on webpages.
b. Tell the browser how to display the document

Front 22

2. Rules for using HTML tags

Back 22

a. HTML tags are enclosed inside angle brackets: < >.
b. The tag name is keyed between the two angle brackets. Example: <body>.
c. With a few exceptions, tags occur in pairs with an opening and a closing tag.
i. Example: <html> is an opening tag
ii. Example: </html> is a closing tag.
iii. The forward slash ( / ) is used in the closing tag.
iv. Text between the opening and closing tags is affected by the tag.
(a) Example: <b>Hello World!</b>
(b) Makes Hello World appear in bold.
v. Exceptions
(a) Some tags are empty tags, meaning they do not have a closing tag, they only have an opening tag.
(b) Examples of empty tags: <br>, <hr>, <img>, <meta>

Front 23

d. Attributes

Back 23

provide additional information about tags and control how the tag will be interpreted by the browser.
i. Some tags have multiple attributes.
ii. Rules for using attributes:
(a) Attributes are entered inside the opening tag but not in the closing tag.
(b) Attributes are keyed in name/value pairs. Syntax: name=”value”
(c) The attribute should have an equal symbol followed by the value or setting for the attribute.
(d) Attribute values should be enclosed inside quotation marks.

Front 24

3. Requirements of XHTML

Back 24

a. All tags must be in lowercase.
b. All tags must have a closing tag. Empty tags should be closed in the opening tag by placing a space and forward slash before the closing angle bracket. Example: <br />
c. All tags must be properly nested.
i. Nesting refers to the order in which tags are opened and closed.
ii. The closing tags are entered in the reverse order from the opening tags to achieve proper nesting.
d. The <html> tag must be the root tag for every document.
e. These requirements also work in HTML 4.01, but are not required. However, students should follow these guidelines when creating their webpages.

Front 25

4. Saving and Testing (X)HTML files

Back 25

a. Save the file with an .html extension.
b. This identifies the file as a webpage to the browser.
c. Open the page in a web browser to view it and check for errors.

Front 26

Website File Management

Back 26

1. The files for a website should be saved in one folder called the root folder
a. The home page of a website is named index.html
b. Use lowercase letters for all folder and filenames.
c. Files can be organized into different subfolders within the root directory if the website is very large.
2. Use relative hyperlinks to point to other files within the website: news.html.
3. Use absolute hyperlinks to point to other websites: http://www.citizentimes.com
J. Creating a Webpage Using HTML

Front 27

1. Structure Tags

Back 27

a. The doctype declaration refers the browser to a Document Type Definition (DTD) which contains the rules for the markup language so the browser can display the page correctly.
i. Strict – does not allow the use of deprecated tags or frames.
ii. Transitional – allows the use of deprecated tags but not frames.
iii. Frameset – allows the use of deprecated tags and frames.
iv. Deprecated tags are tags that are marked for deletion in future releases of the markup language. Style sheets should be used instead of those tags

Front 28

b. <html>

Back 28

- Identifies the beginning of the webpage to the browser.

Front 29

c. <head>

Back 29

Head Section – provides identifying information about the webpage that is used by browsers and search engines.

Front 30

i. <title> -

Back 30

specifies the title of the webpage that will appear in the browser’s title bar and in bookmarks. The <title> is inserted inside the <head> section.

Front 31

ii. <meta>

Back 31

provides information about the page for search engines and browsers.
(a) The <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> is required and identifies the character set used by the webpage.

Front 32

(b) Syntax

Back 32

<meta name=”name” content=”contents” />
(i) <meta name=”author” content=”author’s name” /> - provides a search engine with the author’s name.
(ii) <meta name=”description” content=”Description” /> - provides a description of the webpage that will be displayed when a search engine shows the page’s URL in a hit list.
(iii) <meta name=”keywords” content=”list of keywords” /> - provides a list of words that a search engine should associate with the page.

Front 33

d. <body>

Back 33

i. Contains the majority of the data for the webpage.
ii. Contains all the content that will appear in the browser’s window.

Front 34

a. Spacing tags

Back 34

i. <br /> - inserts a ‘line break’ or a single space in the text.
ii. <p> - inserts a paragraph and adds a blank line before and after the paragraph text.

Front 35

b. Heading Sizes

Back 35

<h1> through <h6> bold enclosed text and increase the text size with <h1> being the largest and <h6> being the smallest

Front 36

c. Typeface Styles

Back 36

i. <b> - bolds the text between the opening and closing <b> tags.
ii. <i> - italicizes the text between the opening and closing <i> tags.
d. Lists
i. <ul> - unordered list. Creates a bulleted list. Used for items that do not need to be in a particular order.
ii. <ol> - ordered list. Creates a numbered list.
iii. <li> - list item. Items in each type of list are keyed between the opening and closing <li> tags.

Front 37

d. Lists

Back 37

i. <ul> - unordered list. Creates a bulleted list. Used for items that do not need to be in a particular order.
ii. <ol> - ordered list. Creates a numbered list.
iii. <li> - list item. Items in each type of list are keyed between the opening and closing <li> tags.

Front 38

i. <img>

Back 38

- inserts an image into a webpage

Front 39

(a) Syntax

Back 39

<img src=”image location” alt=”text describing the image” />
(b) The source attribute (src) identifies the location of the image file.
(i) The image filename is case sensitive and must be keyed exactly as it is saved.
(ii) Images should be saved in the same location as the webpage.
(c) The alt attribute should always be used in case the image does not load properly in the browser window.
(d) Width and height attributes can be used to control the display size of image in the browser window. The value is stated in pixels.

Front 40

f. Navigation (linking) Tags

Back 40

i. Hypertext links are inserted by using anchor tags <a>.
ii. Hyperlinks can link to spots inside the same webpage or to pages outside the webpage.
iii. Hyperlinks can be used to automatically open the browser’s default email client and insert an email address in the To: section.
iv. Syntax: <a href=”URL”>Text to Click</a>
(a) The href attribute is short for hypertext reference and identifies the URL for the link to be opened in the browser.
(b) Text or an image tag MUST appear between opening and closing anchor tags to provide a place for the viewer to click in order to visit the link.

Front 41

a. Inline Styles

Back 41

the code for the style is inserted inside the opening html tag.
i. Syntax: <p style=”color:red”>
ii. Affects only the information between the opening and closing tag.
iii. Overrides internal and external style sheets.

Front 42

b. Internal style sheet

Back 42

used to control the appearance of one webpage.
i. The <style> tag is placed inside the <head> section of the webpage.
ii. Styles are defined between the opening and closing <style> tags.
iii. Internal style sheets override external style sheets.

Front 43

c. External style sheet

Back 43

styles are defined in a separate text file saved with the .css extension.
i. A code is inserted into the <head> section giving the location of the style sheet to be used.
ii. All webpages in a website can be linked to one external style sheet which helps keep all webpages in a website consistent in appearance
d. Several tags and attributes have been deprecated in favor of using style sheets. (Examples below are shown as inline styles.)

Front 44

i. Alignment

Back 44

(a) To center text using inline styles: <p style="text-align:center">Text</p>
(b) To right-align text using inline styles:
<p style=”text-align:right”>Text</p>

Front 45

ii. Body Tag Attributes

Back 45

(a) To set the background to a solid color using inline styles:
<body style="background-color:yellow">
(b) To set the background to an image using inline styles:
<body style="background-image:url('paper.gif')">

Front 46

iii. Font

Back 46

(a) To change the typeface: <p style=”font-family:arial”>
(b) To change the color: <p style=”color:red”>
(c) To change the size: <p style=”font-size:16px”>

Front 47

1. Body text

Back 47

a. Sans serif typefaces are easier to read on computer screens.
b. If the typeface chosen is not supported by the browser, the browser will display the text in its default font so it is best to choose a typeface that is common to many computers.
c. Left justified text is easier to read for webpages.
d. Do not use underlining—it implies a hyperlink.
e. Let users know if a link will move them to a page on a different website.
f. Use headings that are descriptive and unique from one another to divide page content into short sections.
g. Use descriptive headings for lists.
h. Use abbreviations sparingly and define acronyms and abbreviations.
i. Avoid jargon.
j. Consider the target audience when selecting typefaces, text size, etc.
k. Use contrasting colors for background and text to make text easy to read.

Front 48

2. Multimedia

Back 48

a. Use images, video, animation, and audio only when they help convey or support the website's message.
b. Ensure that images load quickly.
c. If large images are used, use thumbnails that link to the larger images.
d. If plug-ins or players are required, include a link to a website where the plug-in or player can be downloaded.
i. Provide controls so that users can stop, start, play, and adjust volume.
ii. Be aware that embedded media can dramatically increase the download

Front 49

3. Miscellaneous Guidelines

Back 49

a. Place the organization's logo in a consistent place on every page.
b. Include a title in the <head> section to be used if a viewer bookmarks the page (adds your page to their favorites)
c. Include a link back to the home page from every page.
d. Place the most important information near the top of the page.
e. Be consistent in all design elements (fonts, colors, graphic size and location, alignment, and backgrounds) throughout the website.

Front 50

L. Website Components

Back 50

1. The Home/Index Page
a. Creates a positive first impression of the website.
b. Communicates the purpose of the website.
c. Should contain navigational links or menus to provide viewers with the links they will need to navigate the website.
2. A business website should contain the following:
a. About Us – a page defining the website’s purpose and goals.
b. Contact Us – page containing contact information to make it easy for viewers to communicate with the business.
c. Privacy Policy- page that informs viewers how their private information will be handled.
3. The website may contain the following pages:
a. Splash page - an introduction page that appears while the website is loading. Many readers do NOT like waiting for splash pages to load. They can be used to:
i. Show a progress bar indicating the website is loading.
ii. Tell the user what kind of browser or software they need to view the site.
iii. Allow users to choose their language or country’s version of the website.
b. Site Map

Front 51

1. Before Publishing

Back 51

a. Check the site in multiple browsers.
b. Validate source code.
c. Check spelling and relative and absolute links.

Front 52

2. Choose a Web Host.

Back 52

a. A host computer is also called a web server and is a computer that stores webpages.
b. Sends webpages to viewers over the Internet upon request.

Front 53

3. Obtain a Domain Name

Back 53

a. Use assigned name provided by web hosting service.
b. Register and purchase a unique name for a fixed period of time.

Front 54

4. Publish

Back 54

- upload files to the web host/server