KINGx - Das inoffizielle PlayStation Forum & News Portal

Liebe PSPKingler,
ich war lange nicht mehr Online und spendiere euch heute mal ein kleines Html Tutorial.
Falls sie euch gefallen kommen vielleicht noch ein paar CSS,PHP Tutorials dazu.

Tutorial Nr 1:

Spoiler: (anzeigen)

Also fangen wir mal an was brauchen wir:

Editor(Empfehlung von mir Notepad++(Windows) Textwrangler(Mac) / Empfehlung von
green_day_fan_® phase5
Webbrowser
Optional:Webspace mit Domain

So wir öffnen unseren bevorzugten Editor und erstellen ein neues Dokument.
Da tippen wir jetzt den Code ab:

Code:

<!DOCTYPE HTML>

 <html> 

   <head>

    <title>Tutorial Nr.1</title>

     <meta charset="UTF-8" />

     <meta name="author" content="homer">

     <meta name="description" content="homer Programmier und Webentwickler.">

     <meta name="keywords" content="HTML, PHP,CSS, Programmierung">

 </head>

<body>

 <h1>Tutorial Nr1.</h1>

 <img src="http://www.pspking.de/forum/images/forum.gif" width="50%" height="50%" alt="PSPKING">

 <p><a href="http://pspking.de">pspking</a> das PSP-Forum.</p>

</body>

</html>

Dies Speichern wir als index.html.
Und können es jetzt mit dem Browser öffnen.

[]Erklärung:
In HTML besteht alles aus sogenantten Tags(<tag></tag>) sie werden geöffnet und wieder geschlossen.
Ihr müsst auf passen das Ihr nicht vergesst zu schließen, sonst wirkt sich der Tag auf den Rest eures Codes aus.
Noch eine Information in HTML werden keine Fehlermeldungen angezeigt, dass kann praktisch aber auch nervig sein.
So womit wir anfangen ist:

Code:

<!DOCTYPE HTML>

Dies ist sagt jedem Dokument und Browser das dies eine Html Datei ist.

Code:

<html>

Das oberste Element in euer HTML Seite dies ist für CSS eine wichtige Information.

Code:

<head>

Hier kommt alles in den Kopf eurer Seite zum Beispiel der PSPKING Banner ist im Header sonst kommen da noch Such Maschinenspezifisches
<tag> tags rein und natürlich auch Javascript.

Code:

<title></title>

Hier kommt der Titel eurer Webseite rein.

Code:

<meta charset="UTF-8"/>

     <meta name="author" content="homer">

     <meta name="description" content="homer Programmier und Webentwickler.">

     <meta name="keywords" content="HTML, PHP,CSS, Programmierung">

Das meta charset beschreibt die Zeichenkodierung in unserem Fall damit die Umlaute der Deutschen Sprache sichtbar gemacht werden.
Der Rest der Meta Tags beschreibt Such Maschinenspezifisches.

Code:

</head>

Hier wird unser Head Tag wieder geschlossen.

Code:

<body>

Ähnlich wie das Header Element ist hier nur für den Inhalt zuständig.

Code:

<h1>Tutorial Nr1.</h1>

<h1>,<h2><h3>,<h4> sind Überschriften.

Code:

<img src="http://www.pspking.de/forum/images/forum.gif" width="50%" height="50%" alt="PSPKING">

Dies lädt ein Bild in unser Html Dokument und es kriegt mit alt="" einen Namen.Wichtig beim src="" es muss direkt auf die Bild Datei verlinken.

Code:

<a href="http://pspking.de">pspking</a> das PSP-Forum.

Dies ist ein Link der auf eine Webseite oder ein lokales Dokument verweist.Der <p> tag ist für einen Paragraphen dar.

Code:

</body>

Unser Body Tag wird geschlossen.

Code:

</html>

Unser Html Tag wird geschlossen.

Tutorial Nr 2:

Spoiler: (anzeigen)

Formulare
Tabellen
Videos

Code:

<html>

 <head>

 <title>Html Tutorial Nr. 2</title>

 </head>

 <body>

 <form action="" name="Formular" method="get">

  Dein PSP-King name: <input type="text" name="name" /><br />

  Wie alt bist du ?: <input type="text" name="alter" /><br />

  <input type="submit" value="Versenden" /> 

  </form>

  <table border="1">

  <tr>

    <td>Alexking</td>

    <td>PSPKING</td>

    <td>ICH :D</td>

  </tr>

  <p>Video:</p>

  <video src="http://video-js.zencoder.com/oceans-clip.mp4" width="320" height="240" autoplay="no" controls="controls">

    Dein Browser unterstützt den Video Tag nicht.

</video>

 </body>

</html>

Erklärung:

Code:

<form action="" name="Formular" method="get">

Wir öffnen unser Formular mit dem <form> tag mit der Action geben wir unser Ziel aus.
Formulare kann man nicht mit Html auswerten deswegen habe ich mit php eine Seite erstellt.Die method gibt unsere Übertragungsmethode an die ist aber für PHP erst wichtig.

Code:

Dein PSP-King name: <input type="text" name="name" /><br />

  Wie alt bist du ?: <input type="text" name="alter" /><br />

  <input type="submit" value="Versenden" />

Mit den Input kann man buttons oder texte oder Passwörter übertragen.
Submit ist für versenden da und mit Value geben wir dem Button einen Namen.

Code:

<table border="1">

  <tr>

    <td>Alexking</td>

    <td>PSPKING</td>

    <td>ICH :D</td>

  </tr>

Mit <table> öffnen wir unsere Tabelle und mit border können wir uns eine schöne Umrandung machen, ich bevorzuge CSS für sowas.
Mit <td> schreiben wir die einzelnen Zeilen unserer Tabelle.

Code:

<video src="http://video-js.zencoder.com/oceans-clip.mp4" width="320" height="240" autoplay="no" controls="controls">

    Dein Browser unterstützt den Video Tag nicht.

</video>

Mit dem <video> tag können wir mit src="" das Video laden und mit width und height die höhe und breite angeben.
Mit controls können wir einstellen ob das Video Play/Pause haben soll.

HTML Tutorial Nr.3:

Spoiler: (anzeigen)

HTML Tags:

Spoiler: (anzeigen)

Links:

Spoiler: (anzeigen)

Fehleranalyse:

Spoiler: (anzeigen)

HTML-Übersicht Tag(PDF)

fast niemand ohne ordentliche html vorkenntnisse versteht den code, wenn du ihn einfach dahinschreibst und ein paar komentare hinzufügst. Du solltest den code am besten stück für stück erklären und am ende den gesamten code aufschreiben, aber da solltest du keine Kommentare reinpacken...

das tutorial ist viel zu kurz. alles was du geschrieben hast gehört zu den grund-grundkenntnissen, damit wird niemand was anfangen können Sad

ausserdem zu unübersichtlich, siehe duLouser...

Wie meine Vorposter schon erwähnten: zeimlich sinnlos...
Wer wirklich keine Vorkenntnisse hat, aber seine eigene Homepage erstellen will sollte sich mal selfhtml.org ansehen! Wink

Dort wird wirklich alles von Grund auf erklärt.

Ich bedanke mich für die Kritik es ist wahrscheinlich wirklich zu kurz ich kann aber auch nicht einen langen Code schreiben und dann von euch erwarten das ihr Lust habt den abzuschreiben.
Edit:Ich habe das Tutorial überarbeitet.
Mein nächtes Tutorial wird ausführlicher.
homer

ja, sieht jetzt gut aus Smile

Aber niemand sagt, das er den großen Screen in einen Spoiler packen soll ? Big Grin

jetzts siehts besser aus, kriegt ein danke Smile

hab im moment keine zeit das zu lesen, werds aber in zukunft mal tun.

Italia-boy :

Aber niemand sagt, das er den großen Screen in einen Spoiler packen soll ? Big Grin

allerdings sollte der große screenshot in einen spoiler Wink

gruschi :

Wie meine Vorposter schon erwähnten: zeimlich sinnlos...
Wer wirklich keine Vorkenntnisse hat, aber seine eigene Homepage erstellen will sollte sich mal selfhtml.org ansehen! Wink

Dort wird wirklich alles von Grund auf erklärt.

sehr freundlich, unter einem tutorial ein anderes zum gleichen thema zu verlinken und dann noch sinngemäß "hier das ist besser" zu schreiben. ok, der link findet sich auch im startpost, aber trotzdem...

Ich verwende als Programm zu Programmieren phase5 was ziemlich gut ist. Hat man schon alles dabei was man braucht. Auserdem wenn ich was brauche geh ich auf Selfhtml was mir schon oft geholfen hat.

So ist das Tutorial besser. Big Grin

Vorher hat man nur den Code abschreiben können, jetzt hast du alles noch erklärt. Big Grin

Gutes TuT, würde mich freuen wenn du es noch etwas erweitern würdest.
Möchte nämlich unbedingt HTML lernen.

Und mal eine Frage:

Wie hast du HTML gelernt und war es einfach/hat es lange gedauert?

Liebe Grüße, MatzeO

Ich finde dein Tutorial ... naja..

Es ist ein Tutorial. Jedoch JEDER der etwas mit html zutun hat/hatte wird sich damit schon auskennen.

das ist ja "pipapo"... ich würde das ja noch nicht einmal Basiswissen nennen.

Ich hätte hier eher ein Tutorial gemacht über css + html.

naja.. es tut was es tun soll. Jedoch wird jeder der mal html gebraucht hat das alles schon wissen.

Ich gebe dir aber trotzdem ein DANKE.

Denn dein Tipp mit Firebug ist gut, Firebug kennen nicht soviele,doch die meisten wiederum schon Big Grin

In dem heutigen Tutorial Nr 2 geht es um :

Formulare
Tabellen
Videos

Code:

<html>

 <head>

 <title>Html Tutorial Nr. 2</title>

 </head>

 <body>

 <form action="" name="Formular" method="get">

  Dein PSP-King name: <input type="text" name="name" /><br />

  Wie alt bist du ?: <input type="text" name="alter" /><br />

  <input type="submit" value="Versenden" /> 

  </form>

  <table border="1">

  <tr>

    <td>Alexking</td>

    <td>PSPKING</td>

    <td>ICH :D</td>

  </tr>

  <p>Video:</p>

  <video src="http://video-js.zencoder.com/oceans-clip.mp4" width="320" height="240" autoplay="no" controls="controls">

    Dein Browser unterstützt den Video Tag nicht.

</video>

 </body>

</html>

Erklärung:

Code:

<form action="" name="Formular" method="get">

Wir öffnen unser Formular mit dem <form> tag mit der Action geben wir unser Ziel aus.
Formulare kann man nicht mit Html auswerten deswegen habe ich mit php eine Seite erstellt.Die method gibt unsere Übertragungsmethode an die ist aber für PHP erst wichtig.

Code:

Dein PSP-King name: <input type="text" name="name" /><br />

  Wie alt bist du ?: <input type="text" name="alter" /><br />

  <input type="submit" value="Versenden" />

Mit den Input kann man buttons oder texte oder Passwörter übertragen.
Submit ist für versenden da und mit Value geben wir dem Button einen Namen.

Code:

<table border="1">

  <tr>

    <td>Alexking</td>

    <td>PSPKING</td>

    <td>ICH :D</td>

  </tr>

Mit <table> öffnen wir unsere Tabelle und mit border können wir uns eine schöne Umrandung machen, ich bevorzuge CSS für sowas.
Mit <td> schreiben wir die einzelnen Zeilen unserer Tabelle.

Code:

<video src="http://video-js.zencoder.com/oceans-clip.mp4" width="320" height="240" autoplay="no" controls="controls">

    Dein Browser unterstützt den Video Tag nicht.

</video>

Mit dem <video> tag können wir mit src="" das Video laden und mit width und height die höhe und breite angeben.
Mit controls können wir einstellen ob das Video Play/Pause haben soll.

Im nächsten Tutorial stelle ich ein bisschen CSS vor. Rolleyes

Dein PM-Fach ist voll Wink

Die PM die ich senden wollte:

Meine PM (anzeigen)

MatzeO :

Dein PM-Fach ist voll Wink

Die PM die ich senden wollte:

Hi!
Ich könnte wirklich etwas Hilfe gebrauchen.
Und zwar wollte ich mal fragen, ob du eine Liste mit den wichtigsten "Befehlen"(Hintergrund,Bilder einbinden, Text schreiben etc.) in dein TuT packen könntest.
Am besten als eine PDF Datei auch noch zum Downloaden.
Das wäre sehr hilfreich für mich und sicherlich auch viele andere.
Würde mich sehr freuen, wenn du dies tun könntest.

Liebe Grüße, MatzeO

Klar ich habe insgesamt 2.258 PN'S.
Ich habe nur keine Lust alle zu löschen.
Ich werde diese Liste machen.

KINGx - Das inoffizielle PlayStation Forum & News Portal

homer

duLouser

Gin-Chan

gruschi

homer

duLouser

Italia-boy

Gin-Chan

greenieZ

Dodo

MatzeO

king38

homer

MatzeO

homer