Durch Nutzung dieser Webseite stimmen Sie dem Einsatz von Cookies und Werbung zu. Weitere Informationen



KnowHow 7.4 ''HTML-JavaScript-Perl ''
Stand: 18.05.2017 16:35:46

Inhalt | Suche | Homepage | Kontakt | Impressum

- Durch Anklicken im Inhaltsverzeichnis kann direkt zum Thema gesprungen werden.
- Begriffe auf dieser Seite können mit Ihrer Browser-Funktion ''Bearbeiten -> Suchen'' oder mit den Tasten [Strg]-[F] gesucht werden.
- Des weiteren gibt es noch eine Suchfunktion über alles.
- Es sind mehr Informationen verfügbar, als hier angegeben. Falls Sie etwas vermissen, scheuen Sie sich nicht nachzufragen, wir antworten gerne.




7.4.0.1 Umwandlung einer HTML-Datei mit Bildern im Extraordner in eine Word-Datei

rechte Maustaste auf HTML-Datei -> öffnen mit -> Microsoft Office Word
Edit -> Links -> , Save picture in document
File -> Speichern als -> Type *.doc



7.4.0.2 Nützliche Steuerzeichen

Zeilenwechsel: <br>

Fettdruck: <b>fett</b>
Wirkung: fett
Unterstreichen: <u>underline</u>
Wirkung: underline
rote Schrift: <font color="#FF0000">Text</font>
Wirkung: Text
Referenz: <a href="http://www.burgermeisters.de">http://www.burgermeisters.de
Wirkung: http://www.burgermeisters.de


7.4.0.3 Seitenumbruch beim Drucken

Seitenumbruch nach folgender Zeile:
<p style='page-break-after:always'>- Seite 1 -</p>

(Quelle: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Druckausgabe/page-break-after)


Zusätzliche Formatierung möglich:
<style type="text/css"> @page {size:21.0cm 14.85cm; margin-top:5.7cm; margin-bottom:1.4cm; margin-left:2cm; margin-right:2cm} </style>

(Quelle: http://www.ms-office-forum.net/forum/showthread.php?t=173836)



7.4.0.4 Ausschnitt eines Bildes anzeigen

Mit der Eigenschaft "clip:rect(Wert1,Wert2,Wert3,Wert4)" in "div" kann man einen rechteckigen Ausschnitt eines Bildes erzeugen. Allerdings funktioniert clip nur bei absolut positionierte Elementen mit "position:absolute".

Wert1: Schnittlinie oben, gemessen vom oberen Bildrand in Pixel
Wert2: Schnittlinie rechts, gemessen vom linken Bildrand in Pixel
Wert3: Schnittlinie unten, gemessen vom oberen Bildrand in Pixel
Wert4: Schnittlinie links, gemessen vom linken Bildrand in Pixel

Beispiel:
<html>
<div style="position:absolute; top:100px; left:100px; clip:rect(10px, 70px, 90px, 20px);">
<img src="bild.gif" width="300" height="200" title="Bild">
</div>
</html>


7.4.0.5 Cursor-Koordinaten auf Web-Seite ausgeben

Beispiel

Die Parameter (Beispiel: "?x=373&y=421") werden aus folgender HTML-Datei in der Aufrufzeile mitgeliefert:

Koordinaten.htm
<html>
<head>
</head>
<body>
<form action="Koordinaten-ausgeben.htm">
<input type="image" src="Koordinaten-Karte.gif" alt="Absenden">
</form>
</body>
</html>

Koordinaten-ausgeben.htm
<html>
<head>
<title>Koordinaten ausgeben</title>
<!-- File: Koordinaten-ausgeben.htm -->
</head>
<body>

<script>
var parameterstring;
var left;
var top;
var laenge;
var position;
var string;

if (window.location.search != "")
parameterstring = window.location.search;

laenge = parameterstring.length;
position = parameterstring.indexOf("&");//Stelle des Zeichens "&"

left = parameterstring.substring(3,position);
top= parameterstring.substring(position+3,laenge);

if (left.length < 4) left = "0" + left;
if (left.length < 4) left = "0" + left;
if (left.length < 4) left = "0" + left;
if (top.length < 4) top= "0" + top;
if (top.length < 4) top= "0" + top;
if (top.length < 4) top= "0" + top;

string = '<div style="position:absolute; top:' + top + '; left:' + left + ';"><a title="Icon XXXXX" href="http://www.XXXXX.de"><img border=0 src="icon.gif"></a></div>';
with(document){
write("Koordinaten:<br><br>");
write(string+"<br>");
}
</script>
</body>
</html>


7.4.0.6 HTML in Perl erzeugen

Ein Beispiel für einen Perl-Code mit ausführbarem HTML-Code auf Apache-Servern. Dabei ist die erste Zeile als Kenner für den Perl-Code notwendig (das Verzeichnis muss natürlich an den installierten Ort der perl.exe angepasst werden). Die zweite Zeile ist für die Erkennung des HTML-Codes wichtig, sonst würde der HTML-Code nicht ausgeführt, sondern nur als Text ausgegeben werden. Der Apache-Server zeichnet in dem Fall im error.log folgenden Fehler auf: "(9)Bad file descriptor: don't know how to spawn child process"
#!c:/Perl/bin/perl.exe
print "Content-type:text/html\n\n";
print "
<html>
<head>
<title>HTML Code in Perl erzeugen</title>
</head>
<body>
Test Test Test
</body>
</html>
";


7.4.0.7 Parameterübergabe HTML an Perl, Methode "URL-Parameter"

HTML-Code "test.htm" Parameter schreiben (1)
<html>
<head></head>
<body>
<a HREF=test.pl?parameter1=Wert1¶meter2=Wert2> Parameter senden </a>
</body>
</html>

HTML-Code "test.htm" Parameter schreiben (2)
<html>
<head></head>
<META HTTP-EQUIV='REFRESH' CONTENT='0; URL=test.pl?parameter1=Wert1¶meter2=Wert2'>
<body>
</body>
</html>

CGI-Perl-Script "test.pl" Paramter auslesen
use CGI;
$query=new CGI;
$parameter1=$q->param('parameter1');
$parameter2=$q->param('parameter2');



7.4.0.8 Parameterübergabe HTML an Perl, Methode "Formular"

Funktioniert in noch ungeklärten Fällen nicht immer.

HTML-Code "test.htm" Parameter schreiben
<html>
<head></head>
<body>
<form name=formname1 action='test.pl' method=post onSubmit='return CheckForm(this)'>
<input type=hidden name=paramter1 value='Wert1'>
<input type=hidden name=paramter2 value='Wert2'>
<input type=submit value='Parameter senden'>
</FORM>
</body>
</html>

CGI-Perl-Script "test.pl" Paramter auslesen (1)
($paramter1, $paramter2) = @_;

CGI-Perl-Script "test.pl" Paramter auslesen (2)
&parse_form_data(*form_data);
if (defined($form_data{paramter1}))
  { $paramter1 = $form_data{paramter1}; }
else
  { $paramter1 = "unbekannt"; }
if (defined($form_data{paramter2}))
  { $paramter2 = $form_data{paramter2}; }
else
  { $paramter2 = "unbekannt"; }

#------------
sub parse_form_data
{
local(*FORM_DATA) = @_;
local($request_method, $query_string, @key_value_pairs, $key_value, $key, $value);
$request_method = $ENV{'REQUEST_METHOD'};

if( $request_method eq "GET" )
  { $query_string = $ENV{'QUERY_STRING'}; }
elsif ( $request_method eq "POST" )
  { read(STDIN, $query_string, $ENV{'CONTENT_LENGTH'}); }
else
  { &return_error(500,"Server Error","Server uses not supported method"); }
@key_value_pairs = split(/&/, $query_string);
foreach $key_value (@key_value_pairs)
  {
  ($key, $value) = split(/=/, $key_value);
  $key =~ tr/+/ /;
  $value =~ tr/+/ /;
  $key =~ s/%([\dA-Fa-f][\dA-Fa-f])/pack ("C", hex($1))/eg;
  $value =~ s/%([\dA-Fa-f][\dA-Fa-f])/pack ("C", hex($1))/eg;
  if (defined($FORM_DATA{$key}))
    { $FORM_DATA{$key} = join("\0", $FORM_DATA{$key}, $value); }
  else
    { $FORM_DATA{$key} = $value; }
  }
}
#------------
sub ReadParse
{
local (*in) = @_ if @_;
local ($i, $key, $val);
# Read in text
if (&MethGet)
  {
  $in = $ENV{'QUERY_STRING'};
  }
elsif (&MethPost)
  {
  read(STDIN,$in,$ENV{'CONTENT_LENGTH'});
  }
@in = split(/[&;]/,$in);
foreach $i (0 .. $#in)
  {
  # Convert plus's to spaces
  $in[$i] =~ s/\+/ /g;
  # Split into key and value.
  ($key, $val) = split(/=/,$in[$i],2); # splits on the first =.
  # Convert %XX from hex numbers to alphanumeric
  $key =~ s/%(..)/pack("c",hex($1))/ge;
  $val =~ s/%(..)/pack("c",hex($1))/ge;
  # Associate key and value
  $in{$key} .= "~" if (defined($in{$key})); # '~' is the multiple separator
  $in{$key} .= $val;
  }
return scalar(@in);
}
#------------
sub MethGet
{
local ($it);
$it = $ENV{'REQUEST_METHOD'};
if ($it =~ /GET/) { return '1'; }
return '0';
}
#------------
sub MethPost
{
local ($it);
$it = $ENV{'REQUEST_METHOD'};
if ($it =~ /POST/) { return '1'; }
return '0';
}
#------------


7.4.0.9 iframe laden und ans Ende springen

Lösung per URL

Sprung ans Ende per internen Link-Namen z.B. #ziel.
Problem: funktioniert beim Internet Explorer nicht.

main.htm:
<html>
<head></head>
<body>
<iframe src='frame.htm#ziel'></iframe>
</body>
</html>

frame.htm:
<html>
<head></head>
<body onLoad='endeform.ziel.focus()'><p>\n";
...
<a name='ziel' id='ziel'></a> </FORM>
</body>
</html>

Lösung per focus

Sprung ans Ende per onLoad mit focus auf ein kleines Formular.
Funktioniert auch mit Internet-Explorer, nur leider unschöner Kasten am Ende.

main.htm:
<html>
<head></head>
<body>
<iframe src='frame.htm'></iframe>
</body>
</html>

frame.htm:
<html>
<head></head>
<body onLoad='endeform.ziel.focus()'><p>\n";
...
<form name=endeform><input type=text name=ziel size=1></form>
</body>
</html>



7.4.0.10 Fixbereiche

Feststehende Bereiche auf einer Seite definieren:
http://de.selfhtml.org/css/layouts/fixbereiche.htm


7.4.0.11 HTML-Seite für Smartphones anpassen

<head>
...
<meta name="viewport" content="width=320, initial-scale=1" >
...
</head>



7.4.0.12 Seiteninhalt immer neu laden

<meta http-equiv="cache-control" content="no-cache">
<!-- Anweisung an den Browser: keinen Cache benutzen, sondern immer neu laden. -->

=> funktioniert nicht überall

besser:
Aufruf mit ständig änderndem, nicht genutztem Parameter (z.B. Zeitstring oder Zufallszahl)
<audio src='audio.wav?dummy=$time' type='audio/wav' autoplay></audio>


Besucher seit 30.01.2003:

© 2013 Burgermeister  | Home | Main Server | Mirror Server | Kontakt | Impressum | Datenschutz