HTML Code

Tutorials von Thomas Frei-Herrmann

HTML Code in NOF einfügen


Welcher Editor wird für welchen Code verwendet. Unten einige Beispiele zur Demonstration.

Wir unterscheiden zwischen 2 Editoren, die man in NOF verwenden kann, um HTML-Code einzufügen

  1. Objekt Editor - wird für begleitenden Code verwendet, wie z.B. DIV-Container, Class, IF-Bedingungen, etc.
     
  2. HTML-Code Editor - wird zum Einfügen von komplexem Code, wie Skripten oder z.B. Code für Foto-Galerien usw. verwendet
    Diesen Editor könnt Ihr auch für eine Tabellen-Zelle verwenden > Zelle doppelklicken > oben Menu > Text > HTML einfügen

so geht es zum Objekt Editor
> Textfeld aufziehen > demarkieren > Button HTML

 zum Objekt-Editor

unten NOF-Symbol Textfeld mit Inhalt im Objekt Editor

so geht es zum HTML-Code Editor
> Textfeld aufziehen > mittlere Button > Button HTML

 zum HTML-Code-Editor

unten NOF-Symbol Textfeld mit Inhalt im HTML-Code Editor


Beispiele

Ich habe allen Textfeldern einen Rahmen gegeben, damit man die Abstände vergleichen kann. Alle Texte, die in den Textfeldern hier blau dargestellt sind, wurden über einen der beiden Editoren eingefügt. Unter jedem Beispiel ist ein Screenshot des Editors.

Text normal eingefügt

Dieser Text wurde ganz normal in ein Textfeld geschrieben. Der Text wird von NOF zwischen dem <p> Tag eingebracht.

Das ist ein normaler Text, der in einem Textfeld geschrieben wurde.

Text in den Objekt Editor eingefügt

Dieser Text wurde in den Objekt Editor  “vor dem Tag” (ab NOF 11 “vorher”) eingefügt. Der Inhalt steht vor dem <p> Tag und daher erzeugt das <p> Tag unten eine zusätzliche Leerzeile. Diese Zeile könnte man auskommentieren, “vor dem Tag” (“vorher”) <!-- und “nach dem Tag” (“nachher”) -->
Insbesondere, wenn man das geschützte Leerzeichen &nbsp; auch noch weg haben muss oder will, sollte man besser den Objekt Editor verwenden.

<!-- was hier zwischen steht ist auskommentiert und wird daher nicht als HTML-Code verarbeitet --> Bitte guckt Euch dafür auch noch mein extra Tut an.

... schon deswegen sollte man den Code besser in den HTML-Code Editor eintragen, da dann der Inhalt im <p> Tag steht und diese Zeile nicht entsteht.

Dieser Text steht vor dem Tag im Objekt-Editor.

 

hier entsteht eine Leerzeile durch das <p> Tag

Text in den HTML-Code Editor eingefügt

Dieser Text wurde in den HTML-Code Editor eingefügt. Dieser Editor lässt sich mit beliebigem Code bestücken also auch mit PHP-Skripten, wenn die Seite auf die Dateierweiterung .php gestellt wurde. Der Inhalt wird von NOF zwischen dem <p> Tag eingebracht und daher wird keine zusätzliche Leerzeile erzeugt.

Dieser Text steht im HTML-Code Editor. 

... auf diese Art und Weise kann man eben den Code innerhalb eines Textfeldes auch punktgenau platzieren. Der schwarze Text ist in das Textfeld unten geschrieben und der blaue Text wurde in den HTML-Code Editor eingefügt. Unten rechts ein Screenshot dieses Textfeldes.

Dieser Text wurde geschrieben, dieser Text dagegen eingefügt

DIV-Container in den Objekt Editor und PHP-Befehl in den HTML-Code Editor eingefügt

Dieses Beispiel zeigt noch die Einfügung des Textfeldes in einen DIV-Container, der dieses Textfeld scrollbar macht. Dazu benötigt man den Objekt Editor.
Der PHP-Include-Befehl wurde dagegen wieder in den HTML-Code Editor eingefügt und wird von NOF zwischen dem <p> Tag eingebracht. Daher wird keine zusätzliche Leerzeile erzeugt.

Neue Seiten - und dauerhafte Hinweise unten oder hier in der Lytebox

meine letzten 10 Änderungen (neueste oben am 23.09.2017)

Responsive Software Mobirise, eine Alternative für responsive Webseiten

Responsive Seite mit CSS Flyout-Container

Responsive Website mit responsiver Tabelle

CSS Transition, Transform und Keyframe Beispiele

Passwortschutz mit PHP-Webseitenschutz, Webseiten sehr einfach schützen

Slider CSS - ImageSlider basierend auf reinem CSS mit Upload-Funktion

CSS Menü-Generator steht wieder von ‘Werner-Zenk.de’ bereit

Fotoalbum mit direkter Upload-Funktion für Bilder, optimiert für Smartphones

Bilder im Browser auswählen und auf den Server hochladen

Kalender mit Belegungsplan für Ferienwohnungen

 

Dauerhafte Hinweise

Content-Management-System (CMS) mit dem Online-Editor “TinyMCE

Datenbank-Verbindung mittels NOF-Komponente herstellen

Datenquelle MySQL und Datenquelle XML

Gästebuch Antispam von Stefan

Kontaktformular mit unsichtbarem Spamschutz von Panda modifiziert

Lytebox Version 5

MLR (Multi Layout Region) auf dieser Themen-Seite mittles Include

NOF 2013 - HTML5 Formular - HTML5 MP3 Player - HTML5 Video - weitere Beispiele

NOF-Tutorials.com - eine Übersicht für NOF-Seiten

Responsive Webdesign - nur CSS im Body und mit CSS für Parallax-Effekt

Responsive Website mit CMS (Content Management System) in NOF erstellen

SwissKnife for NOF, eigene NOF Komponenten von Stefan Menge

Visual Lightbox und Video Lightbox und Foto-Galerie “WOW Slider

Vorlagen von Panda, wegen Einstellung seiner Seiten Formular, Lytebox, Overlib

WINDOWS 7 - was muss ich bei NOF beachten und Anti-Aliasing

 

 

 

 

HTML-Code Editor in einer Tabellen-Zelle

Bitte beachtet eine Besonderheit bei Tabellen-Zellen, in denen Ihr den HTML-Code Editor verwendet.

  • Links wurde der HTML-Code Editor der Tabellen-Zelle verwendet und obwohl diese Zelle nach “oben” ausgerichtet ist, erscheint der Text mittig
  • Rechts wurde der HTML-Code Editor eines Textfeldes verwendet und das Textfeld dann in die nach “oben” ausgerichtete Zelle eingebracht

Dieser PHP-Code ist im HTML-Code Editor der Tabellen-Zelle
Die Zelle ist nach “oben” ausgerichtet

Dieser Text ist ein PHP "echo" Befehl und wurde in die HTML einer Tabellen-Zelle eingefügt. Obwohl die Tabellenzelle nach "oben" ausgerichtet wurde, erscheint der Text mittig. 

nach oben

 

Dieser PHP-Code ist im HTML-Code Editor eines Textfeldes
Die Zelle ist nach “oben” ausgerichtet

Dieser Text ist ein PHP "echo" Befehl und wurde in die HTML eines Textfeldes eingefügt. Die Tabellenzelle ist nach "oben" ausgerichtet und der Text erscheint nun auch oben. 

 

diese Seite weiter empfehlen



Counter Statistik