Share your code

BlackBonjour Administrator

11.09.2012, 21:19

Schönen guten Abend liebe Forengemeinde,

da ich heute anscheinend sehr gute Laune habe, dachte ich mir, ich bring euch mal ein wenig das scripten bei. Das heißt PHP, HTML, CSS (Jannös), JQuery und später vllt Bash für die jenigen, die Linux wie ich besitzen.

Also, dann fangen wir mal an mit HTML (= HyperTextMarkupLanguage )

Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Eleven Games - Post your Stuff Tutorial by BlackBonjour</title>
</head>
<body>
<div id="IchBinEin[I]Div[/I]">
Hallo Eleven Games.
</div>
</body>
</html>

So, dann werd ich mal alles erklären.

Also mit

Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

bestimmt ihr den Doctype. Dieser übermittelt eurem Browser die HTML Version. Ich bevorzuge immer XHTML, ist halt i-wie das gängige. Im Gegensatz zu HTML4 oder gar HTML5 enden bei XHTML Tags mit einem /> anstatt einem einfachen >.

Mit

Quelltext:

<html xmlns="http://www.w3.org/1999/xhtml">

beginnt der eigentliche HTML Bereich. Dort gibt es zwei wichtige Bereiche, einmal den <head> Bereich und einmal den <body> Bereich.

Der Tag <head> übermittlet eurem Browser sowie diversen Robots wie der Google Suchmaschine wichtige Daten über eure Website. Im meinem jetzigen Code findet ihr jetzt noch denn <title> Tag, dieser bestimmt den Titel der aktuellen Seite. Für diesen Thread würde der Titel Post your Stuff >> Forum >> Offtopic - Eleven-Games.

In den <body> Bereich kommt eure eigentliche Website. Hier habt ihr verschiedene Möglichkeiten eure Website zu gestalten. Alte Seiten verwenden häufig Tabellen Designs, welches aber nicht so vorteilhaft ist wie die heutigen Divs Designs. Einziger Vorteil der Tabellen, sie werden bei allen Browsern gleich dargstellt.

Wie man jetzt im Code sieht, ist dort ein Div mit der ID IchBinEinDiv. Die ID ist für div. Funktionen wie z.B. für die CSS gestaltung oder JQuery Funktionen. Desweiteren hat dieses Div einen Inhalt, welches "Hallo ElevenGames" lautet.

Wenn wir das jetzt so speichern als *.html, bekommen wir im Browser nur Hallo Eleven Games gemeldet, der Rest ist besteht aus einem weißem Hintergrund, also leer. Daher kommt jetzt Farbe ins Spiel.

Wir fügen nach dem <title> Tag folgendes hinzu:

Quelltext:

<style type="text/css">
<!--
body {
background-color: <a href="index.php?site=hashtag&tag=FF0000">#FF0000</a>;
}
<a href="index.php?site=hashtag&tag=IchBinEinDIv">#IchBinEinDIv</a> {
color: <a href="index.php?site=hashtag&tag=555">#555</a>;
font-style: Arial;
}
-->
</style>

Wie man sieht, wurde CSS für den <body> Bereich und für das Div IchBinEinDiv angelegt.

Wenn man einer ID CSS zuweisen möchte, geschieht dies mit einer # vor dem ID Namen. Möchte man aber einer Klasse etwas CSS zuweisen, so füge man einen . (= Punkt ) hinzu. CSS Anweisungen befinden sich dann immer zwischen den geschweiften Klammern ( {} ).

Wie man oben im Code sehen kann, befindet sich bei body die Anweisung background-color: #FF0000;. background-color steht für die Hintergrundfarbe, was man ja leicht ablesen kann, wenn man etwas Englischkenntnisse besitzt. Die komischen Hyroglyphen danach sind HEX-Werte, welche die Farbe Rot ergibt.
Das Div #IchBinEinDiv bekommt eine neue, graue Schriftfarbe mittels color: #555; sowie ein neue Schriftart, nämlich Arial mit dem Befehl font-style: Arial;

Unsere Ausgabe wäre nun ein roter Hintergrund mit eine in grauer Farbe geschriebener Text in der Schriftart Arial

--

So.. das wars fürs erste. Ich werde auf jedenfall das hier weiterführen, eventuell werd ich dieses Post hier noch editieren und mehr hinzufügen. Wenn ihr etwas bestimmtes sucht in den oben genannten Bereichen, dann postet es doch einfach oder wenn du Lust hast poste doch deinen eigenen Script.
Mit freundlichen Grüßen

BlackBonjour

Und weida gehts....

Ich mach mal einen klassischen Aufbau einer Website:

Quelltext:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BlackBonjour</title>
<link rel="stylesheet" href="/css/style.css" type="text/css" />
<link rel="shortcut icon" href="/images/icon/favicon.ico" type="image/x-icon" />
<script type="">
$(document).ready(function()
{
});
</script>
</head>
<body>
<div id="header">
</div>
<div class="spacer">
</div>
<div id="container">
</div>
<div class="spacer">
</div>
<div id="Footer">
</div>
</body>
</html>

So... jetzt haben wir die Grundstruktur. Aber wenn wir diese im Browser öffnen, dann ist da noch nichts. Klar auch, wir haben keinen Inhalt, der kommt jetzt aber:...

Quelltext:

<div id="container">
Lorem Ipsum... ...unsere Testsite by BlackBonjour<br />
Eleven Games Rulez<br />
<br />
:P
</div>

So... schon haben wir etwas Inhalt, der natürlich nach belieben geändert werden kann. Der ein oder andere wird am Ende eines Satzes die <br />'s bemerkt haben. Diese stehen für break, also sie erzeugen einen Umbruch, da der Satz sonst in einer Reihe weitergehen würde.
So, nun stellt sich aber die Frage, wollen wir wirklich nur einen Seiteninhalt haben? Um später mehrere Texte lesen zu können, muss man ja auch Buttons haben, um den Inhalt wechseln zu können.
Das heißt, wir bauen uns jetzt ein Menü:

Quelltext:

<div id="header">
<div class="button">
Home
</div>
<div class="button">
Testseite
</div>
</div>

So, nun hätten wir zwei Buttons, einmal Home und einmal Testseite. Wie man im Code sehen kann, diesmal Klassen zum Einsatz, dazu aber später mehr. Nun sieht man auch die Buttons auf der Website, aber so werden diese nicht funktionieren, da sie nicht verlinkt sind. Dies können wir ganz einfach machen...

Quelltext:

<a href="HIER KOMMT DER LINK">HIER KOMMT DER NAME DES LINKS</a>

So sieht dann ein einfacher Link aus. Für unseren Beispiel könnte der Link nun wie folgt aussehen:

Quelltext:

<a href="http://www.beispielseite.de">Home</a>

Oder man kann auch noch weitere Attribute hinzufügen um z.B. beim klick auf den Link einen neuen Browserfenster geöffnet zu bekommen. Dies würde dann wie folgt aussehen:

Quelltext:

<a href="http://beispielseite.de“ target="_blank">Home</a>

Kurze Zusammenfassung => Mit dem Attribut href="" bestimmen wir den Link, also die Zielseite, wie man Websites verlinken kann, wird gleich erklärt. Mit dem Attribut target="" kann man, wie schon beschrieben, das Zielfenster auswählen, also soll sich ein neues Fenster öffnen, etc.
Dann hier noch mal kurz was zu den Links/Pfaden:

absolute Pfade

Absolute Pfade können z.B. wie folgt aussehen:

Quelltext:

http://beispielseite.de/images/gallery/2008/haha.jpg
/images/gallery/2008/haha.jpg

Das heißt, bei absoluten Pfaden wird immer vom Root angefangen, also dem Hauptverzeichnis, ein Verzeichnis zu suchen.

relative Pfade

Relative Pfade hingegen sehen schon anders aus:

Quelltext:

../images/gallery/2008/haha.jpg
images/gallery/2008/haha.jpg

Im ersten Beispiel wird aus dem aktuellem Verzeichnis rausgegangen und dann in den images Verzeichnis gewechselt.
Beim zweitem Pfad siehts schon anders aus, dort wird nämlich im aktuellem Verzeichnis nach dem images Verzeichnis gesucht.

So, dann kommen wir nochmal kurz zu dem Unterschied zwischen ID und CLASS. Also... ID's müsste eigentlich jeder kennen, sie sind in der Regel einzigartig, daher wird es als Fehler gewertet, wenn ein und die selbe ID doppelt verwendet wird. Denn für diese Aufgabe sind Klassen gedacht ( class ). Diese können mehrfach verwendet werden, siehe class="spacer".

So, wenn man dann die Klassen kennt, kann man diese dann mit CSS gestalten, siehe erstes Tutorial.

Soweit so gut, nun kommt noch der Footer, diesen können wir wie folgt gestalten:

Quelltext:

<div id="Footer">
Copyright © by Max Mustermann <?php echo date('Y'); ?>
</div>

Eigentlich simpel oder? Hier gibts nur zwei Sachen zu erklären.
1. © ist ein Sonderzeichen, welches folgendes ausgibt: ©
2. <?php echo date('Y'); ?> gehört zur PHP Sprache, allerdings ist dies nur ein simpler Code, nämlich gibt dieser via echo das aktuelle Jahr aus (date('Y')).

So, nun hätten wir eigentlich die Grundstruktur fertig. Jetzt kannst du sie nach belieben ändern. Folgende CSS Codes können behilflich sein:

margin: 0 auto; => Hiermit wird ein Div zentriert
padding: 0 0 0 0; => Hiermit wird der Innere Abstand von Text zum Rand angegeben, welche jetzt überall 0px ist. Die 4 Nullen stehen für OBEN RECHT UNTEN LINKS

Es kann nützlich sein am Anfang einer CSS folgenden Code zu verwenden:

Quelltext:

* {
margin: 0;
padding: 0;
}

Mit diesem Code werden in der Regel die margin und padding Werte für alle Browser gleichgesetzt, nämlich 0px. Nur der Internet Explorer macht öfters seine eigenen Sachen.
So, schon ist die Seite fertig bzw. ihr könnt sie nun nach belieben gestalten.
Mit freundlichen Grüßen

BlackBonjour

Edit: Texte korrigiert, erweitert und übersichtlicher gestaltet...

1 mal bearbeitet, zuletzt von BlackBonjour am 29.01.2017 13:43

🤙

2 Benutzer(n) gefällt dieser Beitrag

Jannes23, Dennis B

BlackBonjour Administrator

20.09.2012, 20:33

Guten Abend liebe Forengemeinde,

heute fang ich mal etwas mit PHP an, da HTML und CSS anscheinend die wenigsten interessiert. Desweiteren sind HTML und CSS nicht ein all zu großes Thema.

Ich würde heute mit einem Kontaktformular anfangen, welches die Besucherdaten übernimmt und dann via PHP eine Mail sendet.

Wir fangen mit dem Formular an, welches den Namen, die Mailadresse, den Betreff und den eigentlichen Text fordert.

Quelltext:

<html>
<head>
<title>Kontaktformular</title>
</head>
<body>
<form>
</form>
</body>
</html>

So hätten wie schonmal das Grundgerüst. <form> steht hier für Formular, welches dann später die Informationen weiterleitet. Aber damit die Infomationen überhaupt weitergeleitet werden, müssen wir bestimmen wohin und welche Typ/Methode.

Also, wir ersetzen <form> durch folgendes:

Quelltext:

<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">

Der Attribut action definiert das Ziel bzw. die Zieldatei, zwischen denn " " findet ihr nun den ersten PHP-Code. Dieser Code sagt, dass das Ziel des Formulars die selbe Datei ist.
Erläuterung:

<?php	mit diesem Code beginnt jeder PHP-Code
echo	gibt etwas aus
$_SERVER	ist ein Array, welches viele Informationen des Besuchers besitzt
$_SERVER['PHP_SELF']	beinhaltet die gerade besuchte Datei
?>	beendet den PHP-Code

So, nun fügen wir die Eingabefelder ein. Dabei werden wie eine Tabelle erstellen, damit es bei allen Browsern ungefähr gleich aussieht.

Quelltext:

<table border="0">
<tr>
<td>Name:</td>
<td><input type="text" name="Name" style="width: 300px;"></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input type="text" name="Mail" style="width: 300px;"></td>
</tr>
<tr>
<td>Betreff:</td>
<td>
<select name="Subject">
<option value="Support">Support</option>
<option value="Anfrage">Anfrage</option>
<option value="other">Sonstiges</option>
</select>
</td>
</tr>
<tr>
<td>Nachricht:</td>
<td><textarea name="Msg" style="width: 300px; height: 175px;"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" value="Kontaktformular absenden"></td>
</tr>
</table>

Kurze Erklärung:

Mit <table> beginnt jede Tabelle, sie ist das Grundgerüst.
Mit <tr> erstellen wir eine Tabellenreihe.
Mit <td> erstellen wie eine Tabellenspalte, dabei ist zu achten, dass jede Reihe am besten die selbe Anzahl an Spalten hat, damit man ein schönes Endergebnis bekommen.
Mit <input> erstellen wir ein Eingabefeld. Dabei bestimmt das Attribut type den Eingabetypen, in diesem Falle "text". Weitere Typen sind "password" und "submit". Mit dem Attribut "Name" geben wir dem Eingabefeld einen Namen, dies ist wichtig um später das Kontaktformular zu bearbeiten. Das "style" Attribut ist ein CSS Attribut, welches im meinen ersten Beitrag etwas erklärt wurde. Dabei bestimmt width die Breite des Eingabefeldes.
Mit <select> erstellen wir ein Auswahlmenü. Dabei werden die einzelnen Optionen zwischen den Tags <option> eingetragen. Zusätzlich bekommen die <option> Tags den Attribut "value", womit wir den Optionen ein Ergebnis geben.
Mit <textarea> erstellen wir ein Textfeld, im welchen man im Gegensatz zum Eingabefeld mehrere Sätze schreiben kann.
Mit <input type="submit"> erstellen wir einen Absende Button, im welchem "Kontaktformular absenden" steht.

So liebe Leute, nun kommen wir zum eigentlichen PHP Teil. Als ersten fügen wir am Anfang des Editors, also vor dem Formular, folgenden Code ein:

Quelltext:

<?php
?>

So, nun tragen wir darin folgendes ein:

Quelltext:

if($_POST)
{
if(isset($_POST['Submit']))
{
...
}
}

Kurze Erklärung:

Mit if($_POST) prüfen wir, ob irgendwelche Eingaben, Ergebnisse, etc. abgesendet wurden. Das heißt, sobald wir den Absendebutton klicken, ist $_POST == true, also ist vorhanden.
Mit if(isset($_POST['Submit'])) prüfen wir, ob der Absendeknopf betätigt wurde.

Sollten beide Werte false, also nicht der Wahrheit entsprechen, wird ganz normal das Formular angezeigt.

Quelltext:

$name = $_POST['Name'];
$mail = $_POST['Mail'];
$subject = $_POST['Subject'];
$text = $_POST['Msg'];
if($name == '' OR $mail == '' OR $subject == '' OR $text == '')
{
echo 'Bitte alle Felder ausfüllen.';
}

Mit $string = $_POST['INPUTNAME']; übergeben wir die Werte an Variablen, mit welches dann div. Überprüfungen gemacht werden und am Ende dann in die Mail rein kommen.
Bei der if-Abfrage wird geprüft, ob die Variablen leer sind. Sollte dies der Fall sein, wird eine Fehlermeldung ausgegeben.

Quelltext:

else
{
$text = htmlentities($text);
$text = strip_tags($text);
$receiver = 'mailadresse@hoster.domain';
$header = 'MIME-Version: 1.0'."\r\n";
$header .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";
$header .= 'To: EMPFÄNGERNAME <'.$receiver.'>'."\r\n";
$header .= 'From: Kontaktformular DEINE SEITE <'.$mail.'>'."\r\n";
mail($receiver, $subject, $text, $header);
echo 'Das Kontaktformular wurde erfolgreich abgesendet.';
}

Mit "htmlentities" werden spezielle Zeichen wie <> in HTML Zeichen konventiert.
Mit "striptags" werden HTML Tags entfernt.
Mit der Variable $receiver = '...' wird der Empfänger bestimmt.
Mit $header wird die Kopfzeile der Mail definiert, dabei wird ein MIME Typ festgelegt, einen Content Type sowie Empfängername und Absender, welches im unserem Falle das Kontaktformular ist.
Mit der Funktion mail() wird dann die Mail abgesendet.
Nach dem absenden der Funktion wird dann eine Ausgaben erstellt.

Hier nochmal der komplette Code:

Quelltext:

<?php
if($_POST)
{
if(isset($_POST['Submit']))
{
$name = $_POST['Name'];
$mail = $_POST['Mail'];
$subject = $_POST['Subject'];
$text = $_POST['Msg'];
if($name == '' OR $mail == '' OR $subject == '' OR $text == '')
{
echo 'Bitte alle Felder ausfüllen.';
}
else
{
$text = htmlentities($text);
$text = strip_tags($text);
$receiver = 'mailadresse@hoster.domain';
$header = 'MIME-Version: 1.0'."\r\n";
$header .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";
$header .= 'To: EMPFÄNGERNAME <'.$receiver.'>'."\r\n";
$header .= 'From: Kontaktformular DEINE SEITE <'.$mail.'>'."\r\n";
mail($receiver, $subject, $text, $header);
echo 'Das Kontaktformular wurde erfolgreich abgesendet.';
}
}
}
?>
<html>
<head>
<title>Kontaktformular</title>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
<table border="0">
<tr>
<td>Name:</td>
<td><input type="text" name="Name" style="width: 300px;"></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input type="text" name="Mail" style="width: 300px;"></td>
</tr>
<tr>
<td>Betreff:</td>
<td>
<select name="Subject">
<option value="Support">Support</option>
<option value="Anfrage">Anfrage</option>
<option value="other">Sonstiges</option>
</select>
</td>
</tr>
<tr>
<td>Nachricht:</td>
<td><textarea name="Msg" style="width: 300px; height: 175px;"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" value="Kontaktformular absenden"></td>
</tr>
</table>
</form>
</body>
</html>

Ich hoffe euch hat das Tutorial gefallen. Bei fragen meldet euch bitte hier, auch Anregungen können hier gepostet werden.
Mit freundlichen Grüßen

BlackBonjour

4 mal bearbeitet, zuletzt von BlackBonjour am 08.10.2012 21:23

🤙

1 Benutzer(n) gefällt dieser Beitrag

///M

Amaury Administrator

08.10.2012, 19:28

Eben drüber geschaut und getestet.
Hast du dein Code getestet? Den bei mir spuckt diese Zeile einen Error:

Quelltext:

$text = striptags($text);

Jannes ist der Beste!

Gameshots.eu

1 Benutzer(n) gefällt dieser Beitrag

BlackBonjour

BlackBonjour Administrator

08.10.2012, 21:20

Ist das der Kontaktformular? Sicherlich oder. Also das ganze ist theoretisch, also nicht getestet. Werd mich mal gleich ran setzen und gucken was da falsch ist bzw. müsste es daran liegen, dass ich ausversehen striptags anstatt strip_tags geschrieben haben. Ich werd das ganze noch auf weitere Fehler prüfen. Danke für den Hinweis.

EDIT: Funktioniert jetzt einwandfrei. Ist aber wie schon geschrieben nur ein sehr simpler Kontaktformular. Fehler war auch wie bereits erwähnt der strip_tags, der Rest funktioniert.

1 mal bearbeitet, zuletzt von BlackBonjour am 08.10.2012 21:24

🤙

BlackBonjour Administrator

18.10.2012, 21:06

Da es hier bisher nur um Website ging, möchte ich bei dem Thema bleiben und euch die SEO Optimierung näher bringen.

Was ist SEO Optimierung?

SEO Optimierung dient der Pageranking. Je höher das Pageranking ist, umso eher wird man z.B. bei der Google Suche gefunden. Dabei gehört zur SEO Optimierung nicht nur die Keywords oder die Beschreibgung, sondern noch viel mehr.

Kurz gesagt gehören zur SEO Optimierung die Komprimierung, richtige Meta Daten, die richtige Auswahl des charsets, kein bis wenig Spagetti Code, ein valider HTML Code sowie CSS Code, bei Bildern ein Alternativ Text, bei Links ein Titel Attribut, eine robots.txt, eine sitemap.xml usw..

Die Komprimierung kann man verschieden machen. Wer z.B. CMS Systeme wie Wordpress benutzt, muss sich da eig. keine große Sorgen machen, den die machen das dort automatisch. Ansonsten kann man dies durch eine .htaccess machen. Der Code würde so aussehen:

Quelltext:

<IfModule mod_deflate.c>
<FilesMatch "\\.(js|css|html|xml|php)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Mit diesem Code werden Javascripts, CSS, HTML, XML und PHP Dateien komprimiert. Die Komprimierung bewirkt eine schnellere Ladezeit, was vorallem für Besucher mit geringerer Internetgeschwindigkeit von Vorteil ist.

Für die Meta Tags gilt, nur das nötigste rein, der Rest kann von Bots als Spam markiert werden. So sollte man bei den Keywords darauf achten, dass diese nicht mehr als 10 Wörter sind, minimum solten es aber schon 4 - 6 sein. Bei den Beschreibungen gilt, min. 120 Zeichen, max. 160 Zeichen und max. 2 Sätze. Die Beschreibung wird bei der Google Suchmaschine angezeigt. Keywords und Beschreibung sollten die Website möglichst gut beschreiben/wiederspiegeln.

Den Rest werd ich hier mal posten:

Quelltext:

<title>SEITENTITEL</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="copyright" content="DEIN COPYRIGHT" />
<meta name="author" lang="LÄNDERKÜRZEL, FÜR DEUTSCHLAND "de" content="DER AUTOR DER WEBSITE" />
<meta name="robots" content="Index,Follow" />
<meta name="description" content="HIER KOMMT DIE BESCHREIBUNG DEINER WEBSITE" />
<meta name="keywords" content="HIER KOMMEN DIE KEYWORDS DEINER WEBSITE" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />

Was auch ziemlich auf den Magen geht sind Spagetti Codes. Spagetti ist zwar lecker, aber der Browser mag sie nicht. Als Spagehtti Codes gelten z.B. Style Attribute:

Quelltext:

<a href="#" style="ICH STYLE MAL DEN GANZEN LINK MIT DEM STYLE ATTR, SCHADET JA NICHT xD">Bla</a>

Auch Elemente wie <b></b> oder <i></i> gehören zum Spagetti Code und sollten, wenn möglich, vermieden werden.

Was auch wichtig ist ist die Auswahl des richtigen charsets und der HTML Version. Es wird empfohlen XHTML zu verwenden, oder wer möchte XHTML 1.1. Wer hat XHTML verwendet erhält laut seitenreport.de eine 80% gute Bewertung, bei richtig angewendeter XHTML 1.1 laut seitenreport.de 100%.

Desweiteren sollte man den HTML Code Fehlerfrei schreiben. Dabei ist zu beachten, dass im Gegensatz zu HTML 4 ein Zeilenumbruch mit <br /> anstatt <br> erzeugt wird. Im Allgemeinen gilt, dass XHTML Elemente sich selbst schließen müssen, wenn diese nicht aus zwei Teilen bestehen wie z.B. Link Elemente ( <a> ).

Desweiteren sollte man bei Bildern immer einen Alternativ Text ( alt=" ") angeben, den es kann vorkommen, dass bei älteren Browsern z.B. die Bilder später geladen werden oder überhaupt nicht. Dann sollte stattdessen ein Text erscheinen. Bei Links gilt, dass diese einen Titel Element beinhalten sollten.

Okay... man muss das Ganze nicht umbedingt erfüllen um eine gute Platzierung zu bekommen, aber es ist von Vorteil.

In meinen Augen ist eleven-games.net ein sehr gutes Beispiel. Es hat täglich 1000 Besucher, wer Cobra 11 Addons eingibt bekommt zich Links von eleven-games.net angezeigt. Aber der Schein trübt. Laut seitoskop.de hat diese Website trotz guter Platzierung nur 46% erreicht.

Und damit kommen wir zum wichtigsten Punkt der SEO Optimierung, der Inhalt.

eleven-games lebt hauptsächlich vom Inhalt, weshalb diese Seite auch diese richtig gute Platzierung hat. Da würde ich zum Beispiel mit meiner Website auch nach mehreren Monaten und Jahren einfach nicht rankommen, trotz meiner 100% Bewertung und weiß der Geier was. Was ich damit sagen möchte, achtet immer auf euren Inhalt, den nur damit könnt ich potenzielle Besucher bekommen.

Ich hoffe euch gefällt der Beitrag und ich würde mich über Kommentare, Kritik, etc. freuen. Also posten, posten, posten

LINKS:

W3C BlackBonjour: http://validator.w3.or...i=blackbonjour.square7.ch
W3C eleven-games: http://validator.w3.or...&uri=eleven-games.net
Seitoskop BlackBonjour: http://www.seitoskop.d...l=blackbonjour.square7.ch
Seitoskop eleven-games: http://www.seitoskop.d...even-games.net/index.phpt

Ich möchte noch hier eine Anmerkung hinterlassen:

Ich möchte hiermit jetzt nicht eleven-games schlecht darstellen, im Gegensatz, diese Links sagen garnichts aus, den wie schon geschrieben kommt es hauptsächlich auf den Inhalt an, und da schneiden Seiten wie eleven-games am besten ab.

3 mal bearbeitet, zuletzt von BlackBonjour am 01.01.1970 01:00

🤙

1 Benutzer(n) gefällt dieser Beitrag

Jannes23

BlackBonjour Administrator

21.11.2012, 20:56

Schade das hier keine Interesse besteht, dadurch, dass hier kaum was geschrieben wird, kann ich leider nicht erfahren, wo eure Interessen liegen, was ich verbessern könnte, oder was ihr nicht versteht u.s.w.

Daher würd ich mich jetzt freuen, wenn ihr Mal schreiben könntet, was ihr den "lernen" wollt im Bereich HTML / CSS / PHP / jQuery. Ich steht euch jeder Frage zur Verfügung, also postet was das Zeug hält.

Ansonsten hat ich vor, wenn den Interesse besteht, wie man mit Hilfe von CSS, PHP und Javascript eine kleine Bildergalerie machen kann. Dabei werden die Bilder wie man es von Instagram kennt viereckig angezeigt, was ja garnicht so schlecht aussieht, dabei ist es egal, ob euer Bild Hoch- oder Querformat ist. Wenn nöitg kann ich auch eine kleine Demo vorbereiten.
Mit freundlichen Grüßen

BlackBonjour

🤙

1 Benutzer(n) gefällt dieser Beitrag

///M

AfP38 Profi

22.11.2012, 14:08

BlackBonjour schrieb:
...
Ansonsten hat ich vor, wenn den Interesse besteht, wie man mit Hilfe von CSS, PHP und Javascript eine kleine Bildergalerie machen kann. Dabei werden die Bilder wie man es von Instagram kennt viereckig angezeigt, was ja garnicht so schlecht aussieht, dabei ist es egal, ob euer Bild Hoch- oder Querformat ist. Wenn nöitg kann ich auch eine kleine Demo vorbereiten.
Mit freundlichen Grüßen

BlackBonjour

Hi, BlackB.
Ich dachte, ich gehe mal auf deinen Wunsch ein:
Ja, mach doch mal eine Bilder Galerie mit Javascript, CSS und PHP. Also ich finde es gut was du uns erklären willst. Schön wäre auch, wenn du erklärst, wie man einen beleglichen Header für Seine Website baut. Sowas wie hier oben auf EG mit dem <--hin--und--her--> . Und wie man da dann Hyperlinks drauf setzt.

LG

Ich habe: Nitro, Crash Time, Highway Nights, Das Syndikat, Undercover und World Racing 2 =)

BlackBonjour Administrator

22.11.2012, 18:10

Hi AFP, ich wei jetzt nicht was du mit beweglichen Header meinst. Meinst nen Slider, einen festen Feld am oberen Rand (eg Mobile) oder Lauftext? Slider und Lauftext sind mittels Javascript hinzukriegen, welches ich später schreiben könnte. Wenn du den festen Feld meinst, danb musste per Css dem HTML Element nen position: fixed zuweisen und am besten noch top: 0.

Edit: Slider

Mach noch heute schnell, dauert ja nicht lange.

1 mal bearbeitet, zuletzt von BlackBonjour am 22.11.2012 18:15

🤙

///M Experte

22.11.2012, 18:13

Er meint das mit der Aktuellen Datenbank und dem Manager von

FloV., wo sich das Bild immer hin und her bewegt. Das mit der roten Update-Schrift und so.

[YouTube] Taniell

https://abload.de/img/bmw_m4_green_signaturh9ktl.png

AfP38 Profi

22.11.2012, 18:30

ja, wie ///M schon sagte, meine ich das mit der Aktuellsten DB und dem Addon-Database-Programm, was sich immer bewegt siehe oben.

http://eleven-games.net/images/sliders/22.jpg

und

http://eleven-games.net/images/sliders/1.jpg

.

Wäre nett wenn du sowas machst.

Und kannst du erklären, wie man Downloads macht. Dass ich z.B. auf Das Bild klicke (Hyperlink auf Bild gelegt) und das Bild dann nicht in einem neuen Tab oder auf einer einzelnen Seite angezeigt wird, sondern dann gleich gedownloadet wird. Bräuchte ich für .psd Dateien, da mein Browser sie nicht anzeigen kann.

LG

Ich habe: Nitro, Crash Time, Highway Nights, Das Syndikat, Undercover und World Racing 2 =)

Anmeldung

Forum

Battle Gewinner

Dateien

Themen

Tutorials

Letzte Besucher

Top Partners

Soziale Netzwerke

Seiten Statistiken