Das Internet

Netzwerk von Rechnern auf der ganzen Welt

Das Internet

Netzwerk von Rechnern auf der ganzen Welt

Das Internet

Rechnenzentrum

Wie funktioniert das Internet?

Adresse wird in Browser eingegeben

https://computer-ag.com

Wie funktioniert das Internet?

Adresse wird in Browser eingegeben

https://computer-ag.com

DNS Server

Domain Name Server

computer-ag.com

Wie funktioniert das Internet?

Adresse wird an DNS geleitet

https://computer-ag.com

DNS Server

Domain Name Server

computer-ag.com

Wie funktioniert das Internet?

Adresse wird in IP umgewandelt

https://computer-ag.com

DNS Server

Domain Name Server

18.156.128.50

Wie funktioniert das Internet?

Webseite wird heruntergeladen

https://computer-ag.com

DNS Server

Domain Name Server

18.156.128.50

Wie funktioniert das Internet?

Webseite wird heruntergeladen und angezeigt

https://computer-ag.com

DNS Server

Domain Name Server

18.156.128.50

Woraus besteht eine Webseite?

HTML

HyperText Markup Language

Bilder

z.B. PNG, JPEG, GIF, SVG

CSS

Cascading StyleSheets

JavaScript

Dynamische Inhalte

Woraus besteht eine Webseite?

<h1>Herzlich Willkommen!</h1>
<p>Das Ziel der Computer AG [...]</p>
<a href="/meine-ag">Zur Kursübersicht</a>

<h2>Themen (u.a.)</h2>
<ul>
  <li>Computer im Alltag</li>
  <li>...</li>
</ul>

HTML

HyperText Markup Language

Markup Language = Auszeichnungssprache

HTML

Dies ist ein Absatz, also ein Text über irgendein Thema. Aber woher weiß der Computer, dass es sich um einen Absatz handelt?

Dies ist eine Liste
Mit mehreren Listenelementen
...

🤔

HTML

😃

💡

<ul>
  <li>Dies ist eine Liste</li>
  <li>Mit mehreren Listenelementen</li>
  <li>...</li>
</ul>

<p>Dies ist ein Absatz, also ein Text über irgendein Thema.
Aber woher weiß der Computer, dass es sich um einen Absatz
handelt?</p>

HTML

😃

💡

<Tag>Text der beschrieben werden soll.</Tag>

Tags können verschachtelt werden

<Tag>
  <NochEinTag>Text</NochEinTag>
  <NochEinTag>
    <NochEineEbene>Text</NochEineEbene>
    <NochEineEbene>Text</NochEineEbene>
  </NochEinTag>
</Tag>

HTML

😃

💡

<br>
oder 
<br />

Es gibt auch leere Tags

(Also ohne Text)

☝️ Neue Zeile

HTML

😃

💡

<img src="computer.png" alt="Ein Computer mit Tastatur, Maus und Bildschirm" />

Tags können Attribute haben.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Titel der Seite</title>
  </head>
  <body>

    <h1>Überschrift</h1>
    <p>Irgendein Text.</p>

  </body>
</html>

Grundgerüst

HTML

<title>Titel der Seite</title>

<h1>Überschrift</h1>
<p>Irgendein Text.</p>

Grundgerüst

Die meisten Browser verstehen es auch so

HTML

<table>

</table>

Tabellen

HTML

<table>
  <thead>
    
  </thead>
  <tbody>
    
  </tbody>
</table>

Tabellen

HTML

<table>
  <thead>
    <tr>
      <th>Montag</th>
      <th>Dienstag</th>
      <th>Mittwoch</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

Tabellen

HTML

<table>
  <thead>
    <tr>
      <th>Montag</th>
      <th>Dienstag</th>
      <th>Mittwoch</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Englisch</td>
      <td>Religion</td>
      <td>Mathematik</td>
    </tr>
  </tbody>
</table>

Tabellen

HTML

<table>
  <thead>
    <tr>
      <th>Montag</th>
      <th>Dienstag</th>
      <th>Mittwoch</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Englisch</td>
      <td>Religion</td>
      <td>Mathematik</td>
    </tr>
    <tr>
      <td colspan="5">Pause</td>
    </tr>
  </tbody>
</table>

Tabellen

CSS

Cascading Style Sheet

HTML Elemente stylen

<p style="color: red">roter Text</p>

<p style="background-color: yellow">Text mit gelbem Hintergrund</p>

<p style="color: red; background-color: yellow;">
  roter Text mit gelbem Hintergrund
</p>

HTML Elemente stylen

<p style="color: red">roter Text</p>

<p style="color: red">roter Text</p>

<p style="color: red">roter Text</p>

<p style="color: red">roter Text</p>

HTML Elemente stylen

<div style="color: red">

  <p>roter Text</p>

  <p>roter Text</p>

  <p>roter Text</p>
  
  <p>roter Text</p>
  
</div>

HTML Elemente stylen

  <p>roter Text</p>

  <p>roter Text</p>

  <p>roter Text</p>
  
  <p>roter Text</p>

HTML

CSS

p { color: red; }

HTML Elemente stylen

  <p>roter Text</p>

  <p>roter Text</p>

  <p>roter Text</p>
  
  <p>roter Text</p>

HTML

CSS

p { color: red; background-color: white; }

HTML Elemente stylen

  <p>roter Text</p>

  <p>roter Text</p>

  <p>roter Text</p>
  
  <p>roter Text</p>

HTML

CSS

p { color: red; background-color: white; font-weight: bold; }

HTML Elemente stylen

  <p>roter Text</p>

  <p>roter Text</p>

  <p>roter Text</p>
  
  <p>roter Text</p>

HTML

CSS

p {
  color: red;
  background-color: white;
  font-weight: bold;
}

HTML Elemente stylen

<link rel="stylesheet" href="styles.css" />

Als CSS Datei

Direkt in HTML

<style>
p {
  color: red;
  background-color: white;
  font-weight: bold;
}
</style>

JSFiddle

☝️Klicken

Internationaler Frauentag

8. März

Grace Hopper

01001001 10011011 11001010

🤔

Grace Hopper

verständliche Sprache!

😃

Grace Hopper

Erster "Bug" 😉

Margaret Hamilton

Software für Apollo 11

Margaret Hamilton

Software für Apollo 11

Margaret Hamilton

2016: Presidential Medal of Freedom

Programmierung

🤔

Programmierung

🤔

💻

Programmierung

😃

💻

Anweisungen

Programmiersprache

Anweisungen

Zahl soll 3 sein.

Füge 5 zu der Zahl hinzu.

Gebe das Ergebnis auf dem Bildschirm aus.

Anweisungen

Zahl soll 36.768 sein.

Füge 538.756 zu der Zahl hinzu.

Gebe das Ergebnis auf dem Bildschirm aus.

575.524

Anweisungen

Bewege eine Figur einen Schritt nach vorne.

Spiele ein Geräusch/Musik ab.

Gehe zur nächsten Folie der Präsentation.

Bedingungen

Wenn [...] dann mache [...]

wenn (zahl < 10) dann schreibeAufBildschirm("Zahl ist kleiner als 10.")

if (zahl < 10) print('Zahl ist kleiner als 10');

Schleifen

Wiederhole [...] bis [...]

while (zahl < 10) zahl = zahl + 1

oder

repeat { zahl = zahl + 1} until (zahl > 10)

Los geht!

Programmierung

Teil 2

Schleifen

(Wiederholungen)

Bewege Figur

Wiederhole

Funktion

5 mal

Schleifen

(Wiederholungen)

Bewege Figur

Wiederhole

Funktion

bis...

20 Schritte gegangen
Spielfeld Ende erreicht
30 Punkte erreicht
25 Sekunden vergangen
5 Sterne gesammelt
...

Ereignis / Bedingung

Bedingungen

Falls EREIGNIS dann AKTION

Falls Münze berührt wird

dann gib einen Punkt.

Falls Falle berührt wird

dann zeige Text an: "Game Over".

Falls du was sagen möchtest

dann melde dich.

Bedingungen

Variablen

Ein sich veränderbarer Wert.

Zahl

Farbe

Ja / Nein

Text

Variablen

Eine Variable hat meistens einen Startwert.

Farbe = rot

Punkte = 0

Hat gewonnen = nein

Variablen

Variablen können in Schleifen und Bedingen verwendet werden.

Wiederhole bis Punkte = 20.

Falls Münze berührt wurde,
dann erhöhe Punktzahl um 5.