Homepage selbermachen 7.852 Themen, 35.619 Beiträge

@Amenophis IV -- HTML 7

neanderix / 15 Antworten / Baumansicht Nickles

Hallo Pharao ;-)

es hat etwas laenger gedauert, aber es ist so weit --
hier ist die naechste Lektion:

Darstellung von Text im Dokument

Das auffaelligste an (fast) jedem Dokument ist -- klar, die Überschrift.
Fuer die, die es nicht wissen: das ist das, womit die B..D-zeitung die neugieren Menschenmassen anlockt *gg*

Damit du genau das (aber bitte nicht in dem Stiel) auch auf deiner WEbsite kannst, wurden in HTML als einfache und einheitliche Strukturierungsmoeglichkeit 6 Überschriftenebenen definiert.
Diese sind in aufsteigender Reihenfolge durchnumeriert, d.h. 1 ist die Ueberschrift der hoechsten, 6 der niedrigsten Ebene.

Fuer Überschriften wird - im Gegensatz zu normalem Text - automatisch ein neuer Absatz gebildet; damit sind keine eigenen Absatzschaltungen mit (p) (/p) notwendig (dazu spaeter mehr).

Überschriften stehen zwischen den Tags (Hx) und (/Hx) (ich habs gross geschrieben wg. des kleinen x), wobei x wie oben erwaehnt, eine Ziffer zwischen 1 und 6 ist.

Mit dem nachfogenden Code bekommst du ein Beispiel zu jeder Ebene:

(html)
(head)
(title)Überschriften-Demo(/title)
(meta name="Author" content="deinname")
(/head)
(body)
(h1)Überschrift Eins(/h1)
(h2)Überschrift Zwei(/h2)
(h3)Überschrift Drei(/h3)
(h4)Überschrift Vier(/h4)
(h5)Überschrift Fünf(/h5)
(h6)Überschrift Sechs(/h6)
(/body)
(/html)

In diesem Beispiel werden die Überschriften linksbündig ausgerichtet.
Das kann man allerdings auch aendern; dafuer gibt es den "align" Parameter.

Mit (Hx align="center")....(/Hx) richtest du zentriert, mit
(Hx align="right")...(/Hx) rechtsbuendig aus - vorsicht, manche Browser verstehen das nicht!

Du kannst die Wirkung ausprobieren, in dem du den "ALIGN" Parameter in obigem Beispiel mal einfach einfuegst.

Zeilenumbrüche und Absaetze

Wie oben erwaehnt, reicht es in HTML nicht, einfach die Zeilenschaltung zu betaetigen, um beim Schreiben eines Dokumentes einen neuen Absatz zu beginnen. Veilmehr muss ein Absatzwechsel aber auch ein Zeilenwechsel durch die entsprechenden Tags erzwungen werden.

Das Tag (p) (von engl."Paragraph"=Absatz) erzeugt einen Absatz. Eigentlich kann dieses Tag alleine stehen, da kaum ein Browser auf den Abschluss durch (/p) besteht.
Sicherer ist das trotzdem, denn erstens gibt es durchaus Browser, die darauf bestehen (auch wenn ich keinen kenne ;-) ) und zweitens, so hab ich zumindest geruechte Weise gehoert, soll die Erfordernis des expliziten Abschlusses durch (/p) bald in den Standard mit aufgenommen werden.

Also - der Code

Zeile eins
Zeile zwei
Zeile drei

wuerde - ohne (p) Tag als:

Zeile eins zeile zwei Zeile drei

dargestellt, d.h. die von dir im Quellcode ausgefuehrte Zeilenschaltung wird vom Browser durch ein Leerzeichen ersetzt. Fuegst du dagegen ein Absatz-Tag ein, dann stehen die Zeilen im Ergebnis untereinander, selbst dann, wenn der Quellcode in einer zeile steht:

Zeile eins(p)Zeile zwei(/p)

wird zu:

Zeile eins

Zeile zwei

Auch dem (p)-Tag kannst du den Parameter ALIGN hinzufuegen.

Nach dem Ende eines mit dem (p) Tag definierten Absatzes folgt immer auch eine Leerzeile. Das fuehrt dazu, das der Text manchmal mehr auseinandergezogen wird, als eigentlich erwuenscht. Was bei Textverarbeitungen der "weiche Zeilenumbruch", also eine zeilenschaltung innerhalb eines Absatzes ist (WORD: Shift-Enter), kann in HTML durch das Tag (br) (engl.: break) eingefuegt werden. Zum (br) Tag gibt es uebrigens kein End-Tag, d.h. (/br) gibt es nicht.

Zeile eins(br)Zeile zwei(p)Zeile drei(/p)

wird zu

Zeile eins
Zeile zwei

Zeile drei

Normlerweise wird eine Zeile vom Browser automatisch umbrochen, sobald sie an den Rand des Browserfensters stoesst - dies passiert z.B. dann, wenn eine Site auf Browser-Vollbildmosdus ausgelegt ist, der Anwender den Browser aber im Fenster betreibt.
Soll dieser Umbruch nun aus irgendeinem Grund verhindert werden -- bitte sehr:

mit dem Tag (nobr)(/nobr) von engl. "no break" wird verhindert, das der Text, der zwischen diesen beiden Tags steht, umbrochen wird. Allerdings muss der Anwender dann mittels des horizontalen Scrollbalkens scrollen, um den Text in seiner vollen laenge zu lesen.
Daher gilt: bitte nur im Notfall einsetzen!

Genau das Gegenteil, naemlich einen Umbruch mitten im Wort, wird mit dem Tag (wbr) von engl.: "Word Break" erreicht, zu dem es keinen End-Tag gibt. Das Tag entspricht dem bedingten Trennzeichen, das von Textverarbeitungen her bekannt sein sollte.
Allerdings: der Browser stellt hier keinen Trennstrich dar. Umgekehrt reicht ein Bindestrich nicht, um den Umbruch zu erzeugen; auch in diesem Fall muss mit dem Tag nachgeholfen werden.
Da man nie wissen kann, wie breit das Fenster des Anwenders gerade ist, sollten lange Worte unbedingt mit dieser "Sollbruchstelle" versehen werden.
------------

Uebungsfragen:

1. Koennen in Ueberschriftenzeilen zwei Ueberschriftenstile gleichzeitig verwendet werden?
Wenn ja, warum, wenn nein, warum nicht?

2. Ist der (/p)-Tag unbedingt erforderlich?

-------

So, das waers fuer heute -- wenn\'s klappt, folgt morgen mehr.

Volker

Computers are like airconditioners - they stop working properly when you open Windows Ich bin unschuldig, ich habe sie nicht gewählt!
bei Antwort benachrichtigen
Amenophis IV neanderix „@Amenophis IV -- HTML 7“
Optionen

Hallo Volker,

oje - ich wollt doch friedlich und in Ruhe das Wochenende genießen....

Danke sy -Ka.
bei Antwort benachrichtigen
(Anonym) neanderix „@Amenophis IV -- HTML 7“
Optionen

wie wäre es wenn man die bisherigen Lektionen mal als zusammenstellt und als zip zum Download anbietet? Ich würd mich freuen :)

bei Antwort benachrichtigen
neanderix (Anonym) „wie wäre es wenn man die bisherigen Lektionen mal als zusammenstellt und als...“
Optionen

Gute Idee -- ich denk drueber nach, wie sich das realisieren laesst, da ich die ersten Lektionen direkt in das Antwortfenster "gehackt" habe.

Volker

Computers are like airconditioners - they stop working properly when you open Windows Ich bin unschuldig, ich habe sie nicht gewählt!
bei Antwort benachrichtigen
(Anonym) neanderix „@Amenophis IV -- HTML 7“
Optionen

Überschrift Eins


Überschrift Zwei


Überschrift Drei


Überschrift Vier


Überschrift Fünf

Überschrift Sechs

bei Antwort benachrichtigen
neanderix (Anonym) „Überschrift Eins Überschrift Zwei Überschrift Drei Überschrift Vier...“
Optionen

Ja - und?

Volker

Computers are like airconditioners - they stop working properly when you open Windows Ich bin unschuldig, ich habe sie nicht gewählt!
bei Antwort benachrichtigen
Mailjo neanderix „@Amenophis IV -- HTML 7“
Optionen

Ich habe mal die Lektionen von Volker die ich gefunden habe zum Download bereitgestellt...die Links zu den anderen Lektionen habe ich im Moment nicht gefunden, aber wenn ihr mir die auch noch gebt pack ich die auch noch mit rein :)
Hier erst mal der Link zu der Seite:
zu den Lektionen
und wenn ihr noch was findet (oder bei Fehlern etc):
Mail an mich

Habe das ganze ziemlich schnell erledigt also nichts grafisch aufbereitet etc... aber darauf kommts ja nicht an, oder? ;)

bei Antwort benachrichtigen
neanderix Mailjo „Ich habe mal die Lektionen von Volker die ich gefunden habe zum Download...“
Optionen

Suuuper! Klasse.
Fehlt uebrigens nur noch Lektion 2. Da bin ich, IIRC, noch etwas genauer auf Links eingegangen.

Uebernimmst du das mit den Downloads weiter? Faend ich klasse - dann kann ich mich naemlich auf das Erstellen der Lektionen konzentrieren -
da ich unter der Woche immer spaet Heim komme, auch schon eine kleine Kunst... (morgens um 5:30 aufstehen, abends fruehestens um 17:00 zu Hause)

Volker

Computers are like airconditioners - they stop working properly when you open Windows Ich bin unschuldig, ich habe sie nicht gewählt!
bei Antwort benachrichtigen
Mailjo neanderix „@Amenophis IV -- HTML 7“
Optionen

Das sollte kein Problem sein :)
wie bereits gesagt bei den Lektionen war ich mir nicht so ganz sicher ob die richtig angeordnet sind, aber ich denke das geht schon einigermassen :)

Dann warte ich mal auf die nächsten Lektionen ;)

bei Antwort benachrichtigen
KKND2 neanderix „@Amenophis IV -- HTML 7“
Optionen

mal ne frage was soll den das für ein html darstellen.. ich dachte immer zumindest bis html 4.0 .. wird alles in

bei Antwort benachrichtigen
neanderix KKND2 „mal ne frage was soll den das für ein html darstellen.. ich dachte immer...“
Optionen

Wer denken kann ist klar im Vorteil: dieses Forum hier versteht HTML.
Wuerde ich die sachen in eckigen Klammern schreiben, wuerden es nicht angezeigt sondern ausgefuehrt, klaro?

Computers are like airconditioners - they stop working properly when you open Windows Ich bin unschuldig, ich habe sie nicht gewählt!
bei Antwort benachrichtigen
KKND2 neanderix „@Amenophis IV -- HTML 7“
Optionen

mal ne frage was soll den das für ein html darstellen.. ich dachte immer zumindest bis html 4.0 .. wird alles in

bei Antwort benachrichtigen
the_mic neanderix „@Amenophis IV -- HTML 7“
Optionen

ab welcher lektion geht es um javascript?

cat /dev/brain > /dev/null
bei Antwort benachrichtigen
neanderix the_mic „ab welcher lektion geht es um javascript?“
Optionen

Ohhhh -- das wird noch was dauern.
Ich will den Pharao *sachte* an die Geschichte heranfuehren und er hat bisher nicht mal Grundkenntnisse in HTML.
Schaetze also, es wird wohl fruehestens ab Lektion 50 um JS gehen.. ;-) wenn du verstehst, was ich meine.

Computers are like airconditioners - they stop working properly when you open Windows Ich bin unschuldig, ich habe sie nicht gewählt!
bei Antwort benachrichtigen
Amenophis IV neanderix „Ohhhh -- das wird noch was dauern. Ich will den Pharao sachte an die Geschichte...“
Optionen

Hallo Volker,

ich verstehe, was du meinst. Übrigens: Frühestens ab Lektion 60.

Salut -Ka.
bei Antwort benachrichtigen
the_mic neanderix „Ohhhh -- das wird noch was dauern. Ich will den Pharao sachte an die Geschichte...“
Optionen

oh
na bis dann kann ichs wohl auch so schon

cat /dev/brain > /dev/null
bei Antwort benachrichtigen