Webdesign I (HTML5 und CSS3)

In dieser Stunde wurde der neue Themenblock Webdesign begonnen. Nachdem das Prinzip eines Seitenaufbaus unter HTTP geklärt wurde, wurden die heutzutage gängigsten Webprogrammiersprachen wie HTML5, CSS3, PHP oder SQL vorgestellt, um einen Eindruck über die Vielfältigkeit der Webentwicklung zu bekommen. Im Anschluss daran wurde der Aufbau eines HTML-Dokuments vorgestellt und wichtige HTML-Tags geklärt, wodurch auch der Unterschied zwischen den Versionen HTML4 und HTML5 näher gebracht wurde. Mit diesem Wissen wurde anschließend ein Grundgerüst der ersten persönlichen Website erstellt, indem innerhalb eines neuen Projektes zwei Unterseiten (index.html und login.html) erstellt und mit diversen Inhalten (z.B. Überschriften, Texten, Linien, Listen, Links und Bilder) gefüllt wurden. Anschließend wurde noch die Auszeichnungssprache CSS (Cascading Sytle Sheets) vorgestellt und näher besprochen. Dazu wurde eine neue CSS-Datei im Website-Projekt angelegt und schlussendlich ein Bildbanner in Form einer Kopfzeile, eine Navigationsleiste mit Buttons inkl. Hover-Effekt sowie sonstige Gestaltungselemente erstellt.


Kompetenzen

  1. Ich verstehe für was man die Programmiersprachen HTML, CSS, PHP und SQL innerhalb der Webentwicklung verwendet.
  2. Ich verstehe den logischen Aufbau eines HTML-Dokuments und weiß inwieweit sich HTML5 zu seinem Vorgänger HTML4 unterscheidet.
  3. Ich kenne diverse HTML5-Tags und kann diese den Seitenelementen <head> und <body> zuordnen.
  4. Ich kann Listen, Bilder, Tabellen, Texte, Überschriften und Sonderelemente wie Linien <hr> oder Absätze <br> in einem HTML-Dokument einbinden.
  5. Ich kenne den Unterschied zwischen HTML und CSS und kann beide Dateitypen miteinander verbinden.
  6. Ich weiß wie ein Standard Website Layout konzipiert ist und verstehe wie das CSS3 Box Model funktioniert.
  7. Ich kenne diverse CSS-Befehle und kann diese mit unterschiedlichen Selectors innerhalb einer Datei anwenden.
  8. Ich verstehe wie ich neue Klassenelemente bzw. ID-Elemente erzeugen kann und wie diese in CSS aufzurufen sind.


Vertiefung

sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>Seitentitel</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="layout.css">
  </head>	
 
  <body>
    <h1>Überschrift 1</h1>
    <p>Ein Beispieltext</p>		
  </body>
</html>
layout.css
html {
    height: 100%;
    width: 100%;
}
 
body {
    background-color: #FFF8BB;
    font-family: Arial;
    padding: 0;
    margin: 0;
}
 
h1 { 
    font-size: 40pt;
}



Unterrichtsmaterialien


, , , , , , , , , , ,