Fragen und Antworten

  1. Wie bekomme ich meine HTML-Seite ins Internet?

    • Die selbst erstellte HTML Seite kann exakt so, wie Sie sie entwickelt haben auch ins Internet gestellt werden.
    • Zum Kopieren von HTML-Seiten vom lokalen Computer ins Internet gibt es das FTP (File Transfer Protokoll), welches von verschiedenen sogenannten FTP-Client Programmen unterstützt wird, suche z. B. nach "ct download 100 ftp"
    • Den Speicherort, wo die eigenen Dateien liegen sollen, den muss man sich zuvor besorgen von einem Webspace Provider (Anbieter), z. B. bei Funpic (kostenlos) oder Strato (günstig, eigene Domain möglich, z.B. www.ruediger-borrmann.de)
    • detailliertere Beschreibung 'Seiten ins Netz laden'
      http://de.html.net/tutorials/html/lesson13.php
    • oder hier 'Wie kommt die HTML-Seite ins Internet?'
      http://www.educat.hu-berlin.de/mv/seite_ins_internet.html
  2. Wo kann man HTML-Farbcodes nachschlagen?


    z.B. hier ...
  3. Warum funktionieren nicht alle Teile meiner HTML-Anweisung für Emails?

    • &cc und &body dürfen nicht durch Leerzeichen getrennt geschrieben werden (& body &cc)
    • Die komplette Anweisung muss in einer Zeile geschrieben werden
  4. Die CSS-Formatierungen werden nicht richtig vom Browser übernommen, wenn ich Kommentare in einer externen *.CSS Datei einfüge. Wo liegt das Problem?

    • Die Kommentare sollten immer in der Form /* hier steht ein Kommentar */ verwendet werden.
    • Schreiben Sie die Kommentare grundsätzlich über die einzelnen Formatierungsabsätze.
  5. Wo ist der Unterschied zwischen den Attributen background und background-image?

    • background ist eine abkürzende Schreibweise, welche mehrere Parameter in der richtigen Reihenfolge erwartet. Somit ist background-image zu bevorzugen, da es im Sinne von CSS mehr Übersichtlichkeit schafft.
  6. Warum lernen wir HTML nicht gleich auf der Basis von HTML5?

  7. Wie kann ich einen Abstand einer bestimmten Höhe in meiner HTML-Seite realisieren?

    • z.B. wie folgt<div class="abstand">&nbsp;</div>
    • wobei die Formatierungsanweisung für die Höhe in der CSS-Klasse "abstand" dann wie folgt aussehen könnte:
      .abstand { height: 100px; }
    • Hinweis: &nbsp; ist einfach nur ein nicht sichtbares Zeichen
  8. Wie kann ich eine Tabelle zentrieren?

    table
    {
      width:  800px  ;
      margin: 0 auto ;
    }
  9. Wie kann ich ein eigenes kleines Image oben in den TAB einfügen?


    Erzeugen eines Icon:


    Wenn die Datei des Favicons favicon.ico heisst, dann muss man nur die Datei in das Root-Verzeichnis der Website kopieren und es wird sofort verwendet für alle zur Website gehörenden Seiten. Wenn man verschiedene favicons verwendet, dann bindet man diese wie folgt ein in die Seite:


    <link rel="icon" type="image/x-icon" href="favicon.ico">
  10. Kann man ein div-Tag mit einem Hintergrundbild versehen?


    .bg
    {
          background-image:   url(bild.jpg) ;
          background-size:    cover         ;
          background-color:   orange        ;
    }

    ...
    <div class="bg">Hallo Welt</div>
    ...
  11. Wie bekomme ich das OSZKIM-Logo auf meine HTML-Seite?


    Am einfachsten nutzen Sie folgenden Quelltext, welcher die kompletten Daten eines PNG-Bildes enthält:
    <img src="data:image/png;base64,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">
  12. Wie kann man Buttons erstellen und nutzen (ohne Javascript)?


    z.B. wie folgt ...
    Die CSS-Formatierungen des Buttons:
       a
       {
         display:block;
         background-image:url(index.jpeg);
         background-size: cover;
         width:100px;
         height:100px;
       }
       a:hover
       {
          background-image:url(index2.jpeg);
       }
Der Link im body-Tag der HTML-Datei:
  • <a href="http://www.songlab.de"></a>
bzw.
...
 
a
{
      display:block;
      color:#040404;
      background-color:#EFEFEF;
      width:100px;
      font-size:24px;
      text-decoration:none;
      text-align:center;
      margin:15px;
      border:2px solid red;
      background-image:url(index.jpeg);
}
 
a:hover
{
      display:block;
      color:#EFEFEF;
      background-color:#040404;
      background-image:url(index2.jpeg);
}
 
...
 
 
   <a href="...">Eins</a>
   <a href="....">Zwei</a>
   <a href=".....">Drei</a>
...
 
 
 
  1. Vertikale Ausrichtung von Texten


    Die vertikale Ausrichtung von Texten erfordert zusätzlich zur Eigenschaft vertical-align die Eigenschaft line-height!
    siehe: https://developer.mozilla.org/de/docs/Web/CSS/vertical-align
  2. <style>
    footer
    {
       background-color: lightgreen; 
       height: 200px;
       width: 200px;
       line-height: 200px;
       vertical-align: middle;
    }
    </style>
    <footer>
    bla bla bla
    </footer>


[[code format="css"]]

code