tbz-repos/aktuelle.kurse
1
0
Fork 0
mirror of https://gitlab.com/harald.mueller/aktuelle.kurse.git synced 2024-11-28 04:31:56 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity
0f917a27df
aktuelle.kurse/oldies/m239/unterlagen/40 - Protokolle/Protokoll HTTP/10 - Wie funktioniert das HTTP-Protokoll

470 lines
25 KiB
Plaintext
Raw Normal View History

muh
2022-05-15 21:40:59 +02:00
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.mediaevent.de/tutorial/http-request.html">
<link rel="alternate" href="https://www.mediaevent.de/tutorial/http-request.html" hreflang="de-DE">
<title>Der HTTP-Request: Daten vom Server holen | mediaevent.de</title>
<link rel="preload" href="https://www.mediaevent.de/tutorial/svg/http-request.svg" as="image">
<meta name="description" content="Die Webseite mit mit Bildern, CSS- und Javascript-Dateien wird nicht in einem Rutsch übertragen, sondern Datei für Datei. Jede Anfrage ist ein HTTP-Request.">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="https://www.mediaevent.de/style/style.css">
<script async src="https://cdns.yieldscale.com/mediaevent.de/mediaevent.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<style>
dl {
display: grid;
gap: 10px;
grid-template-columns: 120px calc(100% - 120px);
}
@media (min-width:600px) {
dl {
grid-template-columns: 240px calc(100% - 240px);
}
}
dt, dd {
margin-left: 0;
padding: 6px 4px
}
dt:nth-child(4n -1),
dd:nth-child(4n) {
background-color: #efefef
}
</style>
<meta property="og:url" content="https://www.mediaevent.de/tutorial/http-request.html">
<meta property="og:title" content="Der HTTP-Request: Daten vom Server holen | mediaevent.de">
<meta property="og:description" content="Die Webseite mit mit Bildern, CSS- und Javascript-Dateien wird nicht in einem Rutsch übertragen, sondern Datei für Datei. Jede Anfrage ist ein HTTP-Request.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://www.mediaevent.de/tutorial/svg/http-request.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" content="https://www.mediaevent.de">
<meta name="twitter:url" content="https://www.mediaevent.de/tutorial/http-request.html">
<meta name="twitter:title" content="Der HTTP-Request: Daten vom Server holen | mediaevent.de">
<meta name="twitter:description" content="Die Webseite mit mit Bildern, CSS- und Javascript-Dateien wird nicht in einem Rutsch übertragen, sondern Datei für Datei. Jede Anfrage ist ein HTTP-Request.">
<meta name="twitter:image" content="https://www.mediaevent.de/tutorial/svg/http-request.png">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebPage",
"headline": "Der HTTP-Request: Daten vom Server holen",
"datePublished": "2007-08-09",
"dateModified": "2021-11-18",
"lastReviewed": "2021-11-18",
"description": "Die Webseite mit mit Bildern, CSS- und Javascript-Dateien wird nicht in einem Rutsch übertragen, sondern Datei für Datei. Jede Anfrage ist ein HTTP-Request,",
"primaryImageOfPage": "https://www.mediaevent.de/tutorial/svg/http-request.svg",
"image": "https://www.mediaevent.de/tutorial/svg/http-request.png"
}
</script>
</head>
<body class="cat-tutorial">
<!--sphider_noindex-->
<div class="top-menu">
<ul class="reframe">
<li><a href="https://www.mediaevent.de/" rel="home">Home</a></li><li><a href="/anfrage.html">Kontakt</a></li><li><a href="/impressum.html">Impressum</a></li><li><a href="/datenschutz.html">Datenschutz</a></li>
</ul>
</div>
<header class="branding">
<div class="layout-row layout-flexbox">
<div id="top-logo"><a href="https://www.mediaevent.de/" aria-label="mediaevent.de Home-Link – Logo"><svg viewBox="0 0 300 300" width="68" height="68"><title>mediaevent.de Home – Logo</title><path id="m1" d="M 134 3 C 115.5 3 95 16 88.5 36 C 83 53.7 83 70 83 70 C 83 70 52 58.7 24.6 90 C -5 123 13 178 13 178 L 59 226.4 L 90 196 L 37 143.4 C 37 143.4 35.5 134 43 124.4 C 54 111 63.2 105 80 121.4 C 89.27 130.8 106.5 148 121.8 163.7 L 153 132.4 L 101 80 C 101 80 99 71 107 61 C 117.6 47.7 127 41.5 143.4 58 C 152.8 67.55 170 85 185 100.3 L 216.2 69.3 C 200 53 174 27 156.4 11 C 150.5 5.4 142.5 3 134 3 z " /><use xlink:href="#m1" fill="hsl(12,60%,50%)" /><use transform="translate(280,300) rotate(180)" xlink:href="#m1" fill="hsl(12,60%,70%)" /></svg></a></div>
<div class="site-title"><a href="https://www.mediaevent.de/" rel="home">🇺🇦 CSS, HTML und Javascript mit {stil}</a></div>
</div>
</header>
<nav class="topbar">
<input type="checkbox" id="hamburg"><label for="hamburg" class="hamburg"><span class="hamburg-line1"></span><span class="hamburg-line2"></span><span class="hamburg-line3"></span></label>
<ul class="layout-row">
<li class="menu-css"><a href="/css/">CSS</a></li>
<li class="menu-html"><a href="/html/">HTML</a></li>
<li class="menu-javascript-basis"><a href="/javascript/">Javascript <span>Basis</span></a></li>
<li class="menu-javascript"><a href="/javascript/DOM.html">Javascript <span>für Webseiten</span></a></li>
<li class="menu-tutorials"><a href="/tutorial/">Tutorials</a></li>
<li class="menu-svg"><a href="/tutorial/svg.html">SVG / 3D-Canvas <span>MathML</span></a></li>
</ul>
</nav>
<!--/sphider_noindex-->
<img src="https://ssl-vg03.met.vgwort.de/na/aa43bb9e91a14239980e5913106fc3d7" width="1" height="1" alt="">
<header class="entry-header">
<div class="layout-row">
<time datetime="2021-11-18">Nov 2021</time>
<h1>Der HTTP-Request: Daten vom Server holen</h1>
</div>
</header>
<div class="main-line">
<div class="headsvg">
<img src="https://www.mediaevent.de/tutorial/svg/http-request.svg" width="720" height="432" alt="Webdesign: HTTP-Request und HTTP2">
</div>
<div class="excerpt">
<p>Die Webseite mit ihren Ressourcen wie Bildern, CSS- und Javascript-Dateien wird nicht in einem Rutsch übertragen, sondern Datei für Datei. CSS- und Javascript-Dateien sowie Bilder der HTML-Seite werden mit weiteren Anfragen an den Server geladen, und jede Anfrage ist ein HTTP-Request.</p>
<p>Für diesen Ablauf ist das HTTP-Protokoll zuständig. Protokolle regeln den Nachrichtenaustausch und die Formatierung von Daten zwischen Client (z.B. Browser) und Server.</p>
</div>
<div class="adds topadds" aria-hidden="true">
<div id="mediaevent_mr_1"></div>
</div>
<div class="search">
<form class="scout cf" action="/webscout/search.php" method="get" id="searchform">
<input type="text" name="query" id="squery" maxlength="64" placeholder="Suchbegriff(e)" value="">
<label for="sub"><button id="sub" type="submit">Suchen</button></label>
<input type="hidden" name="search" value="1">
</form>
</div>
<header class="sitemap">
<svg width="200" height="40" viewBox="0 0 500 80">
<title>18-12-15</title>
<g style="cursor:pointer">
<g stroke="#000" stroke-width="12" stroke-linecap="round">
<path d="m 10,18 100,0"></path><path d="m 30,43 80,0"></path><path d="m 50,68 60,0"></path></g>
<text font-size="50" font-weight="400">
<tspan x="130" y="55">SITEMAP</tspan>
<tspan class="hiding cat-css" y="55">CSS</tspan>
<tspan class="hiding cat-html" y="55">HTML</tspan>
<tspan class="hiding cat-js-basis" y="55">JS Basis</tspan>
<tspan class="hiding cat-js" y="55">JS Web</tspan>
<tspan class="hiding cat-tut" y="55">Tutorial</tspan>
<tspan class="hiding cat-svg" y="55">SVG</tspan>
</text>
</g>
</svg>
</header>
</div>
<main>
<div class="entry-content">
<section data-title="Protokoll">
<h2>HTTP – Hypertext Transfer-Protokoll</h2>
<p>Die prominentesten Protokolle des Internets sind <a href="https://www.ietf.org/rfc/rfc2616.txt">HTTP (Hypertext Transfer Protocol)</a> und FTP (File Transfer Protocol). POP3 ist ein Protokoll für den Emailabruf, SSH (Secure Shell) ein verschlüsseltes Terminal für den Remote Zugang zum Server.</p>
<figure style="max-width:640px;margin-left:auto;margin-right:auto">
<img src="svg/http-request-ablauf.svg" width="1200" height="318" alt="http-request-ablauf">
<figcaption>Ablauf beim HTTP-Request</figcaption>
</figure>
<p>Wenn der Benutzer eine Adresse in das Adressfeld seines Browsers eingibt oder ein Formular an die Adresse im action-Attribut absendet, wird die Adresse als HTTP-Request an den Server geschickt. Der Browser ist der HTTP-Client und der Server ist der HTTP-Server.</p>
<p>HTTP ist ein zustandloses Protokoll. Nach einer Datenübertragung muss die Verbindung zwischen dem Client und dem Server nicht aufrecht erhalten werden.</p>
<p>Bei der Übertragung weiterer Daten muss der Client eine neue Verbindung aufbauen, die nichts über den vorangegangenen Ablauf weiß. Für eine Webseite mit vier Bildern und einem Stylesheet waren beim HTTP 1.0-Protokol noch sechs Anfragen erforderlich, das HTTP 1.1-Protokoll hingegen konnte schon mehrere Anfragen und Antworten innerhalb einer Verbindung austauschen und abgebrochene Verbindungen fortsetzen.</p>
</section>
<section data-title="HTTP 2">
<h2>HTTP 2</h2>
<p>Seit 2015 ist HTTP/2 der neue Standard – mit besserer Performance als HTTP/1.1, besserer Komprimierung des HTTP-Headers und vor allem Dank des Multiplexing mehrerer simultaner Requests auf derselben Verbindung.</p>
<p>Den ganz großen Durchbruch bei der Geschwindigkeit bringt HTTP/2 nicht, denn HTTP/2 ist kompatibel zu HTTP/1.1 geblieben und erfordert außerdem eine verschlüsselte Verbindung (HTTPS), die den Transfer einen Tick verlängert. Aber dank der Kompatibilität bleiben uns die lieben alten Funktionen vom Cookie bis zum GET und POST erhalten.</p>
</section>
<div class="block-cover">
<div class="svginside" style="max-width: 1300px">
<img loading="lazy" src="svg/http1-1.svg" width="1400" height="366" alt="HTTP 1.1">
</div>
<div class="svginside" style="max-width: 1300px">
<img loading="lazy" src="svg/http2.svg" width="1400" height="366" alt="HTTP 1.1">
</div>
</div>
<section data-title="HTTP-Request und HTTP-Response">
<h2>HTTP-Request und HTTP-Response</h2>
<p>Nach dem Aufbau einer Verbindung zum Server überträgt der HTTP-Client einen Request in einem festgelegten Format:</p>
<ul>
<li>eine Anfangszeile</li>
<li>eine Reihe von Headerzeilen </li>
<li>eine Leerzeile</li>
<li>eine Nachricht (optional)</li>
</ul>
<p>Die dreiteilige Anfangszeile besteht aus dem Namen der Methode, dem Pfad zur angeforderten Ressource und der verwendeten HTTP-Version. Eine typische Anfrage kann folgendermaßen aussehen</p>
<div class="codebox">
<h6>HTTP 1.1 Request </h6>
<p>(Angabe einer voll qualifizierten URL und die Headerzeile HOST erforderlich)</p>
<pre>
GET http://wisotop.de/test.html HTTP/1.1
HOST: wisotop.de
</pre>
</div>
<p>Headerzeilen senden zusätzliche Informationen über den Request oder die Daten des Nachrichtenbodys, z.B. die gewünschte Sprache. Jede Headerzeile vermerkt ein Name-/Wertpaar, wobei Name und Wert durch einen Doppelpunkt getrennt werden.</p>
<pre>
User-Agent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; de; rv:1.8.0.4)
Gecko/20060508 Firefox/1.5.0.4
Accept: */*
</pre>
<p>Das Acceptfeld signalisiert dem Server, welche Formate der Client akzeptiert. Da moderne Server nahezu alle Formate verarbeiten können, wird meist der Mime-Typ */* verwendet.</p>
</section>
<section data-title="HTTP-Response">
<h2>HTTP-Response</h2>
<p>Als Antwort auf einen derartigen Request sendet der Server eine HTTP-Response, wobei die erste Zeile auch als Statuszeile bezeichnet wird. In dieser Zeile gibt der Server die HTTP-Version als Echo zurück sowie einen Response-Statuscode im Form von drei Ziffern und eine kurze Textnachricht, die als Reason Phase bezeichnet wird.</p>
<pre>
HTTP/1.1 200 OK
Server: Apache/2.0.49
Content-Language: de
Content-Type: text/html
User-Agent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/312.8
</pre>
<p>Der Response-Statuscode und die Reason Phase sind Klartext-Mitteilungen derselben Nachricht, wobei die Reason Phase von Server zu Server ein wenig variieren kann.</p>
<dl>
<dt>1** - Information</dt><dd>Informationsmeldungen</dd>
<dt>2**—Success</dt><dd>Die Anfrage wurde erfolgreich durchgeführt</dd>
<dt>200 - OK</dt><dd>Die Anfrage war erfolgreich</dd>
<dt>204 - No Content</dt><dd>Das Dokument enthält keine Daten</dd>
<dt>3**—Redirected</dt><dd>für eine erfolgreiche Bearbeitung der Anfrage werden weitere Informationen benötigt</dd>
<dt>301 - Moved Permanently</dt><dd>Das angefragte Dokument ist dauerhaft zu einer anderen URI umgezogen</dd>
<dt>4**—Client error </dt><dd>Wahrscheinlich liegt die Ursache für das Scheitern einer Anfrage beim Client</dd>
<dt>401 - Not Authorized</dt><dd>Der Request muss vom Benutzer authentifiziert werden</dd>
<dt>403 - Forbidden</dt><dd>Der Server weist den Request zurück</dd>
<dt>404 - Not Found</dt><dd>Die angeforderte Ressource existiert nicht</dd>
<dt>5**—Server error</dt><dd></dd>
<dt>500 - Internal Server Error</dt><dd>wahrscheinlich liegt die Ursache des Scheitern einer Anfrage beim Server</dd>
<dt>503 - Service Unavailable</dt><dd></dd>
</dl>
<p>Die Antwort kann ebenfalls Headerzeilen enthalten, von denen jede aus einem Header und einem Wertepaar besteht.</p>
<pre>
HTTP Status Code: HTTP/1.1 200 OK
Server: Apache/2.0.49 (Linux/SuSE)
Date: Thu, 13 Jul 2006 07:19:43 GMT
Content-Type: text/html
Connection: close
</pre>
</section>
<section data-title="Die HTTP-Request-Methoden">
<h2>Die HTTP-Request-Methoden</h2>
<p>Mit den Methoden des HTTP-Requests sind wir vertraut, sobald wir das erste <a href="/html/form.html">Formular auf eine Webseite</a> setzen. Dabei beschränkt sich die Begegnung auf die Methoden GET und POST.</p>
<dl>
<dt>GET</dt><dd>Inhalte vom Server anfordern.</dd>
<dt>POST</dt><dd>Sendet Daten zum Server: Inhalte vom Server anfordern und zusätzlich einen Datenblock aus Name-/Wertpaaren (z.B. aus einem Formular) übermitteln. Grundsätzlich können Daten auch mit GET übertragen werden, aber die zulässige Datenmenge bei POST ist größer.</dd>
<dt>HEAD</dt><dd>Weist den Server an, den HTTP-Header, nicht jedoch den Inhalt des Dokuments zu senden. So kann z.B. die Existenz einer gelinkte Seite geprüft werden.</dd>
<dt>PUT</dt><dd>Führt ein Update auf einer Ressource durch – Dateien auf den Webserver laden. Wird aus Sicherheitsgründen kaum implementiert.</dd>
<dt>DELETE</dt><dd>Löscht die Datei auf dem Server. Wird aus Sicherheitsgründen kaum implementiert.</dd>
<dt>TRACE </dt><dd>liefert die Anfrage so zurück, wie der Server sie empfangen hat. Wird z.B. für das Debuggen von Verbindungen benutzt, ist aber auf vielen Servern aus Sicherheitsgründen nicht implementiert.</dd>
<dt>CONNECT</dt><dd>wird von Proxy-Servern implementiert</dd>
<dt>PATCH</dt><dd>Änderungen an einer Ressource</dd>
</dl>
</section>
<section data-title="HTTP/2">
<h2>HTTP/1.1 und HTTP/2</h2>
<p>HTTP1 wurde 1996 definiert, als Webseiten nur selten mehr als 20 KB erreichten, als CSS noch über den Wolken hing und Javascript nur für die Validierung von Formularen und simple Effekte eingesetzt wurde.</p>
<p>HTTP/1.1 wurde 1997 vorgestellt, 1999 und 2014 gab es Updates. Der wichtigste Unterschied dürfte die Unterstützung mehrerer Verbindungen pro Request sein. Mehrere Verbindungen – das bringt eine kürzere Latenzzeit (Verzögerung zwischen Request und Response).</p>
<p>HTTP/2 ist die jüngste Fassung. Der Server kann Daten übertragen, die vom Client noch gar nicht angefordert wurden, die aber für die vollständige Darstellung der Seite gebraucht werden. HTTP/2 kann zusätzliche Requests über eine einzige TCP-Verbindung bündeln und gleichzeitig übertragen – auf die Antwort zu warten: kürzere Wartezeiten.</p>
<p>Sowohl Server also auch Client müssen HTTP/2 unterstützen – alle modernen Browser schaffen das. Wenn der Server HTTP/2 unterstützt, holt sich der Browser die Seiten automatisch über HTTP/2. HTTPS erforderlich: Wenn der Browser keine verschlüsselte Verbindung aushandeln kann, fällt er auf HTTP/1.1-Protokoll zurück.</p>
</section>
<section>
<h2>HTTP/2 – Auswirkungen auf das Webdesign</h2>
<p>Auch wenn HTTP/2 Webseiten keine Flügel verleiht und vom Benutzer mehr oder minder kaum wahrgenommen wird, hat der Einsatz von HTTP/2 Auswirkungen auf das Webdesign.
<p>Wo früher Image Spites viele relativ kleine Bilder zu einem großen Bild zusammen gesetzt haben, damit das CSS sie wieder auseinander pflückte, kann man sich diesen aufwändigen Prozess mit HTTP/2 in vielen Fällen sparen. Dasselbe gilt für das <a href="/javascript/performance.html">Zusammenstellen großer Javascript-Dateien</a> aus der Vielzahl der verwendeten Scripte und auch für CSS-Dateien.
Mit HTTP/2 bringen diese Verfahren nicht mehr dieselben Vorteile wie in HTTP/1.1, dafür u.U. aber neue Nachteile:
<ul>
<li>Der Benutzer bekommt große Dateien serviert, von denen er vielleicht nur einen Teil tatsächlich braucht. Mit HTTP/2 ist es sinnvoller, Ressourcen effizient nur dort einzusetzen, wo sie gebraucht werden.
<li>Eine Base64-Data-URL ist ebenfalls eher kontraproduktiv im Vergleich zum Einbinden der Datei.
<li>HTTP2 kann Inline-Inhalte nicht cachen. Modulare externe CSS- und Javascript-Dateien hingegen können effizient gecacht werden, ohne einen zusätzlichen Request zum Server anzufordern.</li>
</ul>
<p>Die sichtbaren Geschwindigkeitsvorteile sind – wie bereits erwähnt – kein berauschender Höhenflug, sondern bei der Betrachtung der Ladezeit einzelner Seiten eher <em>naja, nett</em>. Sichtbar werden die Vorteile von HTTP 2 bei hohen Besucherzahlen in der Gesamtbeurteilung.</p>
<p>Ob die Seiten über HTTP 1.1 oder HTTP 2 geliefert werden, kann man in der Chrome-Console testen:</p>
<pre>
console.log(performance.getEntries()[0].nextHopProtocol)
</pre>
<p>Bei HTTP2 ist die Antwort kurz und bündig h2, ansonsten http/1.1.</p>
<div style="display:none" class="headers"></div>
</section>
<section data-title="Cookies und Query-Strings">
<h2>Cookies und Query-Strings</h2>
<p>Aber auch mit HTTP/2 hat das HTTP-Protokoll kein Gedächtnis. Um Informationen von einer HTML-Seite auf die nächste Seite zu schaffen (z.B. bei mehrseitigen Formularen) müssen Verfahren wie <a href="/javascript/cookies.html">Cookies</a>, Query-Strings oder PHP-Session eingesetzt werden.</p>
</section>
<nav>
<h3>Mehr zum HTTP-Request</h3>
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li itemprop="name"><a itemprop="url" href="/javascript/formulare-http.html">Wie funktionieren Formulare in Webseiten?</a> HTML alleine reicht nicht für die Formularverarbeitung.</li>
<li itemprop="name"><a itemprop="url" href="/javascript/XmlHttp-Request.html">Javascript XMLHttpRequest und Ajax</a> Datenaustausch zwischen Client und Server, ohne die Seite neu zu laden.</li>
<li itemprop="name"><a itemprop="url" href="/javascript/data-attribute.html">Javascript data-attribute</a> speichern alles, was in einem String stehen kann – ähnlich wie JSON.</li>
</ul>
</nav>
<aside>
<h3>Externe Quellen</h3>
<ul>
<li><a href="https://en.wikipedia.org/wiki/HTTP/2">HTTP 2</a> auf Wikipedia</li>
<li><a href="https://www.sitepoint.com/what-is-http2/">What is HTTP/2?</a></li>
<li><a href="https://http2.github.io/http2-spec/">Hypertext Transfer Protocol Version 2 (HTTP/2)</a></li>
<li><a href="https://http2.github.io/faq/">HTTP/2 Frequently Asked Questions</a></li>
<li><a href="https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/">Introducing HTTP/2 Server Push with NGINX 1.13.9</a></li>
</ul>
</aside>
</div> <!-- entry-content -->
<!--sphider_noindex-->
<!-- begin secondary -->
<div class="secondary">
<nav id="nav_menu">
<header>
<svg width="200" height="60" viewBox="0 0 500 80">
<title>18-12-15</title>
<g stroke="#000" stroke-width="12" stroke-linecap="round">
<path d="m 10,22 100,0"/><path d="m 30,47 80,0" /><path d="m 50,72 60,0"/></g>
<text x="130" y="55" font-size="36" font-weight="400">SITEMAP TUTORIALS</text>
</svg>
</header>
<h4>CSS Positionieren</h4>
<ul>
<li><a href="/tutorial/">HTML und CSS – Einstieg ins Webdesign</a></li>
<li><a href="/tutorial/flexbox.html">Positionieren mit CSS3 Flexbox</a></li>
<li><a href="/tutorial/css-position-absolute-relative.html">Absolute und relative Positionierung</a></li>
<li><a href="/tutorial/css-position-absolute-in-relative.html">position:absolute in relativ positionierten Blöcken</a></li>
<li><a href="/tutorial/css-positionieren-float.html">float: Schwebende Elemente</a></li>
<li><a href="/tutorial/positionieren.html">Positionieren: So funktionieren Grid-Systeme</a></li>
<li><a href="/tutorial/positionieren2.html">Positionieren: Spalten gleicher Höhe</a></li>
<li><a href="/tutorial/columns-same-height.html">CSS-Grid: Spalten gleicher Höhe</a></li>
<li><a href="/tutorial/css-grid-tipps.html">CSS Grid-Tipps</a></li>
<li><a href="/tutorial/css-tipps.html">CSS Tipps: Seitenverhältnis mit Padding</a></li>
</ul>
<h4>Farbcodes, Sonderzeichen, <small>Maßeinheiten</small></h4>
<ul>
<li><a href="/tutorial/farbcodes.html">Farbcodes und Farbnamen</a></li>
<li><a href="/tutorial/html-sonderzeichen.html">HTML-Entities – Sonderzeichen</a></li>
<li><a href="/tutorial/sonderzeichen.html">Sonderzeichen / Symbole</a></li>
<li><a href="/tutorial/sonderzeichen-wetter-musik.html">Symbole von Astronomie bis Wetter</a></li>
<li><a href="/tutorial/masseinheiten.html">Maßeinheiten: Pixel, em, Prozent</a></li>
<li><a href="/tutorial/sprachcodes.html">HTML Sprachcodes »Gesprochene« Sprache der Webseite</a></li>
</ul>
<h4>CSS Animationen</h4>
<ul>
<li><a href="/tutorial/css-keyframes-slideshow.html"><i>Simple CSS Slideshow</i> einfach nur CSS</a></li>
<li><a href="/tutorial/keyframes-animation-timeline.html">Keyframes-Animation mit Timeline synchronisieren</a></li>
<li><a href="/tutorial/css-animation-keyframes.html"><i>CSS Animation</i> mit Keyframes</a></li>
<li><a href="/tutorial/css-accordeon.html"><i>CSS-Accordion</i> ohne Javascript</a></li>
<li><a href="/tutorial/css-tabs.html"><i>CSS-Tabs</i> ohne Javascript</a></li>
<li><a href="/tutorial/css-transform.html"><i>Hamburger-Icon</i> mit CSS und HTML</a></li>
<li><a href="/tutorial/css-responsive-menu.html">Navigations-Menü ohne Javascript</a></li>
<li><a href="/tutorial/css-gradient-animation.html"><i>CSS-Gradient</i> animieren</a></li>
<li><a href="/tutorial/css-overlay.html"><i>CSS Overlay</i> mit Vanilla Javascript</a></li>
</ul>
<h4>Video für Webseiten</h4>
<ul>
<li><a href="/tutorial/html-video.html">Videos Dateiformate</a></li>
<li><a href="/tutorial/internet-video-codecs.html">Video Codecs</a></li>
<li><a href="/tutorial/web-video.html">Video Datenrate und Auflösung</a></li>
<li><a href="/tutorial/html-video-tag-object-tag.html">Videos object-Tag vs video-Tag</a></li>
</ul>
<h4>Am Rande</h4>
<ul>
<li><a href="/tutorial/http-request.html">Der HTTP-Request</a>
<li><a href="/tutorial/php-sqlite3.html">PHP und SQLite3</a></li>
<li><a href="/tutorial/php-simplexml.html">PHP SimpleXML und XMP-Sidecar</a></li>
</ul>
</nav>
<!-- Anzeige -->
<div class="adds bottomadds">
<div id="mediaevent_mr_2"></div>
</div>
</div><!-- secondary --><!--sphider_noindex-->
</main> <!-- main -->
<!--sphider_noindex-->
<div class="bottom">
<div class="adds underadds">
<div id="mediaevent_lb_1"></div>
</div>
<div class="scrollup" title="Nach oben scrollen">
<svg height="70" width="70" viewBox="0 0 70 70" style="cursor:pointer"><rect rx="15" height="50" width="30" stroke="#666" y="18" x="22" stroke-width="3" fill="#fff"/><path d="m46.5 14l-9.3-9.3-9.3 9.3" stroke="#666" stroke-width="3" fill="none"/><path d="m37 25v8" stroke="#666" stroke-width="5" fill="none"/></svg>
</div>
</div>
<footer>
<div class="footer-cols">
<div class="cols" id="social">
<p>Wenn Sie einen Kommentar in ihrem Social Media-Account posten möchten, öffnet sich ein neues Fenster beim jeweiligen Dienst.</p>
<div class="socialicons">
<img id="soface" loading="lazy" src="https://www.mediaevent.de/xinc/soface.svg" width="308" height="308" alt="Facebook-Icon">
<img id="sotwit" loading="lazy" src="https://www.mediaevent.de/xinc/sotwitt.svg" width="308" height="308" alt="Facebook-Icon">
<img id="sopint" loading="lazy" src="https://www.mediaevent.de/xinc/sopint.svg" width="308" height="308" alt="Facebook-Icon">
</div>
</div>
<div class="cols">
<p><a href="/anfrage.html">Fragen, Meinungen, Anregungen? <br>Als Flaschenpost, traditionell oder per Brieftaube willkommen.</a></p>
<div class="kocon">
<a href="/anfrage.html" id="conicons">
<img loading="lazy" src="/xinc/mailme.svg" width="175" height="38" alt="Sag was dazu">
</a>
</div>
</div>
</div>
</footer>
<footer class="colofon">
<div class="footer-cols">
<div class="cols">Webdesign + Programmierung Häßler
<ul style="width:280px;">
<li><a href="/impressum.html">Impressum</a>
<li><a href="/datenschutz.html">Datenschutz</a>
<li><a href="#" onclick="window._sp_.loadPrivacyManagerModal(233883)">Cookie-Einstellungen überarbeiten</a>
</ul>
</div>
<div class="cols">Copyright © 2002-2022 mediaevent.de</div>
</div>
</footer>
<script async src="/wp-content/themes/cantate/js/scripts.js"></script>
<link rel="stylesheet" type="text/css" media="print" href="https://www.mediaevent.de/style/print.css">
<!--/sphider_noindex-->
<script>
var req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
var headers = req.getAllResponseHeaders().toLowerCase();
document.querySelector(".headers").innerHTML = headers;
</script>
</body>
</html>
Reference in New Issue Copy Permalink