zeitspuren
was würdet Ihr tun, um Eure dokumente für einen lange zeit (>500 jahre) zu erhalten?
semantisch korrektes HTML…
…kann [vermutlich] so lange verstanden werden wie es intelligenz auf der erde gibt!
- im internet befindliche daten werden momentan auf vielen unabhängigen servern gespeichert – vielleicht bleibt der eine oder andere erhalten?
- in das html-dokument kann man ja zusätzlich bilder, töne, filme einbinden – da wird das format für die „ewigkeit“ schon schwieriger!
buchempfehlung
…eigentlich schon als empfehlung zur vorbereitung auf das mma-studium!
HTML mit CSS und XHTML von Kopf bis Fuß
ISBN-10: 3897214539
welche kenntnisse braucht man, um eine website aufzubauen?
- (x)html semantisch richtige strukturierung von informationen = „content“
- css
styling
der (x)html-daten für das jeweilige ausgabe-medium = „presentation“ - javascript interaktive komponenten der website = „client-side scripting“
der rechte mouse-klick als freund
das web ist „open source“ in reinform: html, css und javascript kann direkt im quellcode gelesen (und kopiert) werden!
einfach innerhalb des browser-fenster mit der rechten mouse-taste klicken und auf "quellcode lesen" gehen…
html = text mit tags
die <tags> benötigt der browser, um die website richtig darzustellen – diese sind für den betrachter der website nicht sichtbar!
<p>etwas text mit einem <strong>besonders wichtigen</strong> teil </p>
<p>hier noch mal text mit einem <a href="http://demo.de/">link zu demo</a></p>
eine überschrift
etwas text mit einem besonders wichtigen teil
hier noch mal text mit einem link zu demo
prinzipieller aufbau einer html-datei
nur das, was Ihr zwischen <body> und </body> einfügt, wird im browser sichtbar.
informationen im <head>-bereich sind informationen für den browser…
(ausnahme: der <title> wird am oberen rand des browser-fensters angezeigt!)
- <html>
- <title>salzburger nockerl</title>
- nur was zwischen <body> und </body> eingefügt wird, ist im browser-fenster sichtbar!
der browser braucht jedoch zusätzlich mehr informationen – siehe nächste seite!
aufbau einer xhtml-datei
die zusätzlichen informationen helfen dem browser bei der richtigen darstellung der seite;
bitte verwendet das hier angefügte xhtml-skelett als grundlage Eurer html-seiten! dann braucht Ihr nicht so viel tippen…
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>salzburger nockerl</title>
- <meta name="keywords" lang="de" content="mehlspeisen, salzburg, zucker, eier" />
- <link rel="stylesheet" type="text/css" href="style.css" media="all">
- nur was zwischen <body> und </body> eingefügt wird, ist im browser-fenster sichtbar!
namensgebung
- html-dateien müssen die datei-endung ".html"oder ".htm" haben
beispiel.html, demo.htm, beispiel23.html - auf Groß/Kleinschreibung achten! dateiName.html ≠ dateiname.html ≠ DATEINAME.html
- nur die Zeichen a-z, A-Z & 1-0 verwenden keine äöü ÄÖÜ ß
- keine Leerzeichen stattdessen Unterstrich nutzen: langer_Dateiname_aktuell.html
- die startseite einer website sollte "index.html" oder "default.html" heissen
dann braucht man nur den website-namen eingeben, nicht die ganze adresse! http://demo-website.at/index.html
syntax von xhtml-tags
- tags werden in kleinbuchstaben geschrieben:
<BODY>Inhalt</BODY> - tags treten meistens paarweise auf:
<a>link</a>, <p>text</p>, <h2>überschrift</h2>, <body>inhalt</body>
- tags, die einzeln verwendet werden, müssen so markiert werden:
<br />, <hr />, <input />, <meta />
- innerhalb der tags können attribute stehen:
<a href="ziel.html" title="tolle seite" id="top">test</a><img alt="erkärung" src="pix/demo.gif" width="130" height="129" />
xhtml-tags richtig verschachteln
die tags verhalten sich wie klammern in der mathematik – man muss diese von innen nach außen schliessen!
{[(3+4)*5]+(5-3)}…
richtig:
<p>hier geht es zu <a href="http://google.com">google</a></p>
<h2>heute <em>schlafen</em> alle</h2>
falsch!
<p>hier geht es zu <a href="google.com">google</p></a>
<em><h2>heute</em> schlafen alle</h2>
xhtml-tags (1): überschriften
- <h1>titel</h1>, <h2>titel</h2> .... <h6>titel</h6>
- <h1> ist die wichtigste überschrift auf der seite
- <h6> die an wenigsten wichtige
- gleich wichtige überschriften = gleiches h-tag
- ohne CSS wird die h1-überschrift am größten dargestellt, die anderen sukzessiv kleiner…
- es wird empfohlen, nur jeweils eine <h1>-überschrift pro seite zu verwenden! (suchmaschinen…)
eine ziemlich wichtige Überschrift
xhtml-tags (2): paragraphen
- mit <p></p> markiert man paragraphen/absätze in einem dokument
- um lediglich eine neue zeile zu erzwingen, verwendet man <br />
<p>dies ist der erste absatz,<br />
der einen zeilenumbruch enthält</p>
<p>unmittelbar gefolgt vom 2. absatz</p>
dies ist der erste absatz,
der einen zeilenumbruch enthält.
unmittelbar gefolgt vom 2. absatz
xhtml-tags (3): kommentare
- sehr wichtig, um quellcode besser lesbar zu machen
- bitte, bitte, bitte: verwendet kommentare, damit Ihr später noch wisst, was Ihr gemacht habt!
- zum testen kann man damit bereiche einer website temporär "ausschalten"
- syntax: <!-- kommentar -->
<!-- einzeiliger kommentar --> <p>dies ist der 1. absatz</p> <!-- dies ist ein kommentar, der über 2 zeilen geht --> <p>dies der 2. absatz</p>
dies ist der 1. absatz
dies der 2. absatz
xhtml-tags (4): betont/wichtig/durchgestrichen
- elemente zur textstrukturierung
- logische auszeichnung von text
- mehr dazu bei selfHtml
dies ist ein sehr wichtiges wort
ein wichtiges wort und das ist falsch richtig
xhtml-tags (5): horizontale linien
- zum trennen/strukturieren der inhalte
- das aussehen kann (später) via CSS beeinflusst werden…
- auf schreibweise achten!
<p>themenblock 1</p>
<hr />
<p>themenblock 2</p>
themenblock 1
themenblock 2
xhtml-tags (6): ungeordnete listen
- zum aufzählen ohne bestimmte reihenfolge
Einkaufszettel <ul> <li>Eier</li> <li>Mehl</li> <li>Zucker</li> </ul>
- Eier
- Mehl
- Zucker
xhtml-tags (6b): navigation = ungeordnete listen
- praktisch alle moderne navigations-menüs basieren auf
ungeordneten listen
und (relativen)links
- diese sind sehr gut via CSS
stylebar
und trotzdembarrierefrei
