Help
Options
Didn't know it?
click below
click below
Knew it?
click below
click below
Don't Know
Remaining cards (0)
Know
retry
shuffle
restart
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
Normal Size Small Size show me how
Web Design
HTML and basic CSS
| Question | Answer |
|---|---|
| 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