Wissen Lern HTML Grundlagen

<!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, dest­so wenige ist bess­er, beschreibt kurz den kom­plet­ten 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 nach­dem die robots vor­bei schauen–>
<meta name=“robots” content=“INDEX,FOLLOW”>
<!– index — die betrof­fene Seite soll aufgenom­men wer­den noin­dex – Seite nicht aufnehmen fol­low — alle Links auf der Home­page weit­er­ver­fol­gen und diese auch aufnehmen nofol­low – die Links unberück­sichtigt lassen. Und natür­lich kann gemis­cht werden.–>
<link rel=“canonical” href=”/index.html”>
<!–bei mehreren Seit­en gibt es nur eine richtige Seite für die Robots, mit rel=“canonical” (Regel entsprechend)–>
<meta name=“description” content=“Eine Über­sicht des Tests.”>
<!–max. 150 Zeichen–>
<meta name=“author” content=“Jakob Graw”>
<meta name=“keywords” content=“Test, Probe, Lösung”>
<!–Wörter mit , oder ; tren­nen 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”>
<!–Fav­i­con 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 = Head­er (Über­schrift)
<h1>
</h1> Titel, nur ein­ma­lig auf der Seite auftauchen–>
<!–id = (Ausweiß, Iden­ti­fika­tion); class = (Gruppe, Kat­e­gor­ei, Klasse, Stil)–>
<!–
<h2>
</h2> Überschrift
<h3>
</h3> Kapitel
<h4>
</h4> Unterkapi­tel 1
<h5>
</h5> Unterkapi­tel 2
<h6>
</h6> Unterkapi­tel 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 Elter­nelemt mit einem Kind –> box2
<div id=“box3” class=“boxg”>
<!– dies ist ein Kindelemt und wird somit im Elter­nele­ment platziert –> box3
</div>
</div>
<div id=“bereich”>
<div id=“kopf”>
<a href=“index.html” accesskey=“s”>
<!–accesskey = Tas­tenkürzel für dien bessere Bedienbarkeit–>
<img id=“logo” class=“bild” src=“bilder/logo.gif” alt=“Startseite — Logo von Capitalcap”>
</a>
<h1> Cap­i­tal­cap Wirtschaft verstehen
</h1>
<head­er 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-but­ton-beschr-close” href=”#nav-menue-zu”>MENÜ zu
</a>
<a class=“menue-button menue-but­ton-beschr-open” href=”#nav-menue”>MENÜ auf
</a>
</header>
</div>
<!–
<div> nicht mehr ver­wen­den, nur die neuen HTML5-Befehlen
<head­er> Kopfbereich
<nav> Steuerung
<main> Hauptteil
<sec­tion> eine the­ma­tis­che Grup­pierung von Inhal­ten meist auch mit ein­er Überschrift
<arti­cle> wie ein Zeitungsar­tikel ein in sich geschlossenes Doku­ment mit ebenso
<head­er>,
<sec­tion>, oder ähnlichem
<aside> indi­rek­ter Zusam­men­hang zum Inhalt
<foot­er> Fußbereich
<dia­log> Nutzer­in­ter­ak­tion wie For­mu­la­rfelder anlegen
<fig­ure> für medi­ale Inhalte
<fig­cap­tion> für die Beze­ich­nung unter dem Medium –>
<div id=“info”> Werbeanzeige
</div>
<div id=“nav”>
<ul>
<li>
<a href=“kontakt.html”> Kontakt
</a>
<!–
<a> = anchor (Anker) man set­zt ein Ver­weiß auf etwas; href = Hyper­re­fer­renz (Ver­weiß) wohin der Anker führt–>
</li>
<li>
<a href=“kontakt.html”> Kon­takt das gle­iche 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 erfol­gt nun das erste richtige Design-Ele­ment in css. Hier erfol­gt nun das erste richtige Design-Ele­ment in css. Hier erfol­gt nun das erste richtige Design-Ele­ment in css.
</div>
<p>Hallo
<strong class=“rot”>ein
</strong>
<!–strong = (überzeu­gend, kräftig, fest, stark) bei inhaltlich logis­chen Zusammenhängen–>einfacher text
</p>
<!– p = Para­graph (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 = ital­ien (ital­ienisch) für Texte ohne Beto­nung oder Bedeu­tung–> weit­ere kursive
<em>Texte.
</em>
</p>
<!–
<em> = empha­sis (Beto­nung, Gewich­tung, Nach­druck) nur nutzen bei ein­er anderen Beto­nung als eigentlich–>
<ul>
<!–
<ul> = unorderd list (unsor­tirte Liste) umschließt alle Listenelemente–>
<li> hal­lo der erste
<!– li = list item (Ele­ment der Liste)–>
</li>
<li> der zweite
</li>
</ul>
<ol>
<!–
<ol> = orderd list (sor­tirte Liste) num­merische Sortierung umschließt alle Listenelemente–>
<li> hal­lo der erste
<!– li = list item (Ele­ment der Liste)–>
</li>
<li> der zweite
</li>
</ol>
<dl>
<!–
<dl> = def­i­n­i­tion list (Def­i­n­i­tion­sliste) umschließt immer alles–>
<dt>Herakles
</dt>
<!–
<dt> = def­i­n­i­tion term (Def­i­n­i­tions­be­griff)–>
<dd>ein gri­eschich­er Held der Antike
</dd>
<!–
<dd> = def­i­n­i­tion descrip­tion = Definitionsbeschreibung –>
</dl>
<p> ein Text mit
<br> hier gehts weiter
</p>
<!–
<br> = break (Umbruch)–>
<hr>
<!–
<hr> = hor­i­zon­tal ruler (hor­i­zon­tales Linial) auch unsicht­bar als struk­turelle Tren­nung von Textpassagen –>
<p> der Rech­n­er ist aus
</p>
<img src=“bilder/logo.png” width=“100” height=“100” alt=“Logo von Capitalcap”>
<!–
<img> = image (Bild);
<src> = source (Quelle)–>
<!–width = Bre­ite des Bildes ; height = Höhe des Bildes ; alt = Erk­lärung zum Bild–>
<p>nie mehr als 60KB je Inter­net­seite, auch mit Bildern und weit­ern Anhängslen
</p>
<table>
<!–
<table> = Tabelle–>
<tr>
<!–
<tr> = table row (Tabel­len­rei­he)–>
<td>Name
</td>
<!–
<td> = table data (Tabel­len­dat­en)–>
<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>
<!–
<cap­tion = (Beschrif­tung für Tabellen)–>
<thead>
<tr>
<!–
<tr> = table row (Tabel­len­rei­he)–>
<th colspan=“2” >Name
</th>
<!–
<th> = table head (Tabel­lenkopf); colspan = (Zellen verbinden in horizonat)–>
<th>Klasse
</th>
</tr>
</thead>
<tfoot>
<tr>
<td>2
</td>
<!–
<td> = table data (Tabel­len­dat­en)–>
<td>1
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan=“2”>Klaus
</td>
<!– rows­pan = (Zellen verbinden in vertikal)–>
<td>5b
</td>
</tr>
<tr>
<td>Maria
</td>
<td>nix
</td>
</tr>
</tbody>
</table>
<hr>
<table>
<cap­tion> Beispiel2: Tabelle mit th
</caption>
<thead>
<tr>
<th scope=“col”>Name:
</th>
<!–scope = definiert den Kopf­bere­ich ein­er 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 gle­ichen Tab oder Fenster–>
<p>
<a href=”#Anfang”>Anfang der Seite
</a>
<!–#Anfang set­zt ein Anker zur ID Anfang siehe oben–>
</p>
<p>
<a href=“kontakt.html#Anfang”>Anfang der Kon­takt Seite
</a>
<!–#Anfang set­zt ein zur ID Anfang auf ein­er anderen Seite–>
</p>
<hr>
<p>
<label for=“vorname”>Vorname
</label>
<input type=“text” name=“vorname” val­ue=”” id=“vorname” size=“34” title=“Hier gib­st du Deinen Vor­na­men ein”>
</p>
<hr>
<form method=“post” action=”#”>
<div>
<field­set>
<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” val­ue=”” id=“vorname2” size=“34” title=“Hier gib­st du Deinen Vor­na­men ein”>
</div>
</div>
<div class=“zeile”>
<div class=“titel”>
<label for=“nachname2”>Familienname
</label>
</div>
<div class=“eingabe”>
<input type=“text” name=“nachname” val­ue=”” id=“nachname2” size=“34” title=“Hier gib­st du Deinen Fam­i­li­en­na­men ein”>
</div>
</div>
</fieldset>
</div>
</form>
<pre> My Bon­nie lies over the ocean. My Bon­nie lies over the sea. My Bon­nie lies over the ocean. Oh, bring back my Bon­nie to me.
</pre>
<ol>
<li>Titel:nMax. 53 Zeichen
</li>
<li>Untertitel: Max. 120 Zeichen. Muss den Titel um ein Span­nungs­bo­gen ergänzen oder Aufmerk­samkeit 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än­geren Tex­ten sind Sprung­marken zu empfehlen
</li>
<li>Text so auf­bere­it­en, dass dieser ein­fach über­flo­gen und erfasst wer­den kann
</li>
<li>Keywords nutzen / The­men aus ein­er Key­wor­drecherche; dies sind The­men nach denen der Nutzer sucht, ins­beson­dere im Longtail-Traffic
</li>
</ol>
<div id=“hauptteil”>
<!–
<div> = devi­sion (Bere­ich) also die ver­schiede­nen Bere­iche auf ein­er Web­site fes­tle­gen, wie Kopf‑,Haupt‑,Fußbreich–>
<p>Hier ist ein neu­traler Text ohne ein­er seman­tis­chen Bedeutung
</p>
<p>statt “div” zu nutzen soll­ten man liebe die neuen html5 Bere­iche ver­wen­den, wenn möglich.
<!–
<head­er> der Kopf
</header> für den Kopf­bere­ich ein­er Website
<nav> 1. Seite 2. Seite
</nav> für die Navigation
<section>ein Grup­pierung: Bier, Wurst, Wasser
</section> für die Grup­pierung von Elementen
<article>Hauptteil der Seite
</article> Bere­ich für den Inhalt
<aside>Zusatz zum Inhalt
</aside> für Zusatz­in­for­ma­tio­nen zum Inhalt
<footer>Fuß
</footer> für den Füßbereich –>
</p>
<span id=“dick”>Hallo
</span>
<!–
<span> = (Abgen­zung, Bere­ich) als Inli­neele­ment für
<div> nutzen um ein Wort oder Textstellen hervorzuheben–>
</div>
<div id=“impressum”>Name Vor­name 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 begin­nt die Rei­he mit 10–>
<li>A
</li>
<li>B
</li>
<li value=“30”>C
</li>
<!–val­ue wird der Wert auf 30 gesetzt–>
<li>D
</li>
</ol>
<table>
<col­group>
<!– die Anzahl der Spal­ten bestimmen–>
<col width=“60”>
<!– jew­eils ein col ste­ht f�r eine Spalte–>
<col width=“60”>
<!– width wird die genaue Bre­ite der Spalte angezeigt–>
<col width=“60”>
</colgroup>
<tr>
<th id=“sprachen”>Programmiersprachen
</th>
<!– Bez�ge fes­tle­gen mit id erh�lt die Kopf­s­palte einen fes­ten Bezug–>
<th id=“os”>Betriebssysteme
</th>
<!–f�r Bar­ri­ere­frei­het f�r Blinde f�r den Screenreader–>
<th id=“computer”>Computer
</th>
</tr>
<tr>
<td headers=“sprachen”>BASIC
</td>
<!– dieser Bezug wird nun mit head­ers auf die jew­eili­gen Inhalte festgelegt–>
<td headers=“os”>Linux
</td>
<td headers=“computer”>Schneider CPC
</td>
</tr>
</table>
<field­set>
<legend>Kontaktdaten
</legend>
<!–leg­end Titel des Formularabschnitts–>
<form action=“send.php” method=“post” name=“meines” target=“_blank”>
<!– action ver­weist man auf ein ser­ver­seit­iges Script method Art der �bertra­gung fest­gelegt name For­mu­la­rname tar­get ein Zielfen­ster 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 han­delt type=“password” wird es als mit Punk­ten angezeigt logis­che Beziehung von Tex­ten und Elem­netn herzustellen muss ein ein­deutiger Name im label mit for ste­hen im input mit id und name (dies muss angegeben wer­den) accesskey ist ein Tastenk�rzel meist mit Strg oder Alt oder son­st was zzgl. dem Buch­staben den man zugewiesen hat mit tabindex die Tab­u­la­tor­rei­hen­folge der einzel­nen For­mu­la­re maxlength legt die Anzahl Zeichen fest welche eingegeben wer­den darf. val­ue gibt eine Vor­bele­gung des Textfeldes an per css size die Bre­ite 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 Bre­ite fest –>
<input type=“radio” name=“bla” value=“1”/>
<label for=“company”>bla
</label>
<!– type=“radio” gibt ein Radiobut­ton es geht auch mit “check­box” f�r Checkboxen –>
<select name=“sprachen”>
<opt­group 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>
<opt­group label=“Ganz OK”>
<option value=“php”>PHP
</option>
<option value=“javascript”>JavaScript
</option>
<option value=“cpp”>C++
</option>
</optgroup>
<opt­group label=“Supi”>
<option value=“java”>Java
</option>
<option value=“rubys”>Ruby
</option>
</optgroup>
</select>
<!– select legt man Auswahlfelder an opt­group kann man diese in Grup­pen 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”>
<datal­ist 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. Mont­gomery 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>