List of public pages created with Protopage

Wir über uns

News

YouTube Top Favorites

CNN.com

Bookmarks

Links

Rich sticky notes

Welcome

Welcome,

Ten years ago [In 1972], a crack commando unit was sent to prison by a military court for a crime they didn´t commit. These men promptly escaped from a maximum-security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem, if no one else can help, and if you can find them, maybe you can hire the A-Team.[


Have fun,

Dein A-Team

News

A-Team siegt über MS Word.

 

Wir lieben es, wenn ein Plan funktioniert :)

 

 

A-Team 1 - 0 Word

Photos

Hannibal aka Micha

B.A. aka Bene

Face aka Chrissy

H.M. Murdock aka Andy

A-Team

Aufgaben

News

Tutorblog

Word

Rich sticky notes

Willkommen

Herzlich Willkommen auf der Protopage-Seite des A-Teams!!

 

Diese Seite widmen wir dem Umgang mit MS Word.

Da wir immer wieder mit diesem Programm konfrontiert werden, u.a. wenn man eine Hausarbeit schreiben muss, soll Euch unsere Seite helfen möglichst schnell und fehlerfrei Format- und Dokumentvorlagen zu erstellen.

Hierzu könnt ihr auch unsere eigenen erstellten Deckblätter, korrigierten Dokumente sowie unsere Dokumentvorlage zur Hilfe nehmen. Wie eine fertige Hausarbeit aussehen könnte, könnt ihr euch auch auf unserer Seite anschauen.

Unter den "10 Todsünden" findet ihr typische Fehler, die bei der Arbeit mit Word auftreten können sowie Tipps und Tricks, die den Umgang mit MS Word erleichtern.

 

Viel Spaß beim Durchstöbern,

 

Euer A-Team

 

Downloads

Hier stehen die korrigierten und kommentierten Teile der  Hausarbeit zum Download bereit:

Teil A von Michael

Teil B von Bene

Teil C von Christina

Teil D von Andreas

 

Deckblätter von Christina, Benedikt, Michael und Andreas

 

Gemeinsam erstellte Dokumentvorlage zur Erstellung einer Hausarbeit

 

Formatierte und strukturierte Hausarbeit

Endgültige Version Worddatei (enthält Markups)

Endgültige Version PDF-Datei (ohne Markups)

Geheime Word Befehle :)

Probiert es mal aus, einfach Word öffnen, "=rand(200,99)" eingeben, Überraschung :)

 

 

 

Des Rätels Lösung: dieser Satz enthält alle Buchstaben aus dem Alphabet

nützliche Links für MS Word

Word 2003 Help - die offizielle MS Office Seite

erstellen eines Dokumentes - z.B. Diplomarbeit, sehr übersichtlich und sauber dargestellte Anleitung zum Arbeiten mit MS Word

Formatierungshilfen - Tipps zum Formatieren in Word, mit Screenshot's illustriert [falls euch unsere nicht helfen :-)]

MS Word - hier findet ihr sowohl kurz und knapp erläuterte Antworten zur Formatierung als auch  zu Features wie Serienbrief etc.

 

Vorlagen für Word - egal welche Art von Dokument ihr erstellen wollt, auf der Seite von MS werden viele Vorlagen aus verschiedenen Kategorien kostenlos zur Verfügung gestellt

 

Nützliche Tastenkombinationen (pdf) für Word, Shortcuts sparen ne Menge Zeit und Nerven

Word-Sünden

"Die 10 Todsünden in der Textbearbeitung"

1. Todsünde

"Du sollst Zeichen nicht mit einem Druck auf "Tab" oder die "Leertaste" einrücken"

 

 

So wirds richtig gemacht:

Für Absätze oder Sondereinzüge einfach die jeweilige Option in MS Word nutzen!

 

 

 

2. Todsünde

"Du sollst einzelne Zeilen nicht durch einen Druck auf "Enter / Return" beenden!"

 

So wirds richtig gemacht:

 

Diese Tast ist nur für das Ende eines Absatzes notwendig!

3. Todsünde

"Du sollst (Seiten)-Umbrüche nicht durch mehrfaches Drücken auf "Enter / Return" erzeugen"!

 

So wirds richtig gemacht:

4. Todsünde

"Du sollst Trennstriche nicht mit einem Druck auf die Bindestrichtaste einfügen"

 

So wirds richtig gemacht:

5. Todsünde

"Du sollst nicht wie wild im Text herumformatieren"

 

Direkte Formatierung!

 

So wirds richtig gemacht:

6. Todsünde

"Du sollst Listen nicht manuell mit z.B. "Sonderzeichen" oder der Bindestrichtaste erstellen"

 

So wirds richtig gemacht:

7. Todsünde

"Du sollst dein Dokument nicht rein visuell mit römischen oder arabischen Ziffern gliedern"

 

So wirds richtig gemacht:

8. Todsünde

"Du sollst Kopf- und Fußzeilen nicht manuell durch "Copy & Paste" auf jeder Seite neu erstellen"

 

So wirds richtig gemacht:

9. Todsünde

"Du sollst Inhaltsverzeichnisse weder manuell erstellen noch in ein separates Dokument ausgliedern"

 

So wirds richtig gemacht:

10. Todsünde

"Du sollst Kommentare und Änderungen nicht durch manuelle Formatierung z.B. durch Farbänderungen oder andere direkte Formatierungen kennzeichnen"

 

So wirds richtig gemacht:

Dokumentvorlagen

Um euch beim Erstellen einer Dokumentvorlage für eine Hausarbeit zu helfen, haben wir euch hier die wichtigsten Schritte dafür aufgestellt.

Dokumentvorlagen enthalten Voreinstellungen für neue Dokumente. Sie werden durch die Dateiendung dot. (für document template) kenntlich gemacht.

1. Seite einrichten

Für eine Hausarbeit gelten bei der Festlegung der Ränder folgende Regelungen:

 

Diese Einstellungsmöglichkeit findet ihr unter "Datei"  und dort bei "Seite einrichten" unter "Seitenränder" (siehe Abb.1-2)

2. Format(vorlage)

Unter "Format" und "Formatvorlagen und Formatierung"  (Abb.1) lassen sich allgemeine Eigenschaften für Überrschriften und den Text festlegen.

 

Hier lassen sich u.a. folgende Eigenschaften einstellen:

  1. Zeilenabstand: 1,5
  2. Schriftart: Times New Roman
  3. Schriftgröße: 12
  4. Blocksatz

(Einstellungen, die für Hausarbeiten notwendig sind)

 

 

 

3. Weitere Einstellungsmöglichkeiten

Zu beachten: Die Seitennummerierung sollte noch nicht auf dem Deckblatt und der Gliederung losgehen, dewegen beim Menü "Seitenzahl einfügen" bei Beginn auf der 1. Seite kein Häckchen machen (Abb.3).

 

Ein wichtiger Punkt ist die Erstellung der Formate für die Überschriften. Sie sind ein wichtiger Teil der Nummerierung und helfen uns später bei der Erstellung eines Inhaltsverzeichnisses.

 

Zu beachten ist hier deshalb:

 

Hat man die Hausarbeit soweit fertig geschrieben sowie die Seitenzahlen eingefügt, kann man nun mit Word ein automatisches Inhaltsverzeichnis erstellen.

Alle im Text verwendeten Kapitelüberschriften müssen in einem hierarchischen System durchnummeriert und im Inhaltsverzeichnis mit der gleichen Nummer und der Seitenangabe, auf der die Überschrift steht, aufgeführt werden.

 

Das Inhaltsverzeichnis erfasst dann automatisch alle Gliederungspunkte, die man erstellt und einheitlich formatiert hat. Hierzu muss man unter "Einfügen", "Referenz" , "Index und Verzeichnisse" auswählen (Abb. 5 - 6)

 

Erstellung einer Hausarbeit

Zusammenfügen der Hausarbeitenteile

Nachdem die vier Teile der Hausarbeit korrigiert und die Dokumentvorlage erstellt ist, bietet es sich nun an, daraus eine wohl formatierte und strukturierte Hausarbeit entstehen zu lassen.

 

Beim Zusammenfügen muss man folgendes beachten:

 

 

Wenn man Texte aus verschiedenen Quellen zusammenfügen will, verwendet man dazu normalerweise die Zwischenablage von Windows: Man markiert den Text, kopiert ihn mit Strg+C in die Zwischenablage und fügt ihn dann mit Strg+V wieder an gewünschter Stelle ein.

Es kommt jedoch zu Problemen, wenn der Quelltext eine eigene Formatierung aufweist, dann kann es sein, dass die Formatierung im Zieltext durcheinander gebracht wird.

 

Um das zu vermeiden, verwenden wir unter "Bearbeiten - Inhalte einfügen".

Es erscheint ein Dialogfeld, in dem wir die Option "unformatierter Text" auswählen.

Auf diese Weise bleibt unsere gewünschte Formatierung erhalten.

 

Der eingefügte Text sollte sich dann automatisch unseren Formatvorlagen anpassen.

unformatierter Text auswählen

Seitenzahlen

Seitenzahlen können entweder über "Einfügen - > Seitenzahlen..." Seitenzahlen

 

oder über "Ansicht -> Kopf- und Fußzeile eingefügt und formatiert werden.

 

 

Seitenzahlen

Abschnitte

Wenn man ein klar strukturiertes Dokument erstellen will, kommt man nicht ohne Abschnitte aus.

Diese findet man unter "Einfügen -> Manueller Umbruch

Abschnitte

 

Wir haben uns entschieden die Bearbeitung der einzelnen Teile durch einen Eintrag des Namens in der Kopfzeile deutlich zu machen. Um das hinzubekommen, muss man an den richtigen Stellen Abschnitte setzen. Individuelle Kopfzeilen lassen sich dann für diese Abschnitte umsetzen.

Von uns erstelltes Video zur Bearbeitung von Kopf- und Fußzeilen

Photos

Absatz

Format

manueller Umbruch 1

manueller Umbruch 2

Formatvorlage 1

Formatvorlage 2

Aufzählzeichen 1

Aufzählungszeichen 2

Gliederung

Kopf- und Fußzteile 1

Kopf- und Fußzeile 2

Inhaltsverzeichnis 1

Inhaltsverzeichnis 2

Inhaltsverzeichnis 3

Kommentar 1

Kommentar 2

Abb.2

Abb. 1

Abb.3

Abb. 1

Abb.2

Abb. 1

Abb.2

Abb.3

Abb.4

Abb.5

HTML & CSS

Rich sticky notes

HTML & CSS

Auf diesem Teil unserer Seite findet ihr alles rund um das Thema HTML & CSS

 

Ihr erfahrt auf dieser Seite was HTML und CSS ist, wie man ein HTML-Dokument, einschließlich mit CSS, erstellt und auf was ihr bei der Erstellung von HTML-Dokumenten beachten müsst, um typische Fehler zu vermeiden.

Wir geben hier nur einen kleinen Überblick über einige wichtige Punkte, die das Thema HTML &CSS umfassen. Wenn ihr mehr über HTML und CSS erfahren wollt, dann nutzt unsere Links.

 

Viel Spaß,

euer A-TEAM

Links zu HTML & CSS

Ein abschreckendes Beispiel, aber sehr unterhaltsam

Die goldenen Regeln für schlechtes HTML

 

das wohl bekannteste HTML Tutorial, hilft immer

SelfHTML

 

sehr brauchbares HTML Tutorial

HTML-Seminar

 

Alles zu HTML, und noch viel mehr findet ihr auf

www.html-world.de

 

Dr Web hiltft bei HTML und CSS Problemen 

 

TopStyle Lite 3.0 CSS-Editor Download

 

HTML Editor Phase 5 Downloadbereich

 

 

 

 

 

Downloads

korrigierte Web-Profile (zip):


Profil 1 von Michael
Profil 2 von Andreas
Profil 3 von Christina
Profil 4 von Benedikt

Gruppenprofil

hier gelangt ihr auf die Startseite unseres Gruppenprofils

Was ist HTML?

HTML steht für HyperText Markup Language, oder zu deutsch Hypertext Auszeichnungssprache. Es handelt sich dabei um eine Beschreibungssprache für Webdokumente. HTML definiert ganz allgemein gesehen die Struktur eines Dokuments. So kann man Überschriften, Textabsätze, Listen und Tabellen erzeugen. HTML dient heute auch als Basis zum Erstellen von Web-Seiten-Layouts.

Was ist CSS?

CSS steht für Cascading Style Sheets und ist eine Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Somit ist eine Trennung von Inhalt und Layout möglich.

Mit Hilfe von CSS ist es möglich  -mit relativ geringem Aufwand -das Aussehen von Websites zu verwalten. Es können nicht nur Farben, Schriftgrößen und Schriftarten festgelegt werden, sondern sogar der Aufbau der Website (z.B. Positionierung von Elementen).

HTML-Tags

Hier ist eine Auflistung wichtiger HTML-Tags.

Weitere Informationen über Tags und HTML findet ihr bei unseren Links!

CSS

Hier eine Übersicht der CSS-Befehle

Übersicht CSS - Schrift

Befehl Bedeutung weitere mögliche Angaben
Schrift    
font-family Schriftart Arial, Times New Roman, etc.
font-size Schriftgröße numerischer Wert in pt(Punkt) mm oder cm
color Schriftfarbe red, green, white usw. oder HTML Farbangabe
font-variant Schriftvariante normal, small-caps
font-weight Schriftgewicht normal, bold, bolder, lighter
font-style Schriftstil normal, oblique, italic

Haupttags

HTML-Tag Attribute End-Tag Bedeutung Bsp.
<!-- --> Damit können ganze Passagen ausgeklammert werden und werden vom Browser nicht mehr angezeigt. Sehr schöne Möglichkeit, um Dinge auszuprobieren!!!
So werden Kommentare im HTML-Code vermerkt, die auf der im Browser angezeigten Seite nicht sichtbar, aber beim Erstellen und Erweitern hilfreich sind.
<hr>   Damit können Trennlinien eingezogen werden. Farbe, Länge und Stärke können bestimmt werden.
(e: hr = horizontal ruler = horizontale Linie)
<html> </html> Anfang und Ende des HTML-Codes. Ihre neue Spielwiese :-)
(e: html=hypertext markup language)
<head> </head> Der Kopfbereich, in dem allgemeine Angaben gemacht werden, die nicht im Browserfenster angezeigt werden.
(e: head=kopf)
<body> </body> ab hier kommt unser eigentlicher Inhalt, der im Gegensatz zum head-Bereich im Browserfenster angezeigt wird.
(e: body=Körper)
<title> </title> Wichtig! Titel hat mehrere wichtige Funktionen:
- Titelzeile des Anzeigefensters
- Namen von gesetzten Lesenzeichen/Bookmarks
- Liste der bereits besuchten Seiten
- und für die Eintragung bei Suchmaschinen
(e: title=Titel)

Übersicht CSS - Textgestaltung

Befehl                Bedeutung         weitere mögliche Angaben
Textgestaltung                                        
text-align Textausrichtung left, right, center, justify (Blocksatz)
line-height Zeilenabstand (Durchschuß) numerischer Wert in pt(Punkt) mm oder cm
text-decoration Textgestaltung underline, overline, line-through, blink
word-spacing Wortabstand numerischer Wert in pt(Punkt) mm oder cm
letter-spacing Zeichenabstand numerischer Wert in pt(Punkt) mm oder cm
text-indent Texteinrückung numerischer Wert in pt(Punkt) mm oder cm
text-transform Textart capitalize, uppercase, lowercase, none

Tags -Schriftattribute (haben den Status "deprecated")

HTML-Tag Attribute End-Tag Bedeutung Bsp.
<b> </b> Schrift wird fett angezeigt
(e: b=bold=fett)
<i> </i> kursive Schrift
(e: i=italic)
<u> </u> unterstrichene Schrift - sehr mit Vorsicht zu genießen,
da der Surfer bei unterstrichenen Passagen von Links ausgeht!
(e: u=underlined=unterstrichen)
<sup> </sup> hochgestellte Schrift, z.B. 0C
(e: sup=superscript, zu deutsch etwa Hochstellung)
<sub> </sub> tiefgestellte Schrift, z.B. H2O
(e: sub=subscript, zu deutsch ungefaehr Tiefstellung)
<tt> </tt> bewirkt Schrift mit gleichen Abständen (dicktengleich)
(e: tt=teletyper=Fernschreiber)

Übersicht CSS - Seitenränder

Befehl         Bedeutung                       weitere mögliche Angaben
Seitenränder                                  
margin-left absoluter Abstand zum Seitenrand numerischer Wert in pt(Punkt) mm oder cm
margin-right absoluter Abstand zum Seitenrand numerischer Wert in pt(Punkt) mm oder cm
margin-bottom absoluter Abstand zum Seitenrand numerischer Wert in pt(Punkt) mm oder cm
margin-top absoluter Abstand zum Seitenrand numerischer Wert in pt(Punkt) mm oder cm

Tags - Schriftgröße

HTML-Tag Attribute End-Tag Bedeutung
<h1> .. <h6> </h1> .. </h6> Leitet eine Überschrift ein (reagiert wie Absatz!) x kann einen Wert von 1 bis 6 annehmen. Die größte Überschrift ist 1, die kleinste 6.
(e: h=heading=Überschrift)
<h1
..
<h2
align=left
align=center
align=right
align=justify
</h1>
..
</h6>
Überschriften können wie Absätzen ausgerichtet werden
<font size=...> < /font > Bestimmen Sie hier die Schriftgröße von 1 - 7. Die Angaben sind relativ. Die Normalschriftgröße ist 3. Größere Schrift bekommt man mit 4,5,6 oder 7. Kleinere Schrift mit 1 oder 2.
(e: font size = Schriftgröße)
<small> </small> Macht die Schrift um einen Schritt kleiner
(e: small=kleiner)
<big> </big> Macht die Schrift um einen Schritt größer
(e: big=größer)

Übersicht CSS - Links

Befehl                    Bedeutung                      weitere mögliche Angaben
Links    
A:link Link fast alle CSS-Befehle anwendbar
A:visited Besuchter Link fast alle CSS-Befehle anwendbar
A:active Angeklickter Link fast alle CSS-Befehle anwendbar
A:hover Link beim überfahren mit Maus fast alle CSS-Befehle anwendbar

Tags - Aufzählungen

HTML-Tag Attribute End-Tag Bedeutung Bsp.
<li> </li> Bei allen Aufzählungen (nächste 2 Punkte) müssen die Einzelpunkte durch diesen Tag gekennzeichnet sein.
(e: li = list item = Listeneintrag )
<ul> </ul> Leitet eine Aufzählugsliste ein. Wie der Spiegelstrich dargestellt wird, bestimmt der WWW-Browser. (weiteres siehe TAG <li> !)
(e: ul=unordered list=unsortierte Liste)
<ol start="1" type="1">
start="1" type="I">
start="1" type="i">
start="1" type="A">
start="1" type="a">
</ol> Leitet eine nummerierte Liste ein - Attribut ist erforderlich!
start="1" - aber welcher Einheit gestartet werden soll
type="1" - für numerische Liste
type="I" - Liste mit römischen Ziffern
type="i" - Liste mit kleinen römischen Ziffern
type="A" - Liste mit Buchstaben
type="a" - Liste mit kleinen Buchstaben
(e: ol=ordered list=numerierte Liste)

Übersicht CSS - Bilder

Befehl         Bedeutung weitere mögliche Angaben
Bilder    
background Hintergrundfarbe red, green, white usw. oder HTML Farbangabe
background-image Hintergrundbild none, URL
background-repeat Kachel repeat, repeat-x, repeat-y, no-repeat

Tags - Absatzaufbau

HTML-Tag Attribute End-Tag Bedeutung
<p> align="left"
align="center"
align="right"
align="justify"
</p> Absatzbeginn - vor und nach dem Absatz wird automatisch Platz gehalten
(e: p=paragraph)
(e: align=Ausrichtung)
<center> </center> zentrierte Ausrichtung (oft bei Gedichten)
(e: center=zentriert)
<br> erzwungener Zeilenumbruch (Zeilenende)
(e: br=break=Umbruch)
<nobr> </nobr> erzwungener Zusammenhalt, was z.B. für Wortgebilde wie "V 4.1" geschickt ist.
(e: nobr=nobreak=kein Umbruch)
<blockquote> </blockquote> Hiermit können Zitate aufgenommen werden. Tag verhält sich wie Absatztag, wobei das aussehen vom Browser definiert wird! Meistens eingerückt, auf jeden Fall anders formatiert wie Rest.
(e: blockquote=geblocktes Zitat)

Übersicht CSS - Ränder

Befehl       Bedeutung     weitere mögliche Angaben
Ränder    
border-top-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-bottom-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-left-width Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-right-width: Dicke der Rahmenlinie thin, medium, thick oder num. Wert
border-style Rahmentyp none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color Rahmenfarbe Farbname oder Hex.
padding-top Tabellenabstand oben Prozent oder num. Wert.
padding-bottom Tabellenabstand unten Prozent oder num. Wert.
padding-right Tabellenabstand rechts Prozent oder num. Wert.
padding-left Tabellenabstand links Prozent oder num. Wert.
width Rahmenbreite Auto, Prozent, num. Wert
height Rahmenhöhe Auto, Prozent, num. Wert

Tags - Verweise (Links)

HTML-Tag Attribute End-Tag Bedeutung Bsp.
<a href="..."> Ihre Beschreibung dazu </a> für interne & externe Linkes. "Ihre Beschreibung" wird später im Browser als so genannter Link angezeigt und kann angeklickt werden.
(e: a=anchor=Anker)
(e: href=hyper reference=Hypertext-Referenz
<a href="start.htm"> </a> interner Link
<a href="http://www.uxl.de/"> </a> externe Link
<a href="http://www.uxl.de/" target="_blank"> </a> für externen Link wird neue Browserinstanz aufgemacht.
<a href="#xy">Sprung nach xy </a> Sprungmarke (wird durch # gekennzeichnet) zu einem bestimmten Punkt, hier "xy". Der Punkt muss definiert werden - dazu nächsten Tag anschauen.
<a name="xy">irgendwas </a> dieser Punkt, hier "xy", soll direkt anspringbar sein. "irgendwas" darf nicht leer bleiben,.
<a href="mailto:axl@uxl.de"> axl@uxl.de </a> So kann eine E-Mail-Adresse eingegeben werden. Durch anklicken öffnet sich das E-Mail-Prg. (sofern installiert) und die E-Mail-Adresse ist bereits eingegeben.
(e: mailto= schicke nach

Tags - Farben

HTML-Tag Attribute End-Tag Bedeutung Bsp.
<body bgcolor="...">   Hintergrundfarbe der ganzen Seite
<font color="...">farbiges </font> Farbe der Schrift
<table bgcolor="..."> </table> Hintergrundfarbe Tabellen
<td bgcolor="..."> </td> Hintergrundfarbe Tabellenzelle (geht auch für Tabellenzeile bei <tr>)
Farben werden in HTML als sechsstellige Hex-Zahl notiert, es gibt jedoch auch eine Reihe festgelegter Namen, die man stattdessen benutzen kann
Farbnamen Hex + Farbe
black #000000
maroon #800000
green #008000
olive #808000
navy #000080
purple #800080
teal #008080
gray #808080
silver #c0c0c0
red #FF0000
lime #00FF00
yellow #FFFF00
blue #0000FF
fuchsia #FF00FF
aqua #00FFFF
white #FFFFFF

HTML

Wie sollte eine HTML-Datei aufgebaut sein?

HTML-Grundgerüst

Eine grundlegende Voraussetzung für eine gute HTML-Seite ist die korrekte Struktur.

 

Als erstes hat eine HTML-Seite ein Grundgerüst.

 

Jedes HTML-File soll zumindest mit den folgenden Befehlen beginnen:

 

<html>

<head>

<title>Beschreibung der Seite</title>

 

</head>

<body>

<h1>Haupt-&Uuml;berschrift</h1>

 

und mit folgenden Befehlen enden:

 

</body>

 

</html>

 

 

Es gibt zwei wesentliche Bereiche im Grundgerüst (Abbildung Grundgerüst HTML):

Zwischen <head> und </head> stehen die Angaben, die für die Verwaltung des HTML-Files notwenidig sind (Titel, Autor und dergleichen). Abbildung 1

Zwischen <body> und </body> steht die Information, die am Bildschirm des Benutzers dargestellt werden soll, also die Textelemente, Hypertext-Links, Bilder und Töne.

 

 

Das gesamte HTML-File wird zwischen <html> und </html> eingeschlossen.

 

Zwischen <title> und </title> steht die Überschrift des HTML-Files, die in Bookmarks und Suchhilfen verwendet wird.

 

Zwischen <h1> und </h1> steht die Überschrift, die am Bildschirm zu Beginn des Textes erscheint.

 

 

Texte formatieren

Hier haben wir euch ein einiige wichtige Befehle aufgelistet:

 

 

Überschrift

Anhand von Überschriften wird der Text gegliedert und strukturiert.

 

Für Überschriften wird der TAG <hX> verwendet

header=Überschrift

X steht für die Wichtigkeit der Überschrift und kann Werte von 1-6 annehmen

  • 1 ist die größte und wichtigste Überschrift
  • ...
  • 6 die kleinste Überschrift, aber immer noch größer/wichtiger als der normale Text

<h1> Überschriften-Ebenen 1 </h1>

<h2> Überschriften-Ebenen 2 </h2>

<h3> Überschriften-Ebenen 3 </h3>

etc.

 

 

 

 

 

 

 

 

 

Schriftgröße

Um innerhalb eines Textes Wörter bzw. Passagen groß oder klein zu schreiben wird der TAG <big> für größer und <small> für kleiner verwendet (End-TAG nicht vergessen!!!)

 

 

 

 

 

 

 

 

 

Umbrüche

Um einen Umbruch zu erzielen wird der TAG <br/> benutzt (break=Umbruch)

 

 

 

 

 

 

 

Absätze

Ein Absatz zwischen in einem Text erfolgt durch den TAG <p> (paragraph=Absatz).

Im Gegensatz zu einem Umbruch durch den Befehl </br> erfolgt hier eine Trennung mit Leerzeile.

Aber auch hier nicht den End-TAG </p> vergessen!!!!!

 

 

 

 

 

 

Listen

Um eine Liste zu erstellen benötigt man zwei verschiedene TAGs:

....

<ul>

<li>erster Listenpunkt</li>

<li>zweiter Listenpunkt</li>

<li>x-ter Listenpunkt</li>

</ul>

....

 

Um eine durchnummerierte Liste zu erstellen wird <ul> einfach durch <ol> (orderd list=sortierte Liste) ersetzt!!

 

 

 

 

 

 

Links

 

Textlink/ interner Link

Ein Link wird immer duch den TAG <a href="DATEINAME.HTM">BESCHREIBUNG</a>

Die groß geschriebnen Teile müssen hierbei durch den jeweiligen Dateinamen und die entsprechende Beschreibung ersetzt werden.

 

Wichtig: Bei der Bestimmung des Dateinamens müssen einige Punkte beachtet werden:

Also so nicht: "Über uns.htm"    Besser: "ueber-uns.htm"

 

Im Browserfenster wird der Link dann unterstrichen angezeigt: Über uns

 

Externer Link

Um auf eine andere Seite im Internet zu verweisen wird der TAG

 

<a href="URL">BESCHREIBUNG</a>

 

An die Stelle des Dateinamens tritt also die URL der Seite auf die man verlinken will.

Beispiel: <a href="http://www.tu-ilmenau.de">Startseite</a>

 

TIPP:

Um die Seite in einem neuen Fenster zu öffnen, damit die eigene Seite noch erhalten bleibt, fügt man den Zusatz "target" dem Befehl zu:

 

<a href="http://www.tu-ilmenau.de/start.htm"target="_blank">Startseite</a>

 

 

 

Farben

 

Farben peppen eine Internetseite auf und können wichtige Passagen hervorheben. Farben könen entweder für die Schrift eingesetzt werden oder zur Hintergrundgestaltung dienen.

 

Aber es gilt stets der Grundsatz: Weniger ist mehr!     (Immer im Hinterkopf behalten ;) )

 

Schriftfarbe

Um eine Schrift farbig zu machen, benutzt man den HTML-TAG

 

<font color="Farbnummer"> Dein Text </font>

 

z.B. rote Textfarbe: <font color="#FF0000"> Dein Text </font>

 

 

Hintergrundfarbe

Um den Hintergrund farbig zu machen, fügt man dem Body-TAG noch den Befehl bgcolor (backrgound-color) hinzu:

....

<body ... bgcolor="Farbnummer" ... >

...

</body>

...

 

Farbpallette

Die Farben werden meistens in Hexadezimalen angegeben. Hintergrund hierzu ist das RGB-Farbmodell, also die drei Grundfarben rot, grün und blau und deren Mischung.

In der Abbildung "Farbtabelle" sehen die die Standard-Pallette, die 216 Farben enthält.

 

2. Möglichkeit Farben anzugeben:

Die Farben können auch über ihren englischen Namen angegeben werden:

Hierzu beim HTML-Editor den Reiter "Colors" anklicken und dann im rechten Pulldownmenü den Punkt "Namen" anklicken.

 

Die Farben werden nun mit ihrem englischen Namen angezeigt:

z.B. color ="red"

       color="yellow"

       etc.

 

 

 

 

 

 

 

 

 

HTML&CSS

Die 10 Gebote in der HTML-Programmierung

 

Was du bei der Arbeit mit HTML und CSS beachten musst und wie du typische Fehler vermeiden kannst, erfährst du in den folgenden Geboten:

1.Gebot

Du sollst darauf achten, "well-formed HTML" Seiten zu erstellen I: gute HTML-Struktur

2.Gebot

Du sollst darauf achten. "well-formed HTML" Seiten zu erstellen II: "HTML-Tags"

Aus „ä“ wird „&auml;“
Aus „ü“ wird „&uuml;“
Aus „ö“ wird „&ouml;“
Und „ß“ wird zu „&szlig;“

 

HTML-TAG

TAGs bilden die Grundlage für die Arbeit mit HTML und CSS.

Als HTML-TAG wird ein einzelner HTML-"Befehl" bezeichnet.

Ein TAG (mit oder ohne Inhalt), der geöffnet wird, muss auch wieder mit einem dazugehörigen End-TAG geschlossen werden:

 

 

Anfangs- und End-TAGs

 

Es gibt einen Anfangs- und einen End-TAG.

 

Der End-TAG ist fast identisch mit dem Anfangs-TAG, allerdings muss bei dem End-TAG nach dem Kleinerzeichen (<) ein Schrägstrich kommen.

z.B. </befehl>


Was sind Elemente in HTML?

Elemente fassen Teile eines Dokuments zu Einheiten  zusammen und geben so einem Dokument eine logische Struktur oder bestimmen die Darstellung bzw. das Verhalten dieser Einheiten.

Beginn und Ende von Elementen werden von Start- und End-Tags makiert. Tags sind mittels spitzer Klammern <> als Markup kenntlich gemacht, also als nicht zum Dokument gehörige Strukturierungszeichen hervorgehoben. Zwischen den spitzen Klammern steht der Elementname.

 

<Elementname> ... </Elementname>

Was sind Attribute in HTML?

Attribute sind Eigenschaften die für Elemente vergeben werden können.

Sie werden im Start-Tag eines Elements in der Form attribut="attributwert" angegeben.

Mit < IMG src="bild1.gif"> wird z.B.dem Element IMG durch das Attribut src (source) die Grafikdatei mitgeteilt, die ausgegeben werden soll.

Was sind Entitäten?

Entitäten =  spezielle Sonderzeichen = Ersatzzeichen

 

Sonderzeichen sind Zeichen, die nicht auf der Tastatur vorhanden sind oder die eine spezielle Bedeutung haben. Zur Darstellung von Sonderzeichen werden in HTML sogenannte Entities verwendet. Eine Entity ist ein Name für ein bestimmtes Sonderzeichen.

Entities werden durch ein &-Zeichen am Anfang und durch ein Semikolon am Ende gekennzeichnet.

 

Beispiel: Auf einer amerikanischen Tastatur gibt es keine Tasten für die deutschen Umlaute. Daher wird etwas für den Buchstaben ä die Entity &auml; verwendet.

Das Wort "Säge" kann im HTML-Quelltext dann wie folgt geschrieben werden: S&auml;ge

 

 

 

3.Gebot

Du sollst darauf achten, "well-formed HTML" Seiten zu erstellen III: korrekte Hyperlinks

 

4.Gebot

Du sollst strikte Trennung von Inhalt und Layout beachten

Man unterscheidet hierbei unter HTML und CSS.

CSS beschreibt, wie die Seite aussehen soll (z.B. Schriftgröße, Farbe etc.) und HTML legt die Struktur fest. Diese Trennung solte man von Anfang an einhalten, um später aufwendige Korrekturen zu vermeiden.

Hier einige Layout-Aspekte, die schon zu Beginn der Programmierung in CSS festgelegt werden können:

 

- Farben (Schrift, Hintergrund etc.)

- Aussehen der Links (Farbig? Unterstrichen? Fett? Kursiv?)

- Lage der eingebundenen Elemente (Links-, rechtsbündig? Zentral, Abstände zu den Rändern etc.)

5. Gebot

Du sollst nicht mit Attributen oder Elementen formatieren, die den Status "deprecated" haben

 

Was sind logische Auszeichnungen?

In HTML gint es logische und physische Elemente zur  Auszeichnung von Text.

Logsiche Textauszeichnungen haben Bedeutungen wie "betont" oder "emphatisch". Bei logsichen Elementen entscheidet der Browser, wie ein solcher Text hervorgehoben wird (z.B. fett, kursiv oder andersfarbig). In Verbindung mit Stylesheets kann man logische Textauszeichnungen allerdings nach Wunsch formatieren.

6. Gebot

Du sollst eine HTML-Seite nicht mit Layouttabellen gestalten

7. Gebot

Verzichte auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten

Am besten legt man zu Beginn im Body fest, welche Formate verwendet werden sollen. Dann gelten diese einheitlich für die gesamte Seite.

8. Gebot

Du sollst für z.B. Grafiken und Formatierungselemente immer auch eine Beschreibung mittels "alt-Attribut" hinzufügen

Das "alt-Attribut" kommt vor allem dann zum Einsatz, wenn Elemente auf einer HTML- Seite nicht angezeigt werden können. Bewegt man den Curser nämlich auf die Stelle, an der das Element sitzt, erscheint ein Text, der diese Näher beschreibt.

 

Füge hierzu in den geöffneten Tag des zu beschreibenden Elements "alt="..." ein, wobei du dann "..." durch den Text ersetzt, der das Element beschreiben soll. Danch einfach mit "/" wieder schließen.

9. Gebot

Du sollst Nutzergruppen nicht durch Aussagen wie: "optimiert für Internet Explorer 4.1. SeaMonkey 5.0, etc." oder die Verwendung von horizontalen Scrollleisten ausschließen

Damit erst keine horizontale Scrollleiste entsteht am besten immer unter 800 Pixeln bleiben! Abbildung 1

 

10. Gebot

Du sollst Metainformationen sinnvoll einsetzen

 

Zusatzinformationen sind bei HTML-Seiten erwünscht, allerdings nur wenn diese auch sinnvoll sind!

Was sind Metainformationen?

In Metainformationen kann man verschiedene nützliche Anweisungen für WWW-Server, WWW-Browser und automatische Suchprogramme im Internet notieren.

 

Einige der Metainformationen sind speziell für automatische Suchprogramme im Internet gedacht. Das sind Programme, die regelmäßig durch den gesamten Informationsraum Internet wandern, Verweisen folgen, aufgerufene Datein lesen und die gelesenen Daten an die heimische Suchdatenbank übermitteln. Dadurch wird eine HTML-Datei in dem entsprechenden Suchdienst auffindbar. Durch bestimmte meta-Informationen kann man bestimmen, welche Daten das Suchprogramm an seine Suchdatenbank überträgt. Man kann auch verbiten, dass ein Suchprogramm überhaupt Daten aus der Datei überträgt.

HTML und CSS Tutorial

Einführungsvideo in HTML und CSS, erklärt die Basisbefehle (Englisch)

 

 

Bearbeitung eines HTML-Dokuments

Wie kann ich nun ein bereits bestehendes HTML-Dokument individuell anpassen/verändern?

 

  1. Als aller erstes solte man sich einen geeigneten HTML-Editor zulegen (z.B. den HTML-Editor Phase 5 -> siehe Links), der beispielsweise Element-und Attributnamen farblich darstellt, denn so wird der Quelltext des Dokuments übersichtlicher und man erkennt den sichtbaren Text des HTML-Dokuments besser.
  2. Am besten immer von oben nach unten bei einem Quelltext durcharbeiten, um nicht den Überblick zu verlieren- Angefangen wird also mit dem head-Bereich, in dem die nicht-sichtbaren Angaben geregelt werden.
  3. Im head-Bereich kann man nun die meta-Angaben ändern (Autor, Beschreibung der Seite etc.).
  4. Dann den Titel anpassen (<title>.. >/title>).
  5. Den nächsten Schritt widmen wir nun CSS ( Bsp.: <link href="styles.css" rel="stylesheet" type="text/css" />)
  6. Wie bereits schon in den Geboten erwähnt, ist CSS für die Gestaltung einer Seite zuständig (z.B. CSS-Editor TopStyle Lite 3.0 -> siehe Links). Es ist möglich CSS-Befehle direkt in einem HTML-Dokument zu notieren, oder in eine externen Datei auszulagern. Das bietet sich an, wenn man mehrere Seiten mit dem gleichen Design erstellen möchte. Layout und Inhalt sind voneinander getrennt. Stehen die CSS-Angaben in dem HTML-Dokument, das man bearbeiten will, so kann man beliebige Änderungen vornehmen  (Farbe, Schriftgröße, Textausrichtung etc). Sind sie in einer externen Datei, so muss man aufpassen, dass die Änderungen in der Datei sich nicht ungewollt auch noch auf andere HTML-Dokumente auswirkt.
  7. Hat man nun alle gewünschten Änderungen vorgenommen, kann man sich nun dem body-Bereich des HTML-Dokuments widmen (<body>... </body>). Hier können nun die Texte berabeitet bzw. durch eigene ersetzt werden sowie Bilder eingefügt/ersetzt werden. Alle Inhalte werden in der HTML Datei notiert. 
  8. Bei den Bildern darauf achten, dass man diese in dem Ordner "Image" abgelegt hat, bzw. die relative (oder auch absulute) Pfadangabe in der HTML-Datei stimmt, damit auf die gewünschte Grafik zugeriffen werden kann.
  9. Um nun das alte Bild durch das eigene zu ersetzen, einfach den Dateinamen (mit Dateiendung) bei <img src.... > ersetzen und nicht das alt-Attribut vergessen! :)

Photos

HTML

CSS

Grundgerüst HTML

Abbildung 1

h1 Editor

h1 Bild

h2 Bild

h2 Editor

Schriftgröße

Umbruch

Absatz

Absatz Editor

Liste Bild

Liste Editor

Link

Link vollständig

Target

RGB-Farben

Farben - hex

Farbtabelle

Kein End-Tag

Start- und End-Tag

Entitäten

Keine Entität

Enität

Link falsch

Link richtig

Style

b-Tag

strong-Tag

Kein alt-Attribut

Alt-Attribut gesetzt

Abbildung 1

Abbildung 2

Hilfs-Widgets

News

Daily Minute

Video-Podcast

Rich sticky notes

MP3s einbinden

Einfach auf "edit" klicken, gebenenfalls "HTML" anwählen und die Link-Adresse in das Skript hineinkopieren.

Kommentare