Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

cct260: Web Culture and Design > Exam Review > Flashcards

Exam Review Flashcards

You may prefer our related Brainscape-certified flashcards:
Sociology 101 flashcards
1
Q

Minimal Document Structure

A

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8"(>)
<title>Title here</title>
</head>
<body>
<!-- Page content goes here.-->
</body>
</html>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

<html>
</html>

A
  • the root element that contains all the elements in the document
  • opening and closing
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

<head>
</head>

A

contains elements that pertain to the document and are not rendered as content

ex. metadata, style sheets, and scripts

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

<meta></meta>

A
  • expanded character set: <meta></meta>
  • provide document metadata
  • provide keywords, author information, publishing status, for search engines
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

<title>
</title>

A
  • required
  • display in the browser tab and bookmark lists, and are used by search engines
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

<body>
</body>

A
  • contains the content of the document
  • everything you want to show up in the browser window
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Opening Tag

A
  • the element name in angle brackets
  • <element>
    ex. <h1>
    </h1></element>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Content

A
  • may be text and/or other HTML elements
  • between opening and closing tag

ex. <h1>Black Goose Bistro</h>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Closing Tag

A

starts with a /

ex. </h1>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

<br></br>

A

line break

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Attributes

A
  • are instructions that clarify or modify an element in the opening tag after the element name
  • can be more than one
  • “…” or ‘…’
  • <element>Content</element>

ex. <a href(=)”http://oreilly.com”>O’Reilly site</a(>)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Value

A

a number, word, string of text, URL, or measurement

ex. <img scr(=)”bird.jpg”>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Nesting

A

putting elements inside other elements

ex.

<div>
<h1>Headline</h1>
<p>This is <em>emphasized</em> text.</p>
</div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

HTML Comments

A
  • for yourself, others, or to hide codes
  • visible in source but not browser

ex. <!-- start global navigation -->

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

<h1>
</h1>

A
  • heading
  • max 6 levels/sizes
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

<p>
</p>

A

paragraph

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Cascading Style Sheets (CSS)

A
  • controls presentation
  • includes all styles
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

href

A
  • provides the location (URL) of HTML documents, images, movies, PDFs
  • <a href(=)”URL”>Link text or image</a>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

External Links

A

go to pages that are not on your server

ex. <li><a
href(=)”http://www.foodnetwork.com”>The Food Network</a></li>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Linking to a Higher Directory

A
  • ../ tells the server to back up one level to look for the document index.html
  • ../../ for two levels

ex. href=”../index.html”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Site Root Relative Paths

A

/ means the pathname starts at the root directory so you don’t need to write the name of the directory

ex. href=”/recipes/salmon.html”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Image src Pathnames

A

used to point to image files with the src attribute

ex. <img src=”/images/icons/next.svg” alt=”next”(>)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

target Attribute

A

tells the browser the name of the window in which you want the linked document to open

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

target=”_blank”

A

opens a new browser window

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

target=”name”

A
  • opens a new window with that name and then opens all subsequent targeted links with that name in the same window
  • open in an embedded frame (iframe) with that name
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Unordered Lists

A
  • <ul> <li> </li> </ul>
  • bullet points
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Ordered Lists

A
  • <ol> <li> </li> </ol>
  • numbers
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

<main>
</main>

A
  • the primary content of a page or application
  • helps users with screen readers get to the main content of the page
  • in <body>
  • separate from nav bar
  • only used once
29
Q

<header>
</header>

A

the introductory material that comes at the beginning of a page

ex. logo, icon, title, navigation

30
Q

<footer>
</footer>

A
  • the type of information that comes at the end of a page
  • okay after <body>
31
Q

<section>
</section>

A

used to divide up a whole page or a single article

32
Q

<article>
</article>

A

used for self-contained works that could stand alone or be used in a different context

33
Q

<nav>
</nav>

A

identifies the primary navigation links for a site or lengthy section or article

34
Q

<div>
</div>

A
  • defines a division or a section in an HTML document
  • used as a container for HTML elements which is then styled with CSS
  • styled by using the class or id attribute
35
Q

(#)id

A
  • assigns a unique identifier to the element
  • # can only be used once
  • used to point to a specific style declaration in a style sheet
36
Q

.class

A
  • used to specify a class for an HTML element
  • used to point to a class name in a style sheet
  • can be used many times
37
Q

<span></span>

A

an inline container used to mark up a part of a text, or a part of a document

38
Q

Difference Between Class and ID

A

a class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page

39
Q

img Element

A
  • <img src=”” alt=””(>)
  • can be used for PNG, JPEG, GIF, and SVG
40
Q

PNG, JPEG, GIF, and WebP

A
  • bitmapped: images made of grid coloured pixels
  • can’t code
41
Q

SVG

A
  • vectors: images contain paths that are mathematically defined
  • made up of codes
  • good for logos, icons, drawings but not for pictures
42
Q

Pros of SVG

A
  • small size
  • flexibility/compressible
  • scalability without changing the image quality
  • can view file in any browser
43
Q

Cons of SVG

A
  • not good for detailed pictures
  • might not work on older browsers
  • code can get extremely long and unmanageable
  • harder to maintain images embedded in the source
44
Q

How Style Sheets Work

A
  1. Start with a marked up document (like HTML, but could be another XML markup language)
  2. Write styles for how you want elements to look using CSS syntax
  3. Attach the styles to the document (there are a number of ways)
  4. The browser uses your instructions when rendering the elements
45
Q

Internal CSS

A
  • used if one single HTML page has a unique style
  • inside the <style> element, inside the head section</style>
46
Q

External CSS

A
  • written in any text editor, and must be saved with a .css extension
  • must include a reference to the external style sheet file inside the <link></link> element, inside the head section

ex. <link rel=”stylesheet” href=”/path/example.css”(>)

47
Q

Inline CSS

A
  • used if one single HTML page has a unique style
  • inside the <style> element, inside the head section</style>

ex. <h1 style="color:blue;text-align:center;">This is a heading</h1>

47
Q

Declarations

A
  • made up of a property/value pair contained in curly brackets
  • selector { property: value; }

ex.

h2 { color: red;
font-size: 2em;
margin-left: 30px;
opacity: .5;
}

48
Q

Box Model

A
  • foundation of CSS page layout
  • margins, borders, padding, content
49
Q

Margins/paddings

A
  • top, right, bottom, left
  • auto centres pic
50
Q

<iframe>
</iframe>

A

for YouTube videos or Google maps

51
Q

Font Sizes

A

1em 16px is default

ex. 2em 32px

52
Q

<style>

</style>


















A













specifies an inline CSS style for an element that’s after <head>















53










Q













Reset CSS


















A













makes website look the same on all browsers and before <style></style>















54










Q













<label></label>


















A













defines a label for inputs: checkbox, passwords, search















55










Q













<nav>
</nav>


















A













a set of navigation links















56










Q













Web/Google Fonts


















A















    

  • add a special style sheet link in the <head> section and then refer to the font in the CSS
    • 

  • need wifi to work
    • 



ex.


<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Sofia”(>)


<style>


body {
  font-family: "Sofia", sans-serif;
(})
</style>















57










Q













Google Icons


















A













    

  • inside the <head>
    • 

  • uses <i> and <span></span></i>
    • 

  • default 24px
    • 
















58










Q













Responsive Web Design (RWD)


















A













    

  • makes web page look good on all devices
    • 

  • uses only HTML and CSS
    • 
















59










Q













Viewport


















A















    

  • user’s visible area of a web page on mobile or computer
    • 

  • in <meta></meta>
    • 

  • width=720/1280
    • 



ex. <meta name=”viewport” content=”width=device-width, initial-scale=1.0”(>)

















60










Q













Float


















A















like a ballon and specifies whether an element should float to the left, right, or not at all


ex.


.column {
  float: left;
  padding: 15px;
}

















61










Q













<form>
</form>


















A















    

  • used to collect user input
    • 

  • the user input is most often sent to a server for processing
    • 



ex. text fields, checkboxes, radio buttons, submit buttons

















62










Q













Layout Elements


















A













<header> 
<nav>
<section>
<article>
<aside>
<footer>
</footer></aside></article></section></nav></header>















63










Q













Absolute URLs


















A















a full web address in the href attribute


ex. <p><a href=”https://www.w3.org/”(>)W3C</a></p(>)

















64










Q













Relative URLs


















A















    

  • a link to a page within the same website
    • 

  • without the “https://www” part
    • 



ex. <p><a href=”html_images.asp”(>)HTML Images</a></p)>)

















65










Q













Parent Child Element


















A













if not specified then parent style will be applied to code















66










Q













Denotative


















A















videos and images that are driven


ex. YouTube video about cooking, ad for Benz or ketchup

















67










Q













Connotative


















A













background, aura, mood






























cct260: Web Culture and Design (5 decks)


























Brainscape helps you reach your goals faster, through stronger study habits.


© 2024 Bold Learning Solutions. Terms and Conditions