Ahoi, e*PvP
Ich wollte mich hier mal etwas nützlich machen und ein kleines Tutorial für Anfänger schreiben,wie man sich als Anfänger die erste HTML Seite erstellen kann(kann man auch als einfache Homepage benutzen)
Also los geht´s(den Editor öffnen) :
-Im Doctype wird dem Browser mitgeteilt was er für Befehle zu erwarten hat und an welchen Standard man sich bei der Einstellung der Internet-Seite gehalten hat. Im Doctype(immer ganz am Anfang des HTML-codes,vor dem Head-bereich) steht:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
Der Head-bereich:
-In Headbereichen wird der Tab-title,der Title der Seite und eine kleine Info über die Seite geschrieben.
Der HTML-tag für den Headbereich sieht folgends aus: <head>
Aber natürlich hat jeder HTML Tag auch einen End-tag,der sieht in dem Fall so aus: </head> (jeder End-tag hat ein "</"
So würde es im HTML-Code aussehen:
HTML Code:
<head></head>
Der Body-bereich
-Im Bodybereich steckt der eigendliche Inhalt der Seite.
Wie beim "Headbereich" wird der Bodybereich so geschrieben:
Das "P" steht für das englische Wort "Paragraph"
Der End-tag sieht so aus </p>
Also dann schreiben wir mal unseren ersten Text.
Beispiel:
Hallo e*PvPers
Ich bin der Lumpi und bin 14 Jahre alt.
Also im Code würde es so aussehen( mit den Doctype,Head und Body-bereich):
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head></head><body><p>
Hallo e*PvPers
</p><p>
Ich bin der Lumpi und bin 14 Jahre alt.
</p></body>
-Der <h1>-tag wird meistens für Überschriften benutzt,dieser hat im Head-bereich seinen Platz.
Die 1 rechts neben dem h steht für die Größe,bzw. 1 ist die Grösste überschrift,danach kommt logischerweise die 2,3,etc. diese Reihenfolge kann man bis 6 folgen.
Kleines Beispiel:
HTML Code:
<h1>
Lumpis Page
</h1><h4>
Willkommen auf meine Homepage!
</h4>
Das ist jetzt schon fast der ganze Stuff der generell in den Head-bereich rein kommt,der nächste folgt nun.
-Der Tag "<title>" definiert nicht den Titel der Seite,wie vielleicht viele Anfänger dachten,sondern den Titel des Tab´s.
Es kommt manchmal vor das Leute,die ihre Seite selbst mit HTML gecodet haben,vergessen den <title> -befehl einzusetzten und daher war der Tab weiss.
Im code:
HTML Code:
<title>
LumpisPage
</title>
So wenn wir den Tag "<title>" und "<h>" jetzt in unseren Code einfügen sieht das ganze so aus:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head><title>
LumpisPage
</title><h1>
Lumpis Page
</h1><h4>
Willkommen auf meiner Homepage
</h4></head><body><p>
Hallo e*PvPers
</p><p>
Ich bin der Lumpi und bin 14 Jahre alt.
</p></body>
So wenn wir es jetzt nurnoch als index.htm abspeichern können wir unser Werk mal im Browser betrachten.
Aber natürlich ist da noch nicht viel gemacht und wir wollen ja schon etwas mehr schaffen .
-Mit diesem Schriftyp können wir nun die Schrift etwas fetter/kräftiger machen um bestimmte Wörter usw. mehr anzuheben/ihnen mehr Wichtigkeit zu geben.
Dies machen wir mit dem Tag: <b> .
Das "b" steht für bould = fett/kräftig
Beispiel:
HTML Code:
<p>
Meine
<b>
lieblings
</b>
Serie ist Tatort
</p>
Zwei verschiedene Schriftypen2:
->Schriftyp: kursiv
-Mit diesem Schriftyp können wir unsere Wörter auch schräg darstellen.
Dies machen wir mit dem Tag <i>
Das "i" steht für italic = kursiv , das "italic" wurde genommen da man denkt das der kursive Schriftyp aus Italien kommt.
Beispiel:
HTML Code:
<p>
Meine
<i>
lieblings
</i>
Serie ist Tatort
</p>
So können wir das auch in unsere index.htm eintragen,aber das könnt ihr selber machen,da ihr ja wisst wie ihr es eintragen müsst.
Wenn ihr dann den code so habt wie ihr wollt speichert ihr nochmal ab und erstellt euch am besten einen Ordner,zb. Homepage( so ist es einfacher eure .htm Dateien zu finden wenn ihr sie dann später auf euren Server ladet usw. )
-Bei internen links handelt es sich um einen link innerhalb der Homepage,zb. wenn man hier bei e*PvPers auf der Startseite ist(Home) und dann zum Forum wechselt hat man auf einen internen link geklickt und ihn aktiviert und ist so zu einer nächsten Seite gekommen.
Ein normaler Externer/Interner link sieht ganz simple aus,wie ein URL link,das ein Button daraus wird geschieht wenn man es designed mit CSS.
Der Interne link sieht so aus:
HTML Code:
<a href="beispiel.htm">Klick</a>
<a = das "a" steht für Archor = Anker
href="beispiel.htm" = Hier wird eingegeben welche .htm Datei beim drücken des Knopfes aufgerufen werden soll.
>Klick/a> = Hier wird der Name des Knopfes der erstellt werden soll definiert.
-Der Externe link ist genau das Gegenteil von dem Interen link,dieser führt nicht auf eine andere Seite der Homepage sondern auf irgendeinen angegebenen URL link zb. der eines Downloads
Der Externe sieht so aus:
HTML Code:
<a href="http://www.elitepvpers.com">Klick</a>
Der Externe link ist fast genauso aufgebaut wie der Interne, nur das wir im Internen link eine .htm eingeben müssen,beim Externen müssen wir eine URL Adresse angeben,bei meinem zb. ist es der von e*PvPers.
Interne links kommen normalerweise über den Head-bereich und unter dem Doctype , bei einer Navigation zumbeispiel
Externe links können unter dem Body-bereich oder über dem Head-bereich angegeben sein(kommt auf die Seite an) .
Was natürlich klar ist müssen wir bei Internen links auch eine neue .htm Datei erstellen die dann angezeigt wird(bei Externen muss nur die URL Adresse rein,es muss nichts weiteres erstellt werden!) .
Daher öffnen wir jetzt noch einmal den Editor und dann definieren wir wieder einmal die Bereiche(Doctype,Head und Body) .
Nun schreiben wir unter Doctype:
HTML Code:
<a href="index.htm">Startseite</a>
Das muss nicht umbedingt Startseite heissen,damit definiere ich nur die Seite die beim Start angezeigt wird,man kann diese aber auch zb. Home nennen.
Weiter geht´s:
Im meinem Beispiel machen wir jetzt mal eine "Übermich"-Seite
Also schreiben wir:
Mit dem Tag könnt ihr Listen/Aufzählungen erstellen,die bei diesem Beispiel gut zu gebrauchen ist.
Wichtig: Wenn ihr bei HTML Texte erstellt würde ich anstatt "ä,ö,ü" "ae,oe,ue" schreiben da diese Buchstaben von den meisten Browser nicht erkannt wird und bei diesen stellen nur (?) erscheint und das sieht nicht sehr schön aus. Auch werden oft keine Zeichen wie das Copyright-zeichen usw.
;
HTML Code:
<body><li>
Name: Wolf vom Endt
</li><li>
Alter: 14
</li><li>
Geburtsdatum: 4/07/96
</li><li>
Hobbies: PC, Sport, Freunde
</li></body>
So das sollte reichen,jetzt nurnoch als uebermich.htm in eurem Ordner abspeichern und ihr habt eure zweite Seite.
Nun muss aber eure Seite nurnoch von der Startseite erreichbar sein.
Dies klären wir wieder mit dem Internen link.
Schreibt dies jetzt unter Doctype in die index.htm :
HTML Code:
<a href="uebermich.htm">Ueber mich</a>
So, nachdem ihr es abgespeichert habt, ist die "Uebermich"-seite von der Startseite erreichbar.
HTML-tag:Bilder/Grafiken auf der Seite erscheinen lassen:
Jetzt kommt der letzte Tag den ich euch in diesem TuT zeigen werde, der tag in dem ihr Bilder auf euer Seite erscheinen lassen könnt.Zuerst erstellt ihr euch einen Unterordner in eurem Homepage-ordner mit dem Namen "images" .
In diesem Ordner speichert ihr das Bild ab das wir gleich auf der Seite erscheinen lassen. Nun zum Tag.
"http://www.elitepvpers.com/forum/images/ = Bezieht sich auf den Unterordner der sich im Ordner der .htm befindet
image01" = Ist der Name des Bildes das erscheinen soll
.png = Der Bildtyp(oder Format) , für HTML eignen sich am besten .png und .jpg/.jpeg Formate.
width="474" = Ist die Breite des Bildes,so höher die Zahl,so Breiter ist das Bild.
height="474" = Ist die Höhe des Bildes,so höher die Zahl,so Höher ist das Bild.
border="1" = Wird angegeben ob ein Rahmen um das Bild erstellt werden soll,wenn keiner erwünscht ist,bei anstatt der 1 eine "0" eintragen.
alt="image01" = "alt" steht für alternativ Text,das "image01" steht für den Text der bei zb. Browsern für Blinde vorgelesen wird.
Existiert das erste How to Pserver erstellen noch ? 06/30/2010 - Metin2 Private Server - 7 Replies Wie die überschrift es eigenlich schon sagt ..
möchte ich wissen wer eigentlich das erste How to gemacht hat wie man einen Server erstellt ... .
Und ob es noch dieses How to gibt ...
will sehen wie viel thanks er bekommen hat und so einiges .
Meine erste Homepage mit HTML 11/28/2009 - Main - 2 Replies Hallo,
Habe grad meine erste Homepage mit HTML fertig bekommen.
Nun könnt ihr sie euch ziehen und Kritik dazu geben ^^
mfg
Meine erste Homepage mit HTML 10/25/2009 - Web Development - 8 Replies Hallo,
Ich habe mir heute meine erste "kleine" Homepage mit HTML gemacht, würde mich freuen wenn ihr bewertet.
ppennergame.tk (elitepvpers blacklink vorhanden)
MFG
Design in HTML Format 08/08/2009 - CO2 Private Server - 53 Replies this is a design ONLY!
it's in HTML, but only the design. it's not coded.
i originally made it for a private server, (i didn't give it to them because he never replied back)
so i decided to sell it.
$10
http://i26.tinypic.com/2cpq1id.gif
![[TuT] Erste HP mit HTML erstellen [NO DESIGN]](https://www.elitepvpers.com/forum/iconimages/tutorials/tut-erste-hp-mit-html-erstellen-no-design_ltr.gif){kind=small}
.
nutzen, was wohl sinnvoller wäre.
