Aktualisiert am 19. Februar 2024
Schnupperkurs Programmieren – Unsere digitale Welt verstehen
Mi, 26. Apr. 2023, 14:30 – 17:45 Uhr
VHS Oldenburg, Karlstraße 25; Raum 1.21
4 UStd., max. 8 TN, gebührenfrei 23AO31451Z
https://oldenburg.eingeloggt.net/programm-2021/veranstaltung/2023-04-26-schnupperkurs-programmieren-unsere-digitale-welt-verstehen
- HTML bildet die Grundstruktur der Website. (Haus)
- CSS wird für die Gestaltung von Websites verwendet. (Deko)
- JavaScript macht die Website dynamisch. (Fenster und Türen öffnen)
- PHP stellt eine Verbindung zum Server her, um z. B. E-Mails zu versenden, Cookies zu sammeln und Kundeninformationen in einer (MYSQL-)Datenbank zu speichern. (schließt Ihr Haus an Strom und Wasser an)
HTML
HTML steht für Hyper Text Markup Language
HTML ist die Standard-Auszeichnungssprache für Web-Seiten
HTML-Elemente sind die Bausteine von HTML-Seiten
HTML-Elemente werden durch <>-Tags dargestellt
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>199,533,484 Live Websites
73,000,000 nützen ein CMS (Content Management System) (45% WordPress)
126,000,000 sind statisch HTML
Ist HTML Coding?
Kodierung ist die Übersetzung von natürlicher Sprache in Maschinenbefehle, und Kodierer verwenden eine Zwischensprache, um der Maschine Schritt für Schritt die erforderlichen Aktionen vorzugeben.
Die Kodierung ist zwar ein wichtiger Teil der Softwareentwicklung, aber nicht der wichtigste. Um ein Produkt zu erstellen, müssen Sie mehrere zusätzliche Schritte unternehmen. Dazu gehören Planung, Entwurf, Test, Bereitstellung und sogar Wartung. Alles in allem kann der gesamte Prozess als Programmierung bezeichnet werden.
HTML mit Notepad Schreiben
Schritt 1: Öffnen Sie Notepad (PC)
Windows 8 oder höher:
Öffnen Sie den Startbildschirm (das Fenstersymbol unten links auf Ihrem Bildschirm). Geben Sie Notepad ein.
Windows 7 oder früher:
Öffnen Sie Start > Programme > Zubehör > Notepad
Schritt 1: Öffnen Sie TextEdit (Mac)
Öffnen Sie Finder > Programme > TextEdit
Ändern Sie auch einige Einstellungen, damit das Programm Dateien korrekt speichert. Wählen Sie unter Einstellungen > Format > „Einfacher Text“.
Aktivieren Sie dann unter „Öffnen und Speichern“ das Kontrollkästchen „HTML-Dateien als HTML-Code statt als formatierten Text anzeigen“.
Öffnen Sie dann ein neues Dokument, um den Code zu platzieren.
Step 2: HTML schreiben
Schreiben oder kopieren Sie den folgenden HTML-Code in Notepad:
Schritt 3: Speichern Sie die HTML-Seite
Speichern Sie die Datei auf Ihrem Computer. Wählen Sie im Menü Notepad den Befehl Datei > Speichern unter.
Nennen Sie die Datei „index.htm“ und stellen Sie die Kodierung auf UTF-8 ein (dies ist die bevorzugte Kodierung für HTML-Dateien).
Ansicht im Browser
Tipp: Sie können entweder .htm oder .html als Dateierweiterung verwenden. Es gibt keinen Unterschied, das bleibt Ihnen überlassen.
Schritt 4: Betrachten Sie die HTML-Seite in Ihrem Browser
Öffnen Sie die gespeicherte HTML-Datei in Ihrem bevorzugten Browser (Doppelklick auf die Datei oder Rechtsklick – und wählen Sie „Öffnen mit“).
Das Ergebnis wird in etwa so aussehen:
Entwicklungsumgebung (IDE)
Eine integrierte Entwicklungsumgebung (IDE) ist eine Software, die Sie auf Ihren Computer laden können. Sie wurde entwickelt, um den Webentwicklungsprozess zu rationalisieren.
- Texteditor
- Syntax-Highlighter
- Grafische Benutzeroberfläche (GUI)
- Compiler oder Interpreter
- Fehlersuchprogramm
https://netbeans.apache.org/download/index.html
https://www.apachefriends.org/download.html
HTML-Editoren Der HTML-Editor ist ein Programm, das speziell für die Programmierung von HTML und möglicherweise CSS oder einer Reihe anderer Programmiersprachen entwickelt wurde. Er enthält Funktionen, die Ihren Arbeitsablauf bei der Programmierung rationalisieren.
Basis HTML
<table>
<tr>
<th>Obst</th>
<th>Gemüse</th>
<th>Fleisch</th>
</tr>
<tr>
<td>Apfel</td>
<td>Salat</td>
<td>Rind</td>
</tr>
<tr>
<td>Orange</td>
<td>Brokkoli</td>
<td>Hänchen</td>
</tr>
</table>CSS
CSS steht für Cascading Style Sheets
CSS beschreibt, wie HTML-Elemente dargestellt werden sollen
Kann „Inline“ im Head, oder als extern.css verlinkt
INLINE
<h1 style="color:blue; font-size:12px;">Dies ist eine Überschrift</h1>
IM HEAD
<style>
h1 {color:blue; font-size:12px;}
</style>
EXTERN
<link rel='stylesheet' href='https://warrenlainenaida.de/wp-content/themes/neve/style.css'>Basis CSS
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}HTML & CSS = Responsive Websites
Responsive Webdesign bedeutet, dass HTML und CSS verwendet werden, um die Größe einer Website automatisch anzupassen.
Beim Responsive Webdesign geht es darum, dass eine Website auf allen Geräten (Desktops, Tablets und Handys) mit Media Queries gut aussieht.
Responsive Webdesign ist kein Programm und verwendet kein JavaScript.
RE•SPON•SIVE /RI’SPÄNSIV/
- „Form follows function“
- Funktion, Design und Inhalt folgen der jeweiligen Bildschirmauflösung
- Der Layouttyp ist demnach »flüssig« oder »elastisch«
Media Queries sind ein wichtiger Teil von CSS3, der es Programmierern erlaubt, responsive Websites zu erstellen, die auf unterschiedlich großen Bildschirmen korrekt dargestellt werden.
@media screen and (max-width:720px) {
/* Hier stehen die CSS Anweisungen für die Ausgabe*/
}Mit HTML5 wurde eine Methode eingeführt, mit der Webdesigner über den Viewport-Tag die Kontrolle über das Ansichtsfenster übernehmen können.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Dies gibt dem Browser Anweisungen, wie er die Abmessungen und die Skalierung der Seite steuern kann.
Der width=device-width-Teil legt die Breite der Seite so fest, dass sie der Bildschirmbreite des Geräts entspricht (die je nach Gerät variiert).
Der Teil initial-scale=1.0 legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.
JavaScript
JavaScript – oft abgekürzt als JS – ist eine Skriptsprache, mit der Webentwickler interaktive Webseiten erstellen können. Neben HTML und CSS ist JavaScript eine der am häufigsten verwendeten Programmiersprachen in der Webentwicklung.
JavaScript kann sowohl HTML als auch CSS aktualisieren und ändern.
JavaScript kann Daten berechnen, manipulieren und validieren.
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>PHP
PHP „PHP: Hypertext Preprocessor“ eine serverseitige Skriptsprache – es wird Code auf dem Server ausgeführt. Für die Datenverarbeitung im Hintergrund zuständig (wo Einträge gemacht werden können).
PHP ist eine der bekanntesten Programmiersprachen, die geeignet ist für die Entwicklung kundenorientierter Werbeanwendungen. Bei den meisten Webhostern wird PHP daher in weiser Voraussicht vorinstalliert.
PHP hat nichts mit Webdesign zu tun, dafür sind wie bekannt HTML und CSS zuständig. PHP ist in der Lage, dynamische ins Auge fallende Werbeinhalte entsprechend zu ergänzen. Voraussetzung ist ein PHP-fähiger Webspace.
<?php
$t = date("H");
if ($t < "20") {
echo "Have a good day!";
}
?>Bild Quelle: Header Bild https://www.pexels.com/@divinetechygirl/ & Pexels Danke!