Webtechniken

Benutzeravatar
Hunter
Beiträge: 71
Registriert: 6. April 2016, 15:41

Webtechniken

Ungelesener Beitrag von Hunter » 8. April 2016, 08:20

Html - etwas Licht ins Dunkel des WWW

In großen Teilen der Welt nutzen heute Menschen ganz selbstverständlich das Internet. Sei es mit Hilfe eines Smartphones, Tablet's oder Computers. Die Nutzung sozialer Netzwerke verfolgt uns beinahe auf Schritt und Tritt... Über Sinn oder Unsinn mancher daraus entstandenen (Un)Sitten möchte ich mich hier nicht auslassen!
Kaum jemand verschwendet einen Gedanken daran wie das funktioniert. Muss man auch nicht! Solange alles läuft, interessiert sich keine S..u dafür.
Doch was steckt eigentlich dahinter? Sicher, jeder hat schon mal gehört oder gelesen dass das alles nur binäre Daten sind die von Servern an den Clienten (Smartphone, Computer etc.) gesendet werden. Mal via Kabel zu Hause oder via Mobilfunk unterwegs...
Das will ich hier einmal ein wenig näher beleuchten, etwas Licht ins Dunkel bringen.

Diese kleine Einführung erhebt aber nicht den Anspruch auf Vollständigkeit, sondern soll den Einstieg in die Welt der Web-Technologie erleichtern. Es kommt in dieser Einführung html-5 zum Einsatz, der aktuelle Standard weltweit!
Kurz und knapp:
HTML - Kürzel vom engl.(HyperText Markup Language),
ist eine Auszeichnungssprache zur Strukturierung von Text und Bildern aber KEINE Programmiersprache! Sendet nun ein Client (Computer, Smartphone etc.) eine Anfrage an einen Server (Dort befindet sich die Webseite die man aufruft), wird eine Übertragung in Gang gesetzt die seriell stattfindet. Also werden Daten übertragen die wie Perlen an einer Schnur aufgereiht sind. Dieser Datenstrom muß beim Clienten wieder in ein für den Menschen lesbares Format umgewandelt werden. Diesen Part übernimmt der Webbrowser. Deutsch: Netzbrauser... Dafür muss aber an den Client ein bestimmtes Datenformat gesendet werden, von dem dann der Browser weiß wie er es auf den Bildschirm ausgeben soll. Diese verabredete Standardsprache ist HTML! Egal wie auf einem Server Daten verarbeitet werden, das was beim Browser ankommt ist immer HTML!!! Auch dieses Forum! Also muß man von Beginn an alles in dieser Auszeichnungssprache verfassen, oder dafür sorgen daß alles in HTML ausgegeben wird.
Mit Hilfe von HTML kann man also jeden Web-Browser anweisen, den Text in gewünschter Weise zu formatieren. Dadurch wird es jedem Menschen möglich allen anderen Menschen auf diese Weise seine Mitteilungen zu senden. Jeder Client kann mit Hilfe eines Webbrowsers HTML-Dateien darstellen. Diese Dateien können aber auch auf jede erdenklich andere Weise weitergegeben werden z.B. als Datei via USB-Stick oder auf CD gebrannt.
Wer das lernen möchte, liest nun weiter...
Wie irdisch ist der Mensch?
Bild

Benutzeravatar
Hunter
Beiträge: 71
Registriert: 6. April 2016, 15:41

Re: Webtechniken

Ungelesener Beitrag von Hunter » 8. April 2016, 08:22

1)
Grundschema:


Vom Server ins Internet wird alles, wie wir bereits erkannt haben, seriell übertragen, also eine Kette von Daten. Diese müssen beim Empfänger wieder zu lesbaren Dokumenten zusammengesetzt werden, was der Web-Browser übernimmt.
Ein Web- Browser, gleichgültig welcher, stellt einfachen Text unformatiert als Zeichenkette in einer Wurst dar. Um dies zu vermeiden teilt man ihm mit, dass man die Ausgabe im Hypertext-Format wünscht und verwendet dazu die verabredeten Tags.
Leer <> einleitend und </> mit Slash ausleitend.
Also so:
< html> (alles ohne Leerzeichen)
< body>
Inhalt
< /body>
< /html>

Der < html> Tag zeigt dem Browser an wo html beginnt und mit < /html> wo das ganze endet. Alles was zwischen den < body>< /body> Tags ist wird auch angezeigt und NUR das. Alles ausserhalb der < body> Tags wird nicht ausgegeben.
Schreiben Sie folgenden Text im einfachen Windows Editor (NICHT Word-Pad) und speichern Sie ihn mit der Dateiendung html. z.B. test.html

-Achten Sie dabei darauf, dass im Windows Editor im Speichern-Dialog (Speichern als) der Dateityp:Alle Dateien (*.*)eingestellt ist, sonst speichert es es als test.html.txt - Was natürlich NICHT funktioniert!!!

Rufen Sie danach diese Datei mit einem Webbrowser Ihrer Wahl auf und betrachten Sie das Ergebnis. Bei jeder nachfolgenden Änderung verfahren Sie genau so.

Übung für zu Hause, mit Blindtext:

Code: Alles auswählen

<html>  
<body>
Lorem ipsum dolor sit amet consectetuer volutpat nonummy at Pellentesque turpis. Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. Nam In orci id tempor diam egestas velit eros Nam consectetuer. Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</body>
</html>
So weit so gut! Das sieht noch nicht anders aus als wie Text ohne html...

Jetzt kommt der erste und wichtigste Formatierungs-Tag:
< br /> (ohne Leezeichen am Anfang)
Das ist der erzwungene Zeilenumbruch. Damit kann man Text an einer gewünschten Stelle in eine neue Zeile umbrechen, Beispiel:


Übung für zu Hause:

Code: Alles auswählen

<html>  
<body>
Lorem ipsum dolor sit amet consectetuer volutpat nonummy at Pellentesque turpis. 
<br />
Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. 
<br />
Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. Nam In orci id tempor diam egestas velit eros Nam consectetuer. Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</body>
</html>
Diese erste Formatierng ist eine Methode zur Absatzbildung, aber es gibt dafür einen eigenen Tag:

< p>
Absatztext... Alles was zwichen diesen Tags steht wird am Anfang und am Ende Umgebrochen.
< /p>

Übung für zu Hause:

Code: Alles auswählen

<html>  
<body>
<p>
Lorem ipsum dolor sit amet consectetuer volutpat nonummy at Pellentesque turpis. 
</p>
<p>
Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. 
</p>
<p>
Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. Nam In orci id tempor diam egestas velit eros Nam consectetuer. Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
</body>
</html>
Kombiniert man diese beiden Tags, kann man Text schon recht gut formatieren:

Übung für zu Hause:

Code: Alles auswählen

<html>  
<body>
<p>
Lorem ipsum dolor sit amet consectetuer volutpat nonummy at Pellentesque turpis. 
</p>
<p>
Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. <br />Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. <br />Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. 
</p>
<p>
Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. Nam In orci id tempor diam egestas velit eros Nam consectetuer. Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
</body>
</html>
Einige weitere Html - FormatierungsTags sind < b>< /b> für FETT und < u> < /u> für Unterstrichen sowie < em> < /em> für Kursiv

Übung für zu Hause:

Code: Alles auswählen

<html>  
<body>
<p>
<b>Lorem ipsum</b> dolor sit amet consectetuer volutpat nonummy at Pellentesque turpis. 
</p>
<p>
<u>Magnis aliquet magnis</u> sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. <br />Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. <br />Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. 
</p>
<p>
<em>Et quis risus eget nunc ut platea</em>.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. Nam In orci id tempor diam egestas velit eros Nam consectetuer. Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
</body>
</html>
Natürlich ist dies noch keine =richtige= (valide) Html-Datei, es fehlen noch die entscheidenden Elemente im Kopfbereich, den ich bisher ausgeklammert habe und der im zweiten Beitrag behandelt wird.

Ende Teil 1
Zuletzt geändert von Hunter am 8. April 2016, 09:23, insgesamt 2-mal geändert.
Wie irdisch ist der Mensch?
Bild

Benutzeravatar
Hunter
Beiträge: 71
Registriert: 6. April 2016, 15:41

Re: Webtechniken

Ungelesener Beitrag von Hunter » 8. April 2016, 08:23

2)
Der Head (Kopf) - Bereich eines HTML - Dokuments:


Vor den einleitenden Tag < html> sollte die Declaration stehen, bei html-5 ist dies sehr simpel:
< !DOCTYPE html> (wie immer ohne dieses Leerzeichen am Anfang)
danach kommt erst der einleitende Tag, der durch eine Anweisung für die zu verwendende Spache ergänzt wird:
< html lang="de"> also language Deutsch-
danach kommt der Headbereich:

< head>
< meta charset="utf-8" /> selbstschliessender Tag für den Zeichnsatz (Charset) .
< meta name="Keywords" content="Einführung in html" /> Schlüsselbegriff für Suchmaschinen
< meta name="Description" content="Privater Kurs" /> Zweck des Dokuments...
< title> Titel des Documents < /title> wird ganz oben im Browser angezeigt!
< /head>
Das wären die wichtigsten metaTags die im HeadBereich stehen müssen. Dort hinein kommen noch Style -Anweisungen bzw. Links zu Stylesheets. Dazu später mehr.

Übung für zu Hause:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de"> 
<head>
<meta charset="utf-8" />
<meta name="Keywords" content="Einführung in html" />
<meta name="Description" content="Privater Kurs" />
<title> Titel des Documents </title> 
</head> 
<body>
<p>Somit können auch Umlaute korrekt dargestellt werden! äöüÄÖÜ</p>
<p>Lorem ipsum dolor sit amet consectetuer volutpat nonummy at Pellentesque turpis. </p>
<p>Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. <br />Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. <br />Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. </p>
<p>Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. Nam In orci id tempor diam egestas velit eros Nam consectetuer. Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
</body>
</html>
Ende Teil 2
Wie irdisch ist der Mensch?
Bild

Benutzeravatar
Hunter
Beiträge: 71
Registriert: 6. April 2016, 15:41

Re: Webtechniken

Ungelesener Beitrag von Hunter » 8. April 2016, 08:23

3)
Styles mit CSS


Eigentlich soll man Styles vollständig von Inhalten trennen. Doch zum Verständnis der Funktion werde ich zunächst eine gemischte Form wählen, die sich schrittweise dem Standard nähert.
Zunächst muß man wissen dass der Formatierung eines Dokuments mit HTML Grenzen gesetzt sind. Dort hilft CSS weiter.
Cascading Style Sheets steht für gestufte Gestaltungsbögen und ist in der Version 3 zum Standard geworden zusammen mit HTML-5.
Nimmt man wieder unseren Blindtext aus dem Teil 2 so fällt auf, dass alles noch einfarbig ist. Will man nun eine Zeile Text anders einfärben, kann man die Style-Anweisung direkt in einen Tag schreiben.
< b style="color:Red;">Text< /b>
Was sich so auswirkt:
< b style="color:Red;">Text< /b>
Also wird dem Tag für fette Schrift eine weitere Eigenschaft- die rote Farbe- hinzugefügt. So funktioniert die Anwendung von CSS unmittelbar.
Das hat aber einen Nachteil wenn man zum Beispiel Fußnoten verwendet die generell anders eingefärbt sein sollen. Dann löst man das über Klassifizierung.
Englisch „class" definiert diesen Begriff und klassen können auf nahezu alle HTML- Elemente angewendet werden. So kann ich sagen dass eine Art von Absatz p immer anders eingefärbt sein soll.
Beispiel:

<p class="Fussnote"> Text < /p>

Woher aber kommt jetzt die Farbe?

Von hier:

In den Head Bereich fügt man das Style-Sheet so ein:
< head>
< meta.... etc
< stlye>
.Fussnote {color:Red;}
< /style>
< /head>

Also wirkt diese Style-Anweisung auf ALLE Elemente mit der Klasse „Fussnote". In der Style Datei wird eine Klasse durch einen Punkt vor dem Klassennamen geschrieben. Hier also .Fussnote.
Die Schreibweise ist stets die gleiche:

.Klasse {styleElement : Wert;}

Die gleiche Schreibweise gilt auch für ID’s mit einem Unterschied: Ein HTML-Element mit einer ID darf nur einmal in einem Dokument vorkommen.

< p id="Schlagzeile"> Schlagzeilentext < /p>
Die Schreibweise für ein ID-Style ist:
#Schlagzeile {color:Green;}
Also - generell:
#id {styleElement : Wert;}

Somit ergänzen wir unsere HTML-Datei um das Stylesheet:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de"> 
<head>
<meta charset="utf-8" />
<meta name="Keywords" content="Einführung in html" />
<meta name="Description" content="Privater Kurs" />
<title> Titel des Documents </title> 
<style>
.Fussnote {color:Red;}
#Schlagzeile {color:Green;}
</style>
</head> 
<body>
<p id="Schlagzeile">
Somit können auch Umlaute korrekt dargestellt werden! äöüÄÖÜ
</p>
<p>
<b>Lorem ipsum dolor sit amet consectetuer volutpat nonummy at Pellentesque turpis.</b> 
</p>
<p>
Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. <br />Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. <br />Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. 
</p>
<p class="Fussnote">
Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. <em>Nam In orci id tempor diam egestas velit eros Nam consectetuer.</em> Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
</body>
</html>
Ende Teil 3
Wie irdisch ist der Mensch?
Bild

Benutzeravatar
Hunter
Beiträge: 71
Registriert: 6. April 2016, 15:41

Re: Webtechniken

Ungelesener Beitrag von Hunter » 8. April 2016, 08:24

4)
Wir haben bisher die Grundzüge eines Html-Dokuments kennengelernt. Doch fehlen noch essentielle Html-Tags für die Formatierung von Text: Überschriften!
In HTML gibt es deren 6. von h1 bis h6 unterscheiden sie sich ohne CSS - Zuweisung nur durch ihre Schriftgröße! H-Elemente sind Inline-Elemente.
< h1>< /h1> ist die Nummer 1 und am grössten. Sie darf nur einmal in einem Html-Dokument vorkommen, alle anderen können so oft eingesetzt werden wie man es will.
Nehmen wir wieder unseren Blindtext und fügen ein h1 element hinzu um die Hauptüberschrift zu generieren.
Übung für zu Hause:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de"> 
<head>
<meta charset="utf-8" />
<meta name="Keywords" content="Einführung in html" />
<meta name="Description" content="Privater Kurs" />
<title> Titel des Documents </title> 
<style>
.Fussnote {color:Red;}
#Schlagzeile {color:Green;}
</style>
</head> 
<body>
<h1> Eine h1 Überschrift!</h1>
<p>
<h2>Eine h2 Überschrift!</h2> 
</p>
<p>
Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. <br />Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. <br />Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. 
</p>
<p class="Fussnote">
Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. <em>Nam In orci id tempor diam egestas velit eros Nam consectetuer.</em> Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
</body>
</html>
Womit die Wirkungsweise klar sein dürfte! Man kann diesen H-Elementen noch weitere Eigenschaften via CSS hinzufügen.

In den Body-Tag gehören aber noch weitere Elemente die zum Einteilen der Bildschirmfläche dienen, so genannte Container. Das sind Boxen in die Text oder und Bilder eingeschlossen werden und die von anderen Inhalten so abgegrenzt werden. Man unterscheidet grob Inline-Elemente und Box-Elemente. Letztere dienen dazu, die Anzeigefläche in übersichtliche Zonen einzuteilen. Das bekannteste und am meisten verwendete Box-Element ist das DIV. Der Tag sieht so aus:
< div>< /div>. Dieses Box - Element bewirkt zunächst so wie das <p > der Absatz am Beginn und Ende jeweils einen Zeilenumbruch. Man kann ihm über CSS noch weitere Eigenschaften hinzufügen die sich dann für den gesamten Inhalt einer solchen Box auswirken. Fangen wir einfach an...
Übung für zu Hause:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de"> 
<head>
<meta charset="utf-8" />
<meta name="Keywords" content="Einführung in html" />
<meta name="Description" content="Privater Kurs" />
<title> Titel des Documents </title> 
<style>
.Fussnote {color:Red;}
#Schlagzeile {color:Green;}
</style>
</head> 
<body>
<h1> Eine h1 Überschrift!</h1>
<p>
<h2>Eine h2 Überschrift!</h2> 
</p>
<div>
Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. <br />Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. <br />Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. 
</div>
<p class="Fussnote">
Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. <em>Nam In orci id tempor diam egestas velit eros Nam consectetuer.</em> Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
</body>
</html>
Man sieht gegenüber dem P-Tag eigentlich keinen Unterschied, in der Tat würde auch ein P -Element reichen für Text. Doch haben wir noch mehr vor mit diesem DIV!
Also weisen wir dieser Div-Box mit CSS weitere Eigenschaften zu. Zunächst die Breite dieser Box und wir umranden sie noch. Um die Breite festzulegen verwenden wir in HTML-5 und CSS-3 ausschließlich relative Größen, die sich auf den Bildschirm oder die Schrift beziehen. Das ist zunächst die Breite, die wir in % vom Bildschirm angeben. Da alle Begriffe bei HTML und CSS in englischer Sprache angegeben werden müssen wird's jetzt ein wenig Englisch...
Für die Breite in (0% vom Bildschirm) und den Rand (Border) kommen folgende Anweisungen zur Geltung:

< div style ="width:80%; border:thin solid Black;">
Text
< /div>
Übung für zu Hause:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de"> 
<head>
<meta charset="utf-8" />
<meta name="Keywords" content="Einführung in html" />
<meta name="Description" content="Privater Kurs" />
<title> Titel des Documents </title> 
<style>
.Fussnote {color:Red;}
#Schlagzeile {color:Green;}
</style>
</head> 
<body>
<h1> Eine h1 Überschrift!</h1>
<p>
<h2>Eine h2 Überschrift!</h2> 
</p>
<div style="width:80%; border:thin solid Black;">
Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. <br />Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. <br />Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. 

<p class="Fussnote">
Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. <em>Nam In orci id tempor diam egestas velit eros Nam consectetuer.</em> Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
</div>
</body>
</html>
Das ist noch nicht wirklich schön! Also rücken wir dies Box noch in die Mitte des Bilschirmes und zentrieren auch die Überschriften. Das geschieht wieder mit CSS.

Für die Überschriften legen wir eine Anweisung für die H1-h6 Elemente in das Stylesheet im Headbereich des Dokuments:
h 1, h 2, h 3, h 4, h 5, h6 {text- align :center;}
Für die Box benutzen wir den Ausdruck: Margin, Dies bezeichnet den Abstand der Außenkanten einer Box zu Nachbar-Elementen oder zum Bildschirmrand. In unserem Falle brauchen wir links und rechts den gleichen Abstand, damit die Box in der Mitte landet.
Die drückt man mit:auto aus.
Also:
< div style="margin:auto;">
Ausserdem klebt der Text noch am Rand (border), was sehr unschön ist. Dafür gibt es die Css-Anweisung: padding! Sie bestimmt den Innenabstand einer Box, also die Entfernung zwischen Rand der Box und dessen Inhalt (Text).
< div style="padding:1%;"> Wir nehmen wieder die Prozentangabe.
Wir fügen das Margin und Padding einfach zur bestehenden Style-Anweisung im Div hinzu:
Nun müsste die Box in der Mitte sein:
Übung für zu Hause:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de"> 
<head>
<meta charset="utf-8" />
<meta name="Keywords" content="Einführung in html" />
<meta name="Description" content="Privater Kurs" />
<title> Titel des Documents </title> 
<style>
.Fussnote {color:Red;}
#Schlagzeile {color:Green;}
h1, h2, h3, h4, h5, h6 {text-align:center;}
</style>
</head> 
<body>
<h1> Eine h1 Überschrift!</h1>
<h2>Eine h2 Überschrift!</h2> 
<div style="width:80%; margin:auto; padding:1%; border:thin solid Black;">
Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. Fusce pretium magna tincidunt hendrerit dolor sem lacinia sapien semper eget. <br />Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. <br />Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. 

<p class="Fussnote">
Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. <em>Nam In orci id tempor diam egestas velit eros Nam consectetuer.</em> Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
</div>
</body>
</html>
Diese Version unseres kleinen Blindtextes ist sogar schon Valide nach W3C!
Bild
Somit wird das Ganze ansehnlicher! Die Überschriften sind mittig, dank {text-align:center;} und die Box ist mittig dank {margin:auto;}
Ende Teil 4
Wie irdisch ist der Mensch?
Bild

Benutzeravatar
Hunter
Beiträge: 71
Registriert: 6. April 2016, 15:41

Re: Webtechniken

Ungelesener Beitrag von Hunter » 8. April 2016, 19:34

5)
Inline-Elemente

Wir haben bisher neben den Überschriften h1 - h6 die genau so wie - B U EM - Inline-Elemente sind aber eine Sonderstellung genießen, nur Blockelemente kennengelernt. Die P und DIV Elemente, von denen es aber noch wesentlich mehrere gibt worauf ich später näher eingehen werde.
Getreu dem Motto: "Learning by doing" (englisch für "Lernen durch Handeln") nehmen wir uns jetzt mit <span> ein ECHTES Inline-Element vor. Wie der Begriff INLINE also in der Zeile es schon vermuten lässt, erfolgt bei deren Verwendung KEIN Zeilenumbruch, sondern man kann wie bei den anderen, zweckgebundenen Inline-Elementen, dem Fließtext an den damit markierten Stellen einen anderen Ausdruck verleihen. Die uns bisher bekannten, zweckgebundenen Inline-Elemente sind:

<b> = Bold (Fett) Es gibt einen neueren Typ, der B ersetzen soll: <strong>
<u> = Underline (Unterstrichen)
<em> = Emphasized (wird hier für kursiv angewendet)

Ich habe hier nur den jeweils einleitenden Tag beschrieben, was aber klar sein dürfte, dass bei der Anwendung der schließende Tag ebenfalls vorhanden sein MUSS!

Zurück zum <span></span> Element. Es ist frei konfigurierbar, das heißt, man kann ihrem Inhalt jede beliebige CSS-Eigenschaft zuweisen. Wieder geschieht dies zum Einen dadurch, dass man die Style-Anweisung direkt in den Tag schreibt:
<span style="color:Red;">Text</span>,
was sich so auswirkt:
<span style="color:Red;">Text</span>

Das ist im Einzelfall eine praktikable Lösung, für komplexere Texte jedoch nicht! Wie auch beim Blockelement DIV oder P kann man auch mit diesem Inline-Element eine Klassifizierung vornehmen. Wir haben bereits eine Klasse für Rot erstellt, die heisst bei uns .Fussnote, also wenden wir diese Klasse auf ein SPAN -Element an: <span class="Fussnote">Fusce pretium magna</span>

Übung für zu Hause:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de"> 
<head>
<meta charset="utf-8" />
<meta name="Keywords" content="Einführung in html" />
<meta name="Description" content="Privater Kurs" />
<title> Titel des Documents </title> 
<style>
.Fussnote {color:Red;}
#Schlagzeile {color:Green;}
h1, h2, h3, h4, h5, h6 {text-align:center;}
</style>
</head> 
<body>
<h1> Eine h1 Überschrift!</h1>

<h2>Eine h2 Überschrift!</h2> 

<div style="width:80%; margin:auto; padding:1%; border:thin solid Black;">
Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. <span class="Fussnote">Fusce pretium magna</span> tincidunt hendrerit dolor sem lacinia sapien semper eget. <br />Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. <br />Phasellus parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id enim lorem tincidunt sed at urna. 

<p class="Fussnote">
Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh Cum habitasse tellus. <em>Nam In orci id tempor diam egestas velit eros Nam consectetuer.</em> Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
</div>
</body>
</html>

Simpel nicht?

Es gibt noch wesentlich mehr Inline-Elemente, die ich gegen Ende dieser Einführung noch auflisten werde.

Ende Teil 5
Wie irdisch ist der Mensch?
Bild

Benutzeravatar
Hunter
Beiträge: 71
Registriert: 6. April 2016, 15:41

Re: Webtechniken

Ungelesener Beitrag von Hunter » 10. April 2016, 10:57

Bisher haben wir zum Erstellen von HTML-Dokumenten den Windows Editor benutzt. Der ist duechaus geeignet Kleinigkeiten zu notieren, doch zum Coden von Webseiten ist er nicht wirklich geeignet! Daher empfehle ich den kostenlosen Editor Notepad++
https://notepad-plus-plus.org/download/
Es gibt sicher noch andere Editoren, die auch nicht schlechter sind als dieser, aber Notepad++ wird gut gepflegt und ist wunderbar erweiterungsfähig.
Nach der Installation steht schon die Oberfläche in Deutsch zur Verfügung und man braucht nur noch in den Einstellungen für "neue Dateien" das Format Windows und Kodierung utf-8 ohne Bom auszuwählen! Damit ist der Editor bereit. Oben in der Leiste wählt man dann unter "Sprachen" noch "HTML" aus
Bild
und schon kann man loslegen.
Mit einem Rechtsklick auf unsere bisher bearbeitete "test.html" erscheint ein Kontext - Menue, navigieren zu dem Dialog "Edit with Notepad++" und schon ist die Datei offen zur Bearbeitung.
Bild
Wie irdisch ist der Mensch?
Bild

Benutzeravatar
Hunter
Beiträge: 71
Registriert: 6. April 2016, 15:41

Re: Webtechniken

Ungelesener Beitrag von Hunter » 10. April 2016, 10:59

6)
Tabellen

Bisher haben wir die wichtigsten Inline (<span>) und Blockelemente (<p> <div>) kennengelernt. Wichtig dabei ist, dass man eine grundlegende Regel stets beachtet:
Ein Blockelement darf NIEMALS ein Kind-Element eines Inline-Element's sein! z.B.:
<span><p>Inhalt</p></span>, oder <span><div>Inhalt</div></span> = Falsch!
Umgekehrt schon:
<div><span>Inhalt</span></div>, oder <p><span>Inhalt</span></p> = Richtig!

Jetzt wenden wir uns einem Urgestein der Html-Geschichte, der Tabelle zu!
Tabellen haben ihre einst dominate Stellung als Design-bestimmendes Werkzeug völlig eingebüßt! Das ist auch gut so. Wir werden Tabellen nur als das anwenden was sie sind: Tabellen! Als erstes stelle ich die einzelnen Tags vor und ihre Bedeutung.:
Los geht's!
<table> = Start Tag zeigt dem Browser an wo eine Tabelle beginnt.
<thead></thead> = Tabellenkopf.
<tbody></tbody> = Tabellenkörper (TableBody)
<tr></tr> = TabellenReihe (TableRow).
<td></td> = Tabellenspalte, diese kann man auch nebeneinander nutzen (aneinandergereiht).
<tfoot></tfoot> = Tabellenfuß.
</table> = End Tag zeigt dem Browser an wo eine Tabelle endet.

Ein altes Style-Element ist immer noch erlaubt in Tabellen, das ist die Angabe ob ein Rahmen sein soll oder nicht :
border="1"

Übung für zu Hause:

Code: Alles auswählen

<table border="1">
  <thead>
    <tr>
      <th>Menge</th>
      <th>Ware</th>
      <th>Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1kg</td>
      <td>Birnen</td>
      <td>1.99 Euro</td>
    </tr>
    <tr>
      <td>1kg</td>
      <td>Pflaumen</td>
      <td>2,99 Euro</td>
    </tr>
<tfoot>
    <tr>
      <td>Summe</td>
      <td>aller Waren</td>
      <td>4,98 Euro</td>
    </tr>
  </tfoot>
  </tbody>
</table>
Was dann so aussehen sollte:
Bild


Wir nutzen CSS um der Tabelle ein besseres Aussehen zu verleihen.
Dazu legen wir ein stylesheet an in dieser tabelle.html.

Wr klassifizieren die jeweils rechte Preis-Zelle als Klasse :C (<td class="c">) und weisen ihr die Eigenschaft rechtsbündig zu: {text-align:right;} Die Überschriften <th> erhalten die Eigenschft zentrierter Text: (text-align:center;)
Ausserdem sorgen wir mit der Anweisung {cellpadding="5"} für einen Innenabstand zum Text in den Zellen. Mit {border:1px solid Silver; }erzeugt man einen silbernen Rand der nicht doppelt sondern einfach ist. Die Zellen verschmelzen, kollabieren mit {border-collapse:collapse;} und zu guter Letzt rücken wir die Tabelle noch in die Mitte mit {margin:auto;}.:
<style>
table {border:1px solid Silver; border-collapse:collapse; margin:auto; }
td.c {padding:1 rem; text-align:right;} wir
th {padding:1 rem; text-align:center;}
</style>

Übung für zu Hause:

Code: Alles auswählen

<html>
<head> 
 <style>
table {border:1px solid Silver; border-collapse:collapse; margin:auto; }
td.c {padding:1 rem; text-align:right;}
th {padding:1 rem; text-align:center;} 
</style>
</head>
<body>
<table border="1" cellpadding="5">
  <thead>
    <tr>
      <th>Menge</th>
      <th>Ware</th>
      <th>Preis in  Euro</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1kg</td>
      <td>Birnen</td>
      <td class="c">1.99</td>
    </tr>
    <tr>
      <td>1kg</td>
      <td>Pflaumen</td>
      <td class="c">2,99</td>
    </tr>
<tfoot>
    <tr>
      <td>Summe</td>
      <td>aller Waren</td>
      <td class="c">4,98</td>
    </tr>
  </tfoot>
  </tbody>
</table>
 </body>
  </html>
Was dann so aussehen sollte:
Bild

Ende Teil 6
Wie irdisch ist der Mensch?
Bild

Benutzeravatar
Hunter
Beiträge: 71
Registriert: 6. April 2016, 15:41

Re: Webtechniken

Ungelesener Beitrag von Hunter » 14. April 2016, 10:23

7)
Hyperlinks

Zuletzt haben wir Tabellen abgehandelt jetzt wenden wir uns einer der wichtigsten Funktionen zu die im www unerlässlich sind: Links!
Wir unterscheiden zwischen internen Links zur Seitenverlinkung und externen Links, die Sprungadressen zu anderen Webseiten sind. Das HTML - Element für Links ist <a></a>...
Damit kann man so nichts anfangen. Es zeigt nur den einleitenden und ausleitenden Tag. Es fehlt noch das Attribut. Denn dieser HTML-Tag ist der erste der nur mit Attribut korrekt funktioniert. Die korrekte Schreibweise:

<a href="adresse">Linktext</a>

das a kommt aus dem englischen Begriff „anchor“ deutsch Anker. Es wird also ein Anker geworfen irgendwo im www oder auf den eigenen Seiten... Jetzt fehlt noch der -Verweis wo dieser Anker liegen soll.
Das übernimmt das Attribut „href“. Dieses steht für Hyperreferenz – also ein Verweis auf die Zieladresse. Z.B. ein Link zu einer externen Adresse:

Code: Alles auswählen

<a href="http://www.google.de">Zur Suchmaschine</a>
Klickt man nun auf solch einen Link, wird man im selben Tab des Browsers oder im gleichen Fenster auf die Adresse weitergeleitet. Man hat also gleichzeitig die vorhergehende Seite verlassen!
Möchte man dies nicht, sondern statt dessen die Zielseite in einem neuen Tab oder einem neuen Fenster öffnen, so fügt man ein weiteres Attribut ein:

target="_blank"

Target steht für Ziel und _blank bedeutet in einem leeren Fenster (oder Tab-je nach Browser) öffnen!

Also sieht der Link dann so aus:

Code: Alles auswählen

<a target="_blank" href="http://www.google.de">Zur Suchmaschine</a>
Soweit die externen Hyperlinks, die internen funktionieren genau so aber ohne http://www. um von der Startseite zur nächsten Seite weitergeleitet zu werden.

Code: Alles auswählen

<a href="seite2.html">Weiter</a>
<a href="index.html">Zurück zum Start</a>
Will man hingegen zu einer Datei in einem Unterordner weiterleiten, hängt man entweder einen Slash an die eigene Adresse (localhost) und gibt den Unterordner an in dem sich die Datei z.B. impressum.html befindet.:

Code: Alles auswählen

<a href="localhost/daten/impressum.html">Zum Impressum</a>
oder ohne localhost:

Code: Alles auswählen

<a href="daten/impressum.html">Zum Impressum</a>
Diese Seiten in einem neuen Tab zu öffnen macht keinen Sinn, deswegen kommt das target-Attribut bei internen Links eigentlich nie zum Einsatz!

Ende Teil 7
Wie irdisch ist der Mensch?
Bild

Benutzeravatar
Hunter
Beiträge: 71
Registriert: 6. April 2016, 15:41

Re: Webtechniken

Ungelesener Beitrag von Hunter » 21. April 2016, 06:33

8)
Eingabefelder

Nachdem wir Hyperlinks kennengelernt haben, widmen wir uns nun den verschiedenen
Eingabefeldern.
Formulare beginnen und enden mit dem Form-Tag:

<form></form>

Alles zwischen diesen Tags wird an die Adresse gesendet die im Form-Tag als action angegeben wird.:

<form action="ziel.html(php)" method="post" name=""> (...alle weiteren Elemente)

</form>


Als Methode der Übertragung ist hier Post gewählt, was der Regelanwendung entspricht. Man könnte es auch über GET übertragen, doch wird dann alles über die URL gesendet, was nicht nur ein Sicherheitsrisiko bedeutet, sondern auch der Grössenbeschränkung durch die Browser unterliegt, die für URL gilt: 2 kb. Das wohl am häufigsten genutzte Exemplar ist das einfache Textfeld. Dieses ist, wie die meisten Eingabefelder ausser dem Textarea, ein selbstschliessendes Element:

<input type="text" value="" /> (value = wert)

In der häufigkeit des Vorkommens rangiert das Submit-Element an zweiter Stelle:

<input type="submit" value="Senden" />,

gefolgt vom Button, der nicht selbstschliessend ist, sondern einen einleitenden und ausleitendne Tag besitzt:

<button>Wert</button> Ein recht sinnloser Button... :)

Doch schon folgt das Textarea:

<textarea name="eingabe"></textarea>

Anhand des Feldnamens dieser Elemente kann deren Inhalt identifiziert und zugeordnet werden für die Weitetverarbeitung mit PHP, ASP oder JavaScript. Die Weiterverarbeitung will ich hier bewusst ausklammern, da es bei einer Einführung in HTML bleiben soll.
Es gibt auch noch versteckte Felder, die als "hidden" gekennzeichnet sind.:

<input type="hidden" value="" name="" />

Ein recht nützliches Eingabefeld kann der "Reset" Button sein:

<input type="reset" value="Reset"/>

Wir verwenden unseren Code aus dem 5.Teil und fügen eine typische Eingabe Konstellation hinzu ohne jede Weiterverarbeitung der Daten.

Übung für zu Hause:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de"> 
<head>
<meta charset="utf-8" />
<meta name="Keywords" content="Einführung in html" />
<meta name="Description" content="Privater Kurs" />
<title> Titel des Documents </title> 
<style>
.Fussnote {color:Red;}
#Schlagzeile {color:Green;}
h1, h2, h3, h4, h5, h6 {text-align:center;}
form {width:50%; margin:auto; padding:1rem; border:1px solid Silver; }
</style>
</head> 
<body>
<h1> Texteingbe</h1>

<div style="width:80%; margin:auto; padding:1%; border:thin solid Black;">
Magnis aliquet magnis sociis ut non semper metus feugiat tortor tortor. <span 

class="Fussnote">Fusce pretium magna</span> tincidunt hendrerit dolor sem lacinia sapien 

semper eget. <br />Justo.Orci nibh quis velit platea pede nulla ut sapien Curabitur id. Mauris 

montes urna vel tincidunt pellentesque urna ipsum adipiscing hendrerit enim. <br />Phasellus 

parturient dui et sit laoreet senectus tellus mi tellus ut. Amet Pellentesque at accumsan id 

enim lorem tincidunt sed at urna. 

<p class="Fussnote">
Et quis risus eget nunc ut platea.Vitae habitasse eu Vestibulum magnis magna Pellentesque nibh 

Cum habitasse tellus. <em>Nam In orci id tempor diam egestas velit eros Nam consectetuer.</em> 

Ultrices Curabitur orci risus mauris Nulla condimentum orci egestas natoque et. 
</p>
<br />
<form action="" method="post" name="">Name:<br />
<input type="text" value="" /><br />Nachricht: <br />
<textarea name="eingabe"></textarea><br />
<input type="reset" value="Reset"/><br />
</form>
</div>
</body>
</html>
Ende Teil 8
Wie irdisch ist der Mensch?
Bild

Gesperrt Vorheriges ThemaNächstes Thema

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast