HTML Formatierung und CSS

Formatierung


charset Attribut

Attribute bieten die Möglichkeit zusätzliche Informationen fest zu legen. Das kann z.B. eine Mitteilung an den Browser sein, welchen Zeichensatz wir bei der Erstellung der Seite verwendet haben. In unserem Fall haben wir "uft-8" verwendet. Dieser regelt die Verwendung von Sonderzeichen, die wir in unsere Webseite einbauen.
Attribute schreiben wir in den <head> Bereich unseres html Dokumentes. Gebildet werden sie aus Attributnamen, einem Gleichheitszeichen und dem Attributwert.

<!DOCTYPE html>
   <html>
      <head>
         <meta charset="utf-8">
      </head>


Überschriften

Grosse Überschriften bettet man in den <h1> Tag ein. Natürlich gibt es nicht nur eine standardisierte Titelgrösse, sondern sechs verschiedene, mit denen wir unter sechs Grössen von Überschriften aussuchen können. Der grösste von allen ist der <h1> Tag. Als zweitgrössten verwenden wir den <h2>, als drittgrössten den <h3> ... und so weiter und sofort.
Im unteren Beispiel sind diese nochmals aufgeführt.
<!DOCTYPE html>
  <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        <h1>www.codestarter.ch</h1>;
        <h2>www.codestarter.ch</h2>;
        <h3>www.codestarter.ch</h3>;
        <h4>www.codestarter.ch</h4>;
        <h5>www.codestarter.ch</h5>;
        <h6>www.codestarter.ch</h6>;
      </body>
  </html>

Bildschirmfoto 2018-03-31 um 152614png

Zeilenumbruch

Bislang haben wir normale Texte ohne weiteres in den <p> Tag eingeschlossen. Aber was machen, wenn wir den Text auf die nächste Zeile bringen wollen. Genau dafür gibt es in HTML einen Tag namens <br />. Dieser wird alleine verwendet. Das heisst, dass wir keine Werte in ihm einbetten. Wir setzen ihn einfach an die Stelle im Text (innerhalb des <p> Tags), wo wir einen Zeilenumbruch haben wollen.

<!DOCTYPE html>
   <html>
      <head>
         <meta charset="utf-8">
      </head>
      <body>
         <p>Kontaktmöglichkeiten<br />
            Tel: +41 76 701 04 09<br />
            E-Mail: kontakt@codestarter.ch
         </p>
      </body>
   </html>

Bildschirmfoto 2018-03-31 um 152815png


CSS

Nun kennen wir bereits kleine Formatierungsmöglichkeiten, möchten aber verschiedene Textgrössen, Farben, Hintergrundfarben oder Schriftarten in die Webseite einbauen. CSS ist eine Formatierungssprache, mit der man das Aussehen der Seite beeinflussen kann. Es bietet uns die Möglichkeit, Texte in verschiedenen Schriftarten und Farben darzustellen.


Stylesheet

Für kleinere Formatierungen, die nur auf einer Seite verwendet werden sollen, bietet sich das eingebettete Stylesheet an. Das Stylesheet platzieren wir im <head> Bereich der Seite und kann, wie schon erwähnt, nur auf dieser Seite angewendet werden. Das heisst, Formatierungen die auf anderen Seiten gleich sind, müssen manuel übertragen werden.

Den style Bereich erstellen wir wie folgt -> <style type="text/css"> </style>. Zwischen den beiden spitzen Klammern platzieren wir unsere Formatierungen.

<!DOCTYPE html>
<html> 
    <head> 
        <title> Meine Webseite  </title> 
        <style type="text/css">        
        p {color: red; font-family: Arial; }
        h1 {color: blue; font-family: Garamond; }        
        </style>
    </head>
    <body> 
        <h1> Hello World </h1> 
        <p> Das ist meine erste Webseite :) </p> 
<img src="bild.png"> </body> </html>

Bildschirmfoto 2018-03-31 um 153443png
 
 

Gefällt dir CodeStarter?

Blog-Kommentare werden über Disqus bereitgestellt