My HTML Flashcards
What does HTTP stands for?
Hyper Text Transfer Protocol
How to open links in new tabs.
With the target=_blank attribute.
e.g.:
<a href:”www.xyz.de” target=_blank>xyz</a>
How to parse all HTML before executing java scripts?
defer (
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed
What does the async attribute do?
The async attribute loads and executes the script asynchronously with the rest of the webpage.
Similar to the defer attribute, the HTML parser will continue parsing the rest of the HTML as the script is downloaded in the background.
However, with the async attribute, the script will not wait until the entire page is parsed: it will execute immediately after it has been downloaded.
Short for writing an ul with a class of “nav” with 3 li’s with class “item” and ankers with class “links?
ul.nav>(li.item>a.links)*3
Which attribute can you use to indicate the current state of a collapsible element on the page?
The aria-expanded attribute:
- When aria-expanded=”true”, it means the content is visible.
- When aria-expanded=”false”, it means the content is hidden.
What tag is used to create a form in HTML?
<form>
How do you specify a text input field in an HTML form?
<input type="text" id="someId" name="someName">
Which attribute is used for password fields in a form?
type=”password”
What element is used to group radio buttons in a form?
<fieldset>
What tag is used to label a group of related form elements within a <fieldset>?
<legend>
How do you create a radio button in an HTML form?
<input type="radio" id="someId" name="someName" value="someValue">
Which HTML attribute should be used to label form controls for better accessibility?
for in <label> tags, linking to the id of the input element.</label>
How do you create a multi-line text input in an HTML form?
<textarea id="someId" name="someName" rows="5" cols="33"></textarea>
What type of input should you use for collecting email addresses?
<input type="email" id="someId" name="someName">
What is the purpose of the name attribute in form elements?
To specify the name of the form data variable that will be sent to the server.
How do you add a submit button to an HTML form?
<input type="submit" value="Send Request">
What is the correct syntax for a self-closing input tag in HTML?
<input type="text" id="someId" name="someName">
How can you group and label related input elements in a form?
Using the <fieldset> and <legend> tags
Which tag is used to create labels for form elements?
<label>
How do you create a form field for user addresses in an HTML form?
<textarea id="addr" name="addr" rows="5" cols="33"></textarea>
How does the ‘type’ attribute help in form validation?
It specifies the type of data that must be entered, such as a number, an email address, or another specific preset type.
How can you use the ‘pattern’ attribute for form validation with an example?
Example:
~~~
<input id=”choose” name=”i-like” required pattern=”[Bb]anana|[Cc]herry”
~~~
allows only “banana”, “Banana”, “cherry”, or “Cherry” as valid inputs.
What API in JavaScript provides methods and properties for form validation?
The Constraint Validation API.
Which DOM interfaces are available with the Constraint Validation API?
HTMLButtonElement, HTMLFieldSetElement, HTMLInputElement, HTMLOutputElement, HTMLSelectElement, HTMLTextAreaElement.
What does the validationMessage property do?
Returns a localized message describing the validation constraints that the control doesn’t satisfy.
What is the purpose of the validity property?
Returns a ValidityState object containing properties describing the validity state of the element.
What does the patternMismatch property indicate?
Returns true if the value does not match the specified pattern.
What does tooLong property signify in form validation?
Returns true if the value is longer than the maximum length specified by the maxlength attribute.
Define the tooShort property.
Returns true if the value is shorter than the minimum length specified by the minlength attribute.
What returns true if the value is greater than the maximum specified by the max attribute and less than the minimum?
rangeOverflow
rangeUnderflow
What returns true if the value is not in the required syntax (e.g., email or URL).
the typeMismatch property.
In custom form validation, why is the aria-live attribute used?
To ensure custom error messages are presented to all users, including those using screen readers.
What attribute turns off automatic browser validation in forms?
The novalidate attribute.
What is the purpose of setCustomValidity in JavaScript?
Allows setting custom error messages for form validation based on custom criteria beyond standard HTML attributes.
How do you clear a custom error message set with setCustomValidity?
Call setCustomValidity(“”) on the form field.
Example syntax for setting a media query in the picture element?
<picture> <source media="(min-width: 650px)" srcset="desktop-image.jpg"> <img src="mobile-image.jpg" alt="Responsive image"> </picture>
What is REST?
REST (Representational State Transfer) is an architectural style for building standards between computer systems on the web, making communication between systems easier. RESTful systems are stateless and separate the concerns of client and server.
What does “Separation of Client and Server” mean in REST?
In REST, the client and server are implemented independently, allowing changes on one side without affecting the other. This modular separation improves flexibility, scalability, and allows both components to evolve separately.
What does “stateless” mean in REST?
Statelessness in REST means that the server does not store any information about the client’s state. Every request from the client contains all the necessary information for the server to understand and process it without relying on prior interactions.
How does communication between client and server work in REST?
In REST, clients send requests (e.g., GET, POST, PUT, DELETE) to retrieve or modify resources, and the server sends responses back with data or status codes. Standard HTTP verbs and headers are used for this communication.
What are the four main HTTP verbs used in RESTful systems?
- GET: Retrieve a resource or collection of resources
- POST: Create a new resource
- PUT: Update a specific resource
- DELETE: Remove a resource
What are MIME types in REST headers?
MIME types specify the type of content in HTTP requests and responses. Common MIME types include text/html, image/jpeg, application/json, and video/mp4. The client specifies the acceptable MIME types in the request’s “Accept” field.
What is an example of an HTTP GET request in REST?
A GET request to fetch a specific resource:
GET /articles/23
Accept: text/html, application/xhtml
This requests the article with id 23, and the client can accept HTML or XHTML content.
What does the header “Content-Type” indicate in a REST response?
The “Content-Type” header specifies the type of data the server is sending back in the response, which should match one of the acceptable MIME types listed in the client’s request.
How are resource paths structured in RESTful APIs?
Resource paths should be hierarchical and descriptive, often using plural forms of resources (e.g., /customers/223/orders/12). Paths can refer to collections or specific resources by appending an ID to the path.
How can you add a slider to youre HTML?
With input of type range. With min and max you can specify the distance. Witch value you set the initial value. And with stepp you say set how the distance the slider moves each time.
<input id="slider" type="range" min="0" max="10" value="0" step="1" />
What are global attributes in HTML?
Global attributes are HTML attributes that can be used with all elements. E.g.:
class - Used to specify a class name for styling.
title - Used to specify additional information about
an element.
id - Used to specify a unique ID for an element for
styling purposes or links within a single web page.
style - Used for inline styling.
How can you use HTML to declare the language of the web page? Why is this important?
The lang attribute is used to declare the language of the web page. It should be included inside the <html> tag.
<html lang="en"> </html>
Declaring the language of a webpage is important because it lets search engines and browsers know the language in which a webpage appears. Yes, a user will not directly see this attribute. But because it has an impact on how a browser reads the page, you should specify a language.
How do you create an input field that can be used in a form?
/form action=”restaurants”/
/label for=”name-input”/Name//label/
/input id=”name-input” type=”text” name=”name”/
/input type=”submit” value=”Submit”/
/form/
