Progammieren Teil 1

Programieren

Voraussetzung

Öffne einen normalen Editor zum Beispiel den Windows Editor Notepad oder einen Editor deiner Wahl. Speichere nun die Datei mit der Erweiterung .html ab, zum Beispiel haus.html. Achte darauf, dass der Editor nicht die Erweiterung .txt verwendet, die Erweiterung muss .html sein. Bei manchen Editoren musst du dafür bei Dateityp Alle Dateien (*.*) einstellen.

Starte nun einen Browser und öffne mit Strg+O die Datei haus.html. Endlich kannst du starten. Im Editor kannst du nun HTML und CSS eingeben und die Datei bei jeder Änderung speichern. Das Ergebnis kannst du im Browser anschauen. Vergiss nicht den Browser jedes Mal mit F5 zu aktualisieren.

HTML

Tippe zuerst das HTML Grundgerüst ein:

<html>

<head>
</head>

<body>
</body>

</html>  

HTML ist eine Auszeichnungssprache. Meistens bestehen HTML-Anweisungen aus Tag-Paare z.B. <html></html>. Man schreibt Elemente meistens zwischen dem Beginn-Tag und dem End-Tag z.B. <html>hier der Inhalt</html>

Die wichtigsten Tags für das Grundgerüst einer HTML-Seite sind:

<html>

<head>
hier steht der Inhalt für den Kopfbereich
</head>

<body>
hier steht der Inhalt für den Körperbereich
</body>

</html>  

Im head, dem Kopf, kann man z.B. CSS einfügen aber auch Angaben wie das title Tag.

Schreibe in den head einen Titel mit Hilfe des title Tags. Der title bzw. Titel ist im Seitenkörper nicht sichtbar, aber er ist für die Titelleiste im Browser und als Überschrift im Suchergebnis wichtig!

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

Im body, dem Körper, schreibt man alles, was man auf der Seite sehen kann.

Man kann z.B. Überschriften einfügen. Eine Überschrift erster Ordnung macht man z.B. so:

<h1>Das Haus</h1>

Einen Absatz macht man so:

<p>Das Haus hat 3 Stockwerke</p>

Wir wollen dass das Quadratisch ein fettes Wort ist.

<p>Das Haus ist <b>Quadratisch</b></p> 

Wir wollen das Wort Sattel ein schräg ist.

<p>Das Haus hat ein <i>Sattel</i> Dach</p>

Wir machen eine geordnete Liste. Eine geordnete Liste hat vorne Zahlen dran z.B.

  1. Das Haus hat ein spitzes Dach.
  2. Das Haus ist groß.
<ol>
  <li>Das Haus hat ein spitzes Dach.</li>
  <li>Das Haus ist groß.</li>
</ol>

Wenn wir einen Text schreiben will man auch manchmal einen Abstand in den Text darin machen. Das geht nicht so einfach. Man drückt die Entertaste aber es passiert nichts. Da braucht man einen Befehl. Der Befehl ist ein br. Der Befehl br macht eine Leere Zeile. Aber der Befehl br ist auch besonders denn er hat kein ende.

<p>Das Haus hat kein ende und kein anfand.
<br>
Es hat eine Küche und ein Wohnzimmer.</p> 

Wir machen eine ungeordnete List. Eine ungeordnete List hat vorne punkte dran. Z.B

  • Das Haus hat ein spitzes Dach.
  • Das Haus ist groß.
<ul>
  <li>Das Haus hat ein spitzes Dach.</li>
  <li>Das Haus ist groß.</li>
</ul>

Wir wollen nun noch eine Überschrift erster Ordnung einfügen und wollen später mit CSS diese spezielle Überschrift in einer anderen Farbe als die übrigen Überschriften formatieren. Dafür brauchen wir eine class. Die class wird als Attribut in den spitzen Klammern des Tags geschrieben. Wir verwenden die class “haus”, das schaut dann so aus:

<h1 class="haus">Beschreibung Haus</h1>

Das div Tag ist ein Block-Container. Es hat keine besondere Bedeutung, wird aber verwendet um andere Elemente zu gruppieren. Oft kommen dabei auch geschachtelte gruppieren zum Einsatz. Hier ein Beispiel mit 3 div Container die jeweils ein class Attribut haben.

  <div class="gesamtgruppe">

    <div class="gruppe1">
      <p>Das Haus ist gelb und Rot.</p>
      <p>Das Haus hat 4 Fenster.</p>
    </div>
  
    <div class="gruppe2">
     <p>Das Haus befindet sich in Tramin.</p> 
     <p>Das Haus ist 100 Jahre alt.</p>
    </div>

  </div>

Natürlich wollen wir auch einmal ein Bild einfügen. Das geht mit dem img Tag und einem src Attribut. Das img Tag ist besonders, weil es kein End Tag hat.

<img src="https://picsum.photos/id/1000/600/400">

Bei Websites ist natürlich ein Hyperlink ganz wichtig. Einem Hyperlink kann man mit dem Tag a machen. Der a Tag benötigt ein href Attribut.

<a href="https://de.wikipedia.org/wiki/Haus"><Wikipedia</a>


Nun schaut unsere Website so aus:

<html>

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

<body>
  <h1>Das Haus</h1>
  <p>Das Haus hat 3 Stockwerke</p>
  <p>Das Haus ist <b>Quadratisch</b></p> 
  <p>Das Haus hat ein <i>Sattel</i> Dach</p>
  
  
  <ol>
    <li>Das Haus hat ein spitziges Dach.</li>
    <li>Das Haus ist groß.</li>
  </ol>

  <ul>
    <li>Das Haus hat ein spitziges Dach.</li>
    <li>Das Haus ist groß.</li>
  </ul>

  <h1 class="haus">Beschreibung Haus</h1>
  
  <div class="gesamtgruppe">

    <div class="gruppe1">
      <p>Das Haus ist gelb und Rot.</p>
      <p>Das Haus hat 4 Fenster.</p>
    </div>
  
    <div class="gruppe2">
     <p>Das Haus befindet sich in Tramin.</p> 
     <p>Das Haus ist 100 Jahre alt.</p>
    </div>

  </div>

  <img src="https://picsum.photos/id/1000/600/400">
  <a href="https://de.wikipedia.org/wiki/Haus">Haus in Wikipedia</a>
</body>

</html>  

CSS

Tippe zuerst im head Bereich den Tag style ein. Das ist wichtig, weil sonst kannst du nicht CSS programmieren.

<head>
  <title>Haus</title>
  <style>

  </style>
</head>

Bei CSS braucht es immer einen Selektor, ein Paar geschweifte Klammern und darin die CSS-Anweisungen. Die CSS-Anweisungen bestehen aus einer Eigenschaft gefolgt von einem Doppelpunkt, dann einem Wert und zum Schluss einem Strichpunkt.

Um der Überschrift h1 z.B. eine Farbe zu geben, kannst du Folgendes innerhalb der style-Tags eingeben:

h1{
  color:blue;
}

oder

h1{
  color:#0000FF;
}

Man kann für Farben den Namen der Farbe angeben oder mit Hexadezimalzahlen im RGB-Format (Rot-Grün-Blau Anteil, jeder Anteil hat 2 Stellen mit Zahlen von 00…FF) arbeiten.

Den Absatz größer machen macht man so:

p{
  font-size:110%;
}

oder

p{
  font-size:18px;
}

Man kann die Textgröße mit Prozent oder px angeben.

Wie gesagt machen wir die spezielle Überschrift mit der class haus rot. Dafür müssen wir in CSS die class mit einem Punkt ansprechen. Das schaut so aus:

.haus{
  color:#FF0000;
}

oder

.haus{
  color:red;
}

Unserer Website schaut nun insgesamt so aus:

<html>

<head>
  <title>Haus</title>
  <style>
    h1{
      color:#0000FF;
    }
    p{
      font-size:18px;
    }
    .haus{
      color:#FF0000;
    }
  </style>
</head>

<body>
  <h1>Das Haus</h1>
  <p>Das Haus hat 3 Stockwerke</p>
  
  
  <ol>
    <li>Das Haus hat ein spitziges Dach.</li>
    <li>Das Haus ist groß.</li>
  </ol>

  <ul>
    <li>Das Haus hat ein spitziges Dach.</li>
    <li>Das Haus ist groß.</li>
  </ul>

  <h1 class="haus">Beschreibung Haus</h1>
  
  <div class="gesamtgruppe">

    <div class="gruppe1">
      <p>Das Haus ist gelb und Rot.</p>
      <p>Das Haus hat 4 Fenster.</p>
    </div>
  
    <div class="gruppe2">
     <p>Das Haus befindet sich in Tramin.</p> 
     <p>Das Haus ist 100 Jahre alt.</p>
    </div>

  </div>

  <img src="https://picsum.photos/id/1000/600/400">
  <a href="https://de.wikipedia.org/wiki/Haus">Haus in Wikipedia</a>
</body>

</html>   

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.