CSCI Test 2
Color Wheel
-Primary colors -Secondary Colors -Tertiary colors
Write the CSS code for a column with the following specifications - the id is called column2 - the column is designed to float to the left of the browser window - the width is 400 pixels - It has a solid purple border at the right that is 3 pixels thick
#column 2 { float: left; width: 400px; border-right-color: purple; border-right-width: 3px; }
Provide a definition AND give code example of ARIA.
(Accessible Rich Internet Applications) Provides methods intended to increase the accessibility of webpages and web applications. -Role attribute code role="main" -code this on the main content of a web page document
Which attribute below can be applied to an anchor tag to open a link in a new browser window? A target B window C rel D media
A target
Developing and implementing a Color Scheme
-90% of a consumer's assessment is based on color alone Design in grayscale first -gets structure of layout of elements -figure out hierarchy of your site Determine the emotions you want your site to convey Limit colors to balance -3 primary colors Avoid Pure Black, "Black" things that we see are reflecting some amount of light -not truly black -dark grey Pure black in design stands out and overpowers everything else 60% of color on your page should be your dominant color 30% should be your secondary color 10% should be your accent color -Use multiple visual cues to communicate bc of the commonness of color-blindness
Web Development Conceptualization
-Determine the Intended audience -Determine the goals or mission of the website Web Development: Analysis: Determine info topics, functionality requirements, environmental reqs, content reqs If a redesign compare old approach w new approach -Review competitor sites -Estimate costs
Web Development Design
-Determine the site organization -Prototype the design -Determine a page layout design -Document each page
Skills and Functions needed for a successful large-scale project
-Project Manager -Information Architect? Any different from PM -User Experience Designer -Marketing Representative -Copy Writer and Editor -Content Manager -Graphic Designer -Database Admin -Network Admin -Web Developer/Designer
Write the CSS code to do the following to the anchors of an class called submenu: - remove the underlines - change the font color to #006400
.submenu a { text-decoration: none; color: #006400; }
Briefly describe two of the CSS debugging techniques mentioned in Chapter 6
1. Invalid HTML code can cause issues with CSS. Use the W3C Markup Validation Service at validator.w3.org to verify the correct HTML syntax. 2. Sometimes a CSS style does not apply because of syntax error. Use the W3C CSS Validation service at jigsaw.W3.org/css-validator to verify your CSS syntax. Carefully check your code. Many times, the error is in the line above the style that is not correctly applied
Explain the difference between a CSS class and an id.
1. Use a "class" when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links. 2. Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.
Relative Linking
<a href="../index.html">Home</a> <a href="../events/weekend.html">Weekend</a>
Which of the following is an example of a descendant selector used to configure a list within an id called menu? A #menu ul B ul .menu C menu #li D #menu, ul
A #menu ul
Explain why many different roles are needed on a large-scale web project
A large scale web project is much more than a brochure-ware, it is often a complex information application that the company depends on. Such an application needs the special talents of a wide variety of individuals-including experts in graphics, organization, writing, marketing, coding, database administration, and so on-one or two people simply cannot fulfill these roles and create a quality website.
Describe the type of web host that would meet the needs of a small company for its initial web presence
A virtual web host that offers reliability and scalability would meet the needs of a small company for its initial web presence. the web host chosen should offer higher-end packages with scripting, database, and e-commerce capabilities to allow for future growth
When configuring an image map, describe the relationship between the image, map, and area tags.
All tags work together to create a functioning image map. <img> tag configures the image used for the map and contains a usemap attribute whose value corresponds to the id value on the <map> tag associated with the image. The <map> is a container tag and surrounds one or more <area> tags. There is one self contained <area>tag for each clickable hotspot on the image map.
List three different techniques used to test a website. Describe each technique in one or two sentences.
Automated testing performed by link checker programs, code testing and validation performed by code validation programs, and usability testing achieved by watching typical web visitors use a website to perform tasks.
Which pseudo elemnt can be used to generate content that precedes an element? A After B before C content D first-line
B before
Select the three most common methods of organizing websites. A horizontal, vertical, and diagonal B hierarchical, linear, and random C accessible, readable, maintainable D none of the above
B hierarchical, linear, and random
Set list-style-type to the value ______ to hide the display of the list markers on an ordered list. A no-display B none C hide D invisible
B none
A(n) _______ is a smaller version of a larger image, and is often linked to that larger image? A icon B thumbnail C favicon D wireframe
B thumbnail
Describe the CSS that configures a file named bg.gif to repeat vertically down the background of a web page. Code the CSS.
Body{background-image: url (bg.gif); Background-repeat: repeat-y;}
Describe how to choose whether to configure an HTML element selector, create a class or create an id when working with CSS.
Configure an HTML element selector if the style is expected to be applied every time that tag is used. Configure an ID if the style is for a specific element that is expected to occur only once on a page. Configure a class if the style is expected to be applied to a variety of different HTML elements.
CRAP design principles
Contrast: Add visual excitement, and draw attention Repetition: Repeat visual elements throughout design Alignment: Align elements to create visual entity Proximity: Create enough space b/w images and text
Describe the four principles of visual design.
Contrast: Add visual excitement, and draw attention Repetition: Repeat visual elements throughout design Alignment: Align elements to create visual entity Proximity: Create enough space b/w images and text
Both files on same level
Example: <img src="banner.jpg">
Explain why price is not the most important consideration when choosing a web host.
If your website is down and your web host is not responding to technical support requests, it doesn't matter that you're saving $5 per month. when comparing web host plans, check prices to know the currently prevailing fees. if the charges of a particular web host seem abnormally low, the company is probably cutting corners. Do not base your choice on price alone.
Why should you organize the files in a website using folders and subfolders?
Increase productivity, also helpful when developing a large website
Describe the four principles of accessibility
Perceivable: -Content must be perceivable Operable: -Interface components in the content must be operable Understandable: -Content and controls must be understandable Robust -Content should be Robust enough to work with current and future user agents, including assistive technologies
Web content Accessibility Guidelines (Design for Accessibility): Based on Four Principles (POUR)
Perceivable: -Content must be perceivable Operable: -Interface components in the content must be operable Understandable: -Content and controls must be understandable Robust -Content should be Robust enough to work with current and future user agents, including assistive technologies
State an advantage of using CSS sprites in a website.
Reduced bandwidth, reduced number of http requests by the browser, and quick display of individual images in the sprite.
Is it reasonable to try to code a web page that looks exactly the same on every browser and every platform? Explain your answer.
Similar but not exactly the same. Every web designers will have some unique code embedded in their website to make it a bit different from the others.
CSS positions
Static: nothing special, flows organically w page Fixed: element will stay fixed on the page
Explain how the browser will render the web page if you use CSS to configure both a background image and a background color.
The browser will display background color immediately. Then, the browser will render the background image and repeat the image as specified. The background color will appear in areas not covered by the background image.
Which two CSS properties can be used to clear a float
The clear property and the overflow property can be used to "clear" a float.
List the components of the box model from innermost to outermost
The components of the box model, from innermost to outermost, are the content, padding, border and margin.
Describe a reason to use HTML5 structural elements instead of div elements for some page areas
The div element is a multipurpose generic element that configures a section or division of a web gape. HTML5 intros new elements for configuring page areas intended to be more specific in their semantic purpose. As time goes on and browser support increases, HTML5 elements are expected to be the norm.
Describe the purpose of the float property
The purpose of the float property is to shift the display of an element to the right or left side of the container element.
Which attribute configures a hyperlink to open the file in a new browser window or tab?
The target attribute configures a hyperlink to open the file in a new browser window or tab.
How are thumbnail images configured?
Thumbnail images are configured as an image hyperlink that displays a larger image when clicked.
What is the difference between a dedicated web server and a co-located web server?
a dedicated web server is owned and supported by the web host company. the client may choose to administer it or may pay the web host company to perform this task. A co-located server is own by a client company and housed at the web host provider. This configuration offers both the advantage of a reliable internet connection at the web host and full control of the administration and support of the web server.
Image Map
an image that allows user to click on various parts to yield certain results by 'mapping' the image with desired cords Popular usages: Diagrams Maps <div id= "Image Map"> <area sjape= "rect" coords= "" href= "" alt= ""> <area .. href= "" target= "_" alt..> /*opens link in new tab*/ -you dont have to use css all of its functionality comes in html (you can set the image to be fixed though)
What is an image map?
an image that allows user to click on various parts to yield certain results by 'mapping' the image with desired cords Popular usages: Diagrams Maps <div id= "Image Map"> <area sjape= "rect" coords= "" href= "" alt= ""> <area .. href= "" target= "_" alt..> /*opens link in new tab*/ -you dont have to use css all of its functionality comes in html (you can set the image to be fixed though)
Describe the role of a project manager
directs the website development process-creating the project plan and schedule. he or she must keep the big picture in mind while communicating with the staff and coordinating team activities. accountable for meeting project milestones and producing results.
Target attribute -target="_blank">
target attribute on the anchor element opens a link in a new browser window or new browser tab
Color Theory
the study of color and its use in design
What is the function of the CSS clear property?
used to terminate, or clear a float. You can set the value of the clear property to left, right or both, depending on the type of float you need to clear.
