header

K l e i n C o d e S a m m l u n g



Einfachen Markieren-Kopieren Fenster


Code

<form name="formel">
    <textarea rows="5" cols="50" name="eins">
  text text  </textarea> <br>
<input type="button" onClick="this.form.eins.select();this.form.eins.focus();" value="Markieren & Kopieren" />  </form>


Markieren

Markieren Fenster mit JS


Markieren


JS in head einfügen

Java Skript
 <script language="Javascript">
<!--
/*
Select All script- By Website Abstraction(http://www.wsabstract.com)
Over 400+ free JavaScripts here!
*/
function selectAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
}
//-->
</script>

Body Bereich

<form name="test">
<textarea name="select1" rows="10" cols="50">
  Text Text text
<br>
  <a href="javascript:selectAll('test.select1')">Markieren</a><br></form>

Markieren

Code Quelle

Textatera Fenster

Code zum mitnehmen

< textarea rows= "5" cols= "50" >
gnaz normale Textatera Fenster,und hier kommt Text rein
< /textarea >

Markieren

Verweise Fenster


Code zum mitnehmen

<form action="input_button.htm">
  <p>
    <textarea cols="40" rows="1" name="textfeld">Hier kann ein Text rein</textarea> <br>
    <input type="button" name="Text 1" value="Thema1"
      onclick="this.form.textfeld.value='Thema nummer eins '">
    <input type="button" name="Text 2" value="Thema2"
      onclick="this.form.textfeld.value='Thema nummer zwei'">
       <input type="button" name="Text 3" value="Thema3"
      onclick="this.form.textfeld.value='Thema nummer drei '">
        <input type="button" name="Text 4" value="Thema4"
      onclick="this.form.textfeld.value='Thema nummer vier '">
   </p>
</form>

Markieren

Infobox

In Diesen Text ist ein klienen Infobox Infobox:
Hier kann ein klienes oder großes Infobox rein
nach wunsch kann man den gut gestallten versteckt.

Code zum mitnehmen

  CSS Teil       

          <style type="text/css">
  a.infobox { border-bottom: 7px double #8F1C5F; text-decoration:none; }
  a.infobox:hover { cursor:help; color:#F90616; background:#EFECB5; }
  a.infobox span { visibility:hidden; position:absolute; left:-99em;
    margin-top:40px; padding:25px; text-decoration:none; }
  a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    visibility:visible; left:20px;
    border:2px solid #1A7342; color:blue; background:#B1EEB5; }
</style>

Das Kommt auch in head Bereich

<!--[if IE 5]><style type="text/css">
  a.infobox span { display:none; }
  a.infobox:hover span { display:block; }
</style><![endif]-->

HTML Bereich
<p> <a class="infobox" href="#INFO">Infobox<span> <b>Infobox:</b><br />
Hier kommt das Text was in den Info box   zu sehen ist . </span></a> </p>
 


Markieren

Quelle von diesen Skript

News Box

Die neuesten Schlagzeilen lesen Sie hier

Code zum mitnehmen

head Bereich JS

<script type="text/javascript" language="JavaScript">
<!-- Begin

// für ein Popup-Window

function PopUpWindow10(Dateiname)
{
popUp = window.open(Dateiname,'InfoWindow','width=500,height=250,left=20,top=20,directories=0,status=0,scrollbars=0,resizable=0,menubar=0,locationbar=0')
}



var StartVerzoegerung = 1000;    // StartVerzögerung in Milliseunden
var Anzeigezeit = 4000;          // Rotations-Verzögerung in Milliseunden


var Texte = new Array();
Texte[0] = '<span id="Headline">Überschrift 01<\/span><span class="Zeile"> Hier Kommt text .<\/span>'


Texte[1] = '<span id="Headline">Überschrift 02<\/span><span class="Zeile"> Hier Kommt text .<\/span>'

Texte[2] = '<span id="Headline">Überschrift 03<\/span><span class="Zeile"> Hier Kommt text .<\/span>'

Texte[3] = '<span id="Headline">Überschrift 04<\/span><span class="Zeile"> Hier Kommt text .<\/span>'


var Farben = new Array();
Farben[0] = '#FF7F00';
Farben[1] = '#00AFFF';
Farben[2] = '#00BF00';
Farben[3] = '#DF00FF';
Farben[4] = '#9000E0';


var AnzeigeText = '';
var Farbe = '';
zaehler1 = 0;
zaehler2 = 0;


function Headlinefarbe() {
if (zaehler2 == Farben.length) zaehler2 = 0;
Farbe = Farben[zaehler2++];
}



function TextAnzeige() {
if (zaehler1 == Texte.length) zaehler1 = 0;
AnzeigeText = Texte[zaehler1++];
Headlinefarbe();
document.getElementById('Anzeige').innerHTML = AnzeigeText;
document.getElementById('Headline').style.color = Farbe;
setTimeout("TextAnzeige()", Anzeigezeit);
}

setTimeout("TextAnzeige()", StartVerzoegerung);

//  End -->
</script>

Markieren

head Bereich -->CSS

#AnzeigeBox {
    height: 500px;
    width: 100%;
    border: 0px solid #000091;
    text-align: left;
    font-size: 1.0em;
    -webkit-box-shadow: 1px 1px 1px 1px #91A4FF;
    box-shadow: 1px 1px 1px 1px #91A4FF;
}
#Anzeige {
    width: 100%;
    padding: 10px;
    font-size: 1.2em;
    font-weight: normal;
}
#Headline {
    font-size: 1.1em;
    color: #0090E0;
}
#Anzeige .Zeile {
    float: left;
    padding: 2%;
    margin-bottom: 3%;
    font-weight: normal;
}
#Anzeige .Link {
    font-family: Arial, Helvetica, sans-serif;
    float: left;
    padding-top: 10px;
    font-size: 11px;
    color: #0090E0;
}
#Anzeige a:link a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #0090E0;
    text-decoration: none;
}
#Anzeige a:hover {
    color: #FF007F;
    text-decoration: none;
}

Markieren

im Body Bereich

<div id="AnzeigeBox">
<div id="Anzeige">Die neuesten Schlagzeilen lesen Sie hier</div>
</div>

Markieren

Inspiration und Skript Quelle

Hier ist ein Text versteckt!

tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex text text tex.

Weiter lesen

eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Code zum mitnehmen

Java Skript in head Bereich einfügen 
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
 
<script type="text/javascript" src="/verstekt.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".hidder").click(function() {
if($(this).next().css("display") == "block") {
$(this).next().hide("slow");
}
else {
$(this).next().show("slow");
}
});
});
</script>


HTML Teil
<p>tex text text tex text text tex text text tex text text tex text .</p>
  <a href="javascript: none" class="hidder"><u><b>Weiter lesen</b></u></a>

<div style="display: none; margin: 10px 0; border: 1px solid #ccc;
 background: #9EFF00; padding: 15px; width: 400px; font-family: serif;
   font-size: 15x;color: #3F0000; font-weight:bold; text-align: left;"> Hier das versteckte Text einfügen ! </div>


Markieren

Hier Direkter Link zum Java Skript-googleapis

Code so wie in den Beispiel hier zum runterladen


Das <p> steht für das englische „paragraph“ = Absatz
Ein Absatz hält einen Abstand zum nachfolgenden Element.
Man kann auch den Absatz auf unterschiedliche weise gestalten und formatieren.
Hier ein paar Beispiele

mehr zum Thema ...

<p style="border-width:medium; border-color:#FF9999; border-style:dotted; padding:5px;">
</p>

dotted

Textabsatz mit Rahmendicke medium und Typ dotted.


<p style="border-width:medium; border-color:#9999FF; border-style:dashed; padding:5px;">
</p>

dashed

Textabsatz mit Rahmendicke medium und Typ dashed.

<p style="border-width:medium; border-color:#66CC66; border-style:solid; padding:5px;">
</p>

solid

Textabsatz mit Rahmendicke medium und Typ solid.

<p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;">
</p>

Textabsatz mit Rahmendicke medium und Typ double.

double

<p style="border-width:12px; border-color:#9999FF; border-style:groove; padding:5px;">

</p>

groove

Textabsatz mit Rahmendicke 12px und Typ groove.

<p style="border-width:12px; border-color:#66CC66; border-style:ridge; padding:5px;">
.</p>

ridge

Textabsatz mit Rahmendicke 12px und Typ ridge

<p style="border-width:12px; border-color:#FF9999; border-style:inset; padding:5px;">
.</p>

inset

Textabsatz mit Rahmendicke 12px und Typ inset

Textabsatz mit Rahmendicke 12px und Typ outset <p style="border-width:12px; border-color:#9999FF; border-style:outset; padding:5px;">
</p>

outset

Textabsatz mit Rahmendicke 12px und Typ outset.

In Praxis sieht  das so aus das man   einen  gewünschte Code erstellt,  und Dazwischen  einen Text einfügt ..
hier ein B..
<p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;">
Hier kommt das gewünschte Inhlat
</p>

Markieren

und so sieht das dann aus

Hier kommt das gewünschte Inhlat

Die Gestaltung Möglichkeiten sind sehr viele .
Voraussetzung dafür ist : ein wenig CSS Kenntnisse sind .

Hier drei Beispiele

Hier ist ein P Absatz mir breite vom 30%

<p style="border: 12px ridge rgb(102, 204, 102); padding: 5px;width:30%;">
Hier kommt das Inhalt
</p>

Markieren

Hier Ist ein Absatz mit rammen dicke 5px , rammen Typ Solid breite 50% , innnen Abstand 3% , einen farbigen Hintergrund ,Schrift Farbe ist auch bestimmt so wie Schrift größe

<p style="border: 5px solid #00FF00; padding: 3%;width:50%; background-color:#FF00FF ; color:#800080;font-size:1.3em;">
Code zum mitnehmen !
</p>

Markieren

Noch das Gleiche ,nur mit eine Grafik in den Hintergrund

Hier Kommt das Inhalt

<p style="border: 5px solid #00FF00; padding: 3%;width:50%;background-image: url( BILD URL );
    background-repeat: repeat; ; color:#800080;font-size:1.3em;">
   Hier Kommt das Inhalt </p>

Markieren

Ich habe ein einfaches Rezept um fit zu bleiben - Ich laufe jeden Tag Amok. Hildegard Knef

Wünsche allem viel spaß beim üben lernen und gestallten .Einfach immer schön am Ball bleiben :-)


Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p style=" padding:2%; border: 1px solid #000080; width: 96%; ">
   <img src=" BILD URL " style="border: 0px;float: left; margin:2%" />
  Text Text
   </p>

Markieren
Listen-Typen

Listen-Typen

Aufzählungsliste <ul> mit Darstellungstyp disc

  • Inhalt
  • Inhalt
  • Inhalt

Code

Aufzählungsliste <ul> mit Darstellungstyp circle

  • Inhalt
  • Inhalt
  • Inhalt

Code

Aufzählungsliste <ul> mit Darstellungstyp square

  • Inhalt
  • Inhalt
  • Inhalt

Code


Aufzählungsliste <ul> mit Darstellungstyp none

  • Inhalt
  • Inhalt
  • Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp decimal

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt
  10. Inhalt

Code

Nummerierte Liste mit Startwert 10

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp lower-roman

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt
  10. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp upper-roman

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp lower-alpha

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp upper-alpha

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp lower-greek

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp hebrew

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp decimal-leading-zero

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt
  10. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp cjk-ideographic

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp hiragana

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp katakana

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp hiragana-iroha

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt

Code


Nummerierte Liste <ol> mit Darstellungstyp katakana-iroha

  1. Inhalt
  2. Inhalt
  3. Inhalt
  4. Inhalt
  5. Inhalt
  6. Inhalt
  7. Inhalt
  8. Inhalt
  9. Inhalt

Code

Code Quelle

Tabellen

Muster 1

Zeille 1
Zeille 2 Zeille 3

Code zum mitnehmen

<table border="1" cellspacing="0" cellpadding="3">
<tr>
<td colspan="2"> Zeille 1 </td>
</tr>
<tr>
<td width="50%"> Zeille 2 </td>
<td width="50%"> Zeille 3</td>
</tr>
</table>

Markieren

Muster 2

Zeille 1 Zeille 2
Zeille 3

Code zum mitnehmen

<table border="1" cellspacing="0" cellpadding="3">
<tr>
<td width="50%" rowspan="2"> Zeille 1 </td>
<td width="50%"> Zeille  2 </td>
</tr>
<tr>
<td> Zeille 3 </td>
</tr>
</table>

Markieren

Muster 3

Mit hover Effekt

Nr. Beschreibung
1. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

CSS Bereich

#tbody tr:hover {
    background: #00FF00;
    color: #800000;

}

Markieren

Body Bereich

<table id="tbody" border="1">
<thead>
    <tr>
        <th> Nr .</th>

        <th> Beschreibung </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td> 1. </td>

      <td> Text </td>
    </tr>

    <tr>
        <td> 2. </td>

        <td> Tex t</td>
    </tr>

</tbody>
</table>

Markieren

Codes



hhhhhhhhh
fffffffff
ffffffffffffff
fffffffffffff

Nach oben

Design by HomepageHelfer.org and © Hinweise & TEAM