html Archive - MetinCelik.de

Kostenlose Editoren für HTML, CSS & PHP

MetinC — Mon, 16 Mar 2026 22:09:38 +0000

Opensource Editoren:
Kompozer
Notpad 2 – mit Syntaxhighlighting für mehr Programmiersprachen und Scriptsprachen
Notpad++

Ich empfehle für professionelle Webentwickler die Webentwicklungssoftware Dreamweaver von Adobe. Adobe bietet ein Trialversion zum Testen, hier kann man es runterladen.

🔧 Unsere Empfehlung

▲

Vercel

Hosting fuer Next.js, React und Frontend-Projekte mit Edge Network.

Free / Pro $20/Mo

Vercel testen »

* Affiliate-Link – bei Kauf erhalten wir eine Provision.

💻

Cursor IDE

Die AI-first IDE – VS Code Fork mit nativer KI-Integration.

Free / $20/Mo

Cursor testen »

* Affiliate-Link – bei Kauf erhalten wir eine Provision.

😀

Figma

Kollaboratives Design-Tool für UI/UX, Prototyping und mehr.

ab kostenlos

Kostenlos starten »

* Affiliate-Link – bei Kauf erhalten wir eine Provision.

Der Beitrag Kostenlose Editoren für HTML, CSS & PHP erschien zuerst auf MetinCelik.de.

Validierung der Webbrowser für Unterstützung der HTML5 Spezifikation

MetinC — Tue, 18 Apr 2017 14:41:55 +0000

Die HTML5Test.com ist eine Website, mit der Sie überprüfen können, wie gut die Webbrowser die aktuellste HTML 5-Spezifikation unterstützen. Im Laufe der Zeit werden die offiziellen Spezifikationen von HTML5 weiterentwickelt, sodass man auf der Seite von HTML5Test.com überprüfen kann, wie aktuelle Spezifikationen heute von dem jeweiligen Web Browser unterstützt werden.

Heute teste ich einige Web Browser, ob sie die HTML 5 Spezifikationen unterstützen. Und möchte die Entwicklung der einzelnen Web Browser betrachten. Jeder Browser kann 555 Punkte erreichen.

Da ich selbst seit je Firefox von Mozilla treu geblieben bin, ist es mein erster Test an dem
Mozilla Firefox mit der Version 52.0. Mein bevorzugter Web Browser erhält 474 von 555 Punkten. Google Chrome mit der Version 57.0 erhält 519 vonn 555 Punkten. Hier sind einige Spezifikation des Forms in Chrome schon implementiert, wie input type=date, type=month, type=week, type=time, type=datetime-local. Weiterhin fehlen dem Firefox die Spezifikationen der Web Components, wie Custom elements, Shadow DOM und HTML imports. Bei der Kategorie Eingabe fehlt die Pointer Events dem Firefox. Firefox hat auch die Streams Spezifikationen gar nicht implementiert, hingegen kann der Chrome schonmal die Readable Streams unterstützen. In der Kategorie Sicherheit liegt Chrome weit vorn. Die Sicherheitsspezifikationen „Content Security Policy 2“ und „Credential Management“ sind in Firefox nicht implementiert. „Web Authentication / Fido 2 fehlt beiden gänzlich.

Wie validiert man die Unterstützung der HTML5 Spezifikation eines Web Browser?

Man wählt zuerst einen Web Browser, den man validieren möchte. Dann tippt man in der Adressleiste des Web Brwoser die Adresse www.html5test.com und drückt die ENTER Taste. Die HTML5Test.com Webseite lädt und dann erscheint sofort das Ergebnis der HTML5 Unterstützung auf der Webseite in großen Schriftgröße.

Web Browser Support der Html5 Spezifikation
Web Browser	Firefox 52.0	Chrome 57.0	Internet Explorer 11
Ergebnis	474	519	312
Parsing Regeln	5	5	5
< !DOCTYPE html> triggers standards mode	Yes	Yes	Yes
HTML5 tokenizer	Yes	Yes	Yes
HTML5 tree building	Yes	Yes	Yes
Parsing inline SVG	Yes	Yes	Yes
Parsing inline MathML	Yes	Yes	Yes
Elements	26	25	15
Embedding custom non-visible data	Yes	Yes	Yes
Section elements	Yes	Yes	Yes
Grouping content elements	Yes	Yes	Teilweise
Text-level semantic elements	Teilweise	Teilweise	Teilweise
Interactive elements	Teilweise	Teilweise	Nein
hidden attribute	Yes	Yes	Yes
Dynamic markup insertion	Yes	Yes	Yes

Der Beitrag Validierung der Webbrowser für Unterstützung der HTML5 Spezifikation erschien zuerst auf MetinCelik.de.

HTML Einführung

MetinC — Mon, 29 Oct 2012 16:42:37 +0000

Wir fangen mit einem einfachen HTML Beipiel an:

Überschrift

Absetz

Erklärungen des Beispiels:

Der DOCTYPE Deklaration definiert den Dokumenttyp am Anfang jeder HTML Dokuments. Dieser beihaltet Angabe zur verwendeten HTML-Version.
Der Text zwischen und beschreibt die gesamte Webseite des HTML Dokuments.
Der Text zwischen und ist der sichtbare Seiteninhalt eines HTML Dokuments.
Der Text zwischen

und

zeigt eine Überschrift im HTML Dokument.
Der Text zwischen

und

zeigt einen Absatz im HTML Dokument.

Was ist HTML?

HTML ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in einem HTML Dokumente.
HTML steht für Hyper Text Markup Language.
Der Text wird durch Auszeichnungen (englisch markup) von Textteilen mit HTML Elementen eine Struktur gestaltet.
Mit den HTML-Tags wird der Dokumentinhalt erstellt.
HTML Dokumente beinhalten HTML-Tags und Klartext.
HTML Documente Werden auch Webseiten genannt.

HTML-Tags

HTML-Tags sind Schlüsselwörter, welche von Spitzen Klammern (größer als und kleiner als) umgeben sind, wie .
HTML-Tags sind nur paarweise vorhanden, wie und .
Der erste HTML-Tag in einem paar ist der beginnende HTML-Tag, der zweite HTML-Tag ist das endende HTML-Tag.
Das beginnende und endende HTML-Tag werden gleich beschrieben. Das endende Tag hat vor dem Tagnamen einen Schrägstrich.

Inhalt

HTML Elemente

HTML-Tags und HTML Elemente werden oft als das ein und selbe Ding beschrieben. Das ist aber leider etwas unkorrekt.
Ein HTML Element ist alles was zwischen beginnenden HTML-Tag und endenden HTML-Tag vorhanden ist, natürlich gehören die HTML-Tags dazu.

HTML Element:

Diese Absatz ist ein HTML Element mit seinen HTML-Tags.

Webbrowser

Der Zweck eines Webbrowser ist das HTML Dokument zu lesen und als Web Seite anzuzeigen.
Der Browser zeigt nicht HTML Tags, sondern nur den Inhalt der Tags.
Der Inhalt der HTML Tags wird je nach HTML-Tag unterschiedlich formatiert angezeigt.
Es gibt sehr viele unterschiedliche Browser, aber meistbenutzen Webbrowser sind Mozilla Firefox, Google Chrome, Internet Explorer und Apples Safari.

HTML Versionen

Seit den ersten Tagen des Webs gab es viele Versionen von HTML:
Version Jahr
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

Die DOCTYPE-Deklaration

Die DOCTYPE-Deklaration hilft den Webbrowser das Anzeigen der Webseite. Es gibt eine Menge unterschiedliche Dokumente im Web.
Ein Browser kann nur ein HTML Seite 100% richtig anzeigen, wenn sie genau weiß, welchen HTML Typ und HTML Version verwendet wird.

Beispiele für Dokumenttyp:

HTML5:

< !DOCTYPE html>

HTML 4.01 Strict:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict:

XHTML 1.0 Transitional:

XHTML 1.1:

Der Beitrag HTML Einführung erschien zuerst auf MetinCelik.de.

HTML Tutorial für Anfänger

MetinC — Mon, 29 Oct 2012 13:54:07 +0000

Hallo meine lieben Leser,

heute fange ich mit einen „HTML Tutorial für Anfänger“ zu schreiben. Mit HTML kann man eigene Webseiten erstellen. Diese Tutorial wird einiges über HTML beibringen. HTML ist einfach zu erlernen. In jedem Kapitel werde ich euch einige Beispiele präsentieren, damit ihr selb per Copy&Paste die Codebeispiele kopieren und in eurem HTML Editor testen und bearbeiten könnt.

< !DOCTYPE html>


Überschrift
Absetz

Also viel Spass damit!
1. HTML Einführung

Der Beitrag HTML Tutorial für Anfänger erschien zuerst auf MetinCelik.de.

WordPress Plugin WP-Syntax

MetinC — Wed, 30 Sep 2009 12:05:41 +0000

WP-Syntax bietet saubere Syntaxhervorhebung mit Unterstützung einer Vielzahl von gängigen Programmiersprachen. Es unterstützt die Hervorhebung mit oder ohne Zeilennummern und behält Formatierungen beim Kopieren von Code-Snippets aus dem Browser.

Code-Blöcke werden mit

und

definiert. Der Platzhalter LANGUAGE soll durch die unterstützte Programmiersprachen ersetzt werden. Weiter unten finden Sie eine vollständige Liste der unterstützten Sprachen. Das Zeieleattribut ist optional wählbar.

Beispiele

Beispiel 1: PHP, keine Zeilennummer






  function foo() {

    echo „Hello World!\\n“;

  }

?>

Ansicht mit WP-Syntax:

Beispiel 2: Java, mit Zeilennummern ab Zeile 1



public class Hello {

  public static void main(String[] args) {

    System.out.println(„Hello World!“);

  }

}

Ansicht mit WP-Syntax:

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

Unterstützte Programmiersprachen:

Die folgende Sprachen werden im Attribut lang unterstützt:

abap, actionscript, actionscript3, ada, apache, applescript, aptsources, asm, asp, autoit, avisynth, bash, bf, bibtex, blitzbasic, bnf, boo, c, cmac, caddcl, cadlisp, cil, cfdg, cfm, cmake, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief, php, plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, z80

Author Homepage: http://ryan.mcgeary.org
Plugin Homepage: http://wordpress.org/extend/plugins/wp-syntax/

Was ist Syntaxhervorhebung?

Das sagt Wikipedia:

Syntaxhervorhebung (eng. syntax highlighting) bezeichnet die Möglichkeit eines Computerprogrammes, bestimmte Wörter und Zeichenkombinationen in einem Text abhängig von ihrer Bedeutung in unterschiedlichen Farben, Schriftarten und -stilen darzustellen. Syntaxhervorhebung wird vor allem in Texteditoren zur Bearbeitung von ausgezeichneten Dokumenten, Programm-Quelltexten und Konfigurationsdateien eingesetzt. Hervorgehoben werden dabei Schlüsselwörter und andere Sprachelemente.

Syntaxhervorhebung verbessert die Lesbarkeit von Texten: Strukturen im Text sind leichter zu erkennen, das „Querlesen“ wird vereinfacht, Kommentare erscheinen abgesetzt vom eigentlichen Code und Tippfehler fallen schneller auf, da in vielen Fällen ein Tippfehler zu einer veränderten Darstellung führt.

Die Syntaxhervorhebung gehört heutzutage zur Standardfunktionalität vieler integrierter Entwicklungsumgebungen und Texteditoren.

Der Beitrag WordPress Plugin WP-Syntax erschien zuerst auf MetinCelik.de.

Ein weiteres hilfreiches WordPress Plugin mit dem Namen Wordbook

Metin (admin) — Fri, 07 Aug 2009 01:10:47 +0000

„Wordbook ist ein effektives Programm zur Erstellung von Wörterbüchern, Enzyklopädien, Lexika, Linksammlungen, usw.“ auf www.wordbook.de.

Nein, es handelt sich nicht um das oben beschriebene Wordbook. Wordbook ist ein WordPress Plugin, dessen Funktion ist es automatisch WordPress Beiträge auf www.facebook.com weiterzuleiten. Ein fantastisch kostenloses WP Plugin, welches sehr einfach und automatisch auf dieser Seite installiert wurde und es funktioniert bisher einwandfrei mit WP 2.8.3.

Plugin Link: http://wordpress.org/extend/plugins/wordbook/

Der Beitrag Ein weiteres hilfreiches WordPress Plugin mit dem Namen Wordbook erschien zuerst auf MetinCelik.de.

WordPress Theme Tutorial – Teil 3 – Die Bilder und das Stylesheet

Metin (admin) — Wed, 29 Jul 2009 21:40:43 +0000

Kopiere deine Webdesign-Bilder für das Theme in das Theme Ordner im einem Unterverzeichnis, wie z.B.

\YourTheme\images\*.*

Um die Merkmale für Webdesign und Schriftarten deines WordPress Themes zu editieren, werden wir dies in einem globalen StyleSheet Datei abspeichern. Dazu erstelle eine Datei mit dem Namen style.css in dem Theme Ordner und öffne es in einem Editor. Am besten wählt man hier ein Quellcode-Editor.

Nun braucht das WordPress Theme einen Namen und natürlich weitere Informationen, welche dann im Admin-Auswahlfenster für die Themes erscheinen sollen. Diese Informationen werden am Anfang des StyleSheetsdatei erwartet: Name, Url, Beschreibung, Version, Author des Themes und die URL des Author

Es müssen folgende Einträge vorhanden sein:

/*
Theme Name: My First Theme
Theme URI: http://www.mywebsite.com/myfirsttheme.html
Description: My First Theme for WordPress
Version: 1.0
Author: Your Name
Author URI: http://www.mywebsite.com/
*/

Später wird diese Datei (style.css) im Kopfbereich des HTML-Quelltextes verbunden, indem wir diese Zeile anwenden werden:

Der Beitrag WordPress Theme Tutorial – Teil 3 – Die Bilder und das Stylesheet erschien zuerst auf MetinCelik.de.

WordPress Theme Tutorial – Teil 2 – Erstelle ein neue WordPress Theme

Metin (admin) — Wed, 27 May 2009 03:42:40 +0000

In Ihrem Datei-Browser navigieren Sie zu dem Ordner /wp-content/themes/. Das ist der Ordner, in welchem die WordPress Themes für Ihre Website gespeichert wird.

Erstellen sie nun ein neuen Ordner für Ihr WordPress Theme und wir geben den Namen „MyFirstTheme“.

Und erstellen sie diese Dateien mit leeren Inhalt:
– index.php
– style.css
– header.php
– footer.php
– search.php
– comment.php
– single.php
– page.php
– sidebar.php

Der Beitrag WordPress Theme Tutorial – Teil 2 – Erstelle ein neue WordPress Theme erschien zuerst auf MetinCelik.de.

WordPress Theme Tutorial – Teil 1 – Installiere WordPress auf lokalem PC

Metin (admin) — Wed, 27 May 2009 03:39:54 +0000

Zu Beginn installiere WordPress Script. Viele Hoster bieten automatisierte Installationen für WordPress und der hier sind ein paar Tutorials für Installation.

Einzurichten einer lokalen Installation auf Windows: http://wpcandy.com/articles/tutorials/how-to-setup-wordpress-locally-on-windows.html

Einzurichten einer lokalen Installation auf Mac Os X: http://wpcandy.com/articles/tutorials/setup-wordpress-locally-on-mac-os-x.html

Der Beitrag WordPress Theme Tutorial – Teil 1 – Installiere WordPress auf lokalem PC erschien zuerst auf MetinCelik.de.

WordPress Theme Tutorial – Teil 0 – Erstellen eines WordPress Theme

Metin (admin) — Wed, 27 May 2009 03:36:08 +0000

Heute beginnen wir mit einem Tutorial, in welchem wir ein WordPress Design (WordPress Theme) erstellen. Die Themen werden Step by Step abhandelt:

Teil 1 – Installiere WordPress auf lokalem PC.
Teil 2 – Erstelle ein neues WordPress Theme;
Teil 3 – Die Bilder und das Stylesheet;
Teil 4 – Erstelle den Kopfbereich;
Teil 5 – Seitentitel;
Teil 6 – Stylesheet URL;
Teil 7 – RSS URL;
Teil 8 – Seitentitel;
Teil 9 – Navigationslinks;
Teil 10 – Erstelle die Navigationsbereich;
Teil 11 – Die Suche;
Teil 12 – Platzhalter für Werbebanner;
Teil 13 – Dynamische Kategorien;
Teil 14 – Tag;
Teil 15 – Blogroll – Lesezeichen;
Teil 16 – Erstelle die Homepage;
Teil 17 – Die Schleife;
Teil 18 – Inhalt;
Teil 19 – Archive, Suche & Einzelner Artikel;
Teil 20 – Feste Seiten;
Teil 21 – 404 Seite;
Teil 22 – Fußbereich;
Teil 23 – Aktivieren des WordPress Themes;
Teil 24 – Testen: Validieren, …;

Das eine oder andere Punkt werde ich noch dazwischen schieben.

Der Beitrag WordPress Theme Tutorial – Teil 0 – Erstellen eines WordPress Theme erschien zuerst auf MetinCelik.de.