Save
Busy. Please wait.
Log in with Clever
or

show password
Forgot Password?

Don't have an account?  Sign up 
Sign up using Clever
or

Username is available taken
show password


Make sure to remember your password. If you forget it there is no way for StudyStack to send you a reset link. You would need to create a new account.
Your email address is only used to allow you to reset your password. See our Privacy Policy and Terms of Service.


Already a StudyStack user? Log In

Reset Password
Enter the associated with your account, and we'll email you a link to reset your password.
focusNode
Didn't know it?
click below
 
Knew it?
click below
Don't Know
Remaining cards (0)
Know
0:00
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.

  Normal Size     Small Size show me how

Web Design

HTML and basic CSS

QuestionAnswer
3 components of the world wide web: 1. HTTP 2. HTML 3. Browsers/Server
Ted Nelson coined the term hypertext
Douglas Englebart He created the first experimental hypertext system on one of the huge computers in the 60s. And he invented the computer mouse.
Graphical User Interface (GUI) Web browsers (way to present program output to users using graphical elements instead of text
Tim Berners-Lee and Robert Cailliau developed the code for a hypertext server and created the World Wide Web (1991)
Mark Andreessen created Mosaic (1993)
Mosaic first GUI program widely available for PCs that can read HTML and use hyperlinks to navigate from page to page
Uniform Resource Locator the unique address of any web document (absolute path)
World Wide Web Consortium (WC3) international standards organization for the web
Standard Generalized Markup Language (SGML) defines rules for HTML
Extensible Markup Language (XML) Combines most useful parts of HTML and SGML
elements HTML tags + instructions
Attributes provide additional info about an element
How to make an anchor tag: <a name="anchor">Anchors are cool</a> <a href="#anchor">Learn about anchors</a>
Bidirectional override: <br>
<!DOCTYPE> declaration: instructions to browser about what verison of the markup language it is
Advantages of CSS: 1. Separates the presentation layer from the document structure 2. Provides greater control over layouts of webpages 3. Increases efficiency when we make changes
CSS structure selector {property1: value1; … propertyN: valueN;}
Comments in HTML: <!--Comment-->
Comments in CSS: /*Comment*/
How to do inline CSS: <p style="color:red; text-size:14x;">
How to do internal CSS: <style type=“text/css“> CSS here </style>
How to do external style sheets: <link href="mystyle.css" rel="stylesheet" type="text/css">
Some CSS font properties: body {font-family: Verdana, Arial, sans-serif; font-size: 14px; color: silver; font-weight: bold; text-decoration: underline;}
Font families: Serif, sans-serif, monospace, cursive, fantasy
Some CSS background properties: body {background-color: #CCCCCC; background-image: url('paper.gif'); background-repeat: repeat-x; background-position: right top; margin-right: 200px;}
Background shorthand: body {background: #CCCCCC url('paper.gif') repeat-x right top;} ONLY IF IN THIS ORDER: background-color, background-image, background-repeat, background-attachment, background-position (ok if some are missing)
wireframe visual guide that represents the skeletal framework of a website (what a screen does, not what it looks like)
mockup visual design elements (image files)
prototype semi functional website layout
information architecture It describes the ways in which the different pages of your site relate to one another and ensures information is organized in a consistent and predictable way on each page
How to make a class: p.greentea {… or just .greentea <p class=“greentea“>
How to make an id: #footer {… <p id=“footer“>
Ways to specify colour: 1.body {background-color: rgb (80% 40% 0%);} 2.body {background-color: rgb (204, 102, 0);} (out of 255) 3.body {background-color: #cc6600;}
How to read hex codes: #cc6600 take the first color (red): cc take the second digit: c find decimal value: 12 take second digit: c find decimal value and multiply by 16: 12x16=192 add together: 204
CSS box model: content, padding, border, element
How to do border styles: p {border-top-style: dotted;} p {border-style: dotted solid double dashed;}
Pseudo-classes format: Selector:pseudo-class {property:value;} or selector.class:pseudo-class {property:value;}
Types of CSS boxes: 1.Block (generated by p, div, table) 2.Inline (generated by b, i, span, text/images)
CSS flow the strategy used by browsers to layout successive HTML elements as they are encountered while an HTML document is being displayed we can define position:absolute or position:relative, otherwise follows normal flow
Normal flow block boxes are stacked one after the other (vertical margins are compressed) inline boxes are stacked next to each other (horizontal margins are not compressed, moves to next line if browser window is smaller)
CSS float: floating elements are taken out of the flow and moved as far left/right as possible #amazing {width: 200px; float:right;}
{clear: right;} means that no floating content is allowed on the right of the element
Created by: leahl00
Popular Computers sets

 

 



Voices

Use these flashcards to help memorize information. Look at the large card and try to recall what is on the other side. Then click the card to flip it. If you knew the answer, click the green Know box. Otherwise, click the red Don't know box.

When you've placed seven or more cards in the Don't know box, click "retry" to try those cards again.

If you've accidentally put the card in the wrong box, just click on the card to take it out of the box.

You can also use your keyboard to move the cards as follows:

If you are logged in to your account, this website will remember which cards you know and don't know so that they are in the same box the next time you log in.

When you need a break, try one of the other activities listed below the flashcards like Matching, Snowman, or Hungry Bug. Although it may feel like you're playing a game, your brain is still making more connections with the information to help you out.

To see how well you know the information, try the Quiz or Test activity.

Pass complete!
"Know" box contains:
Time elapsed:
Retries:
restart all cards