[TuT] Erste HP mit HTML erstellen [NO DESIGN]

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) :

Doctype,Head und Body Bereich:

Spoiler

-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:

HTML Code:

<body>
</body>

HTM-tag: <p>

Spoiler

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>

HTML-tag:<h>

Spoiler

-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.

HTML-tag:<title>

Spoiler

-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 ;) .

Zwei verschiedene Schriftypen1:
->Schriftyp:Fett

Spoiler

-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

Spoiler

-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. )

Interne und Externe links:
->Interne links:

Spoiler

-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.

->Externe links:

Spoiler

-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!) .

Zweite Seite erstellen:

Spoiler

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:

HTML Code:

<head>
          <title>
                    LumpisPage-Ueber mich
          </title>
          
          <h4>
                  Ueber mich
          </h4>
</head>

;

HTML-tag:<li> :

Spoiler

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:

Spoiler

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.

Der Tag lautet:

HTML Code:

<img src="http://www.elitepvpers.com/forum/images/image01.png"> width="474"
height="474" border="1" alt="image01" />

<img = Steht f�r Image = Bild/Grafik

"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.

� by .Lumpi.

Soo,das wars eigendlich auch von mir ;)
Ich hoffe es hat euch geholfen :P

Darf nicht ohne meine Erlaubnis kopiert werden !!!

.Lumpi.