|
You last visited: Today at 15:28
Advertisement
[TuT] Erste HP mit HTML erstellen [NO DESIGN]
Discussion on [TuT] Erste HP mit HTML erstellen [NO DESIGN] within the Tutorials forum part of the Off-Topics category.
11/06/2010, 18:29
|
#1
|
elite*gold: 26 
Join Date: Oct 2010
Posts: 482
Received Thanks: 166
|
[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:
-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>
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>
-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>
-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
-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. )
Interne und Externe links:
-> Interne links:
-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:
-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:
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> :
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.
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.
|
|
|
|
11/06/2010, 20:10
|
#2
|
elite*gold: 26
Join Date: Oct 2010
Posts: 482
Received Thanks: 166
|
€: Verbesserungen
|
|
|
|
|
11/06/2010, 20:34
|
#3
|
elite*gold: 0
Join Date: Mar 2010
Posts: 6,638
Received Thanks: 5,124
|
Inzteresannt, für die, die noch 0 Ahnung mit HTML haben.
Für die, die aber schon ein bisschen fortgeschrittener sind, bringt das nicht viel.
Trtz THX
|
|
|
|
|
11/06/2010, 23:02
|
#4
|
elite*gold: 0
Join Date: Sep 2010
Posts: 520
Received Thanks: 86
|
Gut erklärt!
Leute die neu Anfangen damit können das gut gebrauchen.
|
|
|
|
|
11/07/2010, 10:09
|
#5
|
elite*gold: 0
Join Date: Jan 2010
Posts: 492
Received Thanks: 145
|
Kann es sein das Dein Tut eine Zusammenfassung von dieser seite ist?
("http://www.html-seminar.de/")?
Aber sonst, Gutes TuT=)
|
|
|
|
|
11/07/2010, 10:11
|
#6
|
elite*gold: 26
Join Date: Oct 2010
Posts: 482
Received Thanks: 166
|
Quote:
Originally Posted by schido91
Kann es sein das Dein Tut eine Zusammenfassung von dieser seite ist?
("http://www.html-seminar.de/")?
Aber sonst, Gutes TuT=)
|
Ich hab HTML von meinem Bruder vor nen paar Jahren gelernt
Aber möglich das er sein Wissen von der Seite hat.
|
|
|
|
|
11/07/2010, 15:44
|
#7
|
elite*gold: 0
Join Date: Aug 2006
Posts: 505
Received Thanks: 89
|
Naja, du solltest drauf achten dass du bei einem Tutorial wirklich alles richtig erklärst, damit du Leuten nichts falsches beibringst.
1. Eine Überschrift gehört nicht in den head-Bereich.
2. <li> ist ein Punkt einer Liste, die mit <ul> eingeleitet wird.
3. <p> wird mit </p> abgeschlossen, hast du oben auch richtig erklärt jedoch weiter unten vergessen.
4. Anstatt Umlaute "auszuschreiben", kann man auch einfach den entsprechenden  nutzen, was wohl sinnvoller wäre.
|
|
|
|
|
11/07/2010, 16:49
|
#8
|
elite*gold: 26
Join Date: Oct 2010
Posts: 482
Received Thanks: 166
|
Natürlich wird <h> "meistens" als Überschrift der Seite genutzt und Überschriften kommen in den Head-bereich.
€: Wo hab ich den <p> End-tag vergessen?
|
|
|
|
|
11/07/2010, 19:45
|
#9
|
elite*gold: 0
Join Date: Aug 2006
Posts: 505
Received Thanks: 89
|
Quote:
Originally Posted by .Lumpi.
Natürlich wird <h> "meistens" als Überschrift der Seite genutzt und Überschriften kommen in den Head-bereich.
€: Wo hab ich den <p> End-tag vergessen? |
Bei "zwei verschiedene schrifttypen 1 und 2" hast du den Slash beim schliessenden Tag vergessen.
Und nein, im head-Bereich kommen keine Überschriften, .
Edit: und ganz unten bei den Bildern, schliesst du das img-Tag zu früh.
|
|
|
|
 |
Similar Threads
|
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
|
All times are GMT +1. The time now is 15:28.
|
|
![[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}
