|
Verfasser |
Nachricht |
homer
Experte
Beiträge: 575
Gruppe: User
Registriert seit: Nov 2009
Status:
Abwesend
Danke erhalten: 134
|
[Tut]HTML
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:
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:
<!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:
Dies ist sagt jedem Dokument und Browser das dies eine Html Datei ist.
Das oberste Element in euer HTML Seite dies ist für CSS eine wichtige Information.
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.
Hier kommt der Titel eurer Webseite rein.
<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.
Hier wird unser Head Tag wieder geschlossen.
Ähnlich wie das Header Element ist hier nur für den Inhalt zuständig.
<h1>,<h2><h3>,<h4> sind Überschriften.
<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.
<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.
Unser Body Tag wird geschlossen.
Unser Html Tag wird geschlossen.
Tutorial Nr 2:
- Formulare
- Tabellen
- Videos
<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:
<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.
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.
<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.
<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:
In dem heutigen Tutorial geht es um CSS:
Also wir machen uns eine Datei namens index.html mit folgendem Code:
<html>
<head>
<title>HTML Tutorial Nr.3</title>
<link rel="stylesheet" href="style.css" />
</head>
<div id="content">
<img src="http://www.pspking.de/forum/images/forum.gif" alt="PSPKING" class="bild">
<p class="text"> PSPKING das Forum</p>
</div>
</html>
Und eine 2 Datei namens style.css:
#content{
background-color:#000000;
width:1000px;
height:1000px;
color:#fff;
}
.bild{
width:100%;
height:100%;
}
.text{
color:red;
}
So was uns ausfällt wir haben jetzt einen div tag und ein class Element wir können jedem tag eine class geben aber den div tag nicht.
Div werden mit "#" in css benutzt:
Und classen eben mit ".":
Mit "color" können wir eine Textfarbe bestimmen.
Und der Rest meines Codes ist eigentlich selbst erklärend bei Fragen schreibe ich das Tutorial aus.
Links:
HTML Tags:
So hier ne Liste der HTML Tags die häufig bei mir genutzt werden:
- <img src="" alt="" width="" height=""> Bild
- Hintergrundfarbe zu ändern brauch man CSS: (background-color:#00A388)
- <title></title>Titel der Webseite
- <img src="" alt="" width="" height=""> Bild
- <video src="" width="" height="" autoplay="no" controls="controls"> Video einbindung
- <meta charset="UTF-8" /> Deutsche Umlaute
- <h1 />,<h2/>,<h3 />,<h5 />,<h6 /> Überschriften
- <a href="http://pspking.de">pspking</a> Links.
- <br /> englisch = break zeilen Umbruch
- <p /> paragraph
- <div id=""> CSS wichtig
- Elemente Classe class="class" auch für CSS wichtig
- <link rel="stylesheet" type="text/css" href="style.css">CSS in HTML einbinden
Es werden noch mehr dazu kommen. Links:
Fehleranalyse:
Um schnell einen Fehler zu finden würde ich euch raten mit Firebug oder dem Webinspector zu arbeiten.
HTML-Übersicht Tag(PDF)
<?php
session_start();
$_SESSION['produktiv'] ='ja';
session_destroy();
?>
<script>
con = confirm("Magst du Javascript?");
if (con == false){
window.open
document.write("Ich schon ");
}
gesperrt
Dieser Beitrag wurde zuletzt bearbeitet: 11.03.2013 21:46 von homer.
|
|
11.03.2012 00:43 |
|
Folgende User bedanken sich: |
|
duLouser
Halbprofi
Beiträge: 138
Gruppe: User
Registriert seit: Sep 2011
Status:
Offline
Danke erhalten: 49
|
RE: [Tut]HTML
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 Leben ist ein scheiß Spiel, aber die Grafik ist Geil!!!
Blade! 0.7
|
|
11.03.2012 06:50 |
|
Folgende User bedanken sich: |
|
Gin-Chan
Ehem. Redakteur
Beiträge: 2.258
Gruppe: Female
Registriert seit: Dec 2011
Status:
Offline
Danke erhalten: 2868
|
RE: [Tut]HTML
das tutorial ist viel zu kurz. alles was du geschrieben hast gehört zu den grund-grundkenntnissen, damit wird niemand was anfangen können
ausserdem zu unübersichtlich, siehe duLouser...
|
|
11.03.2012 10:58 |
|
Folgende User bedanken sich: |
|
gruschi
Legende
Beiträge: 1.301
Gruppe: User
Registriert seit: Feb 2010
Status:
Offline
Danke erhalten: 447
|
RE: [Tut]HTML
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!
Dort wird wirklich alles von Grund auf erklärt.
Dieser Beitrag wurde zuletzt bearbeitet: 11.03.2012 11:25 von gruschi.
|
|
11.03.2012 11:25 |
|
Folgende User bedanken sich: |
|
homer
Experte
Beiträge: 575
Gruppe: User
Registriert seit: Nov 2009
Status:
Abwesend
Danke erhalten: 134
|
RE: [Tut]HTML
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
<?php
session_start();
$_SESSION['produktiv'] ='ja';
session_destroy();
?>
<script>
con = confirm("Magst du Javascript?");
if (con == false){
window.open
document.write("Ich schon ");
}
gesperrt
Dieser Beitrag wurde zuletzt bearbeitet: 11.03.2012 14:13 von homer.
|
|
11.03.2012 13:16 |
|
Folgende User bedanken sich: |
|
duLouser
Halbprofi
Beiträge: 138
Gruppe: User
Registriert seit: Sep 2011
Status:
Offline
Danke erhalten: 49
|
RE: [Tut]HTML
ja, sieht jetzt gut aus
Das Leben ist ein scheiß Spiel, aber die Grafik ist Geil!!!
Blade! 0.7
|
|
11.03.2012 15:13 |
|
Folgende User bedanken sich: |
|
Italia-boy
King
Beiträge: 2.834
Gruppe: User
Registriert seit: Oct 2010
Status:
Offline
Danke erhalten: 1161
|
RE: [Tut]HTML
Aber niemand sagt, das er den großen Screen in einen Spoiler packen soll ?
Xbox - Fanboy ^^
|
|
11.03.2012 15:20 |
|
Folgende User bedanken sich: |
|
Gin-Chan
Ehem. Redakteur
Beiträge: 2.258
Gruppe: Female
Registriert seit: Dec 2011
Status:
Offline
Danke erhalten: 2868
|
RE: [Tut]HTML
jetzts siehts besser aus, kriegt ein danke
hab im moment keine zeit das zu lesen, werds aber in zukunft mal tun.
Aber niemand sagt, das er den großen Screen in einen Spoiler packen soll ?
allerdings sollte der große screenshot in einen spoiler
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!
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...
Dieser Beitrag wurde zuletzt bearbeitet: 11.03.2012 15:42 von Gin-Chan.
|
|
11.03.2012 15:40 |
|
Folgende User bedanken sich: |
|
greenieZ
King
Beiträge: 2.239
Gruppe: User
Registriert seit: Sep 2010
Status:
Abwesend
Danke erhalten: 715
|
RE: [Tut]HTML
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.
Dieser Beitrag wurde zuletzt bearbeitet: 11.03.2012 17:04 von greenieZ.
|
|
11.03.2012 16:58 |
|
Folgende User bedanken sich: |
|
Dodo
News-Writer
Beiträge: 1.091
Gruppe: User
Registriert seit: Nov 2011
Status:
Offline
Danke erhalten: 481
|
RE: [Tut]HTML
So ist das Tutorial besser.
Vorher hat man nur den Code abschreiben können, jetzt hast du alles noch erklärt.
|
|
11.03.2012 17:48 |
|
Folgende User bedanken sich: |
|
MatzeO
Legende
Beiträge: 1.878
Gruppe: User
Registriert seit: Apr 2011
Status:
Offline
Danke erhalten: 912
|
RE: [Tut]HTML
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
Dieser Beitrag wurde zuletzt bearbeitet: 11.03.2012 20:40 von MatzeO.
|
|
11.03.2012 20:40 |
|
|
|
king38
V.I.P
Beiträge: 1.610
Gruppe: User
Registriert seit: Sep 2011
Status:
Offline
Danke erhalten: 623
|
RE: [Tut]HTML
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
|
|
11.03.2012 21:48 |
|
Folgende User bedanken sich: |
|
homer
Experte
Beiträge: 575
Gruppe: User
Registriert seit: Nov 2009
Status:
Abwesend
Danke erhalten: 134
|
RE: [Tut]HTML
In dem heutigen Tutorial Nr 2 geht es um :
- Formulare
- Tabellen
- Videos
<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:
<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.
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.
<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.
<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.
<?php
session_start();
$_SESSION['produktiv'] ='ja';
session_destroy();
?>
<script>
con = confirm("Magst du Javascript?");
if (con == false){
window.open
document.write("Ich schon ");
}
gesperrt
Dieser Beitrag wurde zuletzt bearbeitet: 10.03.2013 00:41 von homer.
|
|
11.03.2012 22:02 |
|
Folgende User bedanken sich: |
|
MatzeO
Legende
Beiträge: 1.878
Gruppe: User
Registriert seit: Apr 2011
Status:
Offline
Danke erhalten: 912
|
RE: [Tut]HTML
Dein PM-Fach ist voll
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
Dieser Beitrag wurde zuletzt bearbeitet: 11.03.2012 22:41 von MatzeO.
|
|
11.03.2012 22:33 |
|
Folgende User bedanken sich: |
|
homer
Experte
Beiträge: 575
Gruppe: User
Registriert seit: Nov 2009
Status:
Abwesend
Danke erhalten: 134
|
RE: [Tut]HTML
Dein PM-Fach ist voll
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.
<?php
session_start();
$_SESSION['produktiv'] ='ja';
session_destroy();
?>
<script>
con = confirm("Magst du Javascript?");
if (con == false){
window.open
document.write("Ich schon ");
}
gesperrt
|
|
11.03.2012 22:38 |
|
Folgende User bedanken sich: |
|
|