HTML 4 and Web Page Design Basics
href stands for...
hypertext reference
http means
hypertext transfer protocol
Attribute name used to give a name to an object so that it can be accessed using CSS or JavaScript
id
With virtually no exceptions, divisions and spans should have ______ attributes with _______ names without ______
id ... self-documenting ... spaces
ASP
"Active Server Pages"
ASCII
"American Standard Code for Information Interchange"
CSS
"Cascading Style Sheets"
XML
"EXtensible Markup Language"
FTP
"File Transfer Protocol"
GUI
"Graphical User Interface"
ICANN
"Internet Corporation for Assigned Names and Numbers"
PHP
"PHP: Hypertext Preprocessor"
"Portable Document Format"
RSS
"Really Simple Syndication"
URL
"Uniform Reference Locator"
Special symbol that can be placed in a url to hyperlink to a specific place within a given page you are linking to
#
Black in hex code:
#000000
Short cut for hexcode color: #AA88DD
#A8D
White in hex code:
#FFFFFF
Hexadecimal syntax for establishing color
#RRGGBB
Optional character that can delimit attribute values
'
Before you launch a site you should always...
...check it's operation in the 4 major browsers: IE, Firefox, Chrome, Safari
Most web servers retrieve images....
...concurrently
If a browser can't tell what version of HTML a page is, it uses...
...quirks mode
Navigation scheme to go to a parent folder called 'lounge'
../lounge
Alternative, shorter extension for a web page document
.htm
File separator symbol for web pages
/
Symbol used to close a tag 'pair'
/
Allowable symbols in hex code
0-9, A-F
How many color names are available to a designer?
16
Images were first introduced to web pages in _____ by college student ____________
1993 ... Marc Andreessen
Expected year when HTML5 is "ready" (supported by most browsers with most functionalities)
2015 per 3/8/12 as specified by http://ishtml5readyyet.com/
Maximum color numbers with a gif
256
Exactly how many colors (shades) are available to a designer (in factored form!)
256x256x256
Comment structure for HTML
<!-- comments here -->
Tag name that specifies the 'dialect' of a web page (show any special symbols)
<!DOCTYPE>
Delimiter for tags
<>
Write a complete command to create an internal hyperlink to a location called 'top' within a given page, with text: 'Top of page'
<a href="#top">Top of page</a>
Write a complete command for a hyperlink to yahoo, with text: "I love to YAHOO!" and a screen tip of "Let's yahoo now"
<a href="http://www.yahoo.com" title="Let's yahoo now">I love to YAHOO!</a>
An element often used for long quotations which will force the quote to 'break out' of the document flow
<blockquote>I pledge allegiance...with liberty and justice for all</blockquote>
Line break tag (show complete structure)
<br />
Largest heading tag name
<h1>
Smallest heading tag name
<h6>
Suggested tag structure to indicate that JavaScript is not enabled
<noscript> <p>JavaScript is not enabled!</p> </noscript>
An element often used for short quotations that should not 'break out' of the document flow
<q>Spaces are evil</q>
Complete HTML command that specifies a title on a web page saying "My Little Web Page"
<title>My Little Web Page</title>
Data is appended to a URL using this symbol
?
If HTML entity names are self-documenting (in most cases) why are HTML entity numbers often better to use (even though harder to remember)
Browsers may not support all entity names (the support for entity numbers is very good)
Font face and color should only be set by using...
CSS
Language responsible for aesthetics of a web page
CSS
Name of the developer who wrote the add-on used with Firefox in the web development classes at TCA
Chris Pederick
Browser affiliated with Google
Chrome
Why should you NEVER underline text in a web page for the purposes of emphasis?
Could be mistaken for a hyperlink
The basic structure of web pages that supports the use of CSS and JavaScript
DOM
Aspect ratio
Describes the proportional relationship between an image's width and its height.
DOM
Document Object Model
Common means of transferring your web pages and content to a server
FTP
Browser affiliated with Mozilla
Firefox
Common mistake made by even professional web developers when using web-authoring software that limits a search engine's ability to find a site
Forgetting to create a meaningful title element in the head of the document
Form submission technique where information is transmitted via the URL
GET
Geeky-looking computer symbols for special (reserved) symbols like '<' or '&'
HTML entity
An agree-upon technique for transferring hypertext documents around the Web
Hyper Text Transfer Protocol
HTML stands for...
Hypertext Markup Language
Centralized authority to make sure only one person at a time uses a given domain name
ICANN
Browser affiliated with Microsoft
Internet Explorer
IE
Internet Explorer
Base language for Android devices
Java
Client-side language used with HTML to give a web page functionality
JavaScript
Language responsible for web page behavior
JavaScript
Approximately how many colors are available to a designer?
Over 16 million
Server side language that can write HTML 'on the fly'
PHP
Server-side language used with HTML to give a web page functionality
PHP
Form submission technique where information is transmitted via an array
POST
Browser affiliated with Apple
Safari
Consider the code: <meta name="viewport" content="width=800" /> What does it do?
Sets the width of a web page to 800 pixels
Inventor of the World Wide Web
Sir Tim Berners-Lee
p
Tag name for creating paragraphs
Proximity
Things that functionally work with one another are in the same vicinity with each other (like a sofa-coffee table combo)
Why is it a good idea to use width and height attributes for images (with ORIGINAL DIMENSIONS!) when placing an image in a web page?
To ensure that the page layout is correctly aligned even before the page is loaded; can speed the overall loading time for the page
Global address that can be used to locate anything on the Web
URL
Why should pages be validated? (5 Reasons)
Validation as a debugging tool Validation as a future-proof quality check Validation eases maintenance Validation helps teach good practices Validation is a sign of professionalism
An 'essential' add-on in Firefox that supports web page development and analysis
Web Developer Toolbar
Store and serve web pages
Web servers
W3C
World Wide Web Consortium
Language responsible for web page structure
XHTML
More strict version of HTML
XHTML
Common range of pixels per inch for a web image
[72, 120]
File separator symbol for Windows
\
Tag name for creating hyperlinks
a
Attribute determining what should be done when a form is submitted
action
Small piece of software written by a developer that can be embedded in Firefox for additional functionalities
add-on
The 'A' in crAp (from a design perspective) stands for...
alignment
Important design considerations for most GUI elements
alignment, proximity
Important attribute for visually impaired users
alt
Using this attribute is strongly recommended for use in case an image cannot load or if the file cannot be found
alt
With virtually no exceptions, images should have _____ attributes to enhance usability for users with visual or audial impairments
alt
Fancy name of the '&' symbol
ampersand
The <a> tag is known as the _______ tag
anchor
< > are often called ...
angle braces
Technique for softening edges of text
antialias
Dynamic web pages affiliated with Microsoft have this extension
asp
Items of data in a tag that provide additional information to the browser
attributes
Tag name for bolding an item
b
Tag name of element that contains the web page content
body
Tag that holds the information seen in a browser
body
Hexadecimal is also known as ...
base-16
Horizontal scrolling should ....
be avoided at all costs
Vertical scrolling should....
be prevented when possible but is acceptable in desktop applications
Navigation scheme to go to a sub folder called 'beverages'
beverages/
Elements that 'stand on their own' or 'break out' of the flow which tend to stack vertically in a page
block
Image that is not displaying for some reason
broken image
Renders a web page's content
browser
A tag that should not be used for submitting forms because of misinterpretations by IE
button
myLittleAttributeName demonstrates _____
camel-case
Attribute name used to put a caption on a table
caption
"dog" vs. "Dog" demonstrates ________
case-sensitivity
Attribute name specifying the number of pixels of space between a cell well and its content
cellpadding
Attribute name specifying the number of pixels of space between adacent cells and/or their container
cellspacing
_______ _______ tells the browser the character set used in the web page
character encoding
Can be used to specify the language characters making up a web page (English, Hebrew, Russian, etc)
charset
Attribute value that creates squarish GUI elements where multiple selections may be made at one time
checkbox
A subfolder is also called a _______ of the folder it is in
child
Attribute name that specifies a group name that may apply to multiple tags/objects
class
Everything between <a> and </a> is ________
clickable
Makes your web page understandable to you in the future and to others who what to build on it
comments
The 'C' in Crap (from a design perspective) stands for ...
contrast
Lesser-used default name for the home page of a static web site
default.htm
dd
definition (definition)
dt
definition term
Tags that are intended to be 'phased out' at some point in the future are known as _______, and should not be used
deprecated
Using width and/or height attributes on an image can inadvertently lead to ________
distortion
Tag used to combine elements into a group in a vertical stacking type arrangement
div
Tag name for a special type of list often used with definitions
dl
Tells a browser exactly how you would like a web page to be displayed
doctype
A unique name used to locate your site
domain name
Images on a web page can drastically affect the __________ of the page; therefore they should always be ________________ and their actual final dimensions should be stated with the appropriate ___________ ( ____ & ______) as measured in ________
download time ... optimized ... attributes ... width ... height ... pixels
Two elements types nested within a definition list
dt and dd
Web pages that can do things for a user besides simply convey information, that normally require some level of programming
dynamic
XHTML
eXtensible HTML
Matching tags along with their enclosed content for example: <p>Hello World</p>
element
<br /> is an example of an ____________ element
empty
True or false: A bitmap image is an acceptable image file type to use on a web page
false
True or false: JPEG (JPG) supports transparency
false
True or false: The ordering of attributes is important
false
Given the attribute: width="50px" True or false: The attribute is correctly written
false -- do not list the abbreviation
True or false: It is acceptable to use width and/or height attributes to change the size of an image so it fits in the right amount of space as long as it's aspect ratio is held constant
false; A 3MB image that is 3000px by 2000px is still 3MB even if it is reduced to the size of a thumbnail, and it affects the download time of the page
The basic top-level web page structure responsible for user interaction with a page with respect to entering information
form
Image type that supports transparency with limited colors
gif
Used for images with solid colors, logos and geometric shapes with reduced color content
gif
Images with transparency are shown in Photoshop with a _____________ background
gray & white checkerboard
Name(s) of the '#' symbol
hash, number symbol, pound symbol, octothorp
Tag name of element that contains 'behind the scenes' information (like metadata) to help a page work according to design intentions
head
For customized colors, you need to use _______ color numbers
hexadecimal
Attribute value for a GUI element that renders it invisible to the user
hidden
List 4 alternatives to an attribute you would like to name: "Holy Smoke" but without the space. The most important thing is to be ________ in your naming technique
holySmoke, holysmoke, holy-smoke, holy_smoke consistent
hr
horizontal rule
Tag used to draw to draw a horizontal line on a web page
hr
Attribute name for creating hyperlinks
href
The attribute used to specify the location of a hyperlink
href
Extension for a web page document
html
Highest level tag element in a web page
html
CSS pages can be validated at....
http://jigsaw.w3.org/css-validator/
Complete web address for Google
http://www.google.com
Character codes may be found at..
http://www.unicode.org
First place (besides Google) to look up basic information about web related issues
http://www.w3schools.com
Tag that allows you to drop a frame of any width or height anywhere in a document as if it were an image
iframe
Tag name of element for inserting images in a web page
img
Exceptions to the rule that elements have an opening and closing tag (yet commonly used tags)
img, br
<p>I'm blogging <em>now</p></em> is an example of __________ __________
improper nesting
Most common default name for the 'home page' of a static web site
index.html
Elements that 'go with the flow' of a page
inline
Dominant tag name used in a form for creating GUI elements for a user to interact with
input
Common image type for images directly from photographs (give both spellings)
jpg, jpeg
Tag often used with radio and check boxes so users can see what they are choosing
label
The content of the <a> element is the ______ for the link
label
Tag name within a list that specifies individual entries
li
Tag name of element used to load an external style sheet
link
Horizontal menu bars are often ______ that have been ______ by ______ making them _______
list items ... styled .... CSS.... inline
Tag that tells the browser about the page
meta
Additional data about a document, hidden from the normal user
metadata
Attribute responsible for determining how data from a form should be handled
method
Heavily utilizes XML
mobile technology (smart phones)
Attribute used to create internal hyperlinks
name
The trademark symbol can be made with the code ™ which is an entity ______ or by ™ which is an entity ______ .
name .... number
Tag elements placed inside other tag elements are said to be ___________
nested
non-breaking space HTML entity
Replaces the applet tag in newer versions of (X)HTML
object
Tag name for a sequential list
ol
Three parts of an HTML element
opening tag, content, closing tag
These tags are located inside a drop-down menu to create the various entries of a menu
option
".." means ____________
parent folder
Attribute value that creates a text-input box with obscured letters as a user types
password
Dynamic web pages often have this extension
php
Smallest element on a screen
pixel
Unit of measure of elements in a web page
pixel
Image type that supports transparency with many colors
png
Tag that would allow information placed within it to look just as it was typed in the tag body
pre
Syntax for an attribute
property="value"
The 'P' in craP (from a design perspective) stands for...
proximity
Abbreviation for pixel
px
By adhering to standards, your pages will display more _____ and with fewer display ______ between ______
quickly ... differences ... browsers
When a browser tries to render 'ill-formed' HTML, it may enter _____________ mode
quirks
Attribute value that creates round GUI elements where only one of the elements can be active at a time
radio
Primary colors on a traditional computer monitor
red, green, blue
Attribute for establishing a document's relationship to a page as a style sheet
rel="stylesheet"
The 'R' in cRap (from a design perspective) stands for ...
repetition
Top folder of your web site
root
Best type of font (as a family) to use for web page text
sans-serif
Tag name of element used to write JavaScript commands within a page
script
Drop-down menus are created with this tag
select
Complete attribute showing a menu item that should be shown as selected in the menu as it is first loaded in the web page (the default choice)
selected="selected"
Tag structures like <br /> are known as _______
self-closing
Variables/attributes which are named according to their function (ex: class="warning") are said to be ...
self-documenting
A folder called 'fruit' contains two separate folders: 'apples' and 'pears' . Apples and pears are...
siblings
Delimiter for multiple attributes within a tag
space
Don't use _____ when naming files and folders for your web site
spaces
Must not appear in ids
spaces
Tag used to group elements into a arrangement that flows with the text of a document
span
Attribute name used to denote the location of a picture file for a web page
src
Attribute to specify the location of a JavaScript file named 'myscripts.js' that is to be loaded from an external location
src="myscripts.js"
Attribute name to specify the beginning number for a sequential list
start
Web pages that simply convey information without user interactivity
static
An alternative for the normal bolding tag, which is often custom-styled with CSS
strong
Attribute name that lets you apply a CSS style to a particular object
style
Tag name of element used to embed CSS commands within a web page
style
In the old days (prior to CSS), ______ was mixed with HTML __________
style ... structure
Tag name for producing subscripted text
sub
Tag name for producing superscripted text
sup
HTML structure best used for displaying data, but prior to CSS often used (misused) for positioning of web elements within a page
table
Attribute used to open a link in another browser window, but pages with this ability may not ______ and can be _________ for users on a variety of devices and alternative browsers
target ... validate ... problematic
Attribute name for creating a table column
td
Attribute value that creates a text-input box
text
Tag fpr creating a multiline area where information may be entered in a freeform style
textarea
Attribute name for creating a table heading
th
Smaller sized image that may be 'clicked' to see a larger version of the image on another page
thumbnail
Attribute name that lets you display a 'tooltip' when a mouse passes over it
title
Tag name that specifies a title for a web page in a browser's 'chrome'
title
With virtually no exceptions, hyperlinks should have _____ attributes to reduce _______ and to provide additional _______ about where the link goes
title .... visual clutter... information
Attribute name for creating a table row
tr
Doctype that allows older HTML tags
transitional
Two common HTML dialects prior to HTML5
transitional and strict
XML was designed to_____ & _____ data. HTML was designed to _____ data.
transport ... store display
True or false: A gradient would best be represented with a JPEG rather than a GIF
true
True or false: An image is an inline element
true
True or false: Element names should be lower case
true
True or false: Whenever possible, images should be crafted with a transparent background
true
Attribute name to specify various kinds of lists: letters, numbers, Roman numerals, etc
type
Attribute that determines the nature of a GUI element
type
Attribute for specifying a style sheet language as that of CSS
type="text/css"
Tag name for a bulleted list
ul
All symbols in human kind that are shown on a computer screen have an assigned __________
unicode
Two type of lists in HTML
unordered, ordered
Web pages should go through a ________ process at ________ before release, but sadly few bother with this effort.
validation .... http://validator.w3.org/
Most ______ (tabs, returns, spaces) are ignored by the browser
whitespace
