用語集「パート１」 Flashcards
What are the most essential website elements for a portfolio website?
Image galleries About page Contact page Header (top level navigation) Footer
What does HTML stand for?
It’s an initialism for hypertext markup language
What is the Internet?
It’s a global system of hardware upon which the Web is built; is the hardware network that allows us to transmit data
What’s the Web?
a collection of linked hypertext documents
Why is HTML used?
HTML is used to break up websites into sections, pages, etc.
Why is the term “document” used when referring to HTML?
HTML was originally designed to share research documents (the term document persists today)
What is one of the easiest shortcuts to access an element?
One of the ways to access an element more quickly is via pressing ctrl+
What does the “head” element contain?
The “The “head” element contains meta information about the document
Please define an “attribute”.
Attributes are extra information within an element that add data about how the page is built (via the element)
What can you type to highlight text?
To highlight text, please type the following:
CTRL + Shift + Arrow Key (Windows)
Can you type the boilerplate code for HTML?
Example:
Index.html
Nick Petit | Designer
<h1> Nick Pettit </h1>
What are two functions of the “title” element?
The title element will allow us to change the title of our page and search results in browser tabs.
Which element do links stem from?
Links stem from the anchor <a> element </a>
What is the attribute for the anchor element? Can you describe what the initialism stands for?
Href (i.e., hyperlink reference) is the attribute
Please fill in the blank: Navigation through a website is indicated through the ___ element.
Please fill in the blank: Unordered lists are shown through the _____ element
<ul></ul>
What does the <img></img> self-closing element stand for?
image
Please define the following: relative path
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
Please define the following: absolute path
An absolute path describes the location of a file using the full file path
What are the two required attributes for <img></img>?
the source {src} attribute points to the image file and the alternate {alt} attribute describes the image using text
How do we indent a line of code?
ctrl + ]
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
associated links
copyright
social links
icons
What is a general rule of thumb regarding the use of relative links (e.g., “img/numbers-02.jpg”)?
use relative links (e.g., “img/numbers-02.jpg”) in your code whenever possible
Can you describe the primary function of a link element?
- The link element connects other files to an HTML document, such as CSS or JavaScript files
What does CSS mean?
Cascading Style Sheets
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)
Please describe a selector in CSS.
CSS syntax that defines elements on a page to which declarations should be applied
What is a declaration {CSS}?
a pair of CSS properties and values that define how an element should be styled
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
This definition applies to which aspect of CSS: “CSS syntax that sets the variable units for properties”
Value
What is the element?
the style element can contain CSS code that will be applied to the HTML
Please describe a type selector.
also known as an “element selector”; isolates all the elements of a given type
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
Can you tell me the meaning of the “colour” selector?
sets the text colour of an element; accepts any CSS colour unit
Which selector sets the background colour of an element?
Background-color
Please define: ID selector
a CSS selector that selects a single element based on its ID attribute
Please define: text-decoration
primarily used to add/ remove underlines from text
Fill in the blank here: Please use the keys ____ (or “CMND + ]” on a Mac) for indenting assistance
CTRL + ] (for Windows)
Please define: max-width
sets the maximum width of an element; accepts any CSS length unit
Please define: margin
sets the space around the exterior four sides of an element; accepts any CSS length unit
Please define: padding
sets the space on the interior four sides of an element; accepts any CSS length unit
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
Please define: mobile-first
the technique of creating mobile websites first and then progressively enhancing them to create the desktop version
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
What are hexadecimal colours?
a base-16 number system that uses the letters A through F to represent the numerals 10 through 15
Please define a pseudo-class…
dynamic selectors that change based on user interaction with browser, such as hovering over a link, for example
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
What is the hexadecimal code for black?
000000
Can you identify the following code: #fffff?
White
What is one of the hexadecimal codes for grey?
888888
Can you identify the following code: #6ab47b?
Green
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
What is a class selector?
A class selector selects any HTML element that contains a matching class attribute
Please fill in the blank: “Class: selected” shows which web page the visitor is ______
on
Can you identify the following code: #32673f?
The colour is dark green.
What is the “nav: a” selector?
The “nav a: hover” selector enables user to notice a hovering effect
What is the hexadecimal code for light grey?
999
In CSS, what does “color” apply to?
Text colours
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
Can comments also be added to the end of a line of code?
Yes
Please define “font-family”.
Font-family defines which fonts should be applied to text
What is “font-size”?
Font-size: sets the size of text in either relative or absolute units
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
Please define: line-height
CSS property that sets the amount of space between each line of text; accepts any CSS length unit
Please fill in the blanks: Negative values in ______ are used in designing
margins
What does #ccc mean?
Light grey
When is styling the portfolio used?
Styling the portfolio is primarily used when splitting website into multiple columns
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
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
Please fill in the blanks: “For styling the portfolio, we use the _______ and _____ combination of “max-width: 100%”
property
value
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
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.
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
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
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
Which keyboard combination is used for selecting all items on a page?
CTRL+A
What is the “border-radius” property?
a CSS property that defines the roundness of a border corner; accepts any CSS length unit
How do we select all lines of code in a document?
CTRL+A
How do we remove a line of code in a document?
CTRL+X (cut)
Please describe the “background-image” CSS property.
accepts an image path that applies the file to the background of an element
What is the “background-size” property?
sets the size of background images
What does the “background-repeat” property do?
It sets whether or not a background image should be repeated; by default, backgrounds will repeat
Please fill in the blank:
To toggle a comment please type “”
CTRL+ /
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
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
What are breakpoints?
the specific screen widths where a responsive layout “breaks” and needs to change in order to accommodate the screen
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
