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"

PDF

"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 &trade; which is an entity ______ or by &#8482; which is an entity ______ .

name .... number

Tag elements placed inside other tag elements are said to be ___________

nested

&nbsp;

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