Translate

Samstag, 7. Februar 2015

Grundlagen HTML, CSS und Javascript

Shortly

Dieser Beitrag stellt eine kleine Einführung in HTML, CSS und Javascript dar. Hier sollen Basics vermittelt werden, die man braucht, um den eigenen Blog an seine Bedürfnisse anzupassen. Neben den Grundlagen, werden weiterführende Links zum Vertiefen bereitgestellt.

Was macht man mit...

Während man mit HTML den grundlegenden Aufbau der Seite beschreibt, verwendet man CSS um der Seite das nötige Aussehen zu verleihen. Mittels Javascript kann man noch dynamische Inhalte einfügen, die entweder während des Ladens der Webseite ausgeführt oder durch ein Ereignis (wie Mausklick) ausgelöst werden.

HTML-Aufbau

Eine HTML-Seite ist immer gleich aufgebaut und wird mit so genannten Tags beschrieben. Ein Tag wird in "< Spitze Klammern >" gesetzt und besteht aus einem Anfang und einem Ende. Das Ende wird mit einem "/" vor dem Tag-Namen markiert.
Die Grundstruktur einer HTML-Seite sieht wie folgt aus:

<!DOCTYPE html>
<html>


   <head>
       <title></title> 
   </head>

   <body>
   </body>

</html>
Wie wir sehen, kann ein Tag mehrere andere Tags enthalten. Wichtig für eine Seite ist der <head> sowie der <body> Tag. Im <head> Tag werden nicht sichtbare Seiteninformationen bereitgestellt und im <body> der Text, den der User später beim Aufruf der Seite sieht.
Ein Tag kann auch noch Attribute aufweisen. Diese Attribute stehen innerhalb der < > Spitzklammern. Welche Attribute gültig sind, ist oft von Tag zu Tag unterschiedlich. Es gibt jedoch Standard-Attribute wie "id" oder "class". Wie man diese verwendet erkläre ich weiter unten im Abschnitt CSS.
Dieses Grundgerüst wird in einer Datei mit der Endung .html gespeichert. Üblich ist, dass die Hauptseite in der Datei index.html gespeichert wird.

Dokument Typ

In HTML gibt es verschieden Standards und welcher verwendet wird, wird über den Dokumenttyp angegeben. Es gibt verschiedene Typen, die verschiedene Attribute (CSS) und Textnotationen (auch ohne Tags) erlauben.
  • strict
    beinhaltet strikte Vorgaben und manche Elemente sind nicht erlaubt, betrifft besonders CSS. Weiters darf im <body> kein loser Text stehen, also muss der Text in ein Text-Tag verpackt werden (siehe unten).
  • transitional
    erlaubt manche Elemente die in strict nicht erlaubt sind und es darf auch loser Text im <body> stehen.
Das <!DOCTYPE> Tag wird über dem <html> Tag geschrieben, und kann zum Beispiel so aussehen, wenn man HTML 4.01 verwendet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN">

Wichtige Text-Tags

 In vielen Editoren wie hier in Blogger, braucht man sich um Tags nicht kümmern. Manchmal kann es aber nützlich sein, in die HTML Ansicht zu wechseln und selbst Hand anzulegen. Um Text besser zu formatieren gibt es verschiedene  Tags:
  • <div> ... Text ... </div>
    Wird verwendet, um später mittels CSS die Formatierungen zu definieren
  • <p> ... Text ... </p>
    Verwendet man, um einen Absatz zu definieren. 
  • <br> OHNE Ende  oder in dieser Schreibweise (XHTML) <br/>
    Bewirkt einen Zeilenumbruch.
  • <h1> Überschrift 1 </h1>
    Kennzeichnet eine Überschrift. Statt 1 kann man auch eine andere Zahl verwenden, wodurch die Größe durch die Standardformatierung geändert wird.

Zeichenkodierung

Vorallem bei deutschem Text ist es ratsam, die Zeichenkodierung anzugeben, da ansonsten die Umlaute oder das scharfe-S nicht korrekt dargestellt werden. Dies erreicht man über ein <meta> tag im <head> in dem man die Kodierung UTF-8 angibt:
<meta charset="utf-8" content="Kodierung"/>

XHTML

XHTML ist ein neuer HTML Standard. Er basiert auf XML (Extendsible Markup Language) beinhaltet aber sämtliche HTML-Elemente. Einziger Unterschied ist, dass jedes Element ein Ende braucht. Bestes Beispiel hierfür ist das <br> Element. Dieses braucht in HTML kein Ende und auch keinen Schrägstrich der dieses markiert. In XHTML ist dies anders. Da jedes Element ein Ende braucht kann man entweder <br> </br> schreiben oder wie in XML auch, kann man aber leere Elemente beschreiben, in dem man den Schrägstrich am Ende des Elementes vor der Spiztklammer anfügt: <br />.
XHTML ist somit strikter bei der Formatierung und die Formatierung kann über eine Vorlage beschrieben werden, einer so genannten DTD (Document Type Definition). Die DTD gibt vor, was erlaubt ist und was nicht. Verwendet man eine DTD, so wird das XHTML Dokument gegen dieses validiert.  Die Verwendung wird im <!DOCTYPE> Tag angegeben:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Wie schon bei HTML gibt es die gleichen Typendefinitionen strict und transitional. Weiters wird die Datei als .xhtml gespeichert.

Validatoren

Besonders hilfreich sind Validatoren. Sie überprüfen den Code und helfen bei der Fehlersuche. Bei großen Projekten mit vielen CSS Formatierungen und HTML Tags durchaus hilfreich. Hier sind zwei Links zu solchen Validator, jedoch findet man über die Internetsuche noch viele mehr: w3c-Validator oder freeformatter.

    CSS (Cascading Style Sheet)

    Mittels CSS lässt sich das Aussehen der HTML Seite beeinflussen. Es gibt Standardformatierung für zum Beispiel Überschriften. Wie in einem Word-Dokument, kann man mittels CSS den gesamten Text formatieren.

    Einbinden des CSS

    Dies führt aber schnell zu unlesbaren HTML-Code, weshalb es besser ist, die CSS Formatierung in ein eigenes File auszulagern. Damit HTML und CSS verbunden werden, muss man in das <head> Tag folgende Zeile aufnehmen:
    <link rel="stylesheet" type="text/css" 
            href="name_der_css_datei.css">
    Man kann aber auch den CSS Code (wenn wenig vorhanden ist) auch direkt ins <head> Tag schreiben in dem man ein <style> Tag hinzufügt:
         <style type="text/css"> </style>

    Maßeinheiten

    Man kann in CSS verschiedene Maßeinheiten verwenden, um die Größe oder Abstände zu beschreiben. Jedoch sollte man absolute Einheiten vermeiden, da die Skalierbarkeit der Seite dadurch schnell kaputt gehen kann.
    • px
      Steht für Pixel. Die Anzeige ist relativ auf verschiedenen Ausgabegeräten, da sie von der Pixeldichte abhängt.
    • %
      Bedeutet relative Größe bezogen auf die eigene Elementgröße, die Elementgröße des Elternelementes oder Kontextbezogen (zum Beispiel auf die Schriftgröße).
    • em
      Bedeutet relativ zur Schriftgröße des Elements, wobei jedes Element eine andere Schriftgröße haben kann. 
    • rem
      Ist relativ zur Schriftgröße des Basiselements im HTML Dokument und im Gegensatz zu "em" also immer gleich.

    ID's

    Tags kann man mit einer eigenen ID versehen, um diese direkt im CSS "anzusprechen" und zu verändern. Wichtig ist, dass die ID nur einmalig verwendet wird. Sie macht das Tag einzigartig innerhalb der HTML-Seite.
    <div id="test"> ... </div>

    Klassen

    Klassen dienen dazu, mehrere Tags zu einer Gruppe zusammen  zu fassen, um diese Gruppe ein einheitliches Aussehen zu geben. Ein Tag kann auch mehrere Klassen zugewiesen bekommen, dafür trennt man den Klassennamen einfach mit einem Leerzeichen.
    <div class="test absatz"> ... </div>
    <div class="absatz"> ... </div>

    Selektoren

    Damit man im CSS eine Formatierung vornehmen kann, muss man das gewünschte Element selektieren. Man kann das CSS innerhalb des Tags schreiben.
    Das Format eines CSS-Eintrags - sowohl in einer Datei als auch im <head> Tag - sieht dabei wie folgt aus:
    selektor {
        attribut: wert;
    }
    Möchte man nun zum Beispiel die Überschrift <h3> unterstreichen, so sieht der Code wie folgt aus:
    h3 {
        text-decoration: underline;
    }
    Der Selektor ist in diesem Fall das Tag selbst. Will man ein Tag mit einer ID selektieren muss man die Raute voranstellen.

    HTML-Beispiel

    <p id="ersterAbsatz"> ... </p>

    CSS-Code

    #ersterAbsatz {
        color: blue;
    }

    Klassen selektiert man mit einem Punkt:

    HTML-Beispiel

    <div class="comments"> ... </div>

    CSS-Code

    .comments {
        text-align: center;
    }

    Ausgabe



    Beispiel Ausgabe CSS


    Beispiel

    Auch Hierarchien können mittels CSS abgebildet werden. So kann man Elemente mit Klassen oder ID's nacheinander schreiben, getrennt durch ein Leerzeichen, um diese Hierarchie abzubilden. Die Formatierung gilt dann nur für diese spezielle Hierarchie.

    HTML-Beispiel

      <div class="test">
         Starndardformatierung für Kasse Test: Schrift ist
         blau und fett;
         <div class="test2">
            Formatierung für Klasse Test 2: Farbe grün,
            nicht fett<br> Überschrift 1: Farbe
            schwarz, unterstrichten und Schriftgröße
            20px.
        
      <h2>Überschrift 1</h2>
         </div>
        
         <div> Formatierung für div wie Klasse Test auch
            bei Überschrift 2
            <h2>Überschrift 2</h2>
         </div>
      </div>

    CSS-Code

        .test {
           color: blue;
           font-weight: bold;
        }

       
        .test .test2 h2  {
           color: black;
           font-size: 20px;
           text-decoration: underline;
        }   

       
        .test .test2 {
           font-weight: normal;
           color: green;
        }

    Ausgabe


    CSS Hierarchei Beispiel

    Beispiel

    Verwendet man mehrere Klassen und will nur der Kombination der genannten Klassen ein Format zuweisen, so schreibt man die Klassen hintereinander ohne Leerzeichen.

    HTML-Beispiel

      <div class="test absatz">Klassentest test,
            absatz</div>
      <div class="test">Klassentest test</div>

    CSS-Code

        .test {   
            color: blue;
            font-weight: bold;
        }
       
        .test.absatz {
            width: 150px;
            font-style: italic;
            color: white;
            background-color:black;   
        }

    Ausgabe


    CSS für Klassenkombination



    Es gibt sehr viele CSS Attribute und Werte und jedes zu erklären würde den Rahmen sprengen. Einen guten Überblick und auch noch eine genauere Einführung findet ihr auf w3school und SelfHtml.

    Javascript

    Javascript ist wie der Name vermuten lässt eine Script-Sprache mit deren Hilfe man verschiedene Dinge erreichen kann. So kann man während des Ladens einer Seite, Inhalte hinzufügen oder auf Benutzereingaben reagieren. Jedoch sollte man nicht Java und Javascript verwechseln. Beides sind Programmiersprachen, jedoch ist alleine die Syntax eine andere.
    Javascript kann wie CSS entweder direkt in das HTML geschrieben werden, als auch in einer eigenen Datei verwendet werden. Für eine bessere Übersicht, sollte, wenn man keine Datei verwendet, die Scripte in den <head> Tag.
    Es gibt aber auch die Möglichkeit, den Javascript Code direkt innerhalb von HTML-Tags zu verwenden oder innerhalb des <body>. Jedoch wird dies, wie bei CSS Formatierungen schnell unübersichtlich.
    Es gibt sehr viele Funktionen mit denen man arbeiten kann. In diesem Beitrag beschränke ich mich aber auf den Zugriff auf HTML-Elemente um diese zu verändern. Um den gesamten Funktionsumfang kennen  zu lernen, bitte hier nachlesen oder  nach einem Tutorial suchen.
    Wichtig ist, dass Javascript Case Sensitiv ist. Das bedeutet dass es auf die Schreibweise ankommt, weil Groß/Kleinschreibung berücksichtigt wird.
    Beherrscht man schon eine Programmiersprache, so ist lediglich die Syntax anders. Es gibt auch Webseiten, die unterschiedliche Programmiersprachen in eine andere übersetzen.

    Beispiele

    Beim Laden der Seite wird ein eigener Text eingefügt. Ein praktisches Anwendungsbeispiel wäre, wenn sich jemand auf einer Seite einloggt und es wird ein personalisierter Begrüßungstext mit Namen angezeigt.
    Soll es beim Laden der HTML-Seite erfolgen, so trägt man im <body> das Attribut onload="functionName()" ein.

    HTML-Beispiel

    <div id="hello" ></div>

    Javascript-Code

    <script type="text/javascript">
       function insertText(){
          document.getElementById("hello").innerHTML =
             "Hello World";
       };
     </script>  

    Ausgabe

    Ausgabe

    Beispiel

    Man kann auf Benutzereingaben reagieren, wenn der User zum Beispiel ein Formular ausfüllt und auf absenden klickt, werden gewisse Teile der Webseite neu definiert oder geändert.

    HTM-Beispiel

    <form action="">
         <div>
           <button name="click" type="button"
                 value="Klick mich!"
                 onclick="javascript:onClick();">
           Klick mich!
           </button>
         </div>
       </form>
     
      <div id="clicked"> </div>
    </form>

    Javascript

     <script type="text/javascript">
         function onClick(){
             document.getElementById("clicked").innerHTML =
                "you just clicked the button";
         };
      </script> 
     

    Ausgabe

    Anzeige nach dem Klick auf den Button

    Beispiel

    Bei diesem Beispiel editiert man eine Liste mit vorgegebenen Werten. Man fügt eine Nummerierung hinzu und setzt, für jede "gerade Zeile" eine andere Klasse, um die Lesbarkeit zu erhöhen.


    HTML-Beispiel

      <div id="list">
         Einkaufsliste:</br>
         <div>Milch</div>
         <div>Eier</div>
         <div>Wurst</div>
         <div>K&auml;se</div>
         <div>S&uuml;&szlig;es</div>
      </div>

    Javascript

    function doLineFormatting(){
        var list = document.getElementById("list");
        var divs = list.getElementsByTagName('div');

        for (i = 0; i < divs.length; i++){

            var elem = divs[i];
            var text = (i+1) + ". " + elem.innerHTML;
            elem.innerHTML = text;
            
            if (i%2 == 0){
              elem.setAttribute("class", "even");                     
            }
        }
    };
    Erklärung zum Code:
    Als erstes sucht man sich mit getElementById das gewünschte HTML-Element aus und speichert sich dieses in der Variable list. Danach selektiert man mittels getElementsByTagName nur <div> Elemente die in list vorkommen (denn nur diese möchte man neu formatieren). Danach führt man mittels einer Schleife - in diesem Fall habe ich eine for-Schleife verwendet - verschiedene Operationen aus.  
    Wichtig: In den meisten Programmiersprachen beginnt man beim Zählen bei 0, so auch in Javascript!
    In der Schleife über alle <div> Elemente, lest man den Text der Elemente aus und setzt eine Nummerierung mit der Zählvariable davor. Hier ist zu beachten, dass ja mit 0 gezählt wird, muss  man noch +1 dazu zählen, damit die Nummerierung bei 1 beginnt.
    Um die Formatierung jeder zweiten Zeile zu ändern, verwendet man den sogenannten Modulo-Operator %. Dieser überprüft den Restwert der Division. Ist also der Restwert einer Division durch zwei 0, so ist die Zahl gerade. Ist dies der Fall fügt man die Klasse "even" mit der Funktion setAttribut hinzu.

    Ausgabe

    Formatierte Liste mit Nummerierung

    Nützliches

    Anderer Browser andere Ansicht

    Die Website soll in allen Browsern gleich aussehn, schließlich verwendet man ja HTML und CSS um dies zu erreichen. Leider reicht das in manchen Fällen nicht. Vorallem im Internet Explorer gibt es immer wieder unterschiedliche Darstellungen des Codes.
    Man kann über Javascript auslesen, welcher Browser verwendet wird und dann ein anderes CSS File, das an den Internet Explorer angepasst ist, laden. Das Problem dabei ist, dass es verschiedene Erweiterungen gibt, die anstatt des eigentlichen Browsers einen anderen angeben. Somit kann man sich nicht 100 prozentig darauf verlassen.

    Entwicklungsumgebung für Firefox

    Standard

    In der neuesten Version von Firefox ist standardmäßig ein Entwicklerwezeug dabei. Dieses kann man mit F12 aufrunfen. Mittlerweile bietet es auch den gleichen Funktionsumfang wie divese Addons. Man kann damit HTML Elemente selektieren (Mauszeiger-Zeichen), Javascript Code debuggen, Fehlermeldungen auf der Konsole auslesen und auch live CSS bearbeiten. Beim live Bearbeiten des CSS wird aber nicht das CSS auf dem Server überschrieben, sondern nur die lokale Kopie die im Browser geladen ist. Das macht das austesten verschiedenster Einstellungen natürlich leichter.

    Firefox Entwicklungsumgebung

    Firebug

    Für Firefox gibt es ein Addon namens Firebug. Beim betrachten oder Fehler suchen, hilft es ungemein, da es Fehler von Javascript ausgeben kann. Dieses Addon bot schon vorher sehr viele Funktionen, als die standard Entwicklungsumgebung von Firefox diese noch nicht bot.
    Nach der Installation ruft man Firebug mit der Taste F12 auf - es wird also die Kurztaste für die Entwicklungsumgebung überschrieben. Die standard Firefox Entwicklungsumgebung kann immer noch unter Menü - Entwickler-Werkzeuge - Werkzeuge Ein/Ausblenden angezeigt werden.

    Firebug-Fenster
    Der Funktionsumfang ist gleich jenem der standard Entwicklungsumgebung. Leider habe ich seit dem letzten Update Probleme, da sich eine Biobliothek die Firebug verwendet, öfter zu einem Hänger des gesamten Browsers führt. Hoffe dies wird bald behoben, da dies keinen Spaß macht.

    Entwicklungsumgebung für Chrome

    In Chrome ist ein ähnliches Tool standardmäßig schon mit dabei. Die Symbole unterscheiden sich geringfügig aber ansonsten ähnelt diese den Entwicklungsumgebungen von Firefox.

    Anything Else...?

    Die hier gezeigten Beispiele habe ich in eine HTML-Datei gepackt, welche man sich hier herunterladen kann. Mit dieser Datei kann jeder selber experimentieren und verschiedenes ausprobieren.
    Da ich selbst programmiere, so bitte ich technische Fachausdrücke zu entschuldigen. Bei diesem Post habe ich mich bemüht so einfach wie möglich alles zu erklären, jedoch kann für mich etwas klar sein, nicht aber für jemanden der erst begonnen hat, sich damit zu beschäftigen. Bei Unklarheiten bitte einen Kommentar hinterlassen und ich werde versuchen die Unklarheiten zu beseitigen.

    Links

    Hilfe-Seiten für HTML, CSS und Javascript
    http://www.w3schools.com/html/
    http://de.selfhtml.org/
    http://www.w3schools.com/js/js_syntax.asp