<!DOCTYPE html>
<html lang=“de”>
<head>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF‑8”>
<title>Testseite von Jakob Graw
</title>
<!–
<title> bis 50 Zeichen, destso wenige ist besser, beschreibt kurz den kompletten Inhalt der Seite–>
<meta name=“content-language” content=“de”>
<meta name=“language” content=“Deutsch”>
<meta name=“publisher” content=“Jakob Graw”>
<meta name=“copyright” content=“Jakob Graw”>
<meta name=“page-topic” content=” “>
<meta name=“page-type” content=” “>
<meta name=“revisit” content=“After 30 days”>
<!–Tage nachdem die robots vorbei schauen–>
<meta name=“robots” content=“INDEX,FOLLOW”>
<!– index — die betroffene Seite soll aufgenommen werden noindex – Seite nicht aufnehmen follow — alle Links auf der Homepage weiterverfolgen und diese auch aufnehmen nofollow – die Links unberücksichtigt lassen. Und natürlich kann gemischt werden.–>
<link rel=“canonical” href=”/index.html”>
<!–bei mehreren Seiten gibt es nur eine richtige Seite für die Robots, mit rel=“canonical” (Regel entsprechend)–>
<meta name=“description” content=“Eine Übersicht des Tests.”>
<!–max. 150 Zeichen–>
<meta name=“author” content=“Jakob Graw”>
<meta name=“keywords” content=“Test, Probe, Lösung”>
<!–Wörter mit , oder ; trennen mit der die Seite gesucht wird, Wörter mit ö und oe schreiben–>
<meta name=“viewport” content=“width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes”>
<link rel=“shortcut icon” href=“bilder/favicon.ico” type=“image/x‑icon”>
<!–Favicon einbinden–>
<link href=“style.css” type=“text/css” rel=“stylesheet”>
<!–Dies ist für alte IE um alle neuen HTML5 Befehle zu deklarieren–>
<!–[if IE]>
<script src=”/bower_components/html5shiv/dist/html5shiv.js”>
</script>
<![endif]–>
<script src=”/bower_components/html5shiv/dist/html5shiv.js”>
</script>
</head>
<body id=“seite”>
<a href=“index.html”> Startseite
</a>
<h1 id=“seitentitel” class=“rot”>Testtitel
</h1>
<!–
<h..>
</h..> h = Header (Überschrift)
<h1>
</h1> Titel, nur einmalig auf der Seite auftauchen–>
<!–id = (Ausweiß, Identifikation); class = (Gruppe, Kategorei, Klasse, Stil)–>
<!–
<h2>
</h2> Überschrift
<h3>
</h3> Kapitel
<h4>
</h4> Unterkapitel 1
<h5>
</h5> Unterkapitel 2
<h6>
</h6> Unterkapitel 3 –>
<hr>
<ol vocab=“http://schema.org/” typeof=“BreadcrumbList”>
<li property=“itemListElement” typeof=“ListItem”>
<a property=“item” typeof=“WebPage” href=“https://example.com/dresses”>
<span property=“name”>Dresses
</span>
</a>
<meta property=“position” content=“1”>
</li>
<li property=“itemListElement” typeof=“ListItem”>
<a property=“item” typeof=“WebPage” href=“https://example.com/dresses/real”>
<span property=“name”>Real Dresses
</span>
</a>
<meta property=“position” content=“2”>
</li>
</ol>
<hr>
<div id=“box1” class=“boxg”> box1
</div>
<div id=“box2” class=“boxg”>
<!– dies ist ein Elternelemt mit einem Kind –> box2
<div id=“box3” class=“boxg”>
<!– dies ist ein Kindelemt und wird somit im Elternelement platziert –> box3
</div>
</div>
<div id=“bereich”>
<div id=“kopf”>
<a href=“index.html” accesskey=“s”>
<!–accesskey = Tastenkürzel für dien bessere Bedienbarkeit–>
<img id=“logo” class=“bild” src=“bilder/logo.gif” alt=“Startseite — Logo von Capitalcap”>
</a>
<h1> Capitalcap Wirtschaft verstehen
</h1>
<header id=“nav-menue”>
<a href=”#” id=“bereichlogo”>HTML-Seminar.de
</a>
<nav id=“steuerung”>
<ul>
<li>
<a href=”#”>Startseite
</a>
</li>
<li>
<a href=”#”>HTML lernen
</a>
</li>
<li>
<a href=”#”>Beispiele
</a>
</li>
<li>
<a href=”#”>Kontakt
</a>
</li>
<li>
<a href=”#”>Impressum
</a>
</li>
</ul>
</nav>
<a class=“menue-button menue-button-beschr-close” href=”#nav-menue-zu”>MENÜ zu
</a>
<a class=“menue-button menue-button-beschr-open” href=”#nav-menue”>MENÜ auf
</a>
</header>
</div>
<!–
<div> nicht mehr verwenden, nur die neuen HTML5-Befehlen
<header> Kopfbereich
<nav> Steuerung
<main> Hauptteil
<section> eine thematische Gruppierung von Inhalten meist auch mit einer Überschrift
<article> wie ein Zeitungsartikel ein in sich geschlossenes Dokument mit ebenso
<header>,
<section>, oder ähnlichem
<aside> indirekter Zusammenhang zum Inhalt
<footer> Fußbereich
<dialog> Nutzerinteraktion wie Formularfelder anlegen
<figure> für mediale Inhalte
<figcaption> für die Bezeichnung unter dem Medium –>
<div id=“info”> Werbeanzeige
</div>
<div id=“nav”>
<ul>
<li>
<a href=“kontakt.html”> Kontakt
</a>
<!–
<a> = anchor (Anker) man setzt ein Verweiß auf etwas; href = Hyperreferrenz (Verweiß) wohin der Anker führt–>
</li>
<li>
<a href=“kontakt.html”> Kontakt das gleiche jklgjdlffjgldjhglidgjhlidfgjhopdfghjpdofpgfjk
</a>
</li>
</ul>
</div>
<div id=“videobereich1”>
<iframe class=“videoExtern” width=“640” height=“360” src=“https://www.youtube.com/embed/hZAt29lHMeo?rel=0”>
</iframe>
</div>
<div id=“inhalt”> Hier erfolgt nun das erste richtige Design-Element in css. Hier erfolgt nun das erste richtige Design-Element in css. Hier erfolgt nun das erste richtige Design-Element in css.
</div>
<p>Hallo
<strong class=“rot”>ein
</strong>
<!–strong = (überzeugend, kräftig, fest, stark) bei inhaltlich logischen Zusammenhängen–>einfacher text
</p>
<!– p = Paragraph (Absatz), bei Tex / je Absatz immer einsetzen–>
<p>noch
<b>einer
</b>
<!–b = bold (fett) für die Aufmerksamkeit–>
</p>
<p>so nun
<i>zwei
</i>
<!– i = italien (italienisch) für Texte ohne Betonung oder Bedeutung–> weitere kursive
<em>Texte.
</em>
</p>
<!–
<em> = emphasis (Betonung, Gewichtung, Nachdruck) nur nutzen bei einer anderen Betonung als eigentlich–>
<ul>
<!–
<ul> = unorderd list (unsortirte Liste) umschließt alle Listenelemente–>
<li> hallo der erste
<!– li = list item (Element der Liste)–>
</li>
<li> der zweite
</li>
</ul>
<ol>
<!–
<ol> = orderd list (sortirte Liste) nummerische Sortierung umschließt alle Listenelemente–>
<li> hallo der erste
<!– li = list item (Element der Liste)–>
</li>
<li> der zweite
</li>
</ol>
<dl>
<!–
<dl> = definition list (Definitionsliste) umschließt immer alles–>
<dt>Herakles
</dt>
<!–
<dt> = definition term (Definitionsbegriff)–>
<dd>ein grieschicher Held der Antike
</dd>
<!–
<dd> = definition description = Definitionsbeschreibung –>
</dl>
<p> ein Text mit
<br> hier gehts weiter
</p>
<!–
<br> = break (Umbruch)–>
<hr>
<!–
<hr> = horizontal ruler (horizontales Linial) auch unsichtbar als strukturelle Trennung von Textpassagen –>
<p> der Rechner ist aus
</p>
<img src=“bilder/logo.png” width=“100” height=“100” alt=“Logo von Capitalcap”>
<!–
<img> = image (Bild);
<src> = source (Quelle)–>
<!–width = Breite des Bildes ; height = Höhe des Bildes ; alt = Erklärung zum Bild–>
<p>nie mehr als 60KB je Internetseite, auch mit Bildern und weitern Anhängslen
</p>
<table>
<!–
<table> = Tabelle–>
<tr>
<!–
<tr> = table row (Tabellenreihe)–>
<td>Name
</td>
<!–
<td> = table data (Tabellendaten)–>
<td>Klasse
</td>
</tr>
<tr>
<td>Klaus
</td>
<td>5b
</td>
</tr>
</table>
<hr>
<p>nun mit einem Kopf und Füße
</p>
<table>
<caption>Schüler und Klassen
</caption>
<!–
<caption = (Beschriftung für Tabellen)–>
<thead>
<tr>
<!–
<tr> = table row (Tabellenreihe)–>
<th colspan=“2” >Name
</th>
<!–
<th> = table head (Tabellenkopf); colspan = (Zellen verbinden in horizonat)–>
<th>Klasse
</th>
</tr>
</thead>
<tfoot>
<tr>
<td>2
</td>
<!–
<td> = table data (Tabellendaten)–>
<td>1
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan=“2”>Klaus
</td>
<!– rowspan = (Zellen verbinden in vertikal)–>
<td>5b
</td>
</tr>
<tr>
<td>Maria
</td>
<td>nix
</td>
</tr>
</tbody>
</table>
<hr>
<table>
<caption> Beispiel2: Tabelle mit th
</caption>
<thead>
<tr>
<th scope=“col”>Name:
</th>
<!–scope = definiert den Kopfbereich einer Zelle–>
<th scope=“col”>Telefon:
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=“row”>Abel
</th>
<td>12345
</td>
</tr>
<tr>
<th scope=“row”>Bebel
</th>
<td>34567
</td>
</tr>
</tbody>
</table>
<a href=“https://www.capitalcap.com/” target=“_blank”>Capitalcap.com
</a>
<a href=“https://www.capitalcap.com/” target=“linkliste”>Capitalcap.com
</a>
<!–target=“_blank” = öffnet ein neues Tab oder Fenster–>
<!–target=“linkliste” = öffnet alle Links mit“linkliste” im gleichen Tab oder Fenster–>
<p>
<a href=”#Anfang”>Anfang der Seite
</a>
<!–#Anfang setzt ein Anker zur ID Anfang siehe oben–>
</p>
<p>
<a href=“kontakt.html#Anfang”>Anfang der Kontakt Seite
</a>
<!–#Anfang setzt ein zur ID Anfang auf einer anderen Seite–>
</p>
<hr>
<p>
<label for=“vorname”>Vorname
</label>
<input type=“text” name=“vorname” value=”” id=“vorname” size=“34” title=“Hier gibst du Deinen Vornamen ein”>
</p>
<hr>
<form method=“post” action=”#”>
<div>
<fieldset>
<legend>Angaben zur Person
</legend>
<div class=“zeile”>
<div class=“titel”>
<label for=“vorname2”>Vorname
</label>
</div>
<div class=“eingabe”>
<input type=“text” name=“vorname” value=”” id=“vorname2” size=“34” title=“Hier gibst du Deinen Vornamen ein”>
</div>
</div>
<div class=“zeile”>
<div class=“titel”>
<label for=“nachname2”>Familienname
</label>
</div>
<div class=“eingabe”>
<input type=“text” name=“nachname” value=”” id=“nachname2” size=“34” title=“Hier gibst du Deinen Familiennamen ein”>
</div>
</div>
</fieldset>
</div>
</form>
<pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.
</pre>
<ol>
<li>Titel:nMax. 53 Zeichen
</li>
<li>Untertitel: Max. 120 Zeichen. Muss den Titel um ein Spannungsbogen ergänzen oder Aufmerksamkeit wecken
</li>
<li>Abstract als erster Absatz mit max. 2 bis 3 Sätze
</li>
<li>Absätze: Max. 5 bis 7 Zeilen
</li>
<li>Sätze: Max. 25 Wörter
</li>
<li>Bei längeren Texten sind Sprungmarken zu empfehlen
</li>
<li>Text so aufbereiten, dass dieser einfach überflogen und erfasst werden kann
</li>
<li>Keywords nutzen / Themen aus einer Keywordrecherche; dies sind Themen nach denen der Nutzer sucht, insbesondere im Longtail-Traffic
</li>
</ol>
<div id=“hauptteil”>
<!–
<div> = devision (Bereich) also die verschiedenen Bereiche auf einer Website festlegen, wie Kopf‑,Haupt‑,Fußbreich–>
<p>Hier ist ein neutraler Text ohne einer semantischen Bedeutung
</p>
<p>statt “div” zu nutzen sollten man liebe die neuen html5 Bereiche verwenden, wenn möglich.
<!–
<header> der Kopf
</header> für den Kopfbereich einer Website
<nav> 1. Seite 2. Seite
</nav> für die Navigation
<section>ein Gruppierung: Bier, Wurst, Wasser
</section> für die Gruppierung von Elementen
<article>Hauptteil der Seite
</article> Bereich für den Inhalt
<aside>Zusatz zum Inhalt
</aside> für Zusatzinformationen zum Inhalt
<footer>Fuß
</footer> für den Füßbereich –>
</p>
<span id=“dick”>Hallo
</span>
<!–
<span> = (Abgenzung, Bereich) als Inlineelement für
<div> nutzen um ein Wort oder Textstellen hervorzuheben–>
</div>
<div id=“impressum”>Name Vorname Str.
</div>
<div id=“navigation”>
<a href=“kontakt.html”>Kontakt
</a> |
<a href=“alll.html”>Links
</a>
</div>
<div id=“fuss”> Datum aktuell Impressumf
</div>
</div>
<hr>
<ol start=“10”>
<!–start beginnt die Reihe mit 10–>
<li>A
</li>
<li>B
</li>
<li value=“30”>C
</li>
<!–value wird der Wert auf 30 gesetzt–>
<li>D
</li>
</ol>
<table>
<colgroup>
<!– die Anzahl der Spalten bestimmen–>
<col width=“60”>
<!– jeweils ein col steht f�r eine Spalte–>
<col width=“60”>
<!– width wird die genaue Breite der Spalte angezeigt–>
<col width=“60”>
</colgroup>
<tr>
<th id=“sprachen”>Programmiersprachen
</th>
<!– Bez�ge festlegen mit id erh�lt die Kopfspalte einen festen Bezug–>
<th id=“os”>Betriebssysteme
</th>
<!–f�r Barrierefreihet f�r Blinde f�r den Screenreader–>
<th id=“computer”>Computer
</th>
</tr>
<tr>
<td headers=“sprachen”>BASIC
</td>
<!– dieser Bezug wird nun mit headers auf die jeweiligen Inhalte festgelegt–>
<td headers=“os”>Linux
</td>
<td headers=“computer”>Schneider CPC
</td>
</tr>
</table>
<fieldset>
<legend>Kontaktdaten
</legend>
<!–legend Titel des Formularabschnitts–>
<form action=“send.php” method=“post” name=“meines” target=“_blank”>
<!– action verweist man auf ein serverseitiges Script method Art der �bertragung festgelegt name Formularname target ein Zielfenster eingeben um mit JavaScript darauf zuzugreifen –>
<label for=“company”>Firma
</label>
<input type=“text” id=“company” name=“company” accesskey=“b” tabindex=“2” maxlength=“30” value=“Firma”>
<!– type=“text” bedeutet das es sich um einen Text handelt type=“password” wird es als mit Punkten angezeigt logische Beziehung von Texten und Elemnetn herzustellen muss ein eindeutiger Name im label mit for stehen im input mit id und name (dies muss angegeben werden) accesskey ist ein Tastenk�rzel meist mit Strg oder Alt oder sonst was zzgl. dem Buchstaben den man zugewiesen hat mit tabindex die Tabulatorreihenfolge der einzelnen Formulare maxlength legt die Anzahl Zeichen fest welche eingegeben werden darf. value gibt eine Vorbelegung des Textfeldes an per css size die Breite des Eingabefeldes –>
<br>
<label for=“company”>Inhalt
</label>
<textarea name=“blubber” rows=“10” cols=“20”>Hier kommt der Inhalt
</textarea>
<!– textarea legt ein mehrzeiliges Eingabefeld an rows legt die Anzahl der angezeigten Zeilen fest cols legt die Anzahl der Breite fest –>
<input type=“radio” name=“bla” value=“1”/>
<label for=“company”>bla
</label>
<!– type=“radio” gibt ein Radiobutton es geht auch mit “checkbox” f�r Checkboxen –>
<select name=“sprachen”>
<optgroup label=“Alter M�ll”>
<option value=“basic”>BASIC
</option>
<option value=“fortran”>Fortran
</option>
<option value=“cobol”>Cobol
</option>
<option value=“c”>C
</option>
</optgroup>
<optgroup label=“Ganz OK”>
<option value=“php”>PHP
</option>
<option value=“javascript”>JavaScript
</option>
<option value=“cpp”>C++
</option>
</optgroup>
<optgroup label=“Supi”>
<option value=“java”>Java
</option>
<option value=“rubys”>Ruby
</option>
</optgroup>
</select>
<!– select legt man Auswahlfelder an optgroup kann man diese in Gruppen strukturieren –>
<input type=“submit” name=“do” value=“weiter” />
<input type=“reset” value=“Pl�tten” />
</form>
</fieldset>
<details>
<!– details ein Klapptext –>
<summary>Wissen
</summary>
<ul>
<li>
<a href=”#”>Buchhaltung
</a>
</li>
<li>
<a href=”#”>Wirtschaft
</a>
</li>
<li>
<a href=”#”>Spass
</a>
</li>
</ul>
</details>
<p> Hier ein Text mit
<mark>Markierung
</mark>
</p>
<input type=“text” list=“characters”>
<datalist id=“characters”>
<option value=“Homer Simpson”>
<option value=“Bart Simpsom”>
<option value=“Marge Simpson”>
<option value=“Lisa Simpson”>
<option value=“Maggie Simpson”>
<option value=“C. Montgomery Burns”>
<option value=“Waylon Smithers”>
<option value=“Apu Nahasapeemapetilon”>
<option value=“Ned Flanders”>
<option value=“Nelson Muntz”>
<option value=“Seymour Skinner”>
<option value=“Clancy Wiggum”>
</datalist>
</body>
</html>