HTML and the Web
The ___ element contains special information for the browser
<head></head>
The ___ element is also known as the root element
<html></html>
.biz:
business
Audience
it is important for the web designer to understand the needs, interests, and technology level of the people the website is designed for
Auto music or video:
most users dislike sites that automatically play music or video when loaded
Font confusion:
proper use of type fonts and sizes can enhance website readability and ease of use
Text
refers to the content (the words) used on a web page to present a particular topic
Accessibility
refers to the degree a website can be used by people with differing ability levels
Which item is critical when defining a website's purpose?
target audience
Purpose
the best websites clearly present a reason for the existence of the site
The ___ element contains everything intended for display on a web page
<body></body>
web-based application
a computer-based software package that can be accessed through the web browser and is specifically designed to help the user perform a task such as updating a shared online calendar
Website:
a connected group of pages on the web that together are considered one single object. They are usually maintained by one person or organization and are about a single topic or a few related ones.
Web page:
a document on the Internet made up of an HTML file and any related files for scripts and graphics
Internet:
a global system of connected computer networks that use certain technical standards to connect the web and make pages available for people to access
Ajax
a group of technologies that can be used to produce a web-based application or "app"
Client Side Programming Language
a language that physically runs on the website visitor's own computer
fixed sidebar
a permanent element that stays where it is while the rest of the page scrolls
Helvetica
a popular typeface and can be used on many kinds of web publications
Server Side Programming Language
a program that physically runs on the web host's computer
Browser:
a program used to access the Internet and connect to the web
Cascading style sheets (CSS)
a simple computer language that is used to describe how a marked-up document, such as an HTML or XML file, should be displayed
site map
a single web page containing a list of hyperlinks, each representing a page in the website
Markup language
a standardized way of annotating, or "marking up" a document so programs reading the document can easily tell the difference between the document text and the markup annotations
PHP
an example of a programming language that is frequently used to develop websites with existing databases and is a Server Side Programming Language
JavaScript
an example of a programming language that is supported in all browsers and is the most frequently used Client Side Programming Language
Planning:
an excellent design is not possible without extensive planning before the site is constructed
World Wide Web (WWW or web):
an information space where a collection of web pages are available online
World Wide Web Consortium (W3C):
an international community where member organizations and the public work together to develop web standards. W3C's standards help define and determine what makes the World Wide Web work efficiently
theme
an overall design as applied to an entire website
Links
are clickable text and graphics that can connect different parts of one long web page, one web page to another web page, or different pages of the same website
Interactive media
are electronic or web-based applications and features that allow people to participate by creating and editing the content
Graphics
are icons, screenshots, logos, and pictures contained on a web page
alt
attribute is used to provide the text to display (or read) if the browser cannot find the designated image
title
attribute is used to provide tool tip text to display when a user pauses over an image with the mouse pointer
SRC
attribute is used to tell the browser where the desired image can be found
Bad backgrounds:
avoid backgrounds that distract from the content on a page
World Wide Web
made up of many websites containing various kinds of web pages
Sans serif
means that there are no serifs, or points, on the ends of the characters
Typeface
means the design of the type collection or family -letters -numbers -symbols -Calibri -Arial -Times New Roman
Serif
means the ends of the characters have finishing points
element placement:
most users expect certain elements to appear in a certain place -for example, a company logo in the top left corner, the navigation menu above or to the left, and a search box in the top right corner
navigation menu
must contain enough clearly labeled links to enable users to easily find the information they seek
.net:
network
.org:
non-profit organization
font
one member of a type family and is any variant in a typeface's size and style
fixed sidebar layout
one that uses a fixed sidebar -allows the navigation to be easily accessible from any point in the website
Poor navigation and user orientation:
site users must be able to easily find what they seek and know where they are in a site
Spelling errors:
spell check your site
tags
the annotations used by markup languages
Visual appealing
the best websites are pleasing to look at and make you want to click further through the pages
top-level domain name
the last part of the website address, after the period, which categorizes the group that is authorizing the website
root element
the outermost container, and tells the browser that the document is an HTML document
layout of a web page
the process of placing or "laying out" the text, graphics, and other elements of a web page
navigation:
the site menu is complete, clearly labeled, and understandable -unacceptable example would be a menu that uses "mystery buttons" that display no text revealing their destination
readability:
the site uses a readable type font that is large enough and displayed on an appropriate background -unacceptable example would be small type displayed in red on a black background
Two examples of markup languages are:
-HTML, or Hypertext Markup Language -XML, or EXtensible Markup Language
Choose all items that represent characteristics of HTML
-a markup language -controls the display of a web page -has words called "tags" and a syntax for their proper use
Dead hyperlinks:
all hyperlinks on a web page should work correctly
Ajax is a group of technologies that:
-allow a lot of interactivity, such as instant messaging -is used for web-based applications such as Gmail and Facebook -can update parts of a web page without reloading the whole page
Interactive media are web-based applications or features that:
-allow users to participate by creating and editing the content -combine digital media such as graphics, moving images, and electronic text -allow users to post information such as with video games and websites
some features that make web pages successful:
-an obvious and self-explanatory purpose -a clear structure, practical visual clues, and easily recognizable links for navigation -short and concise phrases that get to the point as quickly as possible using objective language -designs that meet current web standards such as ensuring a visitor's information will be kept secure and using markup languages correctly
Select all items that describe characteristics of a website theme
-applies to the overall website design -harmonizes all parts of a website -conveys a feeling to the target audience -optimizes a site's usability
some factors web designers consider to ensure their pages are consistently useful and appealing:
-audience -purpose -what would make the page visually appealing -how the page can be easy to use -what content would be most useful
Choose all items that represent characteristics of HTML tags
-consist of a keyword (name) surrounded by angle brackets -usually consist of pairs: a start tag and an end tag
Choose all items that represent common website design flaws
-distracting background -too many or confusing fonts -poor navigation -dead hyperlinks
Choose all of the statements that describe a sans serif typeface
-easier to read on small mobile devices. -more easily digitized -no points on the ends of the characters
Choose all of the statements that describe a serif typeface
-ends of the characters have finishing points -increased spacing between letters and words aids legibility -guides a reader's eyes from one character to the next on printed documents
Common HTML Errors:
-misspelled tag keywords (tag names) -not using lowercase for all tag and attribute keywords. -missing opening or closing tags -improperly written opening or closing tags (e.g., missing angle bracket or forward slash) -failure to include required element attributes -forgetting to place an equals sign after an attribute -keyword, or quotes around attribute values -nesting elements incorrectly or where they are not permitted
Choose all items that are characteristics of placing nested elements on a new line, using indentation
-not required by a web browser -makes HTML analysis and repair easier -done automatically by HTML authoring software
Common menu designs include:
-rows of horizontal or vertical hyperlinks (or buttons) -clickable folder tabs -links that expand when a user pauses over them with the mouse, revealing more choices (drop-down and fly-out menus)
Choose all items that represent essential steps in the planning of an excellent website
-specifying the target audience -determining individual page content -designing the navigation menu -specifying the site content to be offered
Which of the following statements is true of cascading style sheets (CSS)?
-they are used to control the layout of page elements -they are used to control font -they can be used by multiple HTML pages
programming language
a coded language used by programmers to write instructions for a computer to do what the programmer wants
easy to use
good websites make it easier to navigate from one page to the other with relevant links in obvious places
A web-based application is a computer-based software package that can be accessed through the web browser
T
Adobe Flash allows web developers to incorporate animations and interactive content into their websites
T
Interactive media and web-based applications are important because they increase the usability and functionality of a site
T
Interactive media encourages the user to become more involved with the website
T
This lesson about web pages is an example of interactive media
T
Each paragraph should be inside:
a <p></p> tag
Hyperlink:
a clickable link that takes you to another web page
.gov:
government
Hypertext Markup Language (HTML)
called "display markup" because the tags tell the browser how to display the marked-up text
EXtensible Markup Language (XML)
called semantic markup because the tags tell the browser what the marked-up text is, not how to display it
.com:
company
box layout
consists of three or five well-placed boxes -popular with news websites that want to showcase the day's top news stories, photos, and links to additional stories
Information overload:
do not overload any one page with too much information
.edu:
educational institution
An acceptable website design is one that meets user design expectations and is also:
effective
Other countries have domains too
for example, .uk = England and .ca = Canada
Useful content
good web pages stick to the point, do not have useless information, and showcase important information
The accessibility of a website refers to which of the following features:
usability by the disabled
featured graphic layout
useful for showing off icons, screenshots, or logos that look great in a big circle or square
Poor page load time:
web pages that take too long to load drive users away from your site
layout
where the web designer matches the basic elements of a web page (code, graphics, links, and text) with the application of design factors (audience, purpose, visually appealing, easy to use, and useful content) that you previously learned about
Hypertext
which is simply text containing hyperlinks that can be used to go to other hypertext (web) pages
Markup
which refers to the fact that HTML is used to mark the information on a web page, such as text or images, with the instructions a browser needs to display it as desired
Language
which signifies that HTML consists of a defined set of "words" and rules for using them correctly
Innovation:
within the constraints of a comprehensive plan, design innovation is still possible