HTML- Code

 

 
HTML-Grundgerüst
Struktur der Tags
ganze Seite
 

 

HTML - Grundgerüst

 

 
Die "Tags" des HTML-Gerüstes   Beschreibung
<html>   Der HTML-Tag bezeichnet die "Hyper-Text-Markup-Language-Datei und umschliesst das gesamte Dokument. Der Browser weiss damit, dass es sich um eine konventionelle Hypertextdatei handelt.
    <head>       Der Head-Tag umschliesst den Head der Datei. Im Head stehen allgemeine Informationen zur Datei.
    <title>     Der Titel erscheint in der Browser-Titelleiste.
        hier steht der Titel
  </title>      
    </head>        
               
    <body>       Der Body-Tag umschliesst den Informationsbereich, der am Bildschirm erscheint.
          hier stehen die publizierten Informationen
  </body>        
<html>          

 

 

.

 

Die Struktur der einzelnen Tags

 

top
allein-
stehende
Tags
doppelte Tags Attribute Attributwerte Inhalt Beschreibung
 
        <body bgcolor= "#eecc99">                       Der Body-Tag mit Hintergrundfarbe im Hexadezimalcode
      <hr>                             alleinstehender Tag, horizontale Linie
        <font size= 6                       Schriftformat-Tag mit Grössenangabe
          face= arial, helvetica                       Schriftart
          color= "red" >           Schriftfarbe mit engl.Farbnamen
                HALLO!   Text
        </font>           Schlusstag
        </body>           Schlusstag
   
alleinstehende Tags Alleinstehende Tags gibt es eher wenige. Sie können ohne oder mit Attributen und Attributwerten versehen werden.
Die gebräuchlichsten alleinstehenden Tags sind die kleinen <br> oder grossen <p> Zeilenschaltungen sowie der horizontale Strich <hr>.
Auch der Tag zum Bildereinfügen ist ein alleinstehender Tag <img src>, er braucht aber auf jeden Fall das Attribut und den Attributwert des Bildnamens.
doppelte Tags Die doppelten Tags bestehen aus dem Anfangstag (z.B. <b> für fett) und dem Schlusstag ( </b>). Der Schlusstag wird durch den "/" Gekennzeichnet.
Doppelte Tags umschliessen immer etwas. Dieses wird durch die beiden Tagteile bezeichnet oder formatiert.

Attribute

 

Werte Attribute werden durch einen Leerschlag vom Anfangstag getrennt.
Attribute müssen in den meisten Fällen von einem Wert gefolgt werden. Das Attribut (color) hat ohne eine Wertangabe (=red) keine Aussagekraft.
Attribut und Wert werden mit dem Gleichheitszeichen( =) verbunden.
Der Attributwert sollte immer in Anführungs- und Schlusszeichen ("...")stehen.
   
   
.  

 

 


 

HTML - Code der Indexseite (grafische Darstellung)

 

top
allein-
stehende
Tags
doppelte und - Attribute Attributwerte Inhalt Beschreibung
verschachtelte
Tags
 
        <html>                           Der HTML-Tag umschliesst die gesamte Datei.
        <head>                           Der Head-Tag umschliesst den Head der Datei. Im Head stehen allgemeine Informationen zur Datei.
        <title>                           Der Titel erscheint in der Browser-Titelleiste.
                  Welcome bei WEBDESIGN    
        </title>                            
        </head>        
                                     
        <body bgcolor= "#eecc99">                       Der Body-Tag mit Hintergrundfarbe im Hexadezimalcode, er umschliesst den Informationsbereich, der am Bildschirm erscheint.
      <hr>                             horizontale Linie
        <font size= 6                       Schriftformat-Tag mit Grössenangabe
          face= arial, helvetica                       Schriftart
          color= "red" >           Schriftfarbe mit engl.Farbnamen
                HALLO!    
        </font>                            
      <br>                             kleine Zeilenschaltung
        <font size= 2                        
          face= arial, helvetica                        
          color= "blue" >                      
          <a href= "mailto:leimbacher@bildraum.ch" >                     Emaillink mit Emailadresse
                  mein Name ist Mario Leimbacher   Der Text wird zum Emaillink
          </a>                            
        </font>                            
      <br>                             kleine Zeilenschaltung
        <b>                           fett
                Du befindest dich auf meiner ersten Webseite.    
        </b>                            
      <p>                             grosse Zeilenschaltung (einzelner Paragraftag)
        <i>                           kursiv
                dies ist meine Standardhomepage:    
      <br>             kleine Zeilenschaltung
          <a href= "http://www.kszh.ch"                       Link-Tasg mit absolutem Link auf eine andere Homepage
          target= new >                     neues Browserfenster wird geöffnet
                Kaderschule Zürich   Der Text wird zum absoluten Link
          </a>                            
        </i>                            
      <p>                             grosse Zeilenschaltung (einzelner Paragraftag)
        <p align= center >                     Paragraf (doppelter Tag) mit Zentrierattribut
      <img   src= "../picts/ENGE1KL.JPG"                       Bild-Tag (einzelner Tag) mit Bildquellenangabe ("../picts/" steht für: ein Verzeichnis tiefer und dann im Verzeichnis "picts")
          width= "118"                       Bildbreite
          height= "117" >                     Bildhöhe
        </p>                            
                                     
                                     
        <p align= center >                     Paragraf (doppelter Tag) mit Zentrierattribut
          <a href= "html1.htm" >                     Link-Tag mit relativem Link auf eine andere HTML-Seite
                  und hier gehts zur grafischen Darstellung dieser Seite   Der Text wird zum relativer Link
          </a>                            
        </p>                            
      <hr   width= "50%"                       horizontale Linie mit 50% Fensterbreite
          size= "10"                       Linienhöhe 10 Pixel
            "noshade" >                     Linie ohne Schattierung
        </body>                            
        <html>                            
                                     
                                    top
                                    zurück zur Browserseite