Webdesign I (HTML5 und Webarchitektur)

In dieser Einheit wurde der neue Themenblock Webdesign mit einer kurzen Einführung in die Architektur des Internets begonnen. In diesem Zusammenhang wurde über den Aufbau des Internets sowie über diverse Serverdienste und deren Protokolle gesprochen, bevor näher auf das HTTP (Hypertext Transfer Protocol) Protokoll eingegangen wurde. Nach der Klärung des Prinzips eines Seitenaufbaus, wurden die heutzutage gängigsten Webprogrammiersprachen wie HTML5, CSS3, PHP oder SQL vorgestellt, um einen Eindruck über die Vielfältigkeit der Webentwicklung vermitteln zu können. 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 (durch das W3C geregelt) näher gebracht wurde. Im Weiteren Verlauf wurde die Entwicklungsumgebung Visual Studio Code vorgestellt, welche als Programmiertool für diverse Programmiersprachen dient. Damit wurde schlussendlich das Grundgerüst der ersten eigenen Website erstellt, indem innerhalb eines neuen Projektes zwei Unterseiten (index.html und about.html) erstellt und mit diversen Inhalten (z.B. Überschriften, Texten, Linien, Listen, Links, Bilder und Tabellen) gefüllt wurden.


Kompetenzen

  1. Ich weiß wie das Internet bzw. das World Wide Web aufgebaut ist und kann einzelne Elementen benennen.
  2. Ich kenne unterschiedliche Serverdienste sowie deren Protokolle wie z.B. HTTP, FTP, SMTP oder POP.
  3. Ich verstehe für was man die Programmiersprachen HTML, CSS, PHP und SQL innerhalb der Webentwicklung verwendet.
  4. Ich verstehe den logischen Aufbau eines HTML-Dokuments und weiß inwieweit sich HTML5 zu seinem Vorgänger HTML4 unterscheidet.
  5. Ich weiß welche Organisation (W3C - World Wide Web Consortium) für die Standardisierung im Internet verantwortlich ist.
  6. Ich kenne diverse HTML5-Tags und kann diese den Seitenelementen <head> und <body> zuordnen.
  7. Ich verstehe wie Hyperlinks andere Seiten innerhalb eines Verzeichnisses aufrufen können und kann diese in einem HTML-Dokument einbinden.
  8. Ich kann Listen, Bilder, Tabellen, Texte, Überschriften und Sonderelemente wie Linien <hr> oder Absätze <br> in einem HTML-Dokument einbinden.
  9. Ich weiß wofür Visual Studio Code verwendet wird und wie man mit diesem erweiterbaren Code-Editor umgeht.


Vertiefung

basic.html
<!DOCTYPE html>
<html>
  <head>
    <title>Seitentitel</title>
    <meta charset="UTF-8">
  </head>	
 
  <body>
    <h1>Überschrift 1</h1>
    <p>Ein Beispieltext</p>		
  </body>
</html>


Unterrichtsmaterialien