Hallo ich präsentiere euch heute mein erstes tut zu Html und CSS
also vor wech das ist 100% von mir wen ich recht weis da ich es frisch geschrieben habe
ich habe html und Css vor kurzen erst gelernt aber mehr dazu später xD als unwichtigen kram
Fangen wir mal an
Hintergrund Bild machen
mache ich am libsten in css
"ach so "
<div style="background-image:url(background2.gif); margin:0px; padding:10px"> das
es ein bild ist
Pfart
Die größe
"Grafick einbinden"
Grafik
<p><img src="baum.jpg" width="320" height="400" border="4" alt="Abendbaum"></p>
das es ein Image (Bild) ist
Quelle des Bilde
Der Pfad zum Bild
Die Größe des Bildes width (Breite); height(Höhe)
Ist die Breite des rammens um das Bild (in Pixel angegeben)
Grafik beschreiben
<p><img src="altezeiten.jpg" width="271" height="265" alt="alte Zeiten" longdesc="altezeiten.htm"></p>
Mit longdesc können sie den Pfad zur Seite wo das Bild beschrieben wird angeben.
Pfatrt zum bild bsp. Images/baner.png
Navigation
"NAVIGATION"
<a href="Der link oder datei ort auf dem webspace">der name wie es angezeigt werden soll</a> abschlus
Ansttat Text eine Grafik
<p>
<a href="home.htm"><img src="button1.jpg" width="160" height="34" border="0" alt="Home"></a> Rot = Das übliche
blau = die datei die dan kommt also kann auch "ranking.php" heisen
Gelb = das ist der Imag pfart zum Bild (Butong)
Grün = border="0" sorgt dafür das der ramen der sonst um das Bild (Butong) weher nicht mehr ist
Verweis in ein neues Fenster
<p>immer wieder neu:
<a href="http://aktuell.de.selfhtml.org/" target="_blank">SELFHTML aktuell</a>
</p>
Der Link
So legen sie ein Zielfenster Verweis Fest
Ein verwies in ein neues Fenster
Verweis Möglichkeiten
eine kleine liste von den Möglichkeiten
_blank, um den Verweis in einem neuen Fenster zu öffnen,
_self, um den Verweis im aktuellen Fenster zu öffnen,
_parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
_top, um bei verschachtelten Framesets alle Framesets zu sprengen.
Auf eine E-Mail Adresse verweisen
<a href="mailto:Ikariam2008@live.de">Matthias, Ikariam2008@live.de</a>
Das ist dafür zuständig das es ein Email Verweis gibt
Das ist die E-Mail Adresse
Der Name wie der Verweis heist
ende des Tags
Mehrere Email Verweise
Da wird einfach eine lertaste rein geschrieben also
BSP
<p><a href="mailto:Ikariam2008@live.de">Matthias, Meine game mail </a>
</p>
<p>a href="mailto:Fightforshinobi@admin.de">Admin email adresse </a>
sonderzeichen
"SONDERZEICHEN"
Zeichen Ersetzung
ä ä
Ä Ä
ö ö
Ö Ö
ü ü
Ü Ü
ß ß
€
& ("Ampersand")
< ("lower than")
> ("greater than")
mahr dazu poste ich noch dan lege ich mal mit den wichtigsten Css sachen los
CSS
BACKGROUND
"Background"
in Css macht man ein baground nicht so wie in html in html macht man das so
<body>
</body>
in CSS so
ein -background-farbe macht man so
body {
background-color: #cc003
}
ein images so
body{
background: url(Images/banner.png); width: 1079px; height: 385px;
background-repeat: no-repeat;
background-position: top;
center;
}
das es ein Bild ist; url= das es ein pfart auf dem Server ist
der pfart zum Bild und das Bild mit Format
da drinnen sollte der pfart stehen
wie groß das Bild ist width= die breite; height= höhe des Bildes; px=pixel
das heist das sich das Bild nicht wieder holt also das es einmal das komplette Bild ist nicht 100 mal oder so
das ist wo das Bild stehen soll kann man auch in px angeben
Boxen definieren
"Boxen definieren"
so dann noch was was wichtig ist wie ihr zum Beispiel was nach links machen könnt also einen Server Status oder so
dafür müsst ihr es erst mal in einem html Datei definieren oder wie das heißt das macht ihr so
<div class="box1">
<div ID="box1">
</div>
so naja das kann ich net genau erklären ich weiß es einfach
class kann man mehr mal verwenden
ID hin gegen in der css Datei nur einmal
also nicht das man nicht nur einmal Id nehmen kann ne mit dem selben Namen meine ich jetzt
</div>
In der css Datei sieht es wie folgt dann aus
wenn ihr in der html Datei class genommen hast nimmt man einen .
.box1{
background-image:url(Images/2.png); width: 250px; height: 96px;
background-repeat: no-repeat;
position: absolute; top: 320px; left: 1050px;
}
das heißt die Position der box
ja wo hin sie positioniert werden soll also erscheinen soll
wen ihr ID in der HTML Datei genommen habt oder php Datei nimmt man in der CSS Datei eine #
also dann würde das so aussehen
#box1{
background-image:url(Images/2.png); width: 250px; height: 96px;
background-repeat: no-repeat;
position: absolute; top: 320px; left: 1050px;
}
habt ihr noch fragen dann postet sie oder eine pm an mich ich werde nachher bei Gelegenheit noch eine kleine php Sache dazu machen
ach ja und ich empfehle das Freeware Programm Netbeans für so was das ist echt gut
mfg SchwarzerMagier
PS habe versucht auf die Rechtschreibung zu achten
also vor wech das ist 100% von mir wen ich recht weis da ich es frisch geschrieben habe
ich habe html und Css vor kurzen erst gelernt aber mehr dazu später xD als unwichtigen kram
Fangen wir mal an
Hintergrund Bild machen
mache ich am libsten in css
<div style="background-image:url(background2.gif); margin:0px; padding:10px"> das
es ein bild ist
Pfart
Die größe
Grafik
<p><img src="baum.jpg" width="320" height="400" border="4" alt="Abendbaum"></p>
das es ein Image (Bild) ist
Quelle des Bilde
Der Pfad zum Bild
Die Größe des Bildes width (Breite); height(Höhe)
Ist die Breite des rammens um das Bild (in Pixel angegeben)
Grafik beschreiben
<p><img src="altezeiten.jpg" width="271" height="265" alt="alte Zeiten" longdesc="altezeiten.htm"></p>
Mit longdesc können sie den Pfad zur Seite wo das Bild beschrieben wird angeben.
Pfatrt zum bild bsp. Images/baner.png
Navigation
<a href="Der link oder datei ort auf dem webspace">der name wie es angezeigt werden soll</a> abschlus
Ansttat Text eine Grafik
<p>
<a href="home.htm"><img src="button1.jpg" width="160" height="34" border="0" alt="Home"></a> Rot = Das übliche
blau = die datei die dan kommt also kann auch "ranking.php" heisen
Gelb = das ist der Imag pfart zum Bild (Butong)
Grün = border="0" sorgt dafür das der ramen der sonst um das Bild (Butong) weher nicht mehr ist
Verweis in ein neues Fenster
<p>immer wieder neu:
<a href="http://aktuell.de.selfhtml.org/" target="_blank">SELFHTML aktuell</a>
</p>
Der Link
So legen sie ein Zielfenster Verweis Fest
Ein verwies in ein neues Fenster
Verweis Möglichkeiten
eine kleine liste von den Möglichkeiten
_blank, um den Verweis in einem neuen Fenster zu öffnen,
_self, um den Verweis im aktuellen Fenster zu öffnen,
_parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
_top, um bei verschachtelten Framesets alle Framesets zu sprengen.
Auf eine E-Mail Adresse verweisen
<a href="mailto:Ikariam2008@live.de">Matthias, Ikariam2008@live.de</a>
Das ist dafür zuständig das es ein Email Verweis gibt
Das ist die E-Mail Adresse
Der Name wie der Verweis heist
ende des Tags
Mehrere Email Verweise
Da wird einfach eine lertaste rein geschrieben also
BSP
<p><a href="mailto:Ikariam2008@live.de">Matthias, Meine game mail </a>
</p>
<p>a href="mailto:Fightforshinobi@admin.de">Admin email adresse </a>
sonderzeichen
Zeichen Ersetzung
ä ä
Ä Ä
ö ö
Ö Ö
ü ü
Ü Ü
ß ß
€
& ("Ampersand")
< ("lower than")
> ("greater than")
mahr dazu poste ich noch dan lege ich mal mit den wichtigsten Css sachen los
CSS
BACKGROUND
in Css macht man ein baground nicht so wie in html in html macht man das so
<body>
</body>
in CSS so
ein -background-farbe macht man so
body {
background-color: #cc003
}
ein images so
body{
background: url(Images/banner.png); width: 1079px; height: 385px;
background-repeat: no-repeat;
background-position: top;
center;
}
das es ein Bild ist; url= das es ein pfart auf dem Server ist
der pfart zum Bild und das Bild mit Format
da drinnen sollte der pfart stehen
wie groß das Bild ist width= die breite; height= höhe des Bildes; px=pixel
das heist das sich das Bild nicht wieder holt also das es einmal das komplette Bild ist nicht 100 mal oder so
das ist wo das Bild stehen soll kann man auch in px angeben
Boxen definieren
so dann noch was was wichtig ist wie ihr zum Beispiel was nach links machen könnt also einen Server Status oder so
dafür müsst ihr es erst mal in einem html Datei definieren oder wie das heißt das macht ihr so
<div class="box1">
<div ID="box1">
</div>
so naja das kann ich net genau erklären ich weiß es einfach
class kann man mehr mal verwenden
ID hin gegen in der css Datei nur einmal
also nicht das man nicht nur einmal Id nehmen kann ne mit dem selben Namen meine ich jetzt
</div>
In der css Datei sieht es wie folgt dann aus
wenn ihr in der html Datei class genommen hast nimmt man einen .
.box1{
background-image:url(Images/2.png); width: 250px; height: 96px;
background-repeat: no-repeat;
position: absolute; top: 320px; left: 1050px;
}
das heißt die Position der box
ja wo hin sie positioniert werden soll also erscheinen soll
wen ihr ID in der HTML Datei genommen habt oder php Datei nimmt man in der CSS Datei eine #
also dann würde das so aussehen
#box1{
background-image:url(Images/2.png); width: 250px; height: 96px;
background-repeat: no-repeat;
position: absolute; top: 320px; left: 1050px;
}
habt ihr noch fragen dann postet sie oder eine pm an mich ich werde nachher bei Gelegenheit noch eine kleine php Sache dazu machen
ach ja und ich empfehle das Freeware Programm Netbeans für so was das ist echt gut
mfg SchwarzerMagier
PS habe versucht auf die Rechtschreibung zu achten