Webtechniken

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

Re: Webtechniken

Ungelesener Beitrag von Hunter » 22. April 2016, 13:23

9)
Mehr CSS

Bisher haben wir CSS meist im Tag oder im integrierten Stylesheet kennengelernt, das werden wir in diesem Teil näher betrachten. Beginnen möchte ich mit den im letzten Teil verwendeten Eingabefeldern. Die einzelnen Tags lassen sich in ihrer Grösse auch mit direkten Angaben festlegen. Wir wollen uns jedoch getreu dem Grundsatz Inhalte von Design zu trennen, an CSS halten um die Eigenschaften von Elementen festzulegen. Nur der Vollständigkeit halber will ich an einem Beispiel die Wirkung verdeutlichen. Dazu verwenden wir den Code aus dem letzten Teil und ändern die Eigenschaften der Eingabefelder zunächst auf die alte Weise.

Das Textfeld:
<input type="text" size="24" value="" /> Das Eingabefeld hat nun die Breite von 24 Zeichen.

Das Textarea:
<textarea cols="24" rows="5"></textarea> cols steht für die 24 Spalten und rows für die 5 Reihen untereinander.

Ü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> Texteingabe</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" size="24" value="" /><br />Nachricht: <br />
<textarea cols="24" rows="5" name="eingabe"></textarea><br />
<input type="reset" value="Reset"/><br />
</form>
</div>
</body>
</html>
Der Unterschied ist doch deutlich sichtbar!
Das Ganze geht natürlich viel besser mit CSS, man spricht die Tags mit CSS direkt an:

form {
margin:auto;
width:50%;
border:1px solid Silver;
}

input {
margin:1rem;
width:25%;
}
textarea {
margin:1rem;
width:50%;
height:5rem;
}
Wir haben wieder relative Grössen genommen, für die Weite des Textfeldes in Prozent (vom Formtag <form>) und für die Aussenabstände (margin) rem, was die Grösse des Buschstaben m bedeutet! Beim FormTag sind es 50% von der Box in dem das Formular enthalten ist, mit margin:auto liegt es in der Mitte und mit height 5rem ist die Höhe von 5 Buschstaben: m angegeben.
Wir ändern noch die Schreibweise um Platz zu sparen:

form { margin:auto; width:50%; border:1px solid Silver;}
input { margin:1rem; width:25%; }
textarea { margin:1rem; width:50%; height:5rem;}

Dann schreiben wir das in das Stylesheet im Headbereich und entfernen die alten Styleangaben aus den ForularTags!

Ü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; }
form {	margin:auto; width:50%;	border:1px solid Silver;}
input {	margin:1rem; width:25%;	}
textarea {	margin:1rem; width:50%;	height:5rem;}
</style>
</head> 
<body>
<h1> Texteingabe</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>
Jetzt werden wir Standardkonform das Stylesheet auslagern und dafür einen Link in den Headbereich setzen.:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

Damit muss das Stylesheet den Namen style.css tragen und im gleichen Verzeichnis liegen wie unsere test.html! Die Typenbezeichnung: text/css ist wichtig für den Parser, der sonst html ausgeben würde. media="screen" bedeutet, dass dies die Styleangaben für den Bildschirm sind, man kann auch Stylsheets angeben für die Ausgabe an einen Drucker! Das wäre dann media="print"! Danach folgt die Hyperlink-Adresse href="". Dieser Link führt zur CSS Datei, die auch in einem Unterordner liegen kann z.B. "/css" dann wäre der Link: href="css/style.css"...
Wir entfernen auch die Style-Angabe aus dem DIV in dem sich der Inhalt befindet und ersetzen diesen Tag durch ein seit html-5 neu eingeführtes Element:

<section>Inhalt</section>.

Dieses Element trägt einen Eigennamen, mit dem es direkt angesprochen werden kann. Also ohne Klassifizierung oder ID.
Die Styleangaben hierfür lauten im Stylesheet:

section {width:80%; margin:auto; padding:1%; border:thin solid Black; border-radius:15px;}

Dabei kommt erstmals in dieser Einführung eine weitere Eigenschaft von Border (Rahmen) hinzu: Radius!
Das bedeutet, dass man die Ecken der Rahmen abrunden kann. Bestimmender Wert für den Kreisausschnitt ist der Radius des Bogens. Hier verwenden wir 15px, also 15 Pixel Radius... Für das Formelement habe ich einen Radius von 5 Pixeln gewählt.
Wir fügen auch noch ein Linkelement <a> ein das wir schon besprochen hatten um auch zu einer Suchmaschine wechseln zu können.:

<a href="http://www.google.de">Suchmaschine</a>

Diesem Link verleihen wir mit CSS eine weitere Eigenschaft:hover! Das bedeutet, dass der Link seine Farbe wechseln kann wenn der Mauszeiger das Element berührt. Die Schreibweise:
a:hover {color:Blue;}
Wir weisen aber zuvor dem Link eine andere Farbe als den normalen Text zu, damit der Leser diesen sofort als Link erkennt. Aber wir entfernen die normalen Link-Attribute, die html generell vergibt. Links werden unterstrichen dargestellt, mit der Style-Anweisung "text-decoration:none;" entfernt man diese!
Das ergibt also folgendes Stylesheet:

Übung für zu Hause,
style.css:

Code: Alles auswählen

section {width:80%; margin:auto; padding:1%; border:thin solid Black; border-radius:15px;}
.Fussnote {color:Red;}
#Schlagzeile {color:Green;}
h1, h2, h3, h4, h5, h6 {text-align:center;}
form {	margin:auto; width:50%;	border:1px solid Silver; border-radius:5px;}
input {	margin:1rem; width:25%;	}
textarea {	margin:1rem; width:50%;	height:5rem;}
a {text-decoration:none; color:#080;}
a:hover {color:#00F;}
Übung für zu Hause
test.html ohne Stylesheet im Header:

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> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head> 
<body>
<h1> Texteingabe</h1>
<section>
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="test.html" method="post" name="eingabe">Name:<br />
<input type="text" value="" /><br />Nachricht: <br />
<textarea name="eingabe"></textarea><br />
<input type="reset" value="Reset"/><br />
</form>
<br />
<a href="http://www.google.de">Zur Suchmaschine</a>
<br />
</section>
</body>
</html>
Ende Teil 9
Wie irdisch ist der Mensch?
Bild

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

Re: Webtechniken

Ungelesener Beitrag von Hunter » 22. April 2016, 19:35

10)
Bilder einbinden

Was fehlt noch?
Bilder!
Zum Abschluss dieser kleinen zehnteiligen Einführung in HTML und CSS beschäftigen wir uns also mit Bildern! Das dafür verantwortliche Html-Element ist der IMAGE - TAG:

<img src="Adresse des Bildes" />

Der Image-Tag ist ebenfalls ein selbstschliessendes Inline-Element. Die Adresse des einzubindenden Fotos wird in src="" (steht für Source - also den Speicherort) angegeben. Prinzipiell würde dies schon genügen um den Browser zu veranlassen das Bild anzuzeigen. Es würde jedoch in Originalauflösung dargestellt und jedes Seitendesign zum Platzen bringen. Daher wurde vorgesehen dass es eine Breiten und Höhenangabe gibt, ausserdem muß es eine alternative Bezeichnung geben für Bildschirmlose Ausgabe, z.B. blindengerechte Tastaturen. Dafür ist das Attribut "alt" für "alternative Benennung" zuständig. Ferner kann man das "title" Attribut dafür benutzen um eine kleine Sprechblase anzuzeigen mit einen kleinen Hilfetext zum Element. Der vollständige Tag sieht also so aus:

<img src="" width="" height="" alt="" title="" />

Speichern Sie ein kleines Foto Ihrer Wahl in den Formaten jpg, png oder gif in dem selben Verzeichnis wie die test.html aus den vorangegangenen Teilen. Nennen Sie es einfach foto.jpg und binden Sie es in dieser Weise in die test.html ein.:

<img src="foto.jpg" width="400" height="300" alt="Bild" title="Mein neues Foto" />

Das geht schon, ist aber noch nicht optimal! Hier hilft wieder CSS. Wir entfernen die Attribute für die Breite und Höhe des Bildes. Die Attribute "alt" und "title" müssen erhalten bleiben. Die Grössen geben wir mit einem neuen Eintrag in unserer style.css Datei an.:

img {width:50%; height:auto; border:3px double Silver;}

Wir weisen dem Foto eine relative Breite von 50% zu und für die Höhe verwenden wir "auto". Dies bewirkt dass das Seitenverhältnis erhalten bleibt. Bei Inline-Elementen funktioniert das automatische Zentrieren mit "margin:auto" NICHT! Daher weisen wir dem Foto einen Abstand nach links "margin-left:" von 25% zu um das Bild zu zentrieren.

Ü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> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head> 
<body>
<h1> Texteingabe</h1>
<section>
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="test.html" method="post" name="eingabe">Name:<br />
<input type="text" value="" /><br />Nachricht: <br />
<textarea name="eingabe"></textarea><br />
<input type="reset" value="Reset"/><br />
</form>
<br />
<a href="http://www.google.de">Zur Suchmaschine</a>
<br />
</section>
</body>
</html>
Soweit wäre das Prinzip der Einbindung von Fotos klar, es gibt jedoch eine vielzahl weiterer Möglichkeiten mit HTML und CSS Webseiten zu erstellen.
Diese kleine Einführung ist dafür nicht der geeignete Rahmen. Ich empfehle allen Interessenten die Seite von SelfHtml:

Self-HTML-Wiki

Womit wir am Ende dieser kleinen Einführung angelangt sind.

Ende.
Wie irdisch ist der Mensch?
Bild

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

Re: Webtechniken

Ungelesener Beitrag von Hunter » 23. April 2016, 09:16

Zum Abschluss will ich noch eine Auflistung der gebräuchlichsten Elemente zeigen!

Die wichtigsten HTML-5 Elemente in der Übersicht:

HTML5-Grundgerüst


<!DOCTYPE html> - HTML5-Doctype, Deklaration

<html lang="de"> - Enthält die gesamte Webseite, Sprache ist Deutsch.

<head> - Head-Bereich, die Metainformationen werden nicht im Browserfenster angezeigt.

<meta charset="UTF-8" /> - Zeichensatz - in UTF-8 werden Sonderzeichen korrekt dargestellt.

<title> - (engl. title) = Titel

</head> - Kopfbereich des HTML-Dokuments, er enthält die Metadaten und Skripte

<body> - Der gesamte Inhalt wird im Browserfenster angezeigt.

INHALT - Inhalt

</body> - Der End-Tag, danach wird nichtsmehr im Browserfenster angezeigt!

</html> - HTML-Ende




HTML5 Bereiche:

<header> - Der Kopfbereich des Inhaltes einer Webseite NICHT <head>

<nav> - Bereich Navigation (Steuerelement)

<section> - Gruppierung der Elemente

<article> - Inhaltsbereich

<aside> - Seitenbereich, meist für Links genutzt

<footer> - Fusszeilen (Impressum etc.)


Textstrukturierung:


<h1> - (engl. h = headline) Grösste Überschrift, nur 1 mal auf jeder Seite!

<h2> bis <h6> - Weitere Überschriften die immer kleiner werden.

<p> - p = engl. paragraph = Absatz

<br /> - engl. br = break = Umbruch. Erzwungener Zeilenumbruch

<hr /> - Trennlinie (engl. hr = horizontal ruler = horizontale Linie


Texthervorhebung:


<b> Fette Schrift(engl. b = bold = fett)

<strong> - (engl. strong = kräftig, Fett)

<i> - engl. i = italic = kursiv

<em> - Kursiv (engl. em = emphasis = betont)

<sup> - (engl. sup = superscript), deutsch: hochstellen

<sub> - (engl. sub = subscript), deutsch: tiefstellen)

<del> - (engl. del = deleted = gelöscht)

<ins> - (engl. ins = inserted = neu eingefügt)

<small> - (engl. small = klein)


Links:


<a href=""></a> - (engl. a = anchor = Anker)(engl. href = hyper reference = Hypertext-Referenz)

target="_blank" - (engl. target = Ziel, blank = leer) Wird im neuen Fenster geöffnet.

<a href="#Adresse"> - Sprungmarke (wird durch # gekennzeichnet)der Anker muss mit ID benannt werden


Listen:


<li> - (engl. li = list item) = Listeneintrag

<ul> - engl. ul = unordered list) =UnNummerierte (Nicht-nummerierte) Liste

<ol> - (engl. ol = ordered list) = nummerierte Liste


Diese Listentypen unterscheiden sich, OL ist mit vorangestellter, automatischer Nummerierung eine sortierte Liste, während UL eine unsortierte Liste ist, mit einem vorangestellten Punkt.


Sortiert:
<ol>
<li>Inhalt</li>
<li>Inhalt</li>
</ol>
Unsortiert:
<ul>
<li>Inhalt</li>
<li>Inhalt</li>
</ul>

Bereiche definieren:


<div> - (engl. div = division) = Bereich, Gruppierung von Elementen. Ein Blockelement als Container

<span> - (engl. span = Abgrenzung, Bereich) Inline-Element.


Bilder und Formulare:


<img src="Adresse" alt=""> - Inline-Element zur Einbindung von Bildern.

<form> - Formular-Start-Tag

<input type="text" value="" /> - Texteingabe einzeilig

<input type="hidden" value="" /> - Verstecktes Eingabefeld

<textarea> - Textareal einleitend

</textarea> - Textareal ausleitend

<input type="submit" value="Senden" /> - Submit (Senden-Knopf)

</form> - Formular-End-Tag
Zuletzt geändert von Hunter am 23. April 2016, 11:02, insgesamt 3-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 » 23. April 2016, 10:27

Hier ein Überblick über die wichtigsten CSS-Regeln:


Anweisung: - Bedeutung:

Dimensionen:

width - Breite: in % oder numerische Angabe

height - Höhe: Auto, Prozent, num. Wert

Schrift

font-family - Schriftart

font-size - Schriftgrösse

color - Schriftfarbe

font-variant - Schriftvariante

font-weight - Schriftgewicht: normal, bold, bolder, lighter

font-style - Schriftstil: normal, oblique, italic

text-align - Textausrichtung: left, right, center, justify

line-height - Zeilenabstand: numerischer Wert in % oder rem oder px (Pixel)

text-decoration - Textgestaltung: underline, overline, line-through, blink

word-spacing - Wortabstand: numerischer Wert in pt(Punkt) oder px

letter-spacing - Zeichenabstand: dito

text-indent - Texteinrückung: dito

text-transform - Textart: capitalize, uppercase, lowercase, none

Seitenabstand

margin-left - Abstand zum Seitenrand

margin-right - dito

margin-bottom - dito

margin-top - dito

Links:

A:link - Link: fast alle CSS-Befehle

A:visited - Besuchter Link

A:active Angeklickter Link

a:hover - Link beim Darüberschweben mit dem Mauszeiger

Hintergrund

background - Hintergrundfarbe: red, green, white usw. oder HTML Farbangabe

background-image - Hintergrundbild: URL

background-repeat - Kachel: repeat, repeat-x, repeat-y, no-repeat

Ränder

border-top-width - Dicke der Rahmenlinie: thin, medium, thick oder numerischer Wert

border-bottom-width - Dicke der Rahmenlinie: dito

border-left-width - Dicke der Rahmenlinie: dito

border-right-width: - Dicke der Rahmenlinie dito

border-style - Rahmentyp: none, dotted, dashed, solid, double, groove, ridge, inset, outset

border-color - Rahmenfarbe: Farbname oder Hex-Angabe

Innenabstand- auch Tabelle:

padding-top - Abstand oben: Prozent oder num. Wert

padding-bottom - Abstand unten: dito

padding-right - Abstand rechts: dito

padding-left - Abstand links: dito

Viel Spass beim Austesten!

LG :winke:

Hunter
Wie irdisch ist der Mensch?
Bild

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

Re: Webtechniken

Ungelesener Beitrag von Hunter » 25. April 2016, 08:44

Wer sich für eine Vertiefung dieses Thema's interessiert kann meinen weiterführenden Thread in meinem Forum besuchen.
Auf das Bild klicken.

Bild
Wie irdisch ist der Mensch?
Bild

Gesperrt Vorheriges ThemaNächstes Thema

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast