Einführung in HTML

HTML- Befehle,
auch Tags genannt, erkennt man daran, dass sie in spitze Klammern (< >) gesetzt werden.
Viele Befehle besitzen einen einleitenden und einen abschließenden Tag. Alle Infos dazwischen werden vom Befehl beeinflusst.

Beispiel: ein Textabschnitt in Kursivschrift.
<I>
Hier steht Text in Kursivschrift.
</I>
Abschließende Tags enthalten die gleichen >Befehle wie die einleitenden, nur dass ihnen ein Schrägstrich (/) vorangestellt wird.

Manche Tags können allein stehen, zum Beispiel das Tag für den Zeilenumbruch.
Der Befehl <br> kann nur an einer Stelle auftreten.
Beispiel:
Hier gibt es kein<br>
abschließendes Tag.

Tags können auch verschachtelt werden.
Dadurch kann z.B. mitten im Satz ein (oder mehrere) Wort(e) eine andere Schriftart verwendet werden.
Beispiel:
<h1>
Diese Überschrift <1>wird an dieser Stelle</> kursiv geschrieben
</h1>
h steht für Header und kennzeichnet eine Überschrift.
h1 ist eine besondere Form für eine bestimmte Zeichengröße.

Zur besseren Übersichtlichkeit empfiehlt sich, die Befehle über mehrere Zeilen zu schreiben.
Beispiel:
<h1>Diese Zeile enthält <I>mehrere</I> Tags</h1>
übersichtlicher:
<h1>
Diese Zeile enthält
<I>mehrere</I>
Tags
</h1>

Es ist unerheblich, ob die Buchstaben der Befehle groß oder klein geschrieben werden und ob Leerfelder dazwischen sind.

Einige HTML- Befehle
A
Anchor (Anker)
zur Navigation; um Textmarken und Hyperlinks zu definieren
<A>…</A>

ADRESS
Textstruktur; Adressendefinition, der zwischen den Tags befindliche Text wird kursiv dargestellt und eingerückt.
<ADRESS>…</ADRESS>

B
Bold
Textformatierung; Text wird fett dargestellt
<B>…</B>

BASEFONT
Select Base Font
Navigation; legt den Standardzeichensatz für das Dokument fest
<BASEFONT>

BIG
Print Big
Textformatierung; Text wird größer dargestellt als die Standardgröße (Stufe wird um 1 erhöht)
<BIG>…</BIG>

BODY
Dokumentenstruktur
definiert den Hauptbereich des Dokuments, der die darstellbaren Infos enthält
[<BODY>] [</BODY>]

CENTER
Center Text
Textformatierung; Text wird zentriert dargestellt
<CENTER>…</CENTER>

„Warum schreibst du das hier alles auf? Es gibt doch genug Lernstationen im Web.“ – „Meine Art zu lernen…“

Dateinamen

Eine Webseite ist ein Textdokument, das mit HTML-Tags versehen ist. Diese hat, wie andere Dokumente, auch einen Dateinamen zur Identifikation.

Bei der Zuweisung der Namen solltest du einiges beachten, was Organisation, Zugriff und Auffinden dieser Dateien erleichtert und sicher stellt, dass der Browser die Seite korrekt anzeigt.

Komplizierte Namen sollten vermieden werden, dazu gehört auch, dass du nur Kleinbuchstaben für die Bezeichnung verwendest. Ebenso wichtig ist die korrekte Dateinamenerweiterung. An dieser erkennt der Browser, wie ein Textdokument gelesen werden soll. die Endung muss lauten .htm oder .html

Wenn die Seite eine andere Endung enthält, z.B. „.txt“, behandelt der Browser die Datei als Textdokument und zeigt dem Besucher den HTML-Code an.

Dateiname in Kleinbuchstaben Dateiendung
klein_buchstaben. html
Groß_Buchstaben. htm
Dateinamen in Großbuch- staben sind lästig beim Eingeben und erschweren das Auffinden der Seite

Für alle Ordner und Verzeichnisse solltest du Kleinbuchstaben verwenden.

Basis-URL enthält ein Schema, einen Server Namen, einen Pfad und einen Dateinamen.

„http:// www. teddy_ und_ sigi. com / profile/ file.html“
Schema server.Name Pfad Dateiname
gibt dem Browser Anweisun- gen, wie die zu öffnende Datei behandelt werden muss. „HTTP://“ für Zugriff auf Web- Seiten
„HTTPS://“ für sichere Web-Seiten
„FTP://“ für Download von Dateien
„MAILTO:“ für das Senden elektronischer Nachrichten
„FILE:///“ für Zugriff auf die Rechnerfestplatte

Name des Servers, auf dem die Datei abgelegt ist

der Pfad zur Datei

der Name der Datei

Die Absolute URL beschreibt die genaue Adresse, ähnlich einer genauen Postadresse mit Angabe von Namen, Straße, Hausnummer, Postleitzahl, Stadt, Land

Die relative URL beschreibt den Speicherort in Abhängigkeit vom Standort. (z.B. Bild 5 im gleichen Verzeichnis) Relative URLs sind problemloser und vereinfachen das Verschieben deiner Seiten auf einen Server

index.html site.com/web/index.html index.html
image.gif site.com/web/images/image,gif images/image.gif
data.html site.com/info/data.html ../info/data.html
homepg.html remote.com/pub/homepg.html absolute URL verwenden
info.html remote.com/ben/info.html absolute URL verwenden
Dateiname Absolute URL (überall) Relative URL (im DA-WO-DU-BIST.html)
Ein Link besteht aus drei Komponenten:

einer Bestimmung (Destination)
einer Beschriftung (Label)

einem Ziel (Target)

damit legst du fest, was geschieht, wenn der Besucher darauf klickt diesen Teil sieht der Besucher und klickt darauf, um die Bestimmung zu realisieren

wo wird die Bestimmung angezeigt

Bild anzeigen, Sounddatei oder Film abspielen, Dateien herab laden, E-Mail versenden, Programm ausführen und mehr
Verbindung zu anderen Webseiten und zu speziellen Stellen auf anderen Webseiten, genannt Anker
Alle werden beim Schreiben einer URL definiert
Text, Bild oder Kombination aus beidem
Text häufig unterstrichen
je ansprechender gestaltet, um so eher wird darauf geklickt

besonders benanntes Fenster oder Frame oder neues Fenster/Frame

Link zu einer anderen Webseite

1.
< ahref=“page.html“> eingeben
2.
Beschriftungstext eingeben

3.
</a> eingeben, um die Definition des Links abzuschließen

page.html entspricht der URL der anderen Webseite
Beispiel:

<HTML><HEAD><TITLE>Einfache Links</TITLE>
</HEAD><BODY>
<H1>Liesel und Teddy</H1>

<P>Zwar kennt jeder Liesel, aber wer Teddy ist, wissen die wenigsten. Aber den Weg zu dem <A HREF=“page.html“>Kleinen</A> kann ich euch erklären.

</BODY>

hier kann das Wort >Kleinen< angeklickt werden

Don`t scroll-take a button

Befehl:

<p align=“center“><a href=“URL/#anfang“><font color=“#f79646″ face=“Comic Sans MS“ size=“4″>Don`t scroll-take a button</font></a></p>

URL: Adresse aus der Browserleiste kopieren (Strg+c)

Sonne, Mond und Sterne

Eine Slide Show, die ich für den BS-Entenclub gebastelt habe.
Den Endlos-Sound könnt ihr am Lautsprechersymbol ausschalten.
 
 
 

 

 

 

Ich fotografiere gern, zwar nicht so professionell wie zum Beispiel Peter, und eine Profikamera besitze ich auch nicht, aber doch leidenschaftlich und am liebsten Ecken, die Mensch sonst nicht unbedingt betrachtet.

Heute aber ein Bild, dass in die Ecke >Romantisch – Verträumt – Supersentimental< gehört und ganz prima zum ausklingenden vierten Adventabend passt.
Hier ist das Bild, dass sich mir bot, als ich heute mal nicht am Rechner saß, sondern bequem auf dem Sofa sitzend meinen selbst gebackenen Weihnachtskuchen mümmelte und dann den Blick von meinem Buch zufällig zum Balkonfenster wandte.

Meine Großmutter pflegte bei solch einem  Abendhimmel im Dezember zu sagen: "Die Englein backen."

Einführung in HTML

Tag/Attribute

A
zur Erstellung von Links und Ankern

HREF
zur Angabe der URL einer Seite oder des Ankernamens

NAME
zur Markierung eines Bereichs der Seite, auf den ein Link verweisen kann

B
zur Anzeige von Text im Fettformat

COLOR
zur Bestimmung der Standardtext- farbe

FACE
zur Bestimmung der Standardschrift- art

SIZE
zur Bestimmung der Standardtext- größe

BODY
zum Einschließen des Hauptbereichs einer Seite

BACKGROUND
zum Bestimmen eines Hintergrund- bildes

BGCOLOR
zum Bestimmen der Hintergrund- farbe

LEFTMARGIN
zur Angabe der linken Seitenab- stände

TOPMARGIN
zur Angabe der oberen Seitenab- stände

TEXT
zur Bestimmung der Textfarbe

ALIGN
zur Ausrichtung der Beschriftung oberhalb oder unterhalb der Tabelle

CENTER
zum Zentrieren von Text, Bildern und anderen Elementen

SPAN
zum Bestimmen der Anzahl von Spalten in einer Spaltengruppe

DIV
zum Aufteilen einer Seite in logische Bereiche

EMBED
zum Einfügen von Multimedia-Dateien (und anderen) in eine Seite

FONT
zum Ändern der Größe, des Stils und der Farbe individueller Buchstaben oder Worte

COLOR
zum Ändern der Textfarbe

FACE
zum Ändern der Schriftart

SIZE
zum Ändern der Schriftgröße

Einführung in HTML

Web-Seiten werden mit HTML geschrieben. Du kannst damit Text und Grafik formatieren, Musik und Video einfügen in einer Sprache, die jeder Computer lesen kann.
Die Darstellung der Web-Seiten ist abhängig vom Computertyp, vom Monitor, von der Geschwindigkeit der Internet-Verbindung und vom verwendeten Browser.
Ab 1994 entwickelte sich die vom Web-Erfinder Tim Berners-Lee gewünschte Universalität in die entgegengesetzte Richtung, als Netscape einen Satz von Erweiterungen für HTML entwickelte, die nur Netscape beherrschte. Entsprechend reagierte Microsoft mit ebenfalls nicht standardisierten Erweiterungen, die nur der eigene Browser Internet Explorer erkannte.
Tim Berners-Lee leitet das World Wide Web Consortium, kurz W3C genannt, die das Ziel hat, die Web-Gemeinde vom Aspekt der Universalität zu überzeugen und die Barrieren zu beseitigen. Mitglieder dieses Consortiums sind unter anderen Netscape Communications (jetzt Teil von America Online), Microsoft, Adobe, Macromedia.
Mehr Information zu den Problemen, die die Fragmentierung des Web mit sich bringt, gibt es zum Beispiel bei:
www.webstandards.org
Ein grosser Erfolg war die Entwickluing von CSS – Cascading Style Sheets, ein System, dass den Inhalt (in HTML) vom Format (in CSS) trennt, um das Design besser zu kontrollieren und die Seite gleichzeitig universell zu halten.
Die beste Unterstützung für CSS bietet der Opera-Browser (aus Norwegen)
Die Probleme bestehen aber weiterhin: was beim IE gut aussieht, bricht bei anderen Browsern unter Umständen zusammen.
Ein Kompatibilitätsdiagramm und Testseiten gibt es hier:
www.cookwood.com/browser_tests/
Link zu Empfehlungen des Consortiums:
www.w3.org/DOM/
Statistik darüber, welche Anwender welche Browser und Platform/Monitor zu welchen Zeiten nutzen, bietet:
www.statmark.com

Hauptaugenmerk liegt auf den Tags. Das sind Schlüsselworte, die in Zeichen kleiner als (<) und größer als (>) eingeschlossen sind und die Art des Inhalts bestimmen.
Zwischen diesen öffnenden und schließenden Tags befindet sich der Text. Die Tags benutzen dasselbe Befehlswort, nur der Schluss des Befehls wird mit einem Schrägstrich  ( / ) gekennzeichnet. Zwischen Text und Klammern gibt es keine Leerzeichen:
<B>Hallo</B>Beispiel

<B> Hallo </B> Beispiel
öffnender Tag

 

eingeschloss- ener Text

 

schließender Tag

 

umgebender Text

 

 

Dazu haben viele Tags Attribute, sie stellen Optionen zum Verfeinern der Formatierung für den eingeschlossenen Text dar. Ein Attribut gibst du zwischen Befehlswort und dem schließenden Größer-als-Zeichen ein. Du kannst mehrere Attribute in einem Tag verwenden. Gib sie nacheinander in beliebiger Folge durch ein Leerzeichen getrennt ein.

<Table Bordery>

<Table bordery>

 

  Attribut

 

Attribute besitzen oft Werte, zum Beispiel left, right, all, #FFFFFF

Die Werte müssen in gerade Anführungszeichen “ “ gesetzt werden. Wenn Werte nur aus Buchstaben (A-Z, a-z), Zahlen (0-9), einem Bindestrich (-) oder einem Punkt (.) bestehen, können sie auch ausgelassen werden. Um Irrtümer zu vermeiden, solltest du sie bei URLs immer verwenden.

<IMG SRC=“image.gif“ HSPACE=5>

<img src = „image.gif“ hspace = 5>
  Attribut
von img

 

  Wert für
SRC

 

Attribut
von
img

 

  Wert
für
hspace

 

Die Groß- und Kleinschreibung spielt beim HTML-Code keine Rolle.
XML unterscheidet Groß- und KLeinschreibung.

Quelle: Elizabeth Castro – HTML 4, 2000

Testing HTML – Tabelle mit Farbhintergrund

Das ist ein Versuch.

Vielleicht klappt dat ja ma so, wie ick det will und wat will ick denn?

Einen Blog veröffentlichen, der einen anderen Hintergrund hat.

„Was hab ich getan?“ – „Ja, was haste getan? Is ja alles lila hier.“

Ich hab ein neues Blog geöffnet, gleich auf HTML geschaltet und die <DIV></DIV> weg gemacht.

Dann hab ich angefangen mit neuem Code:

<body> <table border=„0“ width=„100%“> <tr>

<td width=„100%“ bgcolor=„#9966FF“><font face=„Arial“ color=„#CCCCCC“>Das ist ein Versuch.</font>

<p>&nbsp;</td> </tr> </table> </body>

Nun hab ich den HTML-Modus verlassen zum prüfen – jau, der Hintergrund ist lila (letzter Versuch mal wieder) und ich kann nun den restlichen Text beruhigt im Normal-Modus schreiben.

„Geht doch.“

Könnte zur Probe noch eine Tabelle drunter setzen in anderer Farbe.

 

 

Das ist ein Versuch.

Siehste – die Farbe lila is gewöhnungsbedürftig, ich wechsel mal eben nach grün.

„Wo haste denn die Farbnummer her?“

„Vom PaintNet. Da klickste auf WEITERE FARBEN, dann zeigt es dir die Codes zu den ausgewählten Farben.“

Die URL für Hintergrundbilder lassen sich immer noch nicht einfügen…..

 

 

Kannste auch benutzen, um feine Linien als Abgrenzung zwischen den Beiträgen zu setzen.

Vorherige ältere Einträge Weiter Neue Beiträge

Archiv

Noch mehr interessante Links

Backgrounds | http://www.graphicsgrotto.com

M.C.Escher Gallerie

Mein Banner:

Sigitaria.wordpress.com

Dieser Button wurde generiert bei Flo auf
webmaster-world.com

Mein Kunstblog

KLICK

Disclaimer

Zeichnungen und Texte unterliegen dem Copyright des Verfassers.
Wenn man sich von den Links und Kommentaren der Besucher distanziert bzw. der Verantwortung dafür enthält, läuft man Gefahr, nach der Nivellierung des Jugendmedienschutz-Staatsvertrags in die Kategorie "Nicht jugendfrei" bzw. "frei ab 16" eingeordnet zu werden. Ich appeliere daher an euren Respekt vor dem Individuum.
Jugendmedienschutz-Staatsvertrag

Achtung!
Sollten versehentlich fremde Rechte Dritter oder gesetzliche Vorgaben verletzt worden sein, bitte ich um sofortige Benachrichtigung. Die (zu Recht) beanstandeten Inhalte werden dann sofort entfernt. Ein Anwalt ist nicht erforderlich. ( siehe auch: Urteil d. Landgericht Hamburg vom 12.05.1998 - 312O85/98 )
Muster-Disclaimer

Smilie by GreenSmilies.com

Grabbelkiste

Auf der Müllhalde findet sich auch Messing - du musst nur lang genug suchen... Smilie by GreenSmilies.com ...willste auch nen Smilie?...
Creative Commons Lizenzvertrag
This Werk bzw. Inhalt is licensed under a Creative Commons Namensnennung-Nicht-kommerziell-Weitergabe unter gleichen Bedingungen 3.0 Deutschland License.
Danke Tina, für den Tipp (CreativeCommons)*
Die Wahl des Browsers ist wichtig

erzaehlmirnix

hässliche, linksgrünversiffte Paintcomics

T. Mayer, Illustrations

Off The Wall: Artwork And Sketches

uhupardo

Das kommt mir Spanisch vor!

Laufblog

Lauferfahrung dokumentiert

Sternchenschnuppe**

don't worry be happy.. .INNOVATIONEN...

NILGANS ~ SPACE

Stell Dir vor es ist Krieg und keiner geht hin !!!

Ich lebe und teile

in meinen Bildern - gesehen und betextet

Staila's Blog

dies und das... je nach Laune

Gisel@s Blog - Allerlei

Der verlorenste aller Tage ist der, an dem man nicht gelacht hat.

Erikas Blog,Wichtiges und Unwichtiges

HUMOR IST DER KNOPF;DER VERHINDERT;DASS UNS DER KRAGEN PLATZT: von Joachim Ringelnatz

...das wird schon wieder..........................................................................................................