用語集「パート1」 Flashcards

(87 cards)

1
Q

What are the most essential website elements for a portfolio website?

A
Image galleries 
About page
Contact page
Header (top level navigation)
Footer
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What does HTML stand for?

A

It’s an initialism for hypertext markup language

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

What is the Internet?

A

It’s a global system of hardware upon which the Web is built; is the hardware network that allows us to transmit data

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

What’s the Web?

A

a collection of linked hypertext documents

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

Why is HTML used?

A

HTML is used to break up websites into sections, pages, etc.

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

Why is the term “document” used when referring to HTML?

A

HTML was originally designed to share research documents (the term document persists today)

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

What is one of the easiest shortcuts to access an element?

A

One of the ways to access an element more quickly is via pressing ctrl+

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

What does the “head” element contain?

A

The “The “head” element contains meta information about the document

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

Please define an “attribute”.

A

Attributes are extra information within an element that add data about how the page is built (via the element)

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

What can you type to highlight text?

A

To highlight text, please type the following:

CTRL + Shift + Arrow Key (Windows)

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

Can you type the boilerplate code for HTML?

A

Example:
Index.html

          Nick Petit | Designer  

          <h1> Nick Pettit </h1>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are two functions of the “title” element?

A

The title element will allow us to change the title of our page and search results in browser tabs.

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

Which element do links stem from?

A

Links stem from the anchor <a> element </a>

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

What is the attribute for the anchor element? Can you describe what the initialism stands for?

A

Href (i.e., hyperlink reference) is the attribute

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

Please fill in the blank: Navigation through a website is indicated through the ___ element.

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

Please fill in the blank: Unordered lists are shown through the _____ element

A

<ul></ul>

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

What does the <img></img> self-closing element stand for?

A

image

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

Please define the following: relative path

A

describes the location of a file using a partial file path that’s based on the location of the original file relative to the file that’s being referenced

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

Please define the following: absolute path

A

An absolute path describes the location of a file using the full file path

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

What are the two required attributes for <img></img>?

A

the source {src} attribute points to the image file and the alternate {alt} attribute describes the image using text

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

How do we indent a line of code?

A

ctrl + ]

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

Please fill in the blanks:

The footer of a website typically contains basic information about the site, such as a____ l_____ and a c_____; s_______ l______ & i____ are also included

A

associated links
copyright
social links
icons

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

What is a general rule of thumb regarding the use of relative links (e.g., “img/numbers-02.jpg”)?

A

use relative links (e.g., “img/numbers-02.jpg”) in your code whenever possible

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

Can you describe the primary function of a link element?

A
  • The link element connects other files to an HTML document, such as CSS or JavaScript files
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
What does CSS mean?
Cascading Style Sheets
26
Can you define a rule, in addition to giving an example?
A footer is an example of a rule (i.e., the entirety of a CSS selector)
27
Please describe a selector in CSS.
CSS syntax that defines elements on a page to which declarations should be applied
28
What is a declaration {CSS}?
a pair of CSS properties and values that define how an element should be styled
29
Can you provide more information about a property.
CSS syntax that defines which part of an element should be styled, such as its colour, size, position, and so on
30
This definition applies to which aspect of CSS: "CSS syntax that sets the variable units for properties"
Value
31
What is the element?
the style element can contain CSS code that will be applied to the HTML
32
Please describe a type selector.
also known as an "element selector"; isolates all the elements of a given type
33
What is a descendant selector?
a CSS selector that selects all the elements of a given type that are nested inside another type of element
34
Can you tell me the meaning of the "colour" selector?
sets the text colour of an element; accepts any CSS colour unit
35
Which selector sets the background colour of an element?
Background-color
36
Please define: ID selector
a CSS selector that selects a single element based on its ID attribute
37
Please define: text-decoration
primarily used to add/ remove underlines from text
38
Fill in the blank here: Please use the keys ____ (or "CMND + ]" on a Mac) for indenting assistance
CTRL + ] (for Windows)
39
Please define: max-width
sets the maximum width of an element; accepts any CSS length unit
40
Please define: margin
sets the space around the exterior four sides of an element; accepts any CSS length unit
41
Please define: padding
sets the space on the interior four sides of an element; accepts any CSS length unit
42
Please fill in the blanks: In the padding and margin selectors, the first value applies to _____ and ______ directions and the second value applies to ______ and _______ directions
up & down | left & right
43
Please define: mobile-first
the technique of creating mobile websites first and then progressively enhancing them to create the desktop version
44
What is "text-align"?
it sets the justification of text, similar to a word processor; for instance, text can be set to be aligned to the left, right, or centre
45
What are hexadecimal colours?
a base-16 number system that uses the letters A through F to represent the numerals 10 through 15
46
Please define a pseudo-class...
dynamic selectors that change based on user interaction with browser, such as hovering over a link, for example
47
Please fill in the blanks: In hexadecimal system, the first two characters are for ____, the second two are for _____, and the third two are for _____
Red Green Blue
48
What is the hexadecimal code for black?
#000000
49
Can you identify the following code: #fffff?
White
50
What is one of the hexadecimal codes for grey?
#888888
51
Can you identify the following code: #6ab47b?
Green
52
Please compare and contrast divs and classes.
A class is similar to a div, but many can exist on a page. However, a div must be unique on each page
53
What is a class selector?
A class selector selects any HTML element that contains a matching class attribute
54
Please fill in the blank: "Class: selected" shows which web page the visitor is ______
on
55
Can you identify the following code: #32673f?
The colour is dark green.
56
What is the "nav: a" selector?
The "nav a: hover" selector enables user to notice a hovering effect
57
What is the hexadecimal code for light grey?
#999
58
In CSS, what does "color" apply to?
Text colours
59
What is a comment?
a reminder or visual cue in computer code that's meant to be readable by programmers; they aren't typically interpreted by the browser and shouldn't impact a website's function in any way
60
Can comments also be added to the end of a line of code?
Yes
61
Please define "font-family".
Font-family defines which fonts should be applied to text
62
What is "font-size"?
Font-size: sets the size of text in either relative or absolute units
63
Please define: font-weight
CSS property that sets the visual weight of text, which is more commonly known as "bold" as in the case of word processors
64
Please define: line-height
CSS property that sets the amount of space between each line of text; accepts any CSS length unit
65
Please fill in the blanks: Negative values in ______ are used in designing
margins
66
What does #ccc mean?
Light grey
67
When is styling the portfolio used?
Styling the portfolio is primarily used when splitting website into multiple columns
68
Please describe the "list-style" property.
It is a CSS property that sets the style of numbers or bullet points for ordered and unordered lists; the marks can also be removed entirely with the value "none
69
What is the float property?
a CSS property that allows an element to be taken out of the normal flow and placed to the left or right of its container; text and other inline elements will wrap around it
70
Please fill in the blanks: "For styling the portfolio, we use the _______ and _____ combination of "max-width: 100%"
property | value
71
Please describe the "clear" property.
A CSS property that specifies whether an element can be adjacent to floated elements or if it should be moved down and "clear" any floated elements
72
What does a block-level element do?
It occupies the weight of their containers and generally include a line break before and after the element; somewhat like divs, sections, etc.
73
What is an inline element?
It occupies the width of their contents and does not begin a new line when formatted as text; primarily text
74
Please describe the "display" property.
The "display" property is a CSS property that sets whether an element should be rendered as a block element, inline element, or inline-block element
75
What is the "index.html" filename?
It's a special HTML filename that almost every web server recognises as the "home page" of a website
76
Which keyboard combination is used for selecting all items on a page?
CTRL+A
77
What is the "border-radius" property?
a CSS property that defines the roundness of a border corner; accepts any CSS length unit
78
How do we select all lines of code in a document?
CTRL+A
79
How do we remove a line of code in a document?
CTRL+X (cut)
80
Please describe the "background-image" CSS property.
accepts an image path that applies the file to the background of an element
81
What is the "background-size" property?
sets the size of background images
82
What does the "background-repeat" property do?
It sets whether or not a background image should be repeated; by default, backgrounds will repeat
83
Please fill in the blank: | To toggle a comment please type ""
CTRL+ /
84
Please describe responsive web design.
It's a technique for creating websites that work on multiple screen resolutions via the combination of three parts: fluid images, fluid grids, and media queries
85
What's a fluid layout?
It limns the properties by which a web page changes its size to fit the corresponding web browser due to media queries
86
What are breakpoints?
the specific screen widths where a responsive layout "breaks" and needs to change in order to accommodate the screen
87
Please define: @media
a part of CSS syntax; media queries use the @media CSS rule to define conditions of the browser medium; simply put, it allows for CSS styling to only be included if certain conditions are met, such as a specific browser width