Brainscape's Knowledge GenomeTM


Top Flashcards (Certified)
All Flashcards

cct260: Web Culture and Design > Exam Review > Flashcards

Exam Review 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
target="name"
* 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
26
Unordered Lists
*
* bullet points
27
Ordered Lists
*
* numbers
28
* the primary content of a page or application * helps users with screen readers get to the main content of the page * in * separate from nav bar * only used once
29
the introductory material that comes at the beginning of a page ex. logo, icon, title, navigation
30
* the type of information that comes at the end of a page * okay after
31
used to divide up a whole page or a single article
32
used for self-contained works that could stand alone or be used in a different context
33
identifies the primary navigation links for a site or lengthy section or article
34
* 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
(#)id
* 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
.class
* 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
an inline container used to mark up a part of a text, or a part of a document
38
Difference Between Class and ID
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
img Element
* ) * can be used for PNG, JPEG, GIF, and SVG
40
PNG, JPEG, GIF, and WebP
* bitmapped: images made of grid coloured pixels * can't code
41
SVG
* vectors: images contain paths that are mathematically defined * made up of codes * good for logos, icons, drawings but not for pictures
42
Pros of SVG
* small size * flexibility/compressible * scalability without changing the image quality * can view file in any browser
43
Cons of SVG
* 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
How Style Sheets Work
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
Internal CSS
* used if one single HTML page has a unique style * inside the