Web Technologies Test 1

Which of the following attributes would configure an ordered list to display uppercase letters?

type="A"

Choose the preferred tag pair to use when emphasizing text.

<strong></strong>

Choose the tag pair that is use to link web page documents to each other.

<link> tag

The &lt;meta&gt; tag is coded in the ________ section of a web page document.

header

Which tag is used to force the browser to display the next text or element on a new line?

<br>

Choose the tag pair configures text to be indented from both the left and right margins.

<blockquote>.. </blockquote>

The content that displays in the browser is contained in the body section. True or False

TRUE

What tag pair contains the items in an ordered or unordered list?

<li> </li>

Choose the special character that is used to indicate a blank space.

Choose the special character that is used to indicate a blank space.

&nbsp;

What tag pair is used to create the largest heading?

<h1> </h1>

what is function of an email link?

launch the default e-mail application for the visitor’s browser with your e-mail address as the recipient

Choose the preferred tag pair to use when displaying important text in bold font.

<strong></strong>

What tag pair is used to create a new paragraph?

<p> </p>

When do you need to use a fully qualified URL in a hyperlink?

when linking to a page on an external web site

True or False? Web pages have two sections: a head and a body.

TRUE

Which of the following tags does not require a closing tag?

<i>

The title element configures large, bold text at the beginning of the web page document. TRUE OR FALSE?

FALSE

is this correct? &lt;a href="news.htm"&gt;Important News&lt;/a&gt;

YES

What type of HTML list will automatically place a number in front of the items?

ordered list

What type of HTML list will automatically place a bullet point indicator in front of each item?

unordered list

To associate an external style sheet with a web page, code:

a link element in the head section of the web page

Which CSS property configures the font typeface?

font-family

Which CSS property configures the color of text?

color

An External Style Sheet uses the ________ file extension.

css

Select the items below that can be used as a CSS Selector.
A. an HTML element
B. a class name
C. an id name

ALL

CSS was first proposed as a standard by the W3C in ________.

1996

To apply a style to a certain group of elements on a web page, configure a CSS ________.

class

Select the code below that uses CSS to configure a class called "offer" with blue text that uses the Arial or sans-serif font typeface.

.offer { color:blue; font-family:Arial,sans-serif;}

Use the ________ tag to associate a web page with an External Style Sheet.

<link>

Which CSS property configures the size of text?

font-size

Cascading Style Sheet rules are comprised of:

Selectors and Declarations

Which CSS property can be used to configure italic text?

font-style

Use the ________ tag to configure a generic area on a web page that is embedded within a paragraph or other block display element.

<span></span>

Use the ________ tag to code embedded styles on a web page.

<style> .. </style>

When CSS is coded in the body of the web page as an attribute of an HTML tag it is called ________.

Inline

Use the ________ property to configure bold text using CSS.

font-weight

Use the ________ tag to configure a section of a web page that is physically separated from others.

<div></div>

The declaration property used to set the text color on a web page is:

color

Select the code below that uses CSS to configure a id named "footer" that configures small, italic text.

footer { font-size: small; font-style: italic;}

Select the code below that uses CSS to configure a background color of #eaeaea for a web page.

body {background-color:#eaeaea; }

how did internet start

for the military

Berners-Lee created the…..

world wide web (hyperlinks)

WWW world wide web

the graphical user interface to information stored on computers running web servers connected to the Internet—

Entranet

private network that is contained within an organization or business. Its purpose is to share organizational information and resources among coworkers. When an intranet connects to the outside Internet, usually a gateway or firewall protects the intranet from unauthorized access.

extranet

PRIVATE network!

Web Accesability Initiative

people need to access internet group created

accessible

website provides accommodations that help individuals overcome these barriers.

people must be able to access internet with disabilites

…

Section 5 08 of the Federal Rehabilitation Act

requires people to have to accomodate pages with people with disabilities

World Intellectual Property Organization

helps protect property rights on the web

DTD

identifies the version of HTML that you’re using (top of web page document)

Head Section

contains information that describes the web page document

Body Section

(what is actually displayed) contains the actual tags, text, images, and other objects that are displayed by the browser as a web page. <body>

Meta Tags

describe the document <meta…..> a stand a lone tag doesnt need </>

Head Element

conatins head section <head> </head>

Title Element

<title> what will appear in title of bar of web browser

Headings..

h1 BIGGEST FONT h6 smallest font

paragraph tag

<p> </P> (where paragraphs go)

Blockquote Element

is used to display a block of quoted text in a special way—indented from both the left and right margins (lets it indent) like.. asdksdfklfgkh <blockquote> kjlkjlkjlkjkg </blockquote>

Phrase Elements

sometimes referred to as logical style elements , indicate the context and meaning of the text between the container tags. It is up to each browser to interpret that style.

&lt;strong&gt; means

makes text stand out in BOLD

&lt;em&gt; means

usually makes text italized

&lt;i&gt; means

makes text in italics

Unordered Lists

<ui> bulleted format list begins with <li> <li> <ul>kljlkjlkjljkj </ul>

Ordered List

numbered lists <li> <ol>kljlkjsdf </ol>

to make a copyright symboly you do

&copy;

code for empty speak

&nbsp;

what does the element div do?

configures a structural block area, or "division," on a web page, with empty space above and below.

anchor element

to specify a hyperlink , often referred to as a link , to another web page or file that you want to display. Each anchor element begins with an <a> tag </a> form hyperlinks

href

connects these anchor links

absolute link

indicates the absolute location of a resource on the Web. ex. <a href=" http: //webdevfoundations. net " >Web Development &amp; Design Foundations</a>

email link

will automat- ically launch the default mail program configured for the browser ex. of email <a href=" mailto: help@ terrymorris. net">help@terrymorris. net</a>

CSS

flexible, cross-platform, standards-based language developed by the W3C. (styles) biggest disadvantage is all browsers don’t support it

The Selector

can be an HTML element name, a class name, or an id name.

background-color property

configures background color for an element. ex. body { background-color: yellow }

color-property

changes color of the TEXT ex. body { color: blue }

font-family

name of a font, Any valid font or a font family such as serif, sans-serif, fantasy, monospace, or cursive

font-size

size of font normal italic oblique

font-style

style of font, roman italic oblique

font-weight

boldness

Inline CSS tag for Style

<h1 style=" color: #cc0000" >This is displayed as a red heading</h1>

&lt;h1 style=" color: #cc0000; background-color: #cccccc" &gt;

text color is grey, background is yellow

embedded styles

apply to an entire webpage! inline to a specific part ex. <style> </style> tag in the HEAD section named "text/css"

&lt;style&gt;
body { background-color: #e6e6fa; color: #191970; }
h1 { background-color: #19197 0; color: #e6e6fa; }
h2 { background-color: #aeaed4; color: #191970; }
&lt;/style&gt;

styling different parts of the page on CSS page

example of complete selector

h2 { background-color: #AEAED4; color: #19197 0; font-family: Georgia, " Times New Roman" , serif; text-align: center; }

class selector

when you want to change a specific word or part of a paragraph or point , begins with a DOT or PERIOD ex. . feature { color: #FF0000; }

when applying your class selector to normal page..

you put it right before the words you want to do for example. <li class=" feature" >Usability Studies</li>

id selector

another way to apply styles to certain parts in your webpage you place this in your style page #footer { color: #333333; font-size: . 7 5em; font-style: italic; } then in your regular page put id="footer" wherever you want the change to happen <div id=" footer" >This paragraph will be displayed using styles configured in the footer id. </div>

the Span Element

span element defines a section on a web page that is not physically separated from other areas; Use the <span> tag if you need to format an area that is contained within another, such as within a <p> , <blockquote> , <li> , or <div> tag

example of Span

on style page you have . companyname { font-weight: bold; font-family: Georgia, " Times New Roman" , serif; font-size: 1. 25em; } then inside the <p> tags you use the span to make the changes ex. <p><span class=" companyname" >Trillium Media Design</span> will bring

external style sheet

is a text file with a .css file extension that contains CSS style rules. links by using Link tag

link element

associates an external style sheet with a web page <link>

&lt;link rel=" stylesheet" href=" color. css" &gt;

link=connects rel- "stylesheet" href- name of style sheet file (ex. fishcreek)

A horizontal rule element

<hr> visually separates areas of a page and configures a horizontal line across a web page. ex. lkjslkjdslkjdlfkjd ________________________________ (horizontal rule) lijsdfkjsdlfkjsdflkjsdlfkjslkdfj

border-property

the border can change color border-color; border-style (dotted, dashed, solid)

background repeat

image to repeat in page repeat-y , (vertical repeat), repeat-x (horizontal repeat), and no-repeat (no repeat).

padding

Shorthand notation to configure the amount of padding— the blank space between the element and its border ( the space between border and text)

internal

<style type="text/css">.thbord{border: 5px solid black}

h2,h3{color: red}

color to heading 2 and 3

p.normal{color:red}

just that paragraph

id tag

#section14{color:red}

contextual selector

…

only kinds of images you can add

.jpg .gif

h2, h3{font-family : Arial, ‘Times New Roman’,Garamond}

in quotations becuase you cannot have spaces between the Times New Roman

GIF images

are best used for line drawings containing mostly solid tones and simple images such as clip art. images are transparent

JPEG images

are best used for photographs. CANNOT be made transparent saved at 80% has good quality, regular pic

Image Element

<img> show graphics on a page ex. <img src=" logo. gif" height=" 2 00" width=" 500" alt=" My Company Name" >

SRC

file name of the image

image link

to make an image link all you need to do is surround image with anchor tags <a> ex. <a href=" index. html" ><img src=" home. gif" height=" 19" width=" 85" alt=" Home" ></a>

to add figure caption

<style> #figure <style/>

opacity property

transparency 0 complete transparent 1 opacity no transparent

hierarchical organization .

organizing like tables format different sites connected

linear design

in a line ———- info is set up

POUR

P erceivable, O perable, U nderstandable, and R obust,

web page development process IADIM

are systems investigation, systems analysis, systems design, systems implementation, and maintenance.

The Website Development Cycle,

shown in Figure 10.2 , usually consists of the following steps: Conceptualization, Analysis, Design, Production, Testing, Launch, Maintenance, and Evaluation.

domain names

for your company choose wisley be short not fancy

A web hosting provider

offers storage for you web provider

selectors are periods and IDs are #

…

hyper link example

<a href=" http: //webdevfoundations. net " >Web Development &amp; Design Foundations</a>

selector vs. declaration

The selector is the body tag, and the declaration sets the color property to the value of blue.