Zusammenfassung - web
Werbung
1. HTML Grundgerüst
<DOCTYPE Angabe>
<html>
<head>
<title>Titel</title>
</head>
<body>
<!-- TEXT -->
</body>
</html>
2. DOCTYP Angaben
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
3. HTML Kopfdaten
<meta name="author" content="Name">
<meta name="description" content="Text">
<meta name="keywords" content="Wort, Wort, Wort">
<meta name="date" content="yyyy-MM-ddThh:mm:ss+hh:mm">
<meta name="robots" content="index | noindex | follow | nofollow">
index = Auslesen erlaubt, noindex = Auslesen nicht erlaubt, follow = Verweisen
folgen erlaubt, nofollow = Verweisen folgen nicht erlaubt.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="expires" content="0"> (Sat, 15 Dec 2001 12:00:00 GMT / 43200)
<meta http-equiv="refresh" content="5; URL=http://de.selfhtml.org/">
<base href="URI"> Basis für relative Urls
<link rel="stylesheet" type="text/css" href="css/simple.css">
4. HTML - TAGS
http://de.selfhtml.org/
http://www.css4you.de/
4.1 Allgemeines:
HTML-Elemente:
Der Inhalt von HTML-Dateien steht in HTML-Elementen. HTML-Elemente werden
durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein
einleitendes und ein abschließendes Tag markiert. Der Inhalt dazwischen ist der
"Gültigkeitsbereich" des entsprechenden Elements. Tags werden in spitzen
Klammern notiert.
<h1>HTML - die Sprache des Web</h1>
Standalone-Tags:
Es gibt auch einige Elemente mit "Standalone-Tags", d.h. Elemente, die keinen Inhalt
haben und deshalb nur aus einem Tag bestehen statt aus Anfangs- und End-Tag.
<br>
<hr>
manueller Zeichenumbruch
horizontale Trennlinie
Verschachtelung:
Elemente können ineinander verschachtelt werden. Auf diese Weise entsteht eine
hierarchische Struktur. Komplexere HTML-Dateien enthalten sehr viele
Verschachtelungen. Deshalb sprechen Fachleute auch von strukturiertem Markup.
<h1><i>HTML</i> - die Sprache des Web</h1>
Attribute:
Tags und Standalone-Tags können zusätzliche Angaben enthalten.
<h1 align="center">HTML - die Sprache des Web</h1>
Es gibt folgende Arten von Attributen in HTML-Elementen:
•
•
•
•
Attribute mit Wertzuweisung, wobei es bestimmte erlaubte Werte gibt, z.B. bei
<h1 align="center"> (Überschrift 1. Ordnung zentriert ausgerichtet - hier sind
nur die Werte left, center, right und justify erlaubt).
Attribute mit freier Wertzuweisung, wobei jedoch ein bestimmter Datentyp oder
eine bestimmte Konvention erwartet wird, z.B. <style type="text/css"> (Bereich
für Stylesheets definieren - hier wird ein so genannter Mime-Type als Wert
erwartet, und Mime-Typen haben immer den Aufbau Typ/Untertyp). Oder
<table border="1"> (Tabelle mit Rahmen von 1 Pixel Stärke - hier wird eine
numerische Angabe erwartet)
Attribute mit freier Wertzuweisung ohne weitere Konventionen, z.B. <img
alt="schönes Bild" src=“img.jpg“> - hier kann ein ganzer Text zugewiesen
werden.
Alleinstehende Attribute, z.B. <hr noshade> (Trennlinie ohne Schatten).
Alleinstehende Attribute gibt es allerdings nur in herkömmlichem HTML. Wenn
Sie XHTML-gerecht schreiben wollen, müssen Sie <hr noshade="noshade">
notieren. Mehr darüber erfahren Sie im Unterkapitel XHTML und HTML.
4.2 HTML-Elemente:
<html>...</html>
<head>...</head>
<body>...</body>
Wurzelelement einer HTML-Datei
Markiert den Kopfbereich einer HTML-Datei
Markiert den Dokumentkörper und damit den Bereich der
darzustellenden Daten
background="background.jpg" text="#990000" link="#FF0000"
vlink="#FFFFFF" alink="#000000" bgcolor=”FFCC00”
<a>...</a>
Definiert einen Anker oder einen Hyperlink:
<a href="http://www.orf.at/">ORF</a> Österreich<br>
<a href="seite2.htm">Seite2</a> blablabla<br>
Erzeugt einen Zeilenumbruch
Markiert einen Textabsatz
<p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p>
Markiert eine Überschrift 1. bis 6. Ordnung
<h1>&Uuml;berschrift 1. Ordnung</h1>
horizontale Trennlinie
Referenziert eine Grafik
<br>
<p>...</p>
h1-h6
<hr>
<img
src="tanzmaus.gif"
alt="Tanzmaus">
<table>...</table>
<tr>...</tr>
<td>...</td>
<div>...</div>
<ul>...</ul>
<li>...</li>
<ol>...</ol>
Erzeugt eine Tabelle
Definiert eine Tabellenzeile
Markiert eine Tabellenzelle
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td>Band</td>
</tr>
<tr>
<td>Depeche Mode</td>
</tr>
<tr>
<td>U2</td>
</tr>
</table>
Markiert einen allgemeinen Bereich
Markiert eine Aufzählungsliste
Markiert einen Listeneintrag
<ul>
<li>Probieren geht &uuml;ber Studieren</li>
<li>Liebe geht über Triebe</li>
<li>Tante f&auml;llt &uuml;ber Kante</li>
</ul>
Markiert eine nummerierte Liste
Textformatierungen:
<b>...</b>
<i>...</i>
<u>...</u>
<strike>...</strike>
<sup>...</sup>
<sub>...</sub>
Markiert fett gedruckten Text
zeichnet einen Text als kursiv aus
zeichnet einen Text als unterstrichen aus
zeichnet einen Text als durchgestrichen aus
zeichnet einen Text als hochgestellt aus
zeichnet einen Text als tiefgestellt aus
<font>…</font>
size="7”
color="#FF0000"
face="Arial,
Verdana, Times"
Markiert Text mit Schriftgröße, Schriftfarbe und Schriftart
<font size="1">
<font color="#000000">
<font face="Arial, Verdana, Times">
Farben:
Grundsätzlich gibt es zwei Möglichkeiten, Farben in HTML zu definieren:
•
•
durch Angabe der RGB-Werte der gewünschten Farbe in Hexadezimalform
(RGB = Rot/Grün/Blau-Wert der Farbe)
durch Angabe eines Farbnamens
bgcolor="#FFFFFF"
color="#3333FF"
bgcolor="red"
color="black"
Frames:
Mit Hilfe von Frames können Sie den Anzeigebereich des Browsers in verschiedene,
frei definierbare Segmente aufteilen. Jedes Segment kann eigene Inhalte enthalten.
Die einzelnen Anzeigesegmente (also die Frames) können wahlweise einen
statischen Inhalt (= "non scrolling regions") oder einen wechselnden Inhalt haben.
Verweise in einem Frame können Dateien aufrufen, die dann in einem anderen
Frame angezeigt werden.
<frameset...
<frame
<noframe
Definiert Frameset
Definiert ein Framefenster
Markiert einen No Frame Bereich
Framebeispiel:
frameset.htm
<html>
<head>
<title>Frameset</title>
</head>
<frameset cols="100,*" >
<frame name="leftFrame" src="left.htm" scrolling="no" noresize>
<frame name="mainFrame" src="main.htm" scrolling="auto">
<noframes>
Ihr Browser unterstützt leider keine Frames!
</noframes>
</frameset>
</html>
left.htm
<html>
<head>
<title>Links</title>
</head>
<body bgcolor="#CCCCFF">
<a href="main.htm" target="mainFrame">Seite1</a><br>
<a href="main2.htm" target="mainFrame">Seite2</a><br>
</body>
</html>
main.htm / main2.htm
<html>
<head>
<title>Main</title>
</head>
<body bgcolor="#FFFFCC">
<h1>Seite1/2</h1>
</body>
</html>
5. CSS
CSS Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei
um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente.
Mit Hilfe von Stylesheets können Sie beispielsweise bestimmen, dass Überschriften
1. Ordnung eine Schriftgröße von 18 Punkt haben, in der Schriftart Helvetica, aber
nicht fett erscheinen, und mit einem Abstand von 1,75 Zentimeter zum
darauffolgenden Absatz versehen werden. Angaben dieser Art sind mit reinem HTML
nicht möglich.
CSS Stylesheets unterstützen also erstens die professionelle Gestaltung beim WebDesign, und zweitens helfen sie beim Corporate Design für große Projekte oder für
unternehmensspezifsche Layouts.
5.1 CSS Stylesheets in HTML einbinden
CSS innerhalb einer HTML Datei bzw. innerhalb eines HTML Elements
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!-/* ... Hier werden die Formate definiert ... */
h1 {
font-size: 50;
color: #FFCC00;
}
-->
</style>
</head>
<body>
<h1>test</h1>
<h2 style="color: #FF0000;">test2</h2>
</body>
</html>
Formate zentral in separater CSS-Datei definieren
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="test">test</h1>
</body>
</html>
style.css
.test {
font-size: 120px;
color: blue;
}
h2 {
}
#content {
}
5.2 CSS Eigenschaften
5.2.1 Schriftformatierung
font-family
font-style
font-size
font-weight
color
Schriftart
Schriftstil bedeutet die Neigung der Schrift
Schriftgröße ist die Darstellungsgröße der Schrift.
Das Schriftgewicht bezeichnet die Dicke und Stärke einer
Schrift.
dieser Angabe können Sie Textvordergrundfarbe bzw.
Schriftfarbe bestimmen.
5.2.2 Linkformatierung
a:link {text-decoration:none; color: #0066CC;}
a:visited {text-decoration:none; color: #0066CC;}
a:hover {text-decoration:underline; color: #0066CC;}
a:active {text-decoration:none; color: #0066CC;}
6. Exkurs Nachrichtenwerttheorie
Als Nachrichtenwert bezeichnet man in der Publizistik- und
Kommunikationswissenschaft einen Einflussfaktor, der darüber entscheidet, welche
Nachricht in den Medien erscheint, ob sie also berichtenswert ist, in welchem
Umfang und in welcher Aufmachung über sie berichtet wird.
Geschichte und Entwicklung der Nachrichtenwert-Theorie
Die erste Studie zum Nachrichtenwert geht auf Walter Lippman aus dem Jahr 1922
zurück, der als Elemente beispielsweise identifizierte:
•
•
•
•
Nähe (proximity, nearness),
Prominenz (big names),
Überraschung (oddity),
Konflikt (conflict, controversy) usw.
Bereits wenig später fand der Kanon der nachrichtenwerten Elemente Aufnahme in
journalistische Lehrbücher; so nennt beispielsweise Warren (1934):
• Neuigkeit,
• Nähe,
• Tragweite,
• Prominenz,
• Dramatik,
• Kuriosität,
• Konflikt,
• Sex,
• Gefühle,
• Fortschritt.
Eine starke Erweiterung erfuhr der Kanon nachrichtenwerter Elemente in einer
Untersuchung von Johan Galtung und Mari Holmboe Ruge aus dem Jahr 1965;
genannt werden hier bereits 12 Faktoren, die die Autoren Nachrichtenfaktoren
nennen:
• Frequenz,
• Aufmerksamkeitsschwelle,
• Eindeutigkeit
• Bedeutsamkeit,
• Konsonanz,
• Überraschung,
• Kontinuität,
• Variation,
• Bezug zu Elite-Nationen,
• Bezug zu Elite-Personen,
• Personalisierung
• Negativität.
Galtung und Ruge bauen ihre Funde zu einer wahrnehmungspsychologisch
begründeten Nachrichtentheorie aus. Nach ihren Hypothese sind die
Nachrichtenfaktoren additiv, d.h., je mehr Nachrichtenfaktoren auf ein Ereignis
zutreffen, desto publikationswürdiger ist es, und sie sind komplementär, d.h. das
Fehlen eines Nachrichtenfaktors kann durch einen anderen kompensiert werden. Die
Nachrichtentheorie von Galtung und Ruge wurde mittlerweile empirisch bestätigt.
Eine grundlegende Erweiterung und theoretische Neuorientierung leistete Winfried
Schulz, der 1976 den Aspekt des Konstruktivismus mit einbezog. Außerdem
erweiterte Schulz die Anzahl der Nachrichtenfaktoren noch einmal auf nunmehr 20:
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Beteiligung von Elite-Nationen,
Institutioneller Einfluss,
Beteiligung von Elite-Personen,
Nähe,
Ethnozentrismus,
Tragweite,
Betroffenheit,
Frequenz,
Vorhersehbarkeit,
Ungewissheit,
Überraschung,
Kontinuität,
Thematisierung,
Stereotypie,
Aggression,
Kontroverse,
Erfolg,
Werte,
Personalisierung,
Emotionalisierung.
In der heutigen Forschung wird der Nachrichtenwert unter dem empirischen
Forschungsansatz der Nachrichtenfaktoren untersucht; siehe hierzu auch
Gatekeeper und News Bias.
7. BSP:
test.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang=de>
<head>
<title>--:: web-tech coaching ::--</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="web, tech, coaching, web-tech, webdesign, wien, programmierung,
it, datenbanken, CMS, flash, spiele" LANG="de">
<meta name="description" content="web-tech coaching. webdesign, software entwicklung, itlösungen. accessibility. werbung. design. wien." LANG="de">
<meta name="content-language" content="DE">
<link rel="stylesheet" href="test.css">
</head>
<body>
<hr>
<br>
<div class="contentbox"> <span class="hidden">&nbsp;|&nbsp;</span><a
href="http://www.buchfabrik.at" target="_blank" title="Externer Link in neuem Fenster"><img
src="images/buchfabrik-neu.jpg" alt="Screenshot der Webseite mit Link zu: Buchfabrik Uebbereuter"
width="200" height="149" border="0" align="left"></a> <span class="hidden">&nbsp;|&nbsp;</span>
<div class="contenttext"> <strong>Kunde:</strong> Buchfabrik Uebbereuter<br>
<a href="http://www.buchfabrik.at" target="_blank" title="Externer Link in neuem
Fenster" >www.buchfabrik.at</a><br>
<strong><span lang="en">Team:</span></strong> Bach, Huber<br>
<strong>Anforderungen:</strong> Wartung<br>
<strong>Partner:</strong> <a href="http://www.mindwarp.at" target="_blank"
title="Externer Link in neuem Fenster" ><span lang="en">mindwarp</span></a><br>
</div>
</div>
<br>
</body>
</html>
test.css
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #BAD3E9;
color: #000000;
font-family: Verdana, Helvetica, sans-serif;
font-size: 80%;
text-align: center;
}
#rahmen {
position: relative;
margin: 0 5% 0 0;
padding: 0;
width: 720px;
background-color: #BAD3E9;
color: #000000;
text-align: left;
}
H1
{
font-size: 110%;
font-weight: bold;
text-align: left;
margin: 5px 0 5px 0;
padding: 0;
}
.bluebottom{
width: 162px;
background-image:url('../images/bluemenue-bottom.gif');
background-repeat:no-repeat;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}