HTML & CSS

Question 1

what is a “void element”?

Answer 1

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.

Question 2

what attributes does an <img></img> tag have?

Answer 2

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

Question 3

what is this element called?
<a></a>

Answer 3

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.

Question 4

how do you turn a photo or image into a link?

Answer 4

you wrap the image in an anchor tag!
Example:
<a>
<img></img>
</a>

Question 5

forms!!! how do you make a form?
what does the action attribute do?

Answer 5

<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>

Answer 6

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>

Question 7

talk to me about the “required” attribute on input fields.

Answer 7

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” . . .

Question 8

what are inline elements

Answer 8

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

Question 9

how do you differentiate “input” elements?

Answer 9

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

Question 10

what does the <label></label> element do?

Answer 10

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>

Question 11

how do you make it so that only one radio button can be selected at the same time?

Answer 11

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