Was hat ein Haus mit einer Website gemeinsam?

Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Was hat ein Haus mit
einer Website gemeinsam?
Praktisch nichts!
Theoretisch jede Menge!
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Wie beginnt man den Bau?
Bau eines Hauses
Bau einer Website
Gründstück/Bauplatz kaufen
virtuelles Grundstück bei einem
Hoster mieten, Adresse besorgen
Es wird ein Bauplan erstellt, die
Strukturüberlegungen, was
Struktur des Hauses festgelegt.
für Inhalte wohin?
Maurer legen das Fundament und
macht den Rohbau.
Elektroleitungen, Wasserleitungen
etc. werden gelegt.
Fachbegriffe WICHTIG
Hoster
URL
Webspace
Layout/Entwurf
LAYOUT erstellen.
HTML legt das Fundament in einer
HTML
.html Datei
Auszeichnungssprache
Programmiersprachen
ermöglichen Funktionen
Der Innenarchitekt plant die Tapeten,
Die CSS Liste ermöglicht das
den Fussboden und streicht.
zuweisen von Eigenschaften
.css Datei
Programmiersprache
CSS
Seitenbeschreibungssprache
Das Umzugsunternehmen kommt und Texte, Bilder und andere
bringt die persönlichen Gegenstände
variable Inhalte werden in
der neuen Bewohner
die Website eingepflegt
Content
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Fachbegriffe!
1. Hoster
oder Provider, ist eine Firma die Webspace/URLs vermietet.
4. HTML
Hypertext Markup Language <- Auszeichnungssprache. Damit beschreibt man in einem .html Dokument
die Grundelemente einer Website.
2. Webspace
In der Größe MB oder GB gemieteter virtueller
Speicher auf einem Webserver eines Providers.
5. CSS
Cascading Style Sheet <- Seitenbeschreibungssprache. In einem .css Dokument wird eine Liste
erstellt die die Eigenschaften von den HTML
Grundelementen beschreibt.
3. URL
www.lerndichselbst.de <- DE Domain/URL/Hyperlink
7. Content
Inhalte, wie Texte, Bilder, Filme...
austauschbar
6. Layout
Oder auch Entwurf, digitale Umsetzung von Skizzen.
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Folgen Sie diesem Pfad (Start/Pro-
Im weiteren Verlauf dieses Buches
gramme/Zubehör/Editor) über Ihr
werden Sie abgesehen vom Brows-
Windows Betriebssystem und Sie
er nur dieses Programm benötigen.
finden den Editor.
Dieses kleine Programm ist zur
Sie nutzen die Grammatik der
Verarbeitung von Text, kurz gesagt
jeweiligen Code Sprache, um dem
zum Schreiben da.
Dolmetscher (Browser) die Webseiten mundgerecht zu be-schreiben.
Pr
Zu ogra
Ed beh mm
ito ör
e
r
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Website Stammordner
1. Websitestruktur auf dem PC anlegen.
Ordner mit dem Namen „website“ erstellen.
Keine Groß-Schreibung keine Sonderzeichen.
Den Editor öffnen und Datei unter index.html
abspeichern. Die darauf folgende Meldung
mit „ok“ bestätigen und im erstellten Website
Ordner ablegen.
Datei/Neu und diese Datei unter style.css abspeichern.
Die darauf folgende Meldung mit „ok“ bestätigen und im
Website Ordner abspeichern.
Alles wird mit der Website zu tun hat, wird innerhalb
des „website“ Ordners abgespeichert.
So muss es hinterher ausschauen.
Wo ist der Editor?
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
{
Website Stammordner
website (Ordner)
bilder: (Ordner)
style.css (Datei)
index.html (Datei)
autobahn.jpg
feld.jpg
fluss.jpg
kalle.jpg
puppe.jpg
stadt.jpg
Diese Grafik zeigt Ihnen die Struktur Ihrer fertigen Website.
die Ordner sind rot markiert.
Wo ist der Editor?
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Wo ist der Editor?
Am besten Sie lassen
den Texteditor gleich
geöffnet oder erstellen
eine Verknüpfung auf
dem Desktop:
Rechtsklick auf das
Editorsymbol im
Zubehörfenster und
Verknüpfung erstellen auswählen.
Bitte stellen Sie zur besseren Bearbeitung der späteren Textinhalte den
Zeilenumbruch in Ihrem Editor aus. Dies verhindert ein automatisches
Rutschen in die nächste Zeile. Sie werden den Zeilenumbruch nutzen
können, um einen besseren Überblick über das den Text zu behalten.
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Der Maurer
HTML
Hypertext Markup Language <- Auszeichnungssprache. Damit beschreibt
man in einem .html Dokument die Grundelemente einer Website.
Der Maurer muss leider jede Wand und jeden Raum einzeln
anfertigen. Im Web ist das einfacher!
Ihr legt gleich eine Grundstruktur in einer .html Datei an,
die später für jeden einzelnen Raum/für jede einzelne Seite
der Website gilt. Es wird also gleich eine Schablone erstellt.
1. index.html mit dem Editor öffnen
2. nächste Seite gucken, lernen, abschreiben
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
HTML Grundgerüst
Öffnet mit Eurem Editor die erstellte Datei index.html
und tragt dort die ersten TAGS ein.
Diese legen den Grundstein für Eure erste Webseite.
Wichtig:
• <html> Tag wird geöffnet.
So weiss der Browser die Datei ist eine Website und
alles
darin ist für ihn wichtig.
• <head> innerhalb dieses Tags sind wichtige Randinformationen, die wir an späterer Stelle besprechen.
Im Moment tragen wir dort nur den Titel <title> der
Website ein.
• <body> Tag. Dieser Bereich ist der in dem gebaut
wird.Hier tragen wir unser Layout ein.
Zum Merken:
Alles was man aufmacht, macht man auch wieder zu.
Die Tags müssen wieder geschlossen werden.
<- erklärt dem Browser dies ist eine geeignete Datei.
<- Bereich für Randinformationen, später wichtig.
<- Ihr Hauptarbeitsbereich. Hier wird die Struktur
des Hauses in html reingeschrieben.
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Das ist der erste HTML Befehl!
<title>Website Titel</title>
<öffnendes tag>darzustellender Inhalt</schließendes tag>
Die Umsetzung von einem Layout in eine richtige Website, funktioniert indem man alles in Kästen einteilt.
Man verschachtelt Bereiche, man nennt das im Webdesign Boxen, ineinander.
11. TAG
kleinste Befehleinheit/grammatikalische Einheit
beim Programmieren
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Syntax?
Kann man das essen?
Im Gegensatz zu einem Glückskeks, kann man in HTML
Ein TAG ist die kleinste grammatikalische Einheit in
genau sehen was drin steht. Die Syntax, die Grammatik
der Codesprache Ihres Maurers (HTML).
der Programmiersprachen, beschreibt die Buchstaben und
Grundregeln
Zeichenanordnung in der die HTML Befehle geschrie-
- keine Großbuchstaben
ben werden, so dass der Browser sie für den Betrachter
- keine Umlaute
richtig übersetzen kann.
- keine Sonderzeichen
ZON
K!
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Fachbegriffe!
8. Syntax
9. HTML Befehle
Begriffe/Vokabular mit dem am HTML Maurer/Programmier
befehle für den Browser lesbar, formuliert.
Grammatik von Codesprachen, wie HTML, CSS, etc.
10. Codesprache
Websprachen die zur Umsetzung von Websites
notwendig sind.
11. TAG
kleinste Befehleinheit/grammatikalische Einheit
beim Programmieren
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
Engl. Headline = Deutsch Überschrift
<h1>1.Haupt Überschrift</h1>
<h2>Überschrift 2ter Ordnung</h2>
<h3>Überschrift 3ter Ordnung</h3>
<h4>...4ter Ordnung</h4>
<h5>...5ter Ordnung</h5>
<h6>...6ter Ordnung</h6>
Mit mit den Tags h1 - h6 legt man die Texthierachie sowie die
Eigenschaften z.B. Farbe und Größe fest.
h1 ist am wichtigsten und am größten. ... h6 ist am kleinsten und am
wenigsten wichtig. Diese Reihenfolge ist auch wichtig für den Browser.
Informatik | Thema „Entwurf und Gestaltung statischer Webseiten“ | C. Schade
<h1> und <p>
Tags fürs Grundgerüst
Hier orange markiert, das <h1></1> Tag.
Angezeigt wird alles innerhalb des Tags, in diesem
Fall „Hauptüberschrift/Headline“.
Beispiel wie es im Browser ausschaut hier:
Hier blau markiert, das <p></p> Tag.
Wird benutzt um darin Informationstext darzustellen.

Download Report