HTML & CSS Flashcards
what is a “void element”?
an html element that doesn’t have a closing tag.
img elements have an opening tag without a closing tag. An element without a closing tag is known as a void element.
input elements are also void elements and do not need closing tags.
what attributes does an <img></img> tag have?
src - contains the url/path where the pic can be found
alt - text used for screen readers to improve accessibility and used incase the image fails to load
what is this element called?
<a></a>
and anchor element. sometimes called hrefs because it contains the href attribute.
Example: <a></a>
if you want the link to open in a new tab you can use the target=”_blank” attribute after the href attribute.
how do you turn a photo or image into a link?
you wrap the image in an anchor tag!
Example:
<a>
<img></img>
</a>
forms!!! how do you make a form?
what does the action attribute do?
<form></form>
– nest all your form stuff in between these two tags.
the action attribute, tells the program where to send the info that is collected by the form.
Example:
<form></form>
In order for a form’s data to be accessed by the location specified in the action attribute, you must give the text field a name attribute and assign it a value to represent the data being submitted.
Here is an example of an input element with a name attribute:
Example:
<form>
<input></input>
</form>
talk to me about the “required” attribute on input fields.
To prevent a user from submitting a form when required information is still missing, you need to add the “required” attribute to an input element.
The required attribute is just the word required – you don’t need a value or quotes. Just add the word required to the input element, making sure there is space between it and other attributes.
example:
<input required type=”text” name=”catphotourl” . . .
what are inline elements
inline elements don’t automatically start on a new line.
They will go to the side (inline) next to the item above them in the hTML
how do you differentiate “input” elements?
There are all sorts of input elements
They are differentiated by the “type” attribute
Example
<input></input> – this creates a radio button
<input></input> – this creates a a text box/text field
what does the <label></label> element do?
The label element will make everything inside of it clickable.
Example:
<label><input></input> Indoor</label>
now, you can click on the radio button circle OR clicking on the word “Indoor” will also select the radio button. Or in other words, the <label> elements helps associate the text for an input element with the input element itself</label>
you can also associate a label and an input element with the “for” attribute - and use the same value as the input element’s id.
Put the label element around the text that you want associated with the input element.
For example,
<input type=”radio” id=”indoor><label> Indoor</label>
how do you make it so that only one radio button can be selected at the same time?
To make it so selecting one radio button automatically deselects the other, both buttons must have a name attribute with the same value.
<input “ type=”radio” name=”in-out”> Indoor
<input></input> Outdoor
why and when do radio buttons & checkboxes need both a “name” attribute and a “value” attribute?
The form data for radio buttons is based on its name and value attributes. Or in other words, form data for radio buttons or checkboxes are name / value attribute pairs.
Since radio buttons need to have the same name in order to make it so that only one radio button can be selected at the same time, you will also need to include a “value” attribute. which needs to be unique to each button so you know which button was pushed.
even though you can check more than one checkbox at a time, it is still best practice to give them both name and value attributes and to make the name the same and the values unique.
what does the <fieldset></fieldset> element do?
Is it an inline element or a block-level element?
The fieldset element is used to group related inputs and labels together in a web form.
fieldset elements are block-level elements, meaning that they appear on a new line.
inline elements vs. block-level elements
block-level elements are elements appear on a new line.
inline elements don’t automatically start on a new line.
They will go to the side (inline) next to the item above them in the HTML
what does the <legend></legend> element do?
The legend element acts as a caption for the content it is just under. Usually used with forms around input elements to give users context about what they should enter into that part of the form.
What is the <head></head> element used for?
The head element is used to contain metadata about the document, such as its title, links to stylesheets, and scripts. Metadata is information about the page that isn’t displayed directly on the page.
what is a “type selector” in CSS?
h1 {
text-align: center;
}
h2 {
text-align: center;
}
p {
text-align: center;
}
h1, h2 and p are all type selectors
. #
which one is for class? which one is for id?
menu {
. is for classes
# is for id’s
color: blue;
}
.redstuff {
color: red;
}
