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



KnowHow 10.1 ''HTML ''
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.




10.1.1 HTML


10.1.1.1 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</a>
Wirkung: http://www.burgermeisters.de

Alles anzeigen wie es geschrieben steht, auch mit mehreren Leerzeichen:
(hierbei wird auch kein <br> für den Zeilenwechsel benötigt)
<pre>
   test   test
 test  test
</pre>


10.1.1.2 HTML Schaltflächen / Buttons

CSS Style Class definieren falls gebraucht:
<style type="text/css">
.Button1 {width:140px; height:140px; border:0px; background-color:transparent; cursor:pointer;}
.Button3 {display:block; width:100px; height:60px; padding:0px; text-align:center; background:#CCC; font-decoration:none; color:#000; border:0px solid #888;}
</style>

Button mit button:
<button style="width:100px; height:60px; border:0px; background-color:transparent; background-image:url(bild.gif);" onclick="location.href='homepage.htm'"><br><img src="bild.gif" border="0"><br><b>Homepage</b><br><br></button>
  oder
<button class="Button1" onclick="location.href='homepage.htm'"><br><img src="bild.gif" border="0"><br><b>Homepage</b><br><br></button>

Button mit input:
<input type="button" onClick="window.location='homepage.htm'" value="Homepage" >

Button mit href:
<a href="homepage.htm" style="display:block; width:100px; height:60px; padding:0px; text-align:center; background:#CCC; font-decoration:none; color:#000; border:0px solid #888;"><br>Homepage</a>
  oder
<a href="homepage.htm" class="Button3"><br>Homepage</a>

Beispiele für Styles:
width:100px;
height:60px;
border:1px;
padding:1px;
background-color:transparent;
background-image:url(bild.gif);
text-align:center;
background:#CCC;
font-decoration:none;
color:#000;
border:0px
solid #888;
cursor:pointer;   -> damit bei button sich der Mauszeiger wie bei einem Link verhält
...


10.1.1.3 HTML Tabellen

<style type="text/css">
table { border-collapse: collapse; border: 1px solid #CCCCCC; }
table th, table tr, table td { padding: 2px; border: 1px solid #CCCCCC; }
</style>

<table bgcolor='#FFEEEE'>
<tr><th> A </td><td> B </th></tr>
<tr><td> 1 </td><td> 2 </td></tr>
<tr><td> 3 </td><td> 4 </td></tr>
</table>


10.1.1.4 Senkrechter gedrehter Text

<html>
<style type="text/css">
.vertical {
  writing-mode:tb-rl;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  white-space:nowrap;
  display:block;
  bottom:0;
  width:30px;
  height:30px;
}
</style>
<body>
<font class="vertical">Text Text Text</font>
</body>
</html>

Jeder Browser interpretiert diese rotate-Funktion anders oder gar nicht,
deswegen unterschiedliche Kommandos in einer Klasse



10.1.1.5 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>



10.1.1.6 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>



10.1.1.7 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>



10.1.1.8 Bild Anzeigegröße begrenzen

<html>

<!-- limit image size -->
<!-- first part for Firefox (proportional), second part for IE (not proportional)-->
<style>
.imgsize {
max-height: 60px;
max-width: 60px;
height: expression(this.height > 60 ? '60px' : true);
width: expression(this.width > 60 ? '60px' : true);
}
</style>

<img class='imgsize' src='http://www.burgermeisters.de/webcam/Panorama-min.jpg' border=0>

</html>


10.1.1.9 Automatischer Reload

<html>
<head>
<title>Titel</title>
<!-- Umleitung bzw. Reload nach 10 Sekunden -->
<meta http-equiv="refresh" content="10; URL=NeueSeite.htm">
</head>
<body>
...
</body>
</html>


Besucher seit 30.01.2003:

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