Homepage

Aus IMB-E-Tutorials
Wechseln zu: Navigation, Suche

In disem Tutorial gibt es eine Anleitung, wie eine Hompage in XHTML mit CSS erstellt wird.


Einleitung

Selbstverständlich ist es möglich mit dem Editor von Windows eine Homepage zu erstellen. Eine bessere Alternative stellt der Phase5 HTML Editor dar. Ich verwende in diesem Tutorial diesen Editor. Hier der Download.


Ich habe mich auch entschieden den Dreamweaver oder Frontpage nicht zu verwenden, da mit diesen Werkzeugen der Syntax nur schwer verstanden wird.


Erste Seite anlegen

  1. Starte den Phase5 Editor
  2. Wähle NEUES HTML DOKUMENT

Neues Domument


  • Wähle einen Titel - dieser wird später oben im Browser angezeigt.
  • Schüsselwörter sind META TAGS die von Suchmaschinen unter anderem durchsucht werden. Gib hier Wörter ein, damit Suchmachinen deine Seite finden!
  • Alles andere lasse frei - und klick auf Erstellen.

Folgender Code sollte jetzt erstellt worden sein:


Code1


Lösche nun den markierten Code!!!!!! Wir formatieren die Seite mittels CSS - dazu später mehr.
  • In der Zeile 1 - 10 steht der HTML-Code. Dieser wird mit eingeleitet und mit geschlossen.
  • In der Zeile 2 beginnt der HEAD - Bereich, wo in der Zeile 3 der Titel zu finden ist. (Selbstverständlich kann der jederzeit geändert werden)
  • 4 u. 5 enthalten die sogenannten META - TAGS, welche von den Suchmaschinen durchsucht werden.
  • 7 - 9 ist der Bodybereich dazu später mehr.


  1. Lege dir einen Ordner auf deiner Festplatte an. (z.B: einen Ordner hp - verwende keine Umlaute oder Zeichen, ebenso keine Leerzeichen!)
  2. Klicke im Phase5- Editor auf Datei - Speichern unter, wähle den angelegten Ordner aus und speichere die Datei zB. unter start.html.
  3. Klicke nun im Editor auf Ansicht und wähle Shortcut-Leiste.
  4. Um das Ergebnis zu sehen, klicke wie auf dem unteren Bild dargestellt, auf Standardanwendung.

Pic1.jpg

Ergebnis

Ergebnis.jpg


  • Im oberen Bereich ist er Titel der Seite zu finden - bei mir 'vorlage'
  • Das weiße Feld im unteren Bereich wird durch den BODY-TAG definiert. Da im Body noch nichts definiert ist, ist auch im FIREFOX dieser Bereich leer.


DOCTYPE

Dabei gibt es verschiedene Varianten. Einfach ausgedrückt, wird mit DOCTYPE festgelegt, welche Art von HTML verwendet wird. Ich habe mich entschieden den XHTML Doctype zu verwenden. (Wurde von Herrn Mutz empfohlen).


Ändere das HTML-Script wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   ---> verwendet XHTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">                                                       ---> dazu der Link
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />                                      ---> Zeichensatz
<title>vorlage</title>
<meta name="author" content="Gerald Ammer"/>
<meta name="keywords" content="UNI-Krems Gerald Ammer .........."/>
</head>

Seitenkonstruktion

Vorlage:

Table15.jpg

Erste Zeile

Ändere den HTML-Code wie folgt:

  
<body>

        <div id="zent">                                ---> startet hier und endet in der vorletzten Zeile
                                                            Dieser DIV-Container Zentriert mir meine Seite und wird
                                                            in der CSS-Datei mit "zent" angesprochen.
           <div id="zeile1">Hello World!</div>         ---> Die erste Zeile wird mit "zeile1" angesprochen. Der Inhalt lautet: Hello World! 
        </div>                                         ---> DIV-Container "zent" wird geschlossen.
</body>                            
 


 Achtung der Code muss ohne meine Kommentare zwischen den beiden Bodytags eingegeben werden.


Wenn du im Inhaltsbereich Sonderzeichen, wie ÜÖÄusw. verwenden möchtest, musst du den entsprechenden Code einfügen. Hier der Link für Sonderzeichen

Ergebnis

Pic2.jpg

HTML und CSS

Um den CSS - Code zu erstellen würde ich dir den tsWebEditor empfehlen. Hier der Downloadlink.


Cssuber.jpg

Der Browser (z.B. Firefox) ladet die HTML Datei nach einem Aufruf. Damit der Browser die CSS - Datei finden kann muss diese im HTML-Code vermerkt sein.


Um dies zu erreichen muss dein HTML-Code wie folgt erweitert werden:

<head>
<title>vorlage</title>
<meta name="author" content="Gerald Ammer">
<meta name="keywords" content="UNI-Krems Gerald Ammer ..........">

<link rel="stylesheet"    --> Information, dass es sich um eine Layoutzuweisung handelt
      type="text/css"     --> die Typdefinition in diesem Fall text/css
      href="format.css">  --> der Link zu der Datei (musst du erst erstellen)
      </link>             --> Linktag wird geschlossen

</head>

Sieh dir nun die Seite mal an. Da noch keine CSS Datei erstellt worden ist, gibt es auch keine Veränderung.

CSS Datei erstellen

  1. Öffne den tswebedior und wähle Neu --> Editor.
  2. Klicke auf Datei und Speichern unter
  3. Wähle den Ordner aus den du vorher angelegt hast.
  4. Speicher die Datei unter format.css in diesem Ordner ab. (Der Name format deshalb, da du vorher im HTML-Code den Namen als format.css definiert hast.)

Der Ordner sollte jetzt zwei Dateien beinhalten. (Die HTML und die css Datei).

Hintergrund definieren

 Bei Einsatz von XHTML, muss die Hintergrundfarbe bzw. das Bild im html-tag erfolgen.


CSS-Code:

html {                --> das TAG angeben, welches verändert werden soll, anschließend eine geschwungene Klammer
definitionen;         --> hier kommen die Definitionen - jede  Definition gehört mit einem Semilikon abgeschlossen;



}                     --> Klammer schließen

Zurück zu unserem Beispiel:

Hintergrundfarbe über das ganze Browserfenster:

Dazu gib folgenden Code in den tsWebeditor ein:

html {


}
  • Klicke auf eine Zeile innerhalb der Klammern und anschließend klicke auf Tools - CSS-Assistent
  • Wähle den Karteireiter Background aus
  • Bei der Hintergrundfarbe wähle irgendeine - wir verändern sie gleich wieder
  • Klicke auf ok.

Screencast

(Achtung!! Dieser Screencast ist ohne Ton!!) Hier der Code:

html {
     background-color: aqua;


     }

Um die Seite anzuschauen, einfach im Explorer aktualisieren oder über den Phase5 Editor das Ergebnis bewundern.

 Achtung: Es müssen beide Dateien gespeichert sein!

Ergebnis

Table5.jpg

Hintergrundfarbe ändern

Dazu markiere deine Farbe. Bei meinem Beispiel ist es das Wort aqua. Anschließend klicke auf Symbol.jpg dieses Symbol und wähle die gewünschte Farbe. Die Datei Speichern und im Firefox aktualisieren!

Hintergrundbild

  • Zuerst musst du einen Bilderordner erstellen. Dazu öffne deinen Hauptordner auf deiner Festplatte (bei mir hp) und erstelle einen Unterordner mit dem Namen pic.
  • Dann wähle eine Grafik aus und speichere sie in dem Ordner pic.

Hier meine gewählte Grafik: Hinter.png


Verändere deinen CSS-Code, damit er wie folgt aussieht:

html {


}

Hinergrundbild - Screencast

Da ich repeat-x verwendet habe, wird mein Bild nur waagrecht wiederholt.

Ergebnis:

Table6.jpg


 Versuche einen Hintergrund für deine HP - zu Erstellen!

Bodybereich

Hier wird zB. die Schriftart für deine ganze Seite festgelegt. (Diese kann in anderen Tags verändert werden.)

Folgendes Beispiel:

html {
     background-image: url(pic/hinter.png);
     }

body {
                                          --> hier kommen die Definitionen für den Bodybereich

}


Hier eine Möglichkeit. Ich habe diese ebenso mit CSS-Assistenten eingefügt. Unter dem Karteireiter Font findest du die Angaben. Achtung bei den Schriftarten. Es sind nur 4 Hauptgruppen zulässig!

Hier mein Code:

body {
font-family: Verdana, Arial, Helvetica, sans-serif ;     ---> besitzt der Browser die Schrift Verdana nicht, 
                                                              so versucht er die Schrift Arial anzuzeigen usw. 
font-size: 12px;                                         ---> Die größe der Schrift soll 12 Pixel sein.
                                       
}

Erste Zeile CSS

Zentrieren

html {
     background-image: url(pic/hinter.png);
    }
    
body {
    font-family: Verdana, Arial, Helvetica, sans-serif ;
    font-size: 12px;
  }

#zent {                                          ---> mittels #zent wird der DIV-Container "zent" im HTML-Code angesprochen
    width:700px;                                 ---> Die Breite wird mit 700px festgelegt, kann auch in % des Browserfensters
                                                      angegeben werden (z.B. 50%)                          
    margin-top: 0px;                             ---> Außenabstand oben 0px
    margin-left: auto;                           ---> Wenn Abstand links und recht auf auto gesetzt wird,
                                                      wird der Inhalt zentriert.
    margin-right: auto;                             
    text-align:left;                             ---> vorerst sind alle Inhalte Links ausgerichtet
    background-color:white;                      ---> vorerst haben alle Inhalte die Hintergrundfarbe weiß
}

Screencast - Bodybereich

Ergebnis

Table7.jpg

Erste Zeile formatieren

css-code:

#zeile1 {
      background-image: url(pic/shtlogo.jpg);   ---> Hier füge ich ein Hintergrundbild mit dem Namen shtlogo in die
                                                     erste Zeile ein
      background-position: center left;         ---> Position: zentriert und links
      background-repeat: no-repeat;             ---> wird nur einmal dargestellt
      height: 82px;                             ---> Die Zeile soll eine Höhe von 82px besitzen
      border-bottom: 1px;                       ---> Unten soll ein Rahmen mit 1px dargestellt werden
      border-bottom-color: black;               ---> Der Rahmen soll die Farbe schwarz haben
      border-bottom-style: solid;               ---> Die Darstellungsart ist durchgezogen
}

Ergebnis

Table8.jpg

Überschrift

Als erstes muss die Überschrift im HTML-Code definiert werden. (Es gibt folgende Standardüberschriften: h1 h2 h3 h4)

Hier ein Beispiel:

<body>

      <div id="zent">

           <div id="zeile1"><h1>Hello World!</h1></div>    --> Die Wörter Hello World werden als Überschriften
                                                                           dargestellt. (<h1>Dein Text</h1>) 



      </div>
</body>

Anschließen kannst du in der CSS-Datei die Überschrift definieren (verändern).

h1 {
    font-size: 18px;            ---> Schriftgröße 18
    color: #004080;             ---> Farbe - ein Blau
    font-weight: bold;          ---> Fett
    height: 82px;               ---> Der Block soll eine Höhe von 82px aufweisen (ist auch die Zeilenhöhe)
    padding-top: 32px;          ---> Der Innenabstand von oben nach unten soll 32px aufweisen  
                                    ( Zeilenhöhe - (32px + Schriftgröße 18px) = Rest von 32px damit wird die Schrift senkrecht zentriert.       
    }

Ergebnis

Table9.jpg

Zweite Zeile

Menü

HTML-Code:

<body>

<div id="zent">

                 <div id="uber"><h1>Hello World!</h1></div>

                 <div id="menue">

                    <a href="http://www.google.at" class="klick">Home</a>   ---> a eröffnet den LINK-TAG, href = Adresse, class="klick" 
                                                                                 wir formatieren den Link über CSS mit klick, 
                                                                                 Home wird angezeigt, mit </a> wir der
                                                                                 Tag geschlossen.
                 </div>                                                     ---> "menue" Container wird geschlossen
        </div> 




CSS-Code:

#menue {
        float:left;              ---> Der Menü-Bereich wird im zentrierten Bereich "zent" links ausgerichtet. Zusätzlich
                                      werden weitere Inhalte rechts davon ausgerichtet.
        text-align: left;        ---> Textausrichtung links
        background-color: white; ---> Hintergrundfarbe weiß
}


Ergebnis

 Bei einem Klick auf Home wird die Google Seite geöffnet!

Table10.jpg

a TAG formatieren

Um den Link (klick) zu formatieren, muss in der CSS-Date folgendes geändert werden:

Screencast - CSS-Menü

Hier mein CSS-Code:

a.klick {
        display: block;                     ---> wird als Block angezeigt
        width: 110px;                       ---> breite des Block
        height: 20px;                       ---> höhe
        color: black;                       ---> Schriftfarbe
        text-decoration: none;              ---> Kein Unterstreichen        
        background-color: #F5F5F5;          ---> Hintergrundfarbe des Blocks (grau)
        padding-left: 10px;                 ---> Abstand zw. Rahmen und Text auf der Linken Seite
        margin-top: 10px;                   ---> Außenabstand des Blockes von oben nach unten
        border-left: 8px;                   ---> auf der linken Seite ein Rahmen mit 8px
        border-left-color: #004080;         ---> Farbe des Rahmens
        border-left-style: solid;           ---> Darstellungsart "durchgezogen"
        margin-left: 0px;                   ---> Außenabstand von links nach rechts 0px
        padding-top: 4px;                   ---> Textabstand innerhalb des Blockes von oben nach unten 4px

}
}

Skizze

Einfuegen.jpg

Ergebnis

Table11.jpg

Wenn du jetzt mit der Maus auf den Link fährst ändert sich das Aussehen nicht, um das zu ermöglichen musst du den a:hover definieren.

a:hover Tag

Hier brauchst du nur mehr die Eigenschaften nennen, die du verändern möchtest.

Mein CSS-Code:

a.klick:hover{
              background-color: #C0C0C0;
              border-left-color: orange;
              }

Ergebnis

(wenn die Maus über der Schaltfläche ist)

Table12.jpg

Link vervielfältigen

HTML-Code




<div id="menue">

                  <a href="http://www.google.at" class="klick">Home</a>          ---> Kopiere diese Zeile und ändere den anzuzeigenden Text
                                                                            bei mir Links, Aktuelles und Irgendwas
                  <a href="http://www.google.at" class="klick">Links</a>
                  <a href="http://www.google.at" class="klick">Aktuelles</a>
                  <a href="http://www.google.at" class="klick">Irgendwas</a>
           </div>

Ergebnis

Table13.jpg



Inhaltsbereich

Hier mein HTML-Code (Menü, Inhalt):

<body>

<div id="zent">

                 <div id="uber"><h1>Hello World!</h1></div>

                 <div id="menue">
                      <a href="http://www.google.at" class="klick">Home</a>
                      <a href="http://www.google.at" class="klick">Links</a>
                      <a href="http://www.google.at" class="klick">Aktuelles</a>
                      <a href="http://www.google.at" class="klick">Irgendwas</a>
                 </div>

                 <div id="inhalt"><h2>Donau-Uni</h2>                              ---> Div-Container "inhalt", Überschrift 2. Ordnung
                      <p> Meine erste Seite ist nicht schlecht. Ich hoffe diese Seite kann in ---> Absatztag; in diesem Tag seht immer der
                                                                                                   Seiteninhalt.
                      <a href="http://www.google.at">Google</a> gefunden werden. Wenn diese   ---> Link ohne Klasse wird aber später über die
                                                                                                   Klasse p formatiert
                      Seite nicht gefunden wird schreibt mir bitte ein Email. Dazu klickt ihr bitte 
                      <a href="mailto:ammer@sht-wien.com">hier.</a></p>                       ---> mailto: - Befehl für email
                      <img alt="Tiger" src="pic/tiger.jpg"/>                                  ---> Bild einfügen img Bildtag, alt Alternativ wenn das
                                                                                                   Bild nicht angezeigt werden kann, src die Datei, die
                                                                                                   ich im pic Ordner unter Tiger.jpg gespeichert habe.
        </div>
                 

CSS-Code:

#inhalt{


        border-left: 1px solid black;    ---> Linker Rand 1px, Darstellung:solid, Farbe:schwarz
        border-right: 1px solid black;   ---> Rechter Rand 1px, Darstellung:solid, Farbe:schwarz
        background-color:#efeff7;        ---> Hintergrundfarbe blau
        padding:0px 10px;                ---> oben und unten 0px, links u. rechts 10px Abstand
        width:550px;                     ---> Breite 550px = 700(erste Zeile) - 128px(Menü) - 2x1px Rand vom Inhalt - 2x10px(padding 
                                              vorherige Zeile)
        float:right;                     ---> Der Divcontainer wird rechts ausgerichtet und links von Elementen (hier das Menü) umschlossen.
        text-align: center;              ---> Textausrichtung zentriert

}

h2 {
  padding-top: 20px;          ---> Innenabstand von oben
    font-size: 16px;          ---> Schriftgröe
    color: #004080;           ---> Schriftfarbe
    font-weight: bold;        ---> Fett

   }
   
p a {                                --->alle a-Tags die innerhalb von p tags stehen werden hier formatiert
        color: black;
        background-color: #FFFFFF;
        text-decoration: none;
        padding-left: 6px;
        padding-right: 6px;
        }
p a:hover{                         --->alle a:hover-Tags die innerhalb von p tags stehen werden hier formatiert
        background-color: yellow;
        }

Ergebnis

Table14.jpg

Dritte Zeile

Bevor die dritte Zeile erstellt wird, muss der float-Befehl wieder ausgeschaltet werden. Ansonsten wird die Zeile direkt unter dem Menü angezeigt.

Dazu ändere den HTML-Code:

<div id="inhalt"><h2>Donau-Uni</h2>  
                   <p> Meine erste Seite ist nicht schlecht. Ich hoffe diese Seite kann in
                    <a href="http://www.google.at">Google</a> gefunden werden. Wenn diese
                    Seite nicht gefunden wird schreibt mir bitte ein Email. Dazu klickt ihr bitte
                    <a href="mailto:ammer@sht-wien.com">hier.</a></p>
                    <img alt="Tiger" src="pic/tiger.jpg"/>
           </div>

           <div id="loschen"></div>   ---> divcontainer wird über loschen angesprochen / in der css datei float löschen
           <div id="zeile3"></div>    ---> divcontainer "zeile3"
      </div>


CSS-Code:

#loschen {
         clear:both;  --->Inhalte nebeneinander - wird ausgeschaltet (da neue Zeile erstellt wird)
       }

#zeile3{
       height: 20px;                 ---> Höhe
       background-color: #004080;    ---> Hintergrundfarbe
}

Ergebnis

Table15.jpg

Seiten erstellen

Wenn du mit deiner Seite zufrieden bist, speichere die Seite.

Ändere wie folgt den Code:

<div id="menue">
            <a href="index.html" class="klick">Home</a>            ---> die Hauptseite musst du als index.html benennen
            <a href="links.html" class="klick">Links</a>           ---> die anderen Seiten benenne logisch
            <a href="aktuell.html" class="klick">Aktuelles</a>          bei mir links.html, aktuell.html, irgendwas.html
            <a href="irgendwas.html" class="klick">Irgendwas</a>        Achtung! Verwende nur kleine Zeichen und keine Sonderzeichen
            </div>                                                       und Leerzeichen!


  • Gehe nun auf Datei--> Speichern unter und speichere die Seite unter index.html
  • Gehe nun auf Datei--> Speichern unter und speichere die Seite unter links.html (da ich die Seite mit links.html bennant habe)
  • Gehe nun auf Datei--> Speichern unter und speichere die Seite unter aktuell.html (da ich die Seite mit aktuell.html bennant habe)
  • usw.


Schließe den Editor

Öffne den Editor und gehe auf Datei öffnen. Markiere die Seiten (bei mir index, links, aktuelles, irgendwas) und klicke auf öffnen.

Jetzt kannst du die einzelnen Seiten bearbeiten und speichern!

Vollständiger Code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>vorlage</title>
<meta name="author" content="Gerald Ammer"/>
<meta name="keywords" content="UNI-Krems Gerald Ammer .........."/>

<link rel="stylesheet"
      type="text/css"
      href="format.css"/>


</head>


<body>

      <div id="zent">

           <div id="zeile1"><h1>Hello World</h1></div>
           <div id="menue">

                  <a href="index.html" class="klick">Home</a>
                  <a href="index.html" class="klick">Links</a>
                  <a href="index.html" class="klick">Aktuelles</a>
                  <a href="index.html" class="klick">Irgendwas</a>
           </div>

           <div id="inhalt"><h1>Donau-UNI</h1>
                   <p> Meine erste Seite ist nicht schlecht. Ich hoffe diese Seite kann in
                    <a href="http://www.google.at">Google</a> gefunden werden. Wenn diese
                    Seite nicht gefunden wird schreibt mir bitte ein Email. Dazu klickt ihr bitte
                    <a href="mailto:ammer@sht-wien.com">hier.</a></p>
                    <img alt="Tiger" src="pic/tiger.jpg"/>
           </div>

           <div id="loschen"></div>
           <div id="zeile3"></div>
      </div>
</body>
</html>

CSS

html {
     background-image: url(pic/hinter.png);
    }
    
body {
    font-family: Verdana, Arial, Helvetica, sans-serif ;
    font-size: 12px;
  }

#zent {
      width: 700px;
      margin-top: 0px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      background-color: white;
    }

#zeile1 {
      background-image: url(pic/shtlogo.jpg);
      background-position: center left;
      background-repeat: no-repeat;
      height: 82px;
      border-bottom: 1px;
      border-bottom-color: black;
      border-bottom-style: solid;
}
h1{

      font-size: 18px;
      color: #004080;
      font-weight: bold;
      height: 82px;
      padding-top: 32px;

    }

#menue {
        float:left;
        text-align: left;
        background-color: white;
}

a.klick {
        display: block;
        width: 110px;
        height: 20px;
        color: black;
        text-decoration: none;
        background-color: #F5F5F5;
        padding-left: 10px;
        margin-top: 10px;
        border-left: 8px;
        border-left-color: #004080;
        border-left-style: solid;
        margin-left: 0px;
        padding-top: 4px;


}

a.klick:hover{
              background-color: #C0C0C0;
              border-left-color: orange;
              
}

#inhalt{


border-left: 1px solid black;
border-right: 1px solid black;
background-color:#efeff7;
width:550px;
float:right;
padding:0px 10px;
text-align: center;

}

h2 {
  padding-top: 20px;
    font-size: 16px;
    color: #004080;
    font-weight: bold;

   }
   
p a {
        color: black;
        background-color: #FFFFFF;
        text-decoration: none;
        padding-left: 6px;
        padding-right: 6px;
        }
p a:hover{
        background-color: yellow;
      }

#loschen {
         clear:both;
       }

#zeile3{
       height: 20px;
       background-color: #004080;
}

Links