Pfad: florianbuergel.de | ComputerHTML PHP MySQLHTML und CSS
Internetadresse: http://florianbuergel.de/fb/article_115.htm

HTML und CSS

HTML und CSS

Websites mit HTML und CSS erstellen 

HTML

HTML - Was ist das?

HTML ist die Abkürzung von Hypertext Markup Language. Mit HTML beschreibt man, wie Texte, Bilder, Tabellen auf dem Bildschirm im Fenster des Browsers ausgegeben werden. In der Anwendung heißt das, dass man mit HTML Websites erstellt.
Streng genommen ist HTML übrigens keine Programmiersprache, da ja nur beschrieben wird, wie Elemente angeordnet werden.

HTML - Wie kann ich es lernen?

Wer sich für HTML interessiert und es lernen möchte, sollte einmal die Website   http://selfhtml.teamone.de [externer Link] besuchen. Dort findet man eine ausführliche und mit vielen Beispielen versehene Aufführung aller HTML-Befehle.
Eine kleine Einführung gibt es auf dieser Seite ein wenig weiter unten.

CSS

CSS ist ebenfalls eine Abkürzung und bedeutet Cascading Stylesheets. Mit CSS kann man noch besser die Elemente in HTML formatieren (z.B. bestimmen, was passiert, wenn man mit der Maus über einen Link geht). CSS kann also nicht ohne HTML. Ausführliche Informationen zur Anwendung gibt es auch hier unter   http://selfhtml.teamone.de [externer Link].


HTML - Grundgerüst

Editor und Format .html

Zunächst wollen wir erst einmal lernen, Dateien im richtigen Format zu erstellen. Dafür nehmen wir einfach den Editor für Text, den wir unter Start / Programme / Zubehör / Editor finden.
Dann speichern wir einfach (die leere Datei) ab: Datei / Speichern unter... In welchem Ordner wir die Datei abspeichern ist egal - Hauptsache wir finden sie später wieder. Wichtig ist, dass wir unter Dateityp Alle Dateien auswählen und einen Dateinamen eintragen, der die Endung .html besitzt.
Konkret heißt das, dass wir für den Dateinamen beispielsweise test.html eingeben, abspeichern und den Editor anschließend wieder schließen können.

.html Datei ansehen und bearbeiten

Die Datei hat nun die Dateiendung .html. Wir können sie mit einem Doppelklick aufrufen und es öffnet sich der Browser. Das Browserfenster zeigt nichts an, weil noch nichts in der Datei steht.
Um etwas anzeigen zu lassen, müssen wir den sogenannten Quelltext der Datei ändern: Rechtsklick ins weiße Browserfenster und Quelltext anzeigen anklicken.
Nun befinden wir uns wieder im Editor und können mit dem Schreiben des Quelltextes beginnen.

Ein neues Zeichen

Zunächst lernen wir noch ganz schnell ein neues Zeichen kennen. Wir nennen es erst einmal spitze Klammer. Um diese zu erzeugen, benutzen wir die Taste rechts neben der Umschalt-Taste:

  • <     ("spitze Klammer" auf)
  • Umschalt + <     ("spitze Klammer" zu)

Grundgerüst einer HTML-Datei

Wir schreiben nun Folgendes in die Datei:

<html>
<head>
  <title>Titel der Testseite</title>
</head>
<body>

Hallo!

</body>
</html>

Dann speichern wir: Datei / Speichern.
Wenn wir uns das Erstellte ansehen wollen, müssen wir ins Browserfenster wechseln und Aktualisieren (Taste F5 drücken). Erst dann wird die Änderung sichtbar.

Wir sehen also den Text "Hallo!". Diesen können wir durch einen anderen beliebigen Text austauschen. Wichtig ist nur, dass der Text zwischen und steht.
Ändern können wir auch den Titel zwischen und .

Das Prinzip ist, dass wir einen so genannten Tag wie z.B. wieder schließen, indem wir ein / hinter die erste Spitze Klammer setzen: </body>.

Einen Absatz schreiben

Wir wollen nun einen Absatz schreiben und schreiben folgenden Quelltext in den body-Bereich (zwischen und ):

<p>Das ist ein Absatz mit sehr langem Text... Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text Text Text Text Text 
Text Text Text Text Text Text Text</p>

Auch hier wurde mit <p> wiederum ein Bereich geöffnet und mit </p> beendet. Dazwischen schreiben wir das, was in den Absatz soll.

weitere Textformatierungen

Es folgt eine Liste der bereits vorgestellten und weiterer Elemente zur Textformatierung. Text einfügen kann man immer dort, wo in der Auflistung ein "..." steht. Bitte daran denken, dass alles Folgende im body-Bereich stehen muss, wenn man es ausgeben möchte.
Am schnellsten lernt man, indem man einfach ausprobiert und beobachtet. Viel Erfolg!

Text ausgeben
<p>...</p> Absatz
<h1>...</h1> große Überschrift
<h2>...</h2> mittelgroße Überschrift
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
Überschriften unterschiedlicher Größe (immer kleiner werdend)
<br /> Zeilenumbruch (ohne Anfang und ohne Ende)

Artikel erstellt: 2005-03-27 19:51:11   ·   Artikel aktualisiert: 2005-10-17 21:21:06

Copyright © 2001-2007, 2011 Florian Bürgel [Germany, Nienburg (Weser)].  ·  All rights reserved.