Reading...
Play button
Play button
Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
66 Cards in this Set
- Front
- Back
|
Webpage
|
a document stored on a web server which can be accessed and viewed using a web browser on a computer or mobile device
|
|
|
Website
|
a collection of related webpages
|
|
|
Sell
|
sells products or services
|
|
|
Inform
|
provides information about a cause, event, or organization
|
|
|
Entertain
|
provides information or links to movies, music, magazines, etc.
|
|
|
Hybrid
|
may be a combination of any of the four purposes listed above
|
|
|
Standards
|
basic set of guidelines for authoring languages used to make webpages
|
|
|
W3C
|
The World Wide Web Consortium (W3C) develops webpage development standards
|
|
|
Advantages of Web Structure
|
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. |
|
|
United States Website Accessibility
|
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 |
|
|
HTML
|
Hypertext Markup Language
|
|
|
Embedded tags
|
define the layout and appearance of the webpage
|
|
|
XML
|
Extensible Markup Language
|
|
|
XHTML
|
Extensible Hypertext Markup Language – uses XML code along with the HTML programming language to develop webpages
|
|
|
Style Sheets
|
1. Describe how browsers should present or display information on a webpage.
2. Give web developers more control over layout and page formatting. |
|
|
CSS
|
Cascading Style Sheets is a popular style sheet language
|
|
|
Text editors
|
allow developers to write code in plain text
|
|
|
Website Organization
|
Storyboard the website and determine the best website structure for the purpose and content of the site
|
|
|
Website Structures
|
Linear, hierarchical, and webbed
|
|
|
Linear
|
Use for pages that users need to read in order
|
|
|
Hierachical
|
Use to organize complex bodies of information
|
|
|
Webbed
|
Use when the order in which the user views the pages does not matter
|
|
|
HTML Tags
|
a. Define text, graphics, hypertext links, and other multimedia elements found on webpages.
b. Tell the browser how to display the document |
|
|
Rules for using HTML tags
|
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> |
|
|
Attributes
|
provide additional information about tags and control how the tag will be interpreted by the browser.
|
|
|
Requirements for XHTML
|
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 |
|
|
Saving and Testing XHTML files
|
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 |
|
|
Website File Management
|
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 |
|
|
Structure Tags
|
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
|
|
|
<html>
|
Identifies the beginning of the webpage to the browser
|
|
|
<head>
|
provides identifying information about the webpage that is used by browsers and search engines
|
|
|
<title>
|
specifies the title of the webpage that will appear in the browser’s title bar and in bookmarks.
|
|
|
<meta>
|
provides information about the page for search engines and browsers.
|
|
|
Syntax
|
<meta name=”name” content=”contents” />
|
|
|
<body>
|
i. Contains the majority of the data for the webpage.
ii. Contains all the content that will appear in the browser’s window. |
|
|
Spacing Tags
|
<br/> and <p>
|
|
|
<br/>
|
inserts a ‘line break’ or a single space in the text
|
|
|
<p>
|
inserts a paragraph and adds a blank line before and after the paragraph text
|
|
|
Heading Sizes
|
<h1> through <h6> bold enclosed text and increase the text size with <h1> being the largest and <h6> being the smallest.
|
|
|
Typeface Styles
|
i. <b> - bolds the text between the opening and closing <b> tags.
ii. <i> - italicizes the text between the opening and closing <i> tags |
|
|
<ul>
|
unordered list. Creates a bulleted list. Used for items that do not need to be in a particular order
|
|
|
<ol>
|
ordered list. Creates a numbered list
|
|
|
<li>
|
list item. Items in each type of list are keyed between the opening and closing <li> tags
|
|
|
<img>
|
inserts an image into a webpage
|
|
|
Navigation Tags
|
can link to spots inside the same webpage or to pages outside the webpage
|
|
|
Hypertext links
|
be used to automatically open the browser’s default email client and insert an email address in the To: section
|
|
|
Inline Stlyes
|
the code for the style is inserted inside the opening html tag
|
|
|
Internal Style Sheet
|
used to control the appearance of one webpage
|
|
|
External Style Sheet
|
styles are defined in a separate text file saved with the .css extension
|
|
|
Alignment
|
(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> |
|
|
Body Tag Attributes
|
(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')"> . |
|
|
Font
|
(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”> |
|
|
Body Text
|
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. |
|
|
Multimedia
|
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. |
|
|
Miscellaneous Guidelines
|
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. |
|
|
Website Components
|
Home page, about us, contact us, privacy policy, splash page site map.
|
|
|
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. |
|
|
About us
|
a page defining the website’s purpose and goals
|
|
|
Contact Us
|
page containing contact information to make it easy for viewers to communicate with the business
|
|
|
Privacy Policy
|
page that informs viewers how their private information will be handled
|
|
|
Splash Page
|
an introduction page that appears while the website is loading
|
|
|
Site Map
|
a basic skeleton of the website intended to help users quickly locate information on the website
|
|
|
Before Publishing
|
Check the site in multiple browsers.
Validate source code. Check spelling and relative and absolute links |
|
|
Choose a Web Host
|
A host computer is also called a web server and is a computer that stores webpages.
Sends webpages to viewers over the Internet upon request |
|
|
Obtain a Domain Name
|
Use assigned name provided by web hosting service. Register and purchase a unique name for a fixed period of time
|
|
|
Publish
|
upload files to the web host/server
|
