Einführung in HTML und CSS

HTML (Hypertext Markup Language) und CSS (Cascading Style Sheets) sind die Grundlagen der Webentwicklung. Sie arbeiten zusammen, um Struktur und Stil zu vermischen und ermöglichen es Entwicklern, ansprechende und funktionale Webseiten zu erstellen. In diesem Leitfaden werden die wichtigsten Konzepte von HTML und CSS erklärt.

Aufbau von HTML-Dokumenten

HTML-Dokumente bestehen aus einer Reihe von Elementen, die die Struktur der Webseite definieren. Jedes Element wird durch Tags gekennzeichnet, die den Inhalt umschließen. Diese Tags informieren den Browser darüber, wie der Inhalt dargestellt werden soll.

Mehr erfahren

HTML-Grundlagen

Zu den wesentlichen Bestandteilen von HTML gehören Tags wie ``, ``, ``, `

`, ``, `

` bis `

` sowie `
` für Absätze. Diese Elemente leisten einen wichtigen Beitrag zur Semantik und Zugänglichkeit der Webseite.

Mehr erfahren

HTML-Attribute

HTML-Attribute bieten zusätzliche Informationen über ein Element, wie z.B. `id` oder `class`. Diese Attribute sind entscheidend für die Targetierung von Elementen mit CSS oder JavaScript, um das Verhalten oder Aussehen zu ändern.

Mehr erfahren

Previous slide

Next slide

Was ist CSS?

Definition von CSS

CSS ist eine Stylesheet-Sprache, die das Erscheinungsbild eines HTML-Dokuments beschreibt. Es wird verwendet, um Layouts, Farben, Schriftarten und vieles mehr zu gestalten.

Selektoren in CSS

CSS-Selektoren bestimmen, auf welche HTML-Elemente ein CSS-Regelwerk angewendet wird. Es gibt einfache Selektoren wie `Tag-Selektoren`, `Klassen-Selektoren` und `ID-Selektoren`, sowie komplexere Kombinatoren und Pseudoklassen.

CSS-Eigenschaften

CSS-Eigenschaften wie `color`, `background`, `margin` und `padding` sind verantwortlich für die visuelle Darstellung. Sie ermöglichen es Entwicklern, das Layout und die Ästhetik ihrer Webseite umfassend zu gestalten.

Formulare in HTML

HTML bietet eine Vielzahl von Formular-Elementen wie ``, `

`, `<button>` und `<select>`, die Nutzerdaten erfassen und interaktive Inhalte ermöglichen. Diese sind ein zentraler Bestandteil dynamischer Webseiten.						</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-2af90937 e-con-full e-flex e-con e-child" data-id="2af90937" data-element_type="container" data-settings="{"background_background":"classic"}">
				<div class="elementor-element elementor-element-78b22402 elementor-widget elementor-widget-heading" data-id="78b22402" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">Inline- und Block-Elemente</h3>		</div>
				</div>
				<div class="elementor-element elementor-element-1eebf78b m-0 elementor-widget elementor-widget-text-editor" data-id="1eebf78b" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							Ein wichtiges Konzept in HTML ist die Unterscheidung zwischen Inline- und Block-Elementen. Inline-Elemente beeinträchtigen den Textfluss nicht, während Block-Elemente neue Linien im Dokument erzeugen und sich über die gesamte Breite dehnen.						</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-4639c24f e-con-full e-flex e-con e-child" data-id="4639c24f" data-element_type="container" data-settings="{"background_background":"classic"}">
				<div class="elementor-element elementor-element-2ada9ccc elementor-widget elementor-widget-heading" data-id="2ada9ccc" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h3 class="elementor-heading-title elementor-size-default">Verwendung von Semantischen Elementen</h3>		</div>
				</div>
				<div class="elementor-element elementor-element-4e34da8e m-0 elementor-widget elementor-widget-text-editor" data-id="4e34da8e" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							Semantische HTML-Elemente wie `<article>`, `<section>`, `<aside>` und `<footer>` bieten eine klare Struktur und Bedeutung für den Inhalt, was sowohl Suchmaschinenoptimierung als auch Barrierefreiheit verbessert.						</div>
				</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-7dfcda57 e-flex e-con-boxed e-con e-parent" data-id="7dfcda57" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-597e268d e-con-full e-flex e-con e-child" data-id="597e268d" data-element_type="container" data-settings="{"background_background":"classic"}">
				<div class="elementor-element elementor-element-670d0fda elementor-widget elementor-widget-heading" data-id="670d0fda" data-element_type="widget" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Fortgeschrittene CSS-Konzepte</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-1a310f9 m-0 elementor-widget elementor-widget-text-editor" data-id="1a310f9" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							CSS bietet mehrere Positionierungsmethoden, darunter `static`, `relative`, `absolute`, `fixed` und `sticky`. Diese Methoden sind entscheidend, um das Layout gezielt und präzise zu beeinflussen.						</div>
				</div>
				<div class="elementor-element elementor-element-136f1d2 elementor-widget elementor-widget-button" data-id="136f1d2" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-sm" href="https://mariahglynn.com/kontakte">
						<span class="elementor-button-content-wrapper">
									<span class="elementor-button-text">Mehr erfahren</span>
					</span>
					</a>
		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-31ff946c e-con-full img-100 e-flex e-con e-child" data-id="31ff946c" data-element_type="container">
				<div class="elementor-element elementor-element-5127b59b elementor-widget elementor-widget-image" data-id="5127b59b" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
													<img loading="lazy" decoding="async" loading="lazy" width="1024" height="659" src="https://mariahglynn.com/wp-content/uploads/2024/06/development-knowledge-study-education-concept_5387-1024x659.jpeg" class="attachment-large size-large wp-image-515" alt="" srcset="https://mariahglynn.com/wp-content/uploads/2024/06/development-knowledge-study-education-concept_5387-1024x659.jpeg 1024w, https://mariahglynn.com/wp-content/uploads/2024/06/development-knowledge-study-education-concept_5387-768x494.jpeg 768w, https://mariahglynn.com/wp-content/uploads/2024/06/development-knowledge-study-education-concept_5387-300x193.jpeg 300w, https://mariahglynn.com/wp-content/uploads/2024/06/development-knowledge-study-education-concept_5387.jpeg 1480w" sizes="auto, (max-width: 1024px) 100vw, 1024px" />													</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-71c218c1 e-flex e-con-boxed e-con e-parent" data-id="71c218c1" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-31c70bd6 e-con-full e-flex e-con e-child" data-id="31c70bd6" data-element_type="container">
				<div class="elementor-element elementor-element-6669cc4 m-0 elementor-widget elementor-widget-text-editor" data-id="6669cc4" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							Es gibt viele Code-Editoren und integrierte Entwicklungsumgebungen (IDEs), die speziell für Webentwicklung geeignet sind, wie Visual Studio Code, Sublime Text und Atom. Diese bieten erweiterte Funktionen wie Syntax-Highlighting und Autovervollständigung.						</div>
				</div>
				<div class="elementor-element elementor-element-219b2e14 elementor-widget elementor-widget-image" data-id="219b2e14" data-element_type="widget" data-widget_type="image.default">
				<div class="elementor-widget-container">
													<img loading="lazy" decoding="async" loading="lazy" width="1024" height="615" src="https://mariahglynn.com/wp-content/uploads/2024/06/target-concept-with-wooden-blocks_176474-10459-1024x615.jpeg" class="attachment-large size-large wp-image-526" alt="" srcset="https://mariahglynn.com/wp-content/uploads/2024/06/target-concept-with-wooden-blocks_176474-10459-1024x615.jpeg 1024w, https://mariahglynn.com/wp-content/uploads/2024/06/target-concept-with-wooden-blocks_176474-10459-768x461.jpeg 768w, https://mariahglynn.com/wp-content/uploads/2024/06/target-concept-with-wooden-blocks_176474-10459-300x180.jpeg 300w, https://mariahglynn.com/wp-content/uploads/2024/06/target-concept-with-wooden-blocks_176474-10459.jpeg 1480w" sizes="auto, (max-width: 1024px) 100vw, 1024px" />													</div>
				</div>
		<div class="elementor-element elementor-element-7cd64816 e-con-full e-flex e-con e-child" data-id="7cd64816" data-element_type="container">
		<div class="elementor-element elementor-element-317720c2 e-con-full e-flex e-con e-child" data-id="317720c2" data-element_type="container" data-settings="{"background_background":"classic"}">
				<div class="elementor-element elementor-element-4082966c elementor-absolute elementor-widget elementor-widget-button" data-id="4082966c" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-sm" href="https://mariahglynn.com/kontakte">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-right" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>			</span>
								</span>
					</a>
		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-35c3d649 e-con-full e-flex e-con e-child" data-id="35c3d649" data-element_type="container" data-settings="{"background_background":"classic"}">
				<div class="elementor-element elementor-element-68222c02 elementor-absolute elementor-widget elementor-widget-button" data-id="68222c02" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-sm" href="https://mariahglynn.com/kontakte">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-right" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>			</span>
								</span>
					</a>
		</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-4b5860c4 e-con-full e-flex e-con e-child" data-id="4b5860c4" data-element_type="container" data-settings="{"background_background":"classic"}">
				<div class="elementor-element elementor-element-24f2bc10 elementor-absolute elementor-widget elementor-widget-button" data-id="24f2bc10" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-sm" href="https://mariahglynn.com/kontakte">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-right" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>			</span>
								</span>
					</a>
		</div>
				</div>
				</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-239a296 e-con-full e-flex e-con e-child" data-id="239a296" data-element_type="container">
				<div class="elementor-element elementor-element-5489aab4 elementor-align-justify elementor-widget elementor-widget-button" data-id="5489aab4" data-element_type="widget" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-sm" href="https://mariahglynn.com/kontakte">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-icon">
				<svg aria-hidden="true" class="e-font-icon-svg e-fas-arrow-right" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>			</span>
									<span class="elementor-button-text">Mehr erfahren</span>
					</span>
					</a>
		</div>
				</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-12b2524a e-flex e-con-boxed e-con e-parent" data-id="12b2524a" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-2a64b20a e-con-full e-flex e-con e-child" data-id="2a64b20a" data-element_type="container" data-settings="{"background_background":"classic"}">
				<div class="elementor-element elementor-element-a6b558c elementor-widget__width-inherit elementor-absolute elementor-widget elementor-widget-heading" data-id="a6b558c" data-element_type="widget" data-settings="{"_position":"absolute"}" data-widget_type="heading.default">
				<div class="elementor-widget-container">
			<h2 class="elementor-heading-title elementor-size-default">Weitere Ressourcen</h2>		</div>
				</div>
				<div class="elementor-element elementor-element-492a20b6 m-0 elementor-widget elementor-widget-text-editor" data-id="492a20b6" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							Es gibt zahlreiche Online-Plattformen wie Codecademy, Coursera und Udemy, die Kurse für HTML und CSS anbieten. Diese Ressourcen sind sowohl für Anfänger als auch für fortgeschrittene Benutzer geeignet.						</div>
				</div>
				<div class="elementor-element elementor-element-3970721c m-0 elementor-widget elementor-widget-text-editor" data-id="3970721c" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							Dokumentationen wie die von MDN und Foren wie Stack Overflow sind unverzichtbare Ressourcen für Entwickler, die Antworten auf spezifische Fragen oder erweiterte Kenntnisse suchen.						</div>
				</div>
				<div class="elementor-element elementor-element-5e369ffa m-0 elementor-widget elementor-widget-text-editor" data-id="5e369ffa" data-element_type="widget" data-widget_type="text-editor.default">
				<div class="elementor-widget-container">
							Zu den wertvollen Quellen für Brancheneinblicke und Trends gehören Webdesign-Blogs und Magazine wie Smashing Magazine und CSS-Tricks. Sie bieten Inspiration und innovative Ideen zur Umsetzung aktueller Designmuster.						</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-48cb812b e-flex e-con-boxed e-con e-parent" data-id="48cb812b" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-570dda68 e-con-full e-flex e-con e-child" data-id="570dda68" data-element_type="container">
				<div class="elementor-element elementor-element-17750d20 elementor-widget elementor-widget-google_maps" data-id="17750d20" data-element_type="widget" data-widget_type="google_maps.default">
				<div class="elementor-widget-container">
			<style>/*! elementor - v3.22.0 - 17-06-2024 */
.elementor-widget-google_maps .elementor-widget-container{overflow:hidden}.elementor-widget-google_maps .elementor-custom-embed{line-height:0}.elementor-widget-google_maps iframe{height:300px}</style>		<div class="elementor-custom-embed">
			<iframe loading="lazy"
					src="https://maps.google.com/maps?q=Tower%20185%2C%2060327%20Frankfurt%20am%20Main%2C%20Germany&t=m&z=10&output=embed&iwloc=near"
					title="Tower 185, 60327 Frankfurt am Main, Germany"
					aria-label="Tower 185, 60327 Frankfurt am Main, Germany"
			></iframe>
		</div>
				</div>
				</div>
				</div>
					</div>
				</div>
		<div class="elementor-element elementor-element-7665643b e-flex e-con-boxed e-con e-parent" data-id="7665643b" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-76d14b01 e-con-full e-flex e-con e-child" data-id="76d14b01" data-element_type="container">
				<div class="elementor-element elementor-element-3d28ccd9 elementor-nav-menu__align-center elementor-nav-menu--dropdown-none elementor-widget elementor-widget-nav-menu" data-id="3d28ccd9" data-element_type="widget" data-settings="{"layout":"horizontal","submenu_icon":{"value":"<svg class=\"e-font-icon-svg e-fas-caret-down\" viewBox=\"0 0 320 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\"><\/path><\/svg>","library":"fa-solid"}}" data-widget_type="nav-menu.default">
				<div class="elementor-widget-container">
						<nav class="elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-underline e--animation-fade">
				<ul id="menu-1-3d28ccd9" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-543"><a href="https://mariahglynn.com/geschaftsbedingungen/" class="elementor-item">Geschäftsbedingungen</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-544"><a href="https://mariahglynn.com/datenschutzrichtlinie/" class="elementor-item">Datenschutzrichtlinie</a></li>
</ul>			</nav>
						<nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" aria-hidden="true">
				<ul id="menu-2-3d28ccd9" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-543"><a href="https://mariahglynn.com/geschaftsbedingungen/" class="elementor-item" tabindex="-1">Geschäftsbedingungen</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-544"><a href="https://mariahglynn.com/datenschutzrichtlinie/" class="elementor-item" tabindex="-1">Datenschutzrichtlinie</a></li>
</ul>			</nav>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-ab5b383 e-con-full e-flex e-con e-child" data-id="ab5b383" data-element_type="container">
				<div class="elementor-element elementor-element-16f73c6d elementor-shape-rounded elementor-grid-0 e-grid-align-center elementor-widget elementor-widget-social-icons" data-id="16f73c6d" data-element_type="widget" data-widget_type="social-icons.default">
				<div class="elementor-widget-container">
			<style>/*! elementor - v3.22.0 - 17-06-2024 */
.elementor-widget-social-icons.elementor-grid-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-mobile-0 .elementor-widget-container,.elementor-widget-social-icons.elementor-grid-tablet-0 .elementor-widget-container{line-height:1;font-size:0}.elementor-widget-social-icons:not(.elementor-grid-0):not(.elementor-grid-tablet-0):not(.elementor-grid-mobile-0) .elementor-grid{display:inline-grid}.elementor-widget-social-icons .elementor-grid{grid-column-gap:var(--grid-column-gap,5px);grid-row-gap:var(--grid-row-gap,5px);grid-template-columns:var(--grid-template-columns);justify-content:var(--justify-content,center);justify-items:var(--justify-content,center)}.elementor-icon.elementor-social-icon{font-size:var(--icon-size,25px);line-height:var(--icon-size,25px);width:calc(var(--icon-size, 25px) + 2 * var(--icon-padding, .5em));height:calc(var(--icon-size, 25px) + 2 * var(--icon-padding, .5em))}.elementor-social-icon{--e-social-icon-icon-color:#fff;display:inline-flex;background-color:#69727d;align-items:center;justify-content:center;text-align:center;cursor:pointer}.elementor-social-icon i{color:var(--e-social-icon-icon-color)}.elementor-social-icon svg{fill:var(--e-social-icon-icon-color)}.elementor-social-icon:last-child{margin:0}.elementor-social-icon:hover{opacity:.9;color:#fff}.elementor-social-icon-android{background-color:#a4c639}.elementor-social-icon-apple{background-color:#999}.elementor-social-icon-behance{background-color:#1769ff}.elementor-social-icon-bitbucket{background-color:#205081}.elementor-social-icon-codepen{background-color:#000}.elementor-social-icon-delicious{background-color:#39f}.elementor-social-icon-deviantart{background-color:#05cc47}.elementor-social-icon-digg{background-color:#005be2}.elementor-social-icon-dribbble{background-color:#ea4c89}.elementor-social-icon-elementor{background-color:#d30c5c}.elementor-social-icon-envelope{background-color:#ea4335}.elementor-social-icon-facebook,.elementor-social-icon-facebook-f{background-color:#3b5998}.elementor-social-icon-flickr{background-color:#0063dc}.elementor-social-icon-foursquare{background-color:#2d5be3}.elementor-social-icon-free-code-camp,.elementor-social-icon-freecodecamp{background-color:#006400}.elementor-social-icon-github{background-color:#333}.elementor-social-icon-gitlab{background-color:#e24329}.elementor-social-icon-globe{background-color:#69727d}.elementor-social-icon-google-plus,.elementor-social-icon-google-plus-g{background-color:#dd4b39}.elementor-social-icon-houzz{background-color:#7ac142}.elementor-social-icon-instagram{background-color:#262626}.elementor-social-icon-jsfiddle{background-color:#487aa2}.elementor-social-icon-link{background-color:#818a91}.elementor-social-icon-linkedin,.elementor-social-icon-linkedin-in{background-color:#0077b5}.elementor-social-icon-medium{background-color:#00ab6b}.elementor-social-icon-meetup{background-color:#ec1c40}.elementor-social-icon-mixcloud{background-color:#273a4b}.elementor-social-icon-odnoklassniki{background-color:#f4731c}.elementor-social-icon-pinterest{background-color:#bd081c}.elementor-social-icon-product-hunt{background-color:#da552f}.elementor-social-icon-reddit{background-color:#ff4500}.elementor-social-icon-rss{background-color:#f26522}.elementor-social-icon-shopping-cart{background-color:#4caf50}.elementor-social-icon-skype{background-color:#00aff0}.elementor-social-icon-slideshare{background-color:#0077b5}.elementor-social-icon-snapchat{background-color:#fffc00}.elementor-social-icon-soundcloud{background-color:#f80}.elementor-social-icon-spotify{background-color:#2ebd59}.elementor-social-icon-stack-overflow{background-color:#fe7a15}.elementor-social-icon-steam{background-color:#00adee}.elementor-social-icon-stumbleupon{background-color:#eb4924}.elementor-social-icon-telegram{background-color:#2ca5e0}.elementor-social-icon-threads{background-color:#000}.elementor-social-icon-thumb-tack{background-color:#1aa1d8}.elementor-social-icon-tripadvisor{background-color:#589442}.elementor-social-icon-tumblr{background-color:#35465c}.elementor-social-icon-twitch{background-color:#6441a5}.elementor-social-icon-twitter{background-color:#1da1f2}.elementor-social-icon-viber{background-color:#665cac}.elementor-social-icon-vimeo{background-color:#1ab7ea}.elementor-social-icon-vk{background-color:#45668e}.elementor-social-icon-weibo{background-color:#dd2430}.elementor-social-icon-weixin{background-color:#31a918}.elementor-social-icon-whatsapp{background-color:#25d366}.elementor-social-icon-wordpress{background-color:#21759b}.elementor-social-icon-x-twitter{background-color:#000}.elementor-social-icon-xing{background-color:#026466}.elementor-social-icon-yelp{background-color:#af0606}.elementor-social-icon-youtube{background-color:#cd201f}.elementor-social-icon-500px{background-color:#0099e5}.elementor-shape-rounded .elementor-icon.elementor-social-icon{border-radius:10%}.elementor-shape-circle .elementor-icon.elementor-social-icon{border-radius:50%}</style>		<div class="elementor-social-icons-wrapper elementor-grid">
							<span class="elementor-grid-item">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-945024c" target="_blank">
						<span class="elementor-screen-only">Facebook</span>
						<svg class="e-font-icon-svg e-fab-facebook" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg>					</a>
				</span>
							<span class="elementor-grid-item">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-twitter elementor-repeater-item-07ddb98" target="_blank">
						<span class="elementor-screen-only">Twitter</span>
						<svg class="e-font-icon-svg e-fab-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>					</a>
				</span>
							<span class="elementor-grid-item">
					<a class="elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-repeater-item-aea6e27" target="_blank">
						<span class="elementor-screen-only">Youtube</span>
						<svg class="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg>					</a>
				</span>
					</div>
				</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		
  
  <aside id="moove_gdpr_cookie_info_bar" class="moove-gdpr-info-bar-hidden moove-gdpr-align-center moove-gdpr-dark-scheme gdpr_infobar_postion_bottom" aria-label="GDPR Cookie Banner" style="display: none;">
    <div class="moove-gdpr-info-bar-container">
      <div class="moove-gdpr-info-bar-content">
        
<div class="moove-gdpr-cookie-notice">
  <p>We are using cookies to give you the best experience on our website.</p><p>You can find out more about which cookies we are using or switch them off in <button  data-href="#moove_gdpr_cookie_modal" class="change-settings-button">settings</button>.</p></div>
        
<div class="moove-gdpr-button-holder">
		  <button class="mgbutton moove-gdpr-infobar-allow-all gdpr-fbo-0" aria-label="Accept" >Accept</button>
	  </div>
      </div>
      
    </div>
    
  </aside>
  
  
			<script type='text/javascript'>
				const lazyloadRunObserver = () => {
					const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
					const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
						entries.forEach( ( entry ) => {
							if ( entry.isIntersecting ) {
								let lazyloadBackground = entry.target;
								if( lazyloadBackground ) {
									lazyloadBackground.classList.add( 'e-lazyloaded' );
								}
								lazyloadBackgroundObserver.unobserve( entry.target );
							}
						});
					}, { rootMargin: '200px 0px 200px 0px' } );
					lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
						lazyloadBackgroundObserver.observe( lazyloadBackground );
					} );
				};
				const events = [
					'DOMContentLoaded',
					'elementor/lazyload/observe',
				];
				events.forEach( ( event ) => {
					document.addEventListener( event, lazyloadRunObserver );
				} );
			</script>
			<script id="moove_gdpr_frontend-js-extra">
var moove_frontend_gdpr_scripts = {"ajaxurl":"https:\/\/mariahglynn.com\/wp-admin\/admin-ajax.php","post_id":"529","plugin_dir":"https:\/\/mariahglynn.com\/wp-content\/plugins\/gdpr-cookie-compliance","show_icons":"all","is_page":"1","ajax_cookie_removal":"false","strict_init":"1","enabled_default":{"third_party":0,"advanced":0},"geo_location":"false","force_reload":"false","is_single":"","hide_save_btn":"false","current_user":"0","cookie_expiration":"365","script_delay":"2000","close_btn_action":"1","close_btn_rdr":"","scripts_defined":"{\"cache\":true,\"header\":\"\",\"body\":\"\",\"footer\":\"\",\"thirdparty\":{\"header\":\"\",\"body\":\"\",\"footer\":\"\"},\"advanced\":{\"header\":\"\",\"body\":\"\",\"footer\":\"\"}}","gdpr_scor":"true","wp_lang":"","wp_consent_api":"false"};
</script>
<script src="https://mariahglynn.com/wp-content/plugins/gdpr-cookie-compliance/dist/scripts/main.js?ver=4.15.2" id="moove_gdpr_frontend-js"></script>
<script id="moove_gdpr_frontend-js-after">
var gdpr_consent__strict = "false"
var gdpr_consent__thirdparty = "false"
var gdpr_consent__advanced = "false"
var gdpr_consent__cookies = ""
</script>
<script src="https://mariahglynn.com/wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js?ver=1.2.1" id="smartmenus-js"></script>
<script src="https://mariahglynn.com/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script>
<script src="https://mariahglynn.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.22.0" id="elementor-pro-webpack-runtime-js"></script>
<script src="https://mariahglynn.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.22.1" id="elementor-webpack-runtime-js"></script>
<script src="https://mariahglynn.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.22.1" id="elementor-frontend-modules-js"></script>
<script src="https://mariahglynn.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script>
<script src="https://mariahglynn.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
<script id="elementor-pro-frontend-js-before">
var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/mariahglynn.com\/wp-admin\/admin-ajax.php","nonce":"a011137d14","urls":{"assets":"https:\/\/mariahglynn.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/mariahglynn.com\/wp-json\/"},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/mariahglynn.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}};
</script>
<script src="https://mariahglynn.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.22.0" id="elementor-pro-frontend-js"></script>
<script src="https://mariahglynn.com/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js?ver=4.0.2" id="elementor-waypoints-js"></script>
<script src="https://mariahglynn.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script>
<script id="elementor-frontend-js-before">
var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselWrapperAriaLabel":"Carousel | Horizontal scrolling: Arrow Left & Right","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}}},"version":"3.22.1","is_static":false,"experimentalFeatures":{"e_optimized_assets_loading":true,"e_optimized_css_loading":true,"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"container_grid":true,"e_swiper_latest":true,"e_optimized_control_loading":true,"e_onboarding":true,"theme_builder_v2":true,"home_screen":true,"editor_v2":true,"nested-elements":true,"e_lazyload":true,"display-conditions":true,"form-submissions":true,"mega-menu":true,"taxonomy-filter":true},"urls":{"assets":"https:\/\/mariahglynn.com\/wp-content\/plugins\/elementor\/assets\/"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":529,"title":"Mariahglynn","excerpt":"","featuredImage":false}};
</script>
<script src="https://mariahglynn.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.22.1" id="elementor-frontend-js"></script>
<script src="https://mariahglynn.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.22.0" id="pro-elements-handlers-js"></script>

<div id="moove_gdpr_cookie_modal" class="gdpr_lightbox-hide" role="complementary" aria-label="GDPR Settings Screen">
    <div class="moove-gdpr-modal-content moove-clearfix logo-position-left moove_gdpr_modal_theme_v1">
          
        <button class="moove-gdpr-modal-close" aria-label="Close GDPR Cookie Settings">
          <span class="gdpr-sr-only">Close GDPR Cookie Settings</span>
          <span class="gdpr-icon moovegdpr-arrow-close"></span>
        </button>
            <div class="moove-gdpr-modal-left-content">
        
<div class="moove-gdpr-company-logo-holder">
  <img src="https://mariahglynn.com/wp-content/plugins/gdpr-cookie-compliance/dist/images/gdpr-logo.png" alt="Mariahglynn"   width="350"  height="233"  class="img-responsive" />
</div>
        <ul id="moove-gdpr-menu">
          
<li class="menu-item-on menu-item-privacy_overview menu-item-selected">
  <button data-href="#privacy_overview" class="moove-gdpr-tab-nav" aria-label="Privacy Overview">
    <span class="gdpr-nav-tab-title">Privacy Overview</span>
  </button>
</li>

<li class="menu-item-strict-necessary-cookies menu-item-off">
    <button data-href="#strict-necessary-cookies" class="moove-gdpr-tab-nav" aria-label="Strictly Necessary Cookies">
      <span class="gdpr-nav-tab-title">Strictly Necessary Cookies</span>
    </button>
  </li>

</ul>
        
<div class="moove-gdpr-branding-cnt">
  		<a href="https://wordpress.org/plugins/gdpr-cookie-compliance/" rel="noopener noreferrer" target="_blank" class='moove-gdpr-branding'>Powered by  <span>GDPR Cookie Compliance</span></a>
		</div>
      </div>
      
      <div class="moove-gdpr-modal-right-content">
        <div class="moove-gdpr-modal-title">
           
        </div>
        
        <div class="main-modal-content">

<div class="moove-gdpr-tab-content">
            
<div id="privacy_overview" class="moove-gdpr-tab-main">
      <span class="tab-title">Privacy Overview</span>
    <div class="moove-gdpr-tab-main-content">
  	<p>This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.</p>
  	  </div>

</div>
            
  <div id="strict-necessary-cookies" class="moove-gdpr-tab-main" style="display:none">
    <span class="tab-title">Strictly Necessary Cookies</span>
    <div class="moove-gdpr-tab-main-content">
      <p>Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.</p>
      <div class="moove-gdpr-status-bar ">
        <div class="gdpr-cc-form-wrap">
          <div class="gdpr-cc-form-fieldset">
            <label class="cookie-switch" for="moove_gdpr_strict_cookies">    
              <span class="gdpr-sr-only">Enable or Disable Cookies</span>        
              <input type="checkbox" aria-label="Strictly Necessary Cookies"  value="check" name="moove_gdpr_strict_cookies" id="moove_gdpr_strict_cookies">
              <span class="cookie-slider cookie-round" data-text-enable="Enabled" data-text-disabled="Disabled"></span>
            </label>
          </div>
          
        </div>
        
      </div>
      
              <div class="moove-gdpr-strict-warning-message" style="margin-top: 10px;">
          <p>If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.</p>
        </div>
        
                                              
    </div>
    
  </div>
  
            
            
            
          </div>
          
        </div>
        
        <div class="moove-gdpr-modal-footer-content">
          <div class="moove-gdpr-button-holder">
			  		<button class="mgbutton moove-gdpr-modal-allow-all button-visible" aria-label="Enable All">Enable All</button>
		  					<button class="mgbutton moove-gdpr-modal-save-settings button-visible" aria-label="Save Settings">Save Settings</button>
				</div>
        </div>
        
      </div>

</div>
    
  </div>
  
  
	</body>
</html>

Einführung in HTML und CSS

` bis `

` sowie `` für Absätze. Diese Elemente leisten einen wichtigen Beitrag zur Semantik und Zugänglichkeit der Webseite.

Was ist CSS?

Definition von CSS

Selektoren in CSS

CSS-Eigenschaften

Fortgeschrittene HTML-Elemente

Formulare in HTML

` sowie `
` für Absätze. Diese Elemente leisten einen wichtigen Beitrag zur Semantik und Zugänglichkeit der Webseite.