Archiv der Kategorie: Programmier Sprachen

Alles über sogennante Web-Programmier Sprachen.

HTML Umlaute und Sonderzeichen

Ihr habt euch bestimmt schon öfter über die fehlerhafte Darstellung der HTML Umlaute und Sonderzeichen wie zum Beispiel „ö, ä, ü und ß“ in euren Webseiten gewundert. Dieses Problem hat mich in meiner Anfangszeit immer wieder verfolgt. Man kann dies aber in HTML ganz leicht umgehen indem man für diese Umlaute bzw. Sonderzeichen eine andere Schreibweise nimmt. Mit der hier erklärten Schreibweise sehen eure Texte immer gut bzw. fehlerfrei aus, egal ob Ihr UTF8, ANSI oder welche Zeichenkodierung auch immer verwendet. Ich zeige euch nun die wichtigsten Zeichen in diesem Beitrag, alle anderen könnt Ihr auf einer Sonderzeichen Tabelle nachlesen welche ich weiter unten verlinken werde.
 

Übersicht über die wichtigsten HTML Umlaute und Sonderzeichen:

ä = ä
ö = ö
ü = ü
Ä = Ä
Ö = Ö
Ü = Ü
& = &
< = &lt;
> = &gt;
« = &laquo;
» = &raquo;
“ = &quot;
© = &copy;
® = &reg;
™ = &trade;
§ = &sect;
ß = &szlig;
€ = &euro;
£ = &pound;
| = &#124;
• = &bull;

Es gibt natürlich noch, wie schon oben erwähnt, jede Menge andere Sonderzeichen welche zwar nur selten gebraucht werden, über welche man aber dennoch bescheid wissen sollte.
Quelle: HTML Sonderzeichen Tabelle
 
Jetzt habt Ihr keine Probleme mehr durch HTML Umlaute und Sonderzeichen. Damit sollten alle Darstellungfehler in euren Webseiten Vergangenheit sein. Bei Fragen, Anregungen oder konstruktiver Kritik einfach einen Kommentar hinterlassen oder im Forum Posten. Und wie gesagt falls Ihr noch mehr Sonderzeichen braucht seht einfach in der Quelle zu diesem Beitrag nach, dort sind wirklich ausnahmslos alle Sonderzeichen aufgeführt, seien sie auch noch so unwichtig. Ich hoffe ich konnte euch mit diesem Beitrag weiterhelfen.
Check This Out

Rechnen mit CSS oder die „calc()“ Funktion

In CSS kann man zum Beispiel die Breite oder die Höhe eines Objektes auch berechnen lassen. Dies ist sehr nützlich bei variablen Größen der Objekte, oder dem berühmten Problem mit „width:100%“ und einer „margin“ oder „padding“ Angabe. Das „Margin“ bzw. „Padding“ wird ja leider nicht mit in die Breite oder Höhe mit eingerechnet. So sind Objekte mit einer Breite oder Höhe von 100 Prozent und einem Margin oder Padding von 10 Pixel immer 20 Pixel zu Hoch bzw. zu Breit. Diese Probleme kann man durch berechnen der Größen perfekt umgehen. Man verwendet dazu die „calc()“ Funktion. Ich zeige Euch einfach einige Beispiele dazu.
 
Beispiel: die Breite eines Objektes berechnen.
#TestBox {
    /* Es gilt Punkt vor Strich */
    width: calc(100% / 4 - 2 * 5px);
}

Die Breite beträgt hier ein viertel des gesamt zur Verfügung stehenden Raumes minus 10 Pixel. Ihr kennt es ja aus der Schule, euer Mathe Lehrer hat es bestimmt 1000 mal gepredigt. Es gilt auch hier immer „Punkt vor Strich“ genau wie in der Schule.
 
Beispiel: Breite und Höhe eines Objektes berechnen mit einem „Padding“ von 10 Pixel.
#TestBox {
    /* Das Padding muss von der gesamt Breite abgezogen werden */
    padding: 10px;
    width: calc(100% - 2 * 10px);
    height: calc(100% - 2 * 10px);
}

In diesem Fall füllt das Objekt exakt den zur Verfügung stehenden Raum zu 100 Prozent aus weil wir die 20 Pixel Padding von den 100 Prozent abziehen und wir so keine „Übergröße“ des Objektes bekommen.
 
Beispiel: einen Text vertikal zentrieren bei einer Box mit variabler Höhe.
#TestBox:before {
    /* Wir platzieren den Text auch via CSS */
    content: "Dummy Text";
    font-size: 18px;
    left: 0;
    position: absolute;
    text-align: center;
    top: calc(50% - 9px);
    width: 100%;
}

Die Box ist absolut positioniert und füllt von der Breite her gesehen den ganzen ihr zur Verfügung stehenden Raum aus. Sie beginnt ganz links und der Text wird horizontal zentriert ausgegeben. Die vertikale Position des Textes wird durch den „top“ Wert angegeben, und genau diesen lassen wir berechnen (50% der gesamt zur Verfügung stehenden Höhe minus halbe Font Größe). Damit haben wir den Text genau vertikal zentriert, egal welche Höhe die Box bekommt.

Responsive Webdesign mit CSS Media Queries

Damit eine Webseite auf jedem Endgerät gut lesbar bzw. benutzbar ist solle man heutzutage ein „Responsive Design“ für seine Webseite benutzen. So ein Resonsive Design setzt man am besten mit „CSS Media Queries“ um. Mit diesen Media Queries kann man via CSS festlegen was bei verschiedenen Bildschirmgrössen mit der Webseite passieren soll. Man verschachtelt sozusagen seinen CSS Code in mehrere Bereiche. Als erstes schreibt man die allgemeinen Formate welche immer gelten und danach erstellt man die Media Queries wobei jedes Query für ein Endgerät bzw. eine Bildschirmgrösse. Man muss nicht unbedingt alle Queries anwenden, wie und in welchem Umfang man das macht muss jeder für sich selbst bzw. für seine Webseite herausfinden.

Es gibt folgende Arten von Media Queries:

device-width:
/* Breite des Bildschirms eines Endgerätes */
@media screen and (device-width: 640px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

device-height:
/* Höhe des Bildschirms eines Endgerätes */
@media screen and (device-height: 480px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

width:
/* Breite des Browserfensters eines Endgerätes */
@media screen and (min-width: 640px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

height:
/* Höhe des Browserfensters eines Endgerätes */
@media screen and (max-height: 480px) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

orientation:
/* Haltung des Endgerätes, Querformat (landscape) oder Hochformat (portrait) */
@media all and (orientation: landscape) {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

print:
/* Dieses Media Query ist für die Formatierung der Druckansicht */
@media print {
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

 
Es gibt natürlich noch jede Menge andere verschiedene Queries aber ich denke dies sind die wichtigsten die Ihr braucht. Ich persöhnlich verwende lediglich zwei von den oben angezeigten Media Queries, aber wie schon gesagt, dies muss jeder für sich selbst herausfinden. Hier habt ihr eine Liste aller Queries, es wird euch bei dieser Liste auch gleich angezeigt ob der Browser den Ihr gerade verwendet die Queries unterstützt oder nicht.
Übersicht CSS Media Queries
 
Man kann die Queries auch miteinander sozusagen Verknüpfen mit Hilfe einer „and“ Anweisung.
Folgendes Beispiel steht für ein iPad im „Landscape“ Modus:
@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation: landscape){
    .CSS-Klasse {
        /* Hier kommen eure CSS Formate hin */
    }
}

 
Es gibt bei GitHub eine schöne Template Vorlage wo einige Endgeräte sozusagen vordefiniert sind. Natürlich müsst ihr die Formate selbst passend für eure Webseite in die Queries einfügen aber wenigstens müsst Ihr euch dann um die definition der Queries für die einzelnen Endgeräte nicht mehr kümmern.
GitHub CSS3 Media Queries Template
 
So das reicht erstmal denke ich, ich hoffe Ihr konntet alles verstehen und umsetzen. Bei Fragen oder Anregungen zu diesem Tutorial hinterlasst einfach unten unter dem Tutorial einen Kommentar oder eröffnet ein Thema im Forum wenn Ihr eine Diskussion darüber starten wollt.
Viel Spass beim nachmachen und austesten.

MySQL Verbindung und einfache Datenbank Abfragen

Ich möchte euch hier zeigen wie man eine Verbindung zu einer MySQL Datenbank herstellt, dann eine einfache Datenbank Abfrage macht und die Daten auf einer Webseite anzeigt.
Als erstes machen wir den Verbindungsaufbau zur Datenbank:
<?php
$mysql = mysql_connect($DatenbankAdresse, $DatenbankName, $DatenbankPasswort) or die (mysql_error());
mysql_select_db($TabellenName, $mysql ) or die (mysql_error());
?>

Die vier Variablen ($DatenbankAdresse, $DatenbankName, $DatenbankPasswort und $TabellenName) muss man vorher korrekt festlegen. In vielen Fällen reicht als $DatenbankAdresse der berühmte „Localhost“. Die anderen Angaben muss jeder in seinem Fall selbst festlegen.
<?php
$DatenbankAdresse = "Localhost";
?>

Nun haben wir eine Verbindung zur Datenbank hergestellt, jetzt wollen wir die Tabelle „User“ Abfragen welche eine ID (id), einen Vornamen (firstname), einen Nachnamen (lastname), einen Nickname (nickname) und eine Email Adresse (email) enthält. Wir möchten gern den kompletten Tabelleninhalt ausgeben:
<?php
$sql = "SELECT * FROM User";
$result = mysql_query($sql) or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
    echo "$row->id, $row->firstname, $row->lastname, $row->nickname, $row->email<br />";
}
?>

Wenn man nur einen gewissen User ausgeben möchte, z.B. den mit dem Vornamen „Andre“, dann sieht da so aus:
<?php
$sql = "SELECT * FROM User WHERE firstname = 'Andre' LIMIT 1";
$result = mysql_query($sql) or die(mysql_error());
$row = mysql_fetch_array($result)
echo "$row->id, $row->firstname, $row->lastname, $row->nickname, $row->email";
?>

Wenn wir alle ausser diesen einen User haben wollen geht das so:
<?php
$sql = "SELECT * FROM User WHERE firstname != 'Andre'";
$result = mysql_query($sql) or die(mysql_error());
while ($row = mysql_fetch_array($result)) {
    echo "$row->id, $row->firstname, $row->lastname, $row->nickname, $row->email<br />";
}
?>

Man kann die Ausgaben auch Sortieren, dazu zeige ich euch nun die entsprechenden Abfragen. Wir sortieren unsere Datensätze nach Nachnamen:
<?php
// Aufsteigend sortieren
$sql = "SELECT * FROM User ORDER BY lastname ASC";
?>

Und das Gegenteil:
<?php
// Absteigend sortieren
$sql = "SELECT * FROM User ORDER BY lastname DESC";
?>

Ich denke das reicht für den Einstieg erstmal, jetzt bleibt nur noch eines. Wir beenden die MySQL Verbindung wieder, das geht in unserem Fall so:
<?php
mysql_close($mysql);
?>

Nun sind wir fertig, ich hoffe Ihr konntet alles verstehen. Falls nicht hinterlasst einfach einen Kommentar zum Thema unten, ich versuche dann das so schnell wie möglich zu beantworten.
Viel Spass und Erfolg beim Testen.

Mit dem HTML Blockelement „div“ arbeiten

Ein HTML „div“ ist wie die Überschrift schon sagt ein Blockelement. Das „div“ steht für Division und wird von allen gängigen Browsern unterstützt. Alles was zwischen dem Start-Tag und dem End-Tag des Div’s steht wird als ein Teil dieses Bereiches angesehen. Man benutzt dieses Element um Bereiche einzugrenzen welche man zum Beispiel mit CSS formatieren möchte. Dazu teilt man dem Element dann eine „Klasse (class)“ oder eine „ID (id)“ zu.
 
So wird ein „div“ erstellt:
<div id="div_01" class="header">
    Hier stehen dann alle Elemente welche man durch den "div" eingrenzen möchte.
</div>

Die id kann nur einmalig vergeben werden, muss also eindeutig sein, der Klasse können mehrere Elemente angehören, bzw. mehrere „div’s“ können die selbe Klasse haben, aber nur eine id.
 
Jetzt kann man den „div“ mit CSS formatieren, das sieht so aus:
<style type="text/css">
    .header {
        /* Element wird relativ positioniert */
        position: relative;
        /* Element steht links und weitere Elemente umfliessen es von rechts her */
        float: left;
        /* Äusserer Randabstand = 0 */
        margin: 0;
        /* Innerer Randabstand = 0 */
        padding: 0;
    }
 
    #div_01 {
        /* Hintergrundfarbe des Elements wird festgelegt */
        background: #BCBCBC;
        /* Schriftfarbe des Elements wird festgelegt */
        color: #333333;
    }
</style>

Ihr könnt in den „div“ reinpacken was Ihr wollt, da sind eigentlich keine Grenzen gesetzt. Und er akzeptiert die globalen HTML Attribute wie z.B. „align=“center“, width=“100%“, height=“200″ und noch viele mehr. Man sollte dies aber soweit möglich komplett über CSS regeln, das macht einen wesentlich übersichtlicheren Code und hat sich im Prinzip schon Standart durchgesetzt. Ich regle auch soweit es geht alles über CSS.
 
Ich hoffe dieser Beitrag hilft euch weiter, viel Spass beim Testen.