Inhalt

HTML - los geht's

HTML, die Geschichte ist für dieses Buch viel zu lang und außerdem ist sie kaum hilfreich um HTML nun gut endlich zu lernen. Alles um diese Sprache zu lernen, findet ihr in diesem Buch. Fangen wir an.

Alle "Befehle" in dieser Sprache, werden in Tags eingeteilt. Der Text in den Tags gibt an den angegebenen Stellen den Text an.

Das Grundgerüst

Als erstes fangen wir mit unserem wertvollem Gerüst an, das Grundgerüst, dies fängt auch gleich mit dem wichtigstem Tag an: dem HTML

-Tag, so sieht er aus:
<html>

.
So sieht somit ein Tag in HTML aus, jetzt lassen wir diesen Tag enden, dies machen wir mit:

, dieses lässt also unseren Tag enden.
Sehen wir uns mal unseren Fortschritt an:

<html>

Wir haben es schon geschafft, einen Tag zu öffnen und zu schließen.
Würden wir allerdings nun einen Text reinschreiben, der so aussehen würde:

<html>
Der Text wird nicht angezeigt.

Wie ich bereits geschrieben habe, wäre es weder korrekt, noch könnte man erwarten, dass es funktionieren würde. Denn der Text hat keine Ahnung wo er hin sollte.
Also öffnen wir noch einen Tag, der soll den Kopf bestimmen. Also einfach nur ins Englische denken. "head" trifft es genau. Somit schreiben wir also:

<html>
<head>

Wobei geachtet werden muss, ist, dass wir nichts nach enden lassen, denn nach zerstören wir psychisch die Datei. Nun wieder zum Kopfbereich, im Kopfbereich können wir auch noch nichts definieren, denn im Kopf allein kann ebenfalls nichts stehen. Also fügen wir einen neuen Tag ein, indem wir dann endlich etwas präsentieren können. Und zwar bearbeiten wir nun den "Titel", der über der Adresszeile steht (neben dem Favicon).
Der Tag <title> symbolisiert den Titel.

<html>
<head>
<title>Titel

Nun können wir die Datei schon unter einem beliebigen Namen mit der Dateiendung .html einspeichern und mit dem Browser deiner Wahl öffnen.

So sieht das dann aus.
Das Nächste auf unserer Liste, ist der Bereich wo der gesamte Text auf der gewissen Seite steht, der Körperbereich, auch als "body" bekannt. Wir kreieren unter dem -Tag den neuen Tag <body> und schreiben da einen beliebigen Text ein.

<html>
<head>
<title>Titel

<body>
Dieser Text funktioniert nun.

Nun wieder abspeichern und ansehen. Dies ist das gesamte Grundgerüst von HTML.

Verfeinerung eines Textes

Das Grundgerüst ist nun geschafft, jetzt verfeinern wir den Text ein wenig.

<html>
<head>
<title>Titel

<body>
Heute ist das Wetter echt sonnig.
Glatte 40 Grad bringt das Ausmaß.
Vielleicht ist es nicht mehr schön, sondern heiß.

Hier habe ich mal den Text erweitert, um euren Arbeitskollegen/Freunden zu zeigen, wie talentiert du bist, solltest du den Text auch richtig schreiben, stell dir vor, du öffnest die Datei und dich überraschen plötzlich seltsame Fragezeichen (dies kann sowohl im Online-Server, wie auch in der LAN-Datei passieren). Du wunderst dich und fragst dich, warum zum Teufel sind die Umlaute und die ß nun Fragezeichen?

Die einfachen Umlaute zu schreiben sind nicht fein genug, die haben ihre rauen Seiten. Deswegen schreibt man:

& auml;
& uuml;
& ouml;

und für das ß:

& szlig;

Einfach statt dem ß/Umlaut einfügen.

Wir bearbeiten also wieder unser Gerüst:

<html>
<head>
<title>Titel

<body>
Heute ist das Wetter echt sonnig.
Glatte 40 Grad bringt das Ausmaß.
Vielleicht ist es nicht mehr schön, sondern heiß.

Die Verfeinerung der Umlaute und des scharfen S ist nun erledigt.
Nun jetzt wollen wir auch noch die Gradanzeige fett schreiben. Wie nur?

Wir denken uns einfach das Wort "bold" und deswegen heißt der Tag .

<html>
<head>
<title>Titel

<body>
Heute ist das Wetter echt sonnig.
Glatte 40 Grad bringt das Ausmaß.
Vielleicht ist es nicht mehr schön, sondern heiß.

Schön und gut, nun ist die Gradanzeige fett geschrieben, aber es ist alles in einer Schlange, wie mach ich denn da nur schöne Abstände?

Da gibt es nun 2 Möglichkeiten, der Weg von HTML5, indem wir jeden Satz definieren, oder die ältere HTML-Version, indem wir mit einen Zeilenumbruch machen.

HTML5-Version:

<html>
<head>
<title>Titel

<body>
Heute ist das Wetter echt sonnig.
Glatte 40 Grad bringt das Ausmaß.
Vielleicht ist es nicht mehr schön, sondern heiß.

Andere Version:

<html>
<head>
<title>Titel

<body>
Heute ist das Wetter echt sonnig. 
Glatte 40 Grad bringt das Ausmaß. 
Vielleicht ist es nicht mehr schön, sondern heiß.

Nun haben wir es etwas schöner gestaltet.
Style kann dieses schöne Textfeld auch haben und zwar farbigen Style.
Wir möchten nun die Wörter "sonnig" und "heiß" in rot haben, deswegen geben wir denen das.

<html>
<head>
<title>Titel

Bilder, Farbe, Schreiben, Kommentare

Fast ist unsere erste Seite, nach Wünschen angepasst, jetzt wollen wir einfach mal spontan ein Bild einfügen. Aber das ist kein Problem.

<html>
<head>
<title>Titel

<body>
Heute ist das Wetter echt sonnig. 
Glatte 40 Grad bringt das Ausmaß. 
Vielleicht ist es nicht mehr schön, sondern heiß.

Jetzt kommen die Englischkenntnisse in Frage, was bedeutet Bild auf Englisch?

- Picture, richtig, aber allerdings ist es nicht das, was man verwenden kann. Sondern brauchen wir Image. Also schreiben wir einen neuen Tag, den

-Tag und da er sich in einem Tag befindet, muss er sich in diesem auch wieder schließen, somit machen wir ihn zu einem

-Tag. Wie legen wir nun das Bild fest, das wir brauchen. Dafür brauchen wir eine QUELLE, also Source.

Soweit so gut.
Jetzt legen wir aber wirklich fest, WELCHES Bild es sein soll.
Also schreiben wir:

Ich nehme jetzt: test.jpg.
Also:

Nun noch 2 Dinge:

1. Müsst ihr darauf achten, dass das Bild am selben Ort wie die .html-Datei ist, ansonsten ist es irgendwie nutzlos.
2. Brauchen wir eine Alternative und die legen wir mit alt="" fest, da schreiben wir jetzt einen Text rein, wenn das Bild nicht angezeigt wird.

Erledigt. Schon ist unser Bild da.

Auf der Liste haben wir ebenfalls noch keine Hintergrundfarbe, somit legen wir die jetzt fest:

<html>
<head>
<title>Titel

<body <font;_bold>bgcolor="blue"> Heute ist das Wetter echt sonnig. 
Glatte 40 Grad bringt das Ausmaß. 
Vielleicht ist es nicht mehr schön, sondern heiß.

Nun ist unser Hintergrund blau.

Fast kennen wir alle Grundlagen in HTML.

Nun wollen wir noch links-, rechtsbündig schreiben, dies machen wir einfach so:

<html>
<head>
<title>Titel

<body>
<div align="right">Heute ist das Wetter echt sonnig. 
Glatte 40 Grad bringt das Ausmaß. 
Vielleicht ist es nicht mehr schön, sondern heiß.

Dasselbe gilt auch für "left", einfach nur: <div align="right/left">
Letzte Frage: Wie bring ich das in die Mitte?
Ganz einfach, wir ZENTRIEREN es.

<html>
<head>
<title>Titel

<body>
<center>Heute ist das Wetter echt sonnig. 
Glatte 40 Grad bringt das Ausmaß. 
Vielleicht ist es nicht mehr schön, sondern heiß.

<center> ist der zentrierende Tag. (versetzt in die Mitte.)

Kommentare

Für die Menschen, die nicht wissen, was ein Kommentar in einem Skript ist: Das sind die Textteile, die dir nur als Information dienen sollen und keinen Einfluss auf das Skript haben, sie werden in HTML und PHP so ausgeführt: <!-- KOMMENTAR --!>

.

<html>
<head>
<title>Titel

<body>
<!-- Dies ist ein Kommentar --!>
Heute ist das Wetter echt sonnig. 
Glatte 40 Grad bringt das Ausmaß. 
<!-- = rote Schrift --!>
Vielleicht ist es nicht mehr schön, sondern heiß.

Zusammenfassung

Nun haben wir gelernt, wie man mit Farben, Schriften, Textverschiebungen und Bildern umgeht.

Hier haben wir noch einmal alle Befehle im Überblick:




<center>
<div align="left/right">

Impressum

Tag der Veröffentlichung: 07.07.2012

Nächste Seite

Seite 1 /