Zentrale Technologien, die der Browser verwendet:
HTML besteht aus verschachtelten Elementen, die von Tags begrenzt werden.
<h1>Dies ist eine Ãœberschrift</h1>
Manche HTML-Elemente haben keinen Inhalt, z.B. der br-Tag, der einen Zeilenumbruch darstellt:
<br />
oder
<br>
HTML-Elementen können Attribute der folgenden Form zugewiesen werden:
<img src="portrait.png" alt="Portraitbild des Benutzers" />
Die Werte stehen üblicherweise in doppelten Anführungszeichen
Beispiele:
<!-- dies ist ein Kommentar -->
https://codesandbox.io/s/ → static
(Alternativen: https://codepen.io https://jsfiddle.net, https://plnkr.co)
Ãœbung: Bestehende Website in Browser Tools begutachten
<!DOCTYPE html>
<html lang="de">
<head></head>
<body></body>
</html>
<!DOCTYPE html>
Deklariert die Datei als HTML(5)-Dokument
<html>: beinhaltet das ganze Dokument; oft ist z.B. lang="de" oder ähnliches gesetzt<head>: beinhaltet Informationen wie Dokumenttitel, Zeichensatz, ...<body>: die eigentlichen Inhalte - das, was im Browserfenster erscheintUm die folgenden Zeichen in einem HTML-Dokument darzustellen, sollten sie immer "escaped" werden:
< wird zu <> wird zu >& wird zu &Folgende Zeichen müssen in HTML-Attributen escaped werden:
" wird zu "' wird zu ', wenn das Attribut mit ' begrenzt wird)In HTML wird jede Abfolge von "Whitespace"- Zeichen (Leerzeichen, Zeilenumbrüche, Tabs) als einzelnes Leerzeichen interpretiert.
Die folgenden Beispiele sin äquivalent (und stellen ein einzelnes Leerzeichen zwischen den Bildern dar):
<img src="foo.png" /> <img src="bar.png" />
<img src="foo.png" /> <img src="bar.png" />
<img src="foo.png" />
<img src="bar.png" />
Beispiel für mehrzeilige Formatierung, falls wir Elemente ohne Leerzeichen dazwischen darstellen wollen:
<img src="image1.png" /><img src="image2.png" /><img
src="image3.png"
/>
Möglichkeit, vorgefertigte Stile einzubinden und in mehreren HTML-Dokumenten zu übernehmen
Stylesheets können aus vorgegebenen Libraries eingebunden werden (z.B. Bootstrap) oder selbst erstellt werden
Einbindung meist im head, z.B.:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
/>
Resets: Stylesheets, die grundlegende Stile über verschiedene Browser hinweg vereinheitlichen:
CDN: Content Delivery Network - Services, die CSS- und JS-Libraries hosten
CSS Libraries:
vollständige Liste:
Wir erstellen eine Website für ein Restaurant
Inhalte z.B.: Tabelle mit Öffnungszeiten, Formular für Reservierungen, ...
h1-Elemente innerhalb von nav, aside, article, section haben automatisch angepasste Größen:
<h1>big heading</h1>
<section>
<h1>medium heading</h1>
...
</section>
<section>
<h1>medium heading</h1>
<section>
<h1>small heading</h1>
<p>...</p>
</section>
</section>
Beispiel:
<a href="https://en.wikipedia.org/wiki/HTML"
>Wikipedia article</a
>
Öffnen in neuem Tab oder Fenster:
<a
href="https://en.wikipedia.org/wiki/HTML"
target="_blank"
rel="noreferrer"
>Wikipedia article</a
>
E-Mail-Link:
<a href="mailto:foo@bar.com">send e-mail</a>
Download-Link:
<a href="report.ods" download>report</a>
in der Praxis:
em oder i für kursivstrong oder b für fetttatsächliche Bedeutung laut HTML 5 Standard:
em - Betonungi - Eigennamen, technische Begriffe, Fremdwörter, ...strong - Wichtigkeitb - andere HervorhebungBeispiele:
Mein nächstes Hany <em>muss</em> ein <i>FooPhone</i> sein.
<strong>Das Event wurde</strong> aufgrund von schlechtem
Wetter <strong>abgesagt</strong>.
div: allgemeines Block-Elementspan: allgemeines Inline-ElementBlock-Elemente: untereinander angeordnet, so breit wie möglich
Inline-Elemente: nebeneinander angeordnet, so breit wie ihr Inhalt
ul (unordered list)ol (ordered list - nummeriert)li (list item)Beispiel:
<h1>tetrapods:</h1>
<ul>
<li>amphibians</li>
<li>reptiles</li>
<li>birds</li>
<li>mammals</li>
</ul>
verschachtelte Liste:
<h1>vertebrate:</h1>
<ul>
<li>fish</li>
<li>
tetrapods
<ul>
<li>amphibians</li>
<li>reptiles</li>
<li>birds</li>
<li>mammals</li>
</ul>
</li>
</ul>
Elemente:
buttonforminputlabelselect<form action="/register" method="post">
<div>
<label
>first name: <input type="text" name="firstname"
/></label>
</div>
<div>
<label
>last name: <input type="text" name="lastname"
/></label>
</div>
<button type="submit">register</button>
</form>
<button>press me!</button>
Button-Typen:
<input />
<input type="password" />
Standardwert: text
Weitere Möglichkeiten:
checkboxradiofilepassworddate (HTML 5)email(HTML 5)number (HTML 5)search (HTML 5)Mögliche Werte des autocomplete-Attributs:
namegiven-nameemailusernamerequiredminlengthmaxlengthCSS-Pseudoklassen: :valid, :invalid
<input
type="number"
min="-5"
max="5"
step="0.1"
value="1"
/>
Inputs sollten beschreibende Labels haben:
<label
>enter your name:
<input />
</label>
oder
<label for="name-input">enter your name:</label>
<input id="name-input" />
<form action="/register" method="post">
first name: <input type="text" name="firstname" /><br />
last name: <input type="text" name="lastname" /><br />
<button type="submit">register</button>
</form>
Beim Abschicken des Formulars wird post-Request mit etwa folgendem Inhalt an die Adresse /register gesendet:
firstname=John&lastname=Doe
imgvideoaudioAttribute:
src: Pfad zum Bildalt: Alternativtext, falls das Bild nicht dargestellt werden kannsrcset: Liste von Bildpfaden für verschiedene Auflösungen<img
alt=""
src="images/2000x1000.png"
srcset="
images/500x250.png 500w,
images/1000x500.png 1000w
"
/>
<video autoplay loop controls width="250">
<source src="myvideo.webm" type="video/webm" />
<source src="myvideo.mp4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
Beispielvideo: https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm
<audio src="myaudio.mk" loop volume="0.5"></audio>
relevante Bildformate für das Web:
relevante Videoformate für das Web:
siehe auch: Wikipedia: HTML5 video
Tags:
tabletbody)thead)trth, tdcaptionAttribute:
colspan, rowspantitlemetaDokumenttitel (erscheint in der Fensterleiste)
<title>my website</title>
zum Einbinden verschiedener Metadaten über das Dokument
Es sollte heutzutage immer <meta charset="UTF-8" /> angegeben sein, dann können generell beliebige Unicode-Zeichen verwendet werden.
<button>😊</button>
Sollte auf allen Websites verwendet werden, um die Browser-Skalierung zurückzusetzen
<meta name="viewport" width="device-width" />
Hintergrund:
In den Anfängen des mobilen Web (vor responsive Design) wurden Websites von mobilen Browsern of verkleinert dargestellt. Mit obigem Code wird dies verhindert.
Kann von Suchmaschinen verwendet werden, um eine Seitenzusammenfassung anzuzeigen
Standardtitel für Lesezeichen
<meta
name="description"
content="Wikipedia is a free online encyclopedia, ..."
/>
Kann von Suchmaschinen verwendet werden
<meta name="keywords" content="HTML,javascript" />
Icon, das im Tab der Website angezeigt wird:
<link
rel="icon"
sizes="32x32"
href="favicon_32.png"
type="image/png"
/>
ohne einen expliziten Link suchen Browser nach favicon.ico
Strategien, um Websites für möglichst viele Menschen verwendbar zu machen
Relevante Gruppen:
Strategien:
button und section statt div)<img
src="dinosaur.png"
alt="A red Tyrannosaurus Rex:
A two legged dinosaur standing upright, with small arms,
and a large head with lots of sharp teeth."
title="The Mozilla red dinosaur"
/>
button, a, form, input)Hosting für statische Websites wird vielfach kostenlos angeboten:
CSS-Framework, mit dem HTML-Seiten gestaltet werden können - selbst muss man kein oder kaum CSS schreiben
body, h1, button, ... verändert sichclass kann gesetzt werdenWir erstellen eine einfache Website - z.B. für ein Restaurant.
Inhalt unter anderem:
Container = grundlegender Baustein für bootstrap, oberste Unterteilungsebene für das Dokument
<div class="container-fluid">: Container, der die ganze Seitenbreite einnimmt<div class="container">: Container, der auf bestimmte Größen (Breakpoints) "einrastet"Mit Klassen container, row und col
<div class="container">
<div class="row">
<div class="col">one</div>
<div class="col">two</div>
<div class="col">three</div>
</div>
<div class="row">
<div class="col">four</div>
<div class="col">five</div>
</div>
</div>
Margins sind Abstände von Elementen. Sie helfen beim gestalten von Layouts.
Bootstrap bietet hierzu vorgefertigte Klassen, z.B.:
ml-auto: margin-left: automl-1: kleiner Margin linksmt-4: großer Margin oben (top)my-2: mittlerer Margin in y-Richtung (oben und unten)z.B.:
Präsentation: VS Code Grundlagen und Plugins
Codeschnipsel: html:5
SVG (scalable vector graphics): XML-basiertes Format für Vektorgrafiken
Attribute (Beispiele):
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="1000"
height="500"
viewBox="-500 0 1000 500"
></svg>
g: Grupperectcircleellipsetext, tspanpathid, classtransform (z.B. "rotate(180)", "translate(20 30)")x, y (Position)stroke (Linienfarbe)fill (Füllfarbe)<rect x="50" y="50" width="20" height="200" fill="darkgrey">
<circle r="10" cy="290"/>
<ellipse cy="60" rx="30" ry="50"/>
Element path, Attribut d
Rechteck:
<path d="M 0,0 L 10,0 L 10,10 L 0,10 L 0,0">
M: move toL: line toH: horizontal line toV: vertical line toQ: quadratic bézier curve toT: smooth quadratic bézier curve toC: cubic bézier curve toS: smooth cubic bézier curve toA: elliptical arc toZ: close pathAlle Pfadbefehle sind auch als relative Koordinatenangaben möglich (mit klein geschriebenen Befehlsnamen):
<path d="M 500,500 l 10,10">
ist äquivalent zu:
<path d="M 500,500 L 510,510">
<g>
<rect width="10" height="10">
<rect x="20" width="10" height="10">
</g>
Via Attribut transform:
<rect transform="translate(250, 0) rotate(-90, 50, 50)"/>
<g fill="grey" stroke="black" stroke-width="3">
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1" width="500" height="500" viewBox="0 0 500 500">
<g
transform="translate(250, 0) rotate(45, 0, 160)"
fill="grey">
<rect y="100" x="-10" width="20" height="190"/>
<circle r="10" cy="290"/>
<ellipse cy="60" rx="35" ry="55"/>
</g>
<g
transform="translate(250,0) rotate(-45, 0, 160)"
fill="darkgrey">
<path d="
M -10,310 L 10,310 L10,100
C 10,90 20,80 20,70
L 19,0 L13,0 L11,70 L5,70 L3,0
L-3,0 L-5,70 L-11,70 L-13,0 L-19,0 L-20,70
C-20,80 -10,90 -10,100 Z"/>
</g>
</svg>