![[Script]Tutorial HTML und CSS [Anfänger und zum Nachgucken]](https://www.elitepvpers.com/forum/iconimages/tutorials/script-tutorial-html-und-css-anf-nger-und-zum-nachgucken_ltr.gif){kind=small}
Ich will euch heute mal ein bisschen HTML und CSS beibringen..
Wenn ihr was zu berichtigen habt dann halte ich euch nicht davon ab.
Kommen wir nun zum Tutorial
_
Als erstes braucht ihr das "Grundgerüst" für eine Homepage
HTML Code:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
____
Dann könnt ihr noch einen Title einfügen dies sieht dann so aus
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Title</title> </head> <body> </body> </html>
Dann könnte ihr ein Text erstellen oder besser gesagt einen "Absatz" erstellen in dem ihr
_____
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Titel</title> </head> <body> <p> Hier steht euer erster Text </p> </body> </html>
Diesen erstellten Text könnt ihr dann auch noch Verändern von der Größe,Schriftart und Farbe her
mit dem einfachem Befehl
_____
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Titel</title> </head> <body> <p> <font> Hier steht euer erster Text </font> </p> </body> </html>
Jetzt ist der natürlich noch nicht Verändert weil wir nur <font> eingefügt haben
um ihn zu Verändern müssen wir
_____
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Titel</title> </head> <body> <p> <font size="5" face="Courier" color="blue"> Hier steht euer erster Text </font> </p> </body> </html>
Hier die erklärungen : "size" steht für Größe "face" steht für Schriftart "color" steht für Farbe
___
Nun wollen wir den Text aber in die mitte bekommen! dies ist sehr einfach..
____
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Titel</title> </head> <body> <p> <font size="5" face="Courier" color="blue"> <center> Hier steht euer erster Text </center> </font> </p> </body> </html>
Mit dem <center> bekommt ihr den Text in die Mitte..
______
jetzt zeige ich euch was "Spizelles" und zwar einen laufenden/slider Text
______
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Titel</title> </head> <body> <p> <font size="5" face="Courier" color="blue"> <center> <marquee> Hier steht euer erster Text <marquee> </center> </font> </p> </body> </html>
Der befehl <marquee> bringt den Text dazu sich zu bewegen (z,B an der linken seite rauszukommen in der rechten seite rein zu gehen und auf linken wieder rauszukommen)
wir können das <marquee> auch noch modden..mit der Schnelle,rauskommschnelle und der Anhaltefunktion.
_______
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Titel</title> </head> <body> <p> <font size="5" face="Courier" color="blue"> <center> <marquee scrollamount="50" scrolldelay="20" behavior="slide"> Hier steht euer erster Text <marquee> </center> </font> </p> </body> </html>
Erklärung der bergriffe : "scrollamount" = Slidergeschwindigkeit "scrolldelay"=Rauskommgeschwindikeit
behavior=Anhaltefunktion(Funktioniert nur wenn im "" feld slide steht!)
____
Jetzt kommen die Überschriften
_____
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Titel</title> </head> <body> <h1>Ueberschrift</h1> <h2>Ueberschrift</h2> <h3>Ueberschrift</h3> <h4>Ueberschrift</h4>
Und so weiter (<h1> ist das Größte danach geht die schriftgröße immer weiter runter!)
____
Erstellen von Links
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Titel</title> </head> <body> <a rel="loader" href="http://www.Hier der Link.de/</a> </body> </html>
So könnt ihr einfache Links/Verlinkungen erstellen..
Wenn ihr in dem feld "http://www.Hier der Link.de/" einfach ein "#" einfügt kommt ihr auf eure eigene Seite oder besser gesagt einfach wieder zurück zur index.html
____
die CSS datei verlinken in der index.html
____
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Titel</title> <link rel="stylesheet" type="text/css" href="EURE CSS DATEI.css"> </head> <body> </body> </html>
So könnt ihr die CSS datei in die HTML datei verlinken und die Homepage weiter ausbauen.
PS:
Die CSS datei und die index.html müssen im gleichen Ordner sein damit es funktioniert!
____
Kommen wir nun zu der Navigation..
Vorwort :
wenn ihr <div id="Navi"> macht müsst ihr in CSS #Navi machen wenn ihr jedoch <div class="Navi"> macht müsst ihr in CSS einen .Navi einsetzen!
also fangen wir an
____
HTML Code:
<div class="navi"> <ul> <li> <a rel="loader" href="#">Startseite</a> </li> <li> <a rel="loader" href="#">Forum</a> </li> <li> <a rel="loader" href="#">Vote</a> </li> <li> <a rel="loader" href="#">Download</a> </li> <li> <a rel="loader" href="#">Rangliste</a> </li> </ul> </div>
Wie ihr seht haben wir <div class> gewählt das heißt wir müssen in CSS einen .navi machen.
Jetzt fragt ihr euch bestimmt was dieses <ul> und das ganze <li> soll.. das hilft euch später dabei einen besseren effect hinzubekommen oder bessergesagt einen besseren "hover"
______
Kommen wir nun zu der komplizirteren sache und zwar zum CSS-Script...
______
Code:
body
{
background-color: black;
text-align: center;
margin: 0px auto;
}
Das ist das "Grungerüst" in CSS lähmlich der "body" damit bestimmt ihr die Hintergrund-farbe der Homepage und die Verschiebung. (text-align und margin damit kann man sachen verschieben mehr dazu später)
Jetzt wollen wir in CSS die navigation Scripten... dazu brauchen wir ein Navigations bild damit wir die Höhe und Länge bestimmen können weil ohne bringt uns die Navigation ja nicht sehr viel..
Ich glaube ich werde unten eine als Download anhängen damit ihr das Tutorial verfolgen könnt!
PS:
Ihr müsst einen Ordner namens "images" in eurem Hauptorder mit der CSS und HTML datei erstellen und dort das Bild reintuhen
___
Code:
.navi
{
width: 900px;
height: 113px;
background: url(images/navbar.png) no-repeat;
text-align: center;
margin: 0px auto;
}
So damit haben wir die Navigation in die mitte geschoben und das "Image" eingefügt
nuin ist aber die Schrift noch ganz woander und hat noch eine aufzählung
Das können wir Fixxen zuerst zur Aufzählung:__
Code:
.navi li
{
list-style-type: none;
}
___
So jetzt haben wir das Problem das die Schrift aber immernoch nicht in der mitte der Navigation ist das können wir auch Fixxen aber es kostet zeit dies auswendig zu lernen daher würde ich euch empfehlen die Codes alle 2-3 Mal durch zu lesen..
Kommen wir nun zum Fixxen
____
Code:
.navi a
{
font-size: 27px;
font-family: serif;
text-align: center;
color: grey;
text-decoration: none;
float: left;
margin: 0px auto;
padding: 35px 0 0 60px;
}
So nun ist die Schrift der Navigation in der Mitte..
Erklärung der Begriffe : "font-size" ist die Schriftgröße "font-family" ist die Schriftart "float:left;" ist die Richtung mann kan auch Right eintragen sieht dann aber nich so schön aus weil sie auf left angepasst ist..
___
Kommen wir nun zum Navi-Hover das ist der effect wenn man mit der Maus über Z.b "Startseite" fährt
Dies ist ganz einfach ihr seht ja wir haben greade die Schrift mit einem .navi a gemacht das heißt wenn wir einen Hover wollen müssen wir natürlich ?
Code:
.navi a:hover
{
color: #FFA8A8;
text-shadow: 0 0 30px red;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
}
Erkärung: "color" ist die Farbe also die hauptfarbe in das sich die Schrift umwandelt "text-shadow" ist der Text schatten bei uns ist er jetzt "rot" weil wir hinten ein "red" eingesetzt haben..
"transition" da könnte ihr die Sekunden eintragen wie lange der Text brauchen soll um sich zu Transformieren
___
Oh habe was vergessen und zwar wie man die Bilder einfügt
HTML Code:
<!DOCTYPE html> <html> <head> <title>Hier euer Titel</title> </head> <body> <img src="img/BILD.png"> <p>ODER IHR MACHT ES SO</p> <img src="http://BILD-LINK.de/">
Bei der ersten Methode müsst ihr einen Ordner in eurem Ordner haben der img heißt..
HTML Code:
<p>Schlusswort</p> Ich hoffe es hat euch Geholfen wenn ja gebt doch bitte ein Thx ;) Viel spaß mit dem Tutorial PS: Dämnächst werde ich verscheinlich auch ein Slider-Tutorial machen mit JS (Javascript) und CSS
