JOUR 352 Midterm
1KB or kilobyte =
1,024 bytes
1TB
1,024 gigabytes
1MB or megabyte
1,024 kilobytes
1GB
1,024 megabytes
Two key HTML tags used to set up layout blocks for styling HTML elements with IDS and classes? Their difference?
1. <span>--put that code around any HTML element--or any of your HTML content--to target it with CSS code 2. <div>--put that code around any html section or element in order to target it in CSS. You can also assign an ID name or class name to each div in order to target a specific DIV in CSS.
When to compress?
1. After you're done sizing & editing 2. Don't compress before you're done editing 3. Compression occurs when you save a file (and you should not save repeatedly)
Domains/WWW addresses- (how do web addresses/urls work and what do they actually do)?
1. Connect to service provider (google, etc.) 2. Computer contacts network of servers called Domain Name System, act like phone booths and tell your computer the IP associated w/ requested domain name (each device has a unique IP like the telephone number for that computer) 3. The IP is a unique number that the dns server returns to your computer that allows your browser to contact the web server that hosts the website you requested, a web server is a computer constantly connected to the web/set up especially to send web pages to users 4. Web server then sends the page you requested back to your web browser
File Compression
1. Degrades image by removing pixels 2. Use enough compression to shrink file, but not too much or will become fuzzy
Web Images
1. Require cropping for tighter focus, eliminate extraneous visuals & space 2. Usually require resizing to make smaller; fewer pixels in size 3. Often need color/brightness correction
Rule of thumb
1. Web images should NEVER be over 1 megabyte; they should be shrunk to KB's (kilobytes) 2. 1MB is too big: it's one million bits of data
Other image formats
1.PSD 2.TIFF 3.RAW *These three formats = too big for web display/mainly good for editing & printing
How to write a border of 1 pixel thickness, solid line and black: border:
1px solid #000000;
1 byte =
8 bits
How to write out the code creating the foundational structure of an HTML document
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> </body> </html>
How to properly write out a link tag:
<a href="http://google.com">Google</a>
What code do you use to create the smallest possible standard heading (headline)?
<h6>Headline Goes Here</h6>
How to include an image on a page with HTML
<imgsrc="http://google.com/logo.png"> or <img src="images/logo.png">
How to link to a CSS stylesheet
<link rel="stylesheet" type="text/css" href="stylesheet.css">
What code should you place in the head section of your HTML life to link an external stylesheet?
<link rel="stylesheet" type="text/css" href="stylesheet.css">
What code is used to create a bulleted list in HTML:
<ul> <li> <li> <li> <li> </ul>
Internet
A network of computer networks. Physical infrastructure of connected computers across the world
What is the difference between a serif and san serif font?
A serif font has a small flourish or decorative touch at the end of the letters; that flourish is called a "serif." Sans serif fonts have no such decorative details or flourishes at the end of the letters.
WWW
A software system that RUNS on the internet...used to format & transmit files
When should you use ID versus CLASS?
An ID should be used for a unique element in HTML; a CLASS should be used for reusable elements, ie, elements that are repeated or appear more than once in the HTML file. An HTML element can have only one ID but can have multiple classes.
Explain the difference between background-color property and color property.
Background color specifies the color of the entire DIV. Color is just the text.
Float example:
Blockquote { Float:right; Width: 300px
8 Elements of web design
CFVSTLST (Color, Form, Value, Space, Texture, Line, Shape, Type)
What are 8 key elements of design?
Color, value, texture, shape, form, space, line, type
Complementary colors
Create contrast & balance--can be vibrant but also jarring
Monochromatic
Different shades of same color
What CSS code should you use to bold something?
Font-weight: bold;
What are the key principles & building blocks of design?
Harmony, unity, simplicity, contrast, proximity, hierarchy
COMMENTS:
How to write an HTML comment <!--this is an html comment→> How to write a CSS comment. /*This is a CSS comment*/
How to set up CLASS in HTML and style it in CSS:
In HML <div class="sectiontitle"></div> (goes in your HTML file) In CSS .sectiontitle (goes in your stylesheet)
How to set up an ID in HTML and style it in CSS
In HTML <div id="header"> </div> (goes in your HTML file) In CSS #header (goes in your stylesheet)
3 Image File Types for Web
JPEG (Best for pics) GIF(Good for line drawings/animation) PNG(Alternative to GIF/higher quality) *All three formats compress or shrink filed & randomly eliminate pixels
Difference between Span and Div tags?
Main difference is whether or not you want to add a line break before/after. A span element is in-line and typically used for smaller section of HTML code inside a line or element (such as inside a paragraph). Because it's an in-line element. SPAN does not add a line break before or after. By contrast, the div (division) element is block-line and and generally used to group larger chunks of code. The DIV element adds a line break before and after whatever text or code is being styled.
What's the difference between margin and padding?
Margin affects space between the outside and the inside border of a DIV. Padding is INTERNAL, Margin is EXTERNAL to your div box.
How to write out margin and padding. You might be asked to assign 20 pixels of margin top and bottom and 10 pixels of margin left and right. There are several "right" answers to this question.
One is: margin: 20px 10px. Another is margin: 20px 10px 20px 10px. Or you could use margin-top, margin-bottom, margin-left, and margin-right. How to center a DIV using margin markup code in CSS: margin: 0 auto; (That puts 0 margin at top and bottom and "auto" margin left and right)
How to target two different classes with the same style in CSS
Separate w/ a comma: .title, .bodycopy
2 Key Issues
Size of the image: Affects the display (pixels) Size of the file: Affects downloading, in bytes
What does "float" do in CSS and how should you apply it to an HTML element?
The float properly lets you place any HTML element to the right or to the left of the element that contains is (like inside a DIV box.) To apply it, you typically include the width property to indicate how wide the floated element should be
Hexadecimal Code
The numerical code for the representation of values for red, green and blue. (Six digit codes that represent amount of red/green/blue in a color, preceded by a pound or hashtag
Simplicity
This is BEST: Too many fonts/colors distract
What are the three key ways you can apply CSS styles to HTML elements?
external stylesheet, where you put the CSS code in the head section of your HTML file; Internal stylesheet, where you put the CSS code in the head section of your HTML file; Inline style, where your CSS code goes directly next to or "in line" with the HTML element being styled.