IT-Academy Logo
Sign Up Login Help
Home - Programmieren - HTML - HTML Einführung Teil 1



HTML Einführung Teil 1

HTML? Was ist HTML? Wie geht HTML?


Autor: Manuel Mitasch (chefkoch)
Datum: 23-01-2002, 19:11:19
Referenzen: www.teamone.de/selfhtml/
Schwierigkeit: Anfänger
Ansichten: 7572x
Rating: 9 (6x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Allgemeines

HTML ist die Abkürzung für HyperText Markup Language.
HTML ist eine Auszeichnungssprache. Sie bezeichnet durch Befehle Überschriften, Textabsätze, Listen, Tabellen und Grafiken.

Tags

HTML besteht aus reinem ASCI Text deshalb kann HTML auch in normalen Texteditoren geschrieben werden. Besser sind jedoch ausgereifte HTML Editoren, die mehrer Funktionen haben und auch die Programmierung erleichtern. Ich benutze den HTML Editor von Uli Meybohm, welcher unter www.meybohm.de herunter geladen werden kann
Neben dem eigentlichen Text enthalten HTML-Dateien HTML-Befehle. Alle HTML-Befehle stehen in sog. Tags. Die Tags werden in spitze Klammern (< und >) markiert. Fast alle Befehle von HTML bestehen aus einem einleitenden und einem abschließenden Tag. Der Text selbst ist zwischen den zwei Tags.

<h2>Eine Überschrift!</h2>

Erläuterung:
Im Browser erscheint der Text so:

Eine Überschrift!

Es wird eine Überschrift 2.Ordnung gezeigt. Sie wird durch den <h2>-Tag eingeleitet und mit </h2> abgeschloßen.
Ein abschließender Tag wird immer mit / (Schrägstrich) gebildet

HTML Grundgerüst

Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden zwei Teilen:

  • Header (Kopf) (enthält Angaben zu Titel u.ä.)
  • Body (Körper) (enthält den eigentlichen Text mit Überschriften, Verweisen, Grafikreferenzen usw.)
<html>
<head>
<title>Hier ist Platz für 
den 

Titel der Seite</title>
</head>
<body>
Hier ist Platz für Texte, 

Verweise,
Grafikreferenzen usw.
</body>
</html>

Erläuterung:
Jede html Datei beginnt mit <html> und endet mit </html>.
Zwischen <head> und </head> stehen der Titel der Seite, der Autor der Seite, usw.
Der Titel wird zwischen <title> und </title> geschrieben.
Im Body der sich Zwischen <body> und </body> befindet, ist alles was man dann auf der Seite sehen soll geschrieben.


Umlaute und Sonderzeichen

Sonderzeichen und Umlaute können in einer HTML-Datei nicht einfach normal geschrieben werden, da diese ansonst von manchen Browser falsch angezeigt werden. Der Internet Explorer ist dabei jedoch relativ flexibel. Umlaute und Sonderzeichen müßen durch folgende Befehle ersetzt werden:


 ä wird durch &auml; ersetzt
< wird durch &lt; ersetzt
 Ä wird durch &Auml; ersetzt > wird durch &gt; ersetzt
 ö wird durch &ouml; ersetzt & wird durch &amp; ersetzt
 Ö wird durch &Ouml; ersetzt " wird durch &quot; ersetzt
 ü wird durch &uuml; ersetzt § wird durch &sect; ersetzt
 Ü wird durch &Uuml; ersetzt © wird durch &copy; ersetzt
 ß wird durch &szlig; ersetzt

  wird durch &trade; ersetzt


Farben in HTML

Farben werden in HTML als Hexzahlen geschrieben. Manche HTML-Editoren haben eine Farbfunktion bei der man nur auch die Farbe klicken braucht und dann erscheind die Hexzahl für die Farbe.
<font color="
bgcolor="
bgcolor="

Erläuterung:
Wenn man einen Text in einer Farbe haben will so muß man dem font-Tag die Definition color="Farbe" hinzufügen. Farbe steht in diesem Fall für die jeweilige Hexzahl der Farbe.
Um eine Tabelle mit einem färbigen Hintergrund zu bekommen muß man dem table-Tag noch die Definition bgcolor="Farbe" hinzufügen Fabe steht in diesem Fall auch für die jeweilige Hexzahl der Farbe.

Einige Hexzahlen:
 
 => rot        
=> dunkelgrün

Spezielle Farbnamen:
white    

=> weiß           red     => rot
black    => schwarz        green   => grün
blue     => blau           yellow  

=> gelb
aqua     => hell blau  

Erläuterung:
Anstatt den Hexzahlen können auch diese speziellen Farbnamen verwendet werden.

Kommentare

In HTML hat man die Möglichkeit Kommentare zu schreiben welche vom Browser ignoriert werden, dh der Browser gibt den Text der Zwischen dem Kommentar steht nicht aus

<!-- Dies ist 

ein einzeiliges Kommentar -->
<!-- Dies ist ein 
mehrzeiliges Kommentar //-->

Erläuterung:
Es gibt einzeilige Kommentare und mehrzeilige Kommentare.
Bei einem Mehrzeiligen Kommentar werden vor dem Abschluß-tag noch zwei Schrägstriche (//) gesetzt

Allgemeines zu Tabellen

In HTML können sie Daten in einer Tabelle darstellen (gliedernd).
Sie können aber auch Tabellen dazu benutzen um den Inhalt der Seite attraktiver am Bildschirm anzuordnen. Diese Variante nennt man Blindetabellen.


Grundgerüst von Tabellen


    <table>
    <tr>
      <td>
       Datenzelle: 1. Zeile, 1. Spalte
   

   </td>
      <td>
       Datenzelle: 1. Zeile, 2. Spalte
      </td>
    

</tr>
    <tr>
      <td>
       Datenzelle: 2. Zeile, 1. Spalte
      </td>
 

     <td>
       Datenzelle: 2. Zeile, 2. Spalte
      </td>
    </tr>
    

</table>

Erläuterung:
Ausgabe:
Datenzelle: 1. Zeile, 1. Spalte Datenzelle: 1. Zeile, 2. Spalte
Datenzelle: 2. Zeile, 1. Spalte Datenzelle: 2. Zeile, 2. Spalte

Mit dem table-Tag wird die Tabelle eröffnet; durch den tr-Tag wird eine Zeile eröffnet; in dem tr-Tag muß man dann die jeweiligen Spalten mit dem td-Tag (td= tabledata = Tabellendaten) schreiben. Es werden nur Texte die zwischen den td-Tags stehen ausgegeben! danach muß man wieder die Zeile schließen mittels </tr>; und dann noch die Tabelle schließen mittels </table>.

Zusätze zu Tabellen

Es gibt einig Befehle zum Verändern von Tabellen.


    <table border=1 bgcolor=
  width="300" heigth="50">
    <tr>
      <td>
       Dies ist eine 

Tabelle mit Zusätzen!
      </td>
    </tr>
    </table>

Erläuterung:
Ausgabe:
Dies ist eine Tabelle mit Zusätzen!

Alle Zusätze werden in den table-Tag eingefügt.
border=1 bedeutet das die Tabelle einen Rahmen haben soll. durch das setzten von border=0 bekommt man eine Blindetabelle.
bgcolor= width=300 und height=20 geben die Ausmaße der Tabelle an; width gibt die Breite der Tabelle an; height gitb die Höhe der Tabelle an; natürlich kann man auch in einzelne td-Tags die Ausmaße einrichten; alle Angaben von Ausmaßen werden entweder in Pixel oder in Prozent (zb.:width=50%) angegeben.

Ausrichtung von Zelleninhalten


    

<table border=1 width=50% height=50%>
    <tr>
      <td align=center 

valign=middle>
       Diese ist ein vertikal 
       und horizontal zentrierter Satz!
      

</td>
    </tr>
    </table>

Erläuterung:
Ausgabe:
Diese ist ein vertikal und horizontal zentrierter Satz!

Durch die Angabe von align=center wird eine Datenzelle horizontal zentriert. (align=right => rechts; align=left => links)
Durch die Angabe von valign=middle wird eine Datenzelle vertikal zentriert. (valign=right => rechts; valign=left => links)
Dies ist besonders bei der Verwendung von Blindentabellen sehr wichtig!

Zellenverbinden

<table 

border=1>
    <tr>
      <td colspan=2 align=center>
      Inhalt einer Zelle, die 

sich 
      über 2 Spalten erstreckt</td>
    </tr>
    <tr>
      <td>Inhalt 

der ersten Zelle 
         unter der erstreckten Zelle</td>
      <td>Inhalt der zweiten Zelle 


         unter der erstreckten Zelle</td>
    </tr>
</table>

Erläuterung:
Ausgabe:
Inhalt einer Zelle, die sich
über 2 Spalten erstreckt

Inhalt der ersten Zelle
unter der erstreckten Zelle

Inhalt der zweiten Zelle
unter der erstreckten Zelle

Durch den Befehl colspan=2 gibt man an das sich die Zeile über 2 Spalten erstrecken soll. Es sind natürlich auch höhere Angaben als 2 möglich.
Zusätze zu Tabellen

Es gibt einig Befehle zum Verändern von Tabellen.


    <table border=1 bgcolor=
  width="300" heigth="50">
    <tr>
      <td>
       Dies ist eine 

Tabelle mit Zusätzen!
      </td>
    </tr>
    </table>

Erläuterung:
Ausgabe:
Dies ist eine Tabelle mit Zusätzen!

Alle Zusätze werden in den table-Tag eingefügt.
border=1 bedeutet das die Tabelle einen Rahmen haben soll. durch das setzten von border=0 bekommt man eine Blindetabelle.
bgcolor= width=300 und height=20 geben die Ausmaße der Tabelle an; width gibt die Breite der Tabelle an; height gitb die Höhe der Tabelle an; natürlich kann man auch in einzelne td-Tags die Ausmaße einrichten; alle Angaben von Ausmaßen werden entweder in Pixel oder in Prozent (zb.:width=50%) angegeben.

Ausrichtung von Zelleninhalten


    

<table border=1 width=50% height=50%>
    <tr>
      <td align=center 

valign=middle>
       Diese ist ein vertikal 
       und horizontal zentrierter Satz!
      

</td>
    </tr>
    </table>

Erläuterung:
Ausgabe:
Diese ist ein vertikal und horizontal zentrierter Satz!

Durch die Angabe von align=center wird eine Datenzelle horizontal zentriert. (align=right => rechts; align=left => links)
Durch die Angabe von valign=middle wird eine Datenzelle vertikal zentriert. (valign=right => rechts; valign=left => links)
Dies ist besonders bei der Verwendung von Blindentabellen sehr wichtig!

Zellenverbinden

<table 

border=1>
    <tr>
      <td colspan=2 align=center>
      Inhalt einer Zelle, die 

sich 
      über 2 Spalten erstreckt</td>
    </tr>
    <tr>
      <td>Inhalt 

der ersten Zelle 
         unter der erstreckten Zelle</td>
      <td>Inhalt der zweiten Zelle 


         unter der erstreckten Zelle</td>
    </tr>
</table>

Erläuterung:
Ausgabe:
Inhalt einer Zelle, die sich
über 2 Spalten erstreckt

Inhalt der ersten Zelle
unter der erstreckten Zelle

Inhalt der zweiten Zelle
unter der erstreckten Zelle

Durch den Befehl colspan=2 gibt man an das sich die Zeile über 2 Spalten erstrecken soll. Es sind natürlich auch höhere Angaben als 2 möglich.


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06246
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1154
Comments: 0