Tags and Attributes & Selectors and Properties
Studied by 0 people
Learn
Practice Test
Spaced Repetition
Match
Flashcards1/50
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced |
|---|
No study sessions yet.
51 Terms
<p></p>
Defines a paragraph in a webpage.
<h1></h1>
Formats text into headers (h1 largest, h6 smallest).
<em></em>
Emphasize, indicates also semantical emphasis on text in italics (so screen-readers can see the emphasis too). It is not the same as <i></i>, which only puts the text into italics visually.
<strong></strong>
Strong, makes text semantically extra emphasized (for screen-readers too). However, it is not the same as <b></b>, which makes text visually bold.
<button></button>
Defines a clickable button that can be used to submit forms or trigger actions in web applications.
<br>
Inserts a line break, creating a new line in the document.
<a></a>
Anchor: Defines a hyperlink that links to another webpage or resource.
Example: <a href=”URL”></a>
href=”“
Hypertext Reference: Attribute, that specifies the URL of the page the link goes to.
Example: <a href=”URL”></a>
URL
Uniform Resource Locator, a reference or address used to access resources on the internet.
Attribute
A specification that defines a property for an HTML element in the opening tag, providing additional information or functionality.
Hypertext
The underlying technology that allows documents to be connected via references (hyperlinks), enabling navigation between them on the internet.
Empty Tag
An HTML element that does not have any content or a closing tag, such as <br>
<img>
An HTML tag used to embed images on a webpage, specified with the attributes src=”” and alt=””.
src=””
Source, an attribute that references to a source for an <img>
Example: <img src=”URL.jpg”>
width=”” ; height=””
Attribute, die die Länge und Höhe eines Bildes <img> verändern nach der Standardeinheit von Pixel.
style=””
Erlaubt vereinzelt CSS-Style in HTML
<style></style>
Usable in the <head> tag to add CSS to a document without needing a CSS file:
<title></title>
Defines the title of a website in the browser and tabs. It is written in the <head>-tag and is readable for screen readers.
<head></head>
A container for metadata (data about data). The element is placed between the <html>-tag and the <body>-tag. Metadata is data about the document, that is not displayed in it. Metadata typically define the document title, character set, styles, scripts, and other meta information.
<body></body>
Defines the document's body. The element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Note: There can only be one such element in an HTML document.
<!doctype html>
<!DOCTYPE html> is a declaration, not a tag, that tells the browser that the document is written in HTML5. The exclamation mark indicates that the text in the brackets is a type of document and not a tag or element.
<!>
An exclamation mark in the Standard Generalized Markup Language (SGML), of which, is used to denote markup declarations.
These declarations specify the structure and rules of the document, rather than being part of the document's content. For example, <!DOCTYPE> is used to specify the document type and the DTD to be used, and <! -- ... --> introduces a comment.
SGML
Standard Generalized Markup Language: a language for defining markup languages. HTML is one such "application" of SGML.
<link>
Empty tag, that Defines the relationship between one document and an external resource.
<script>
rel=””
Specifies the relationship between the current document and the linked document. It's used with the <link> and <a> tags to define how the two documents are related, influencing how browsers and search engines interpret the link
class=””
Allows you to group HTML elements together and apply CSS styles or JavaScript behavior to them collectively. It's a way to assign a name or label to a set of elements on a webpage.
<li></li>
List: Is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
. (CSS)
Class selector: In CSS, this allows you to set a new rule for a class=”” attribute.
Example:
HTML - class=”gray”
CSS - .gray
id=””
A global attribute that provides a unique identifier for an HTML element within a document. This identifier allows for targeted selection and manipulation of the element through CSS and JavaScript
# (CSS)
ID selector: Match an element that has the specified ID (identification).
font-size: ;
Schriftgröße in Pixel.
px
Pixel
font-family: ;
Sets font family: Can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, font-families and generic-families (arial; serif, sans-serif, cursive, fantasy, monospace).
font-style: ;
Textstil (z. B. normal, italics, oblique, initial (back to default value), inherit (inherits from parent element))
font: ;
A shorthand property for:
font-style, font-variant, font-weight, font-size/line-height, font-family
Needs min. size and family values:
font: italic small-caps bold 12px/30px Georgia, serif;
line-height: ;
Specifies the height of a line. Negative values are not allowed. Decimals (1.5), percentage (150%) and “normal” are values.
font-variant: ;
Specifies whether or not a text should be displayed in a small-caps font.
font-variant: small-caps;
sets how thick or thin characters in text should be displayed.
font-weight: ;
Sets how thick or thin characters in text should be displayed.
Values: “lighter”, “bold” or number
color: ; & background-color: ;
Use with terms, HTML hex color codes or a RGB-value.
Example: “red”, #rrggbb, rgb(0,0,255)
border: ;
solid 10px red
border-radius: ;
10px abrunden (10px von der Ecke krümmen), kann Bilder rund machen (Hälfte der Höhe/Breite und nur bei Quadraten)
text-align: ;
padding: ;
padding-left/right/top/bottom: ;
margin: ;
margin-left/right/top/bottom: ;
display: ;
block
text-dexoration
target=””