Upline: Infos & Dokus Programmierung Webentwicklung

html Beispiele

frame, frameset, noframes

Aufbau einer index.html mit Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
 <html>
 <head><title>html - Übung zu Frames</title></head>
 <frameset cols="120,*" border bordercolor="cyan">
  <frame src="hauptmenu.html" name="links" scrolling="no">
  <frameset rows="60,*">
   <frame src="kopfzeile.html" name="oben" scrolling="no" noresize>
   <frame src="startscreen.html" name="rechts">
  </frameset>
 </frameset>
 <noframes>
  An dieser Stelle ist es sinnvoll, daß hinzuschreiben, was der Betrachter mit einem
  Browser ohne Frameunterstützung verpaßt. Das ist auch der Text, der in den
  Suchmaschinen für den Index angezeigt wird. Daher sollte hier nicht der Standardsatz
  "Ihr Browser unterstützt leider keine Frames" stehen.
 </noframes>
</html>

So sieht das Ergebnis aus.

iframe

<center>
 Zeige <a href="/info/code/html/bsp/iframe1.html" target="intfr">iframe1.html</a> bzw.
 <a href="/info/code/html/bsp/iframe2.html" target="intfr">iframe2.html</a> im iframe an!<br />
 <iframe src="/info/code/html/bsp/iframe1.html" width="500" height="200" marginheight="0" name="intfr">
</center>

Zeige iframe1.html bzw. iframe2.html im iframe an!

b, i, p, style, u

<html>
 <head>
  <style type="text/css">
   .stylebsp1 {font-size:8pt;color:fuchsia}
   .stylebsp2 {text-align:right;font-size:9pt;color:#008000;font-weight:800}
  </style>
 </head>
 <body>
  <b type="text/css" style="font-size:8pt;color:brown">Brauner lokaler <b>-Style-Sheet</b>
  <i type="text/css" style="font-size:8pt;color:red">Blauer lokaler <i>-Style-Sheet</i>
  <u class="stylebsp1">Lila globaler <u>-Style-Sheet</U>
  <p type="text/css" style="border:solid;border-width:1;text-align:center;font-size:8pt;color:red">
   Roter lokaler <p>-Style-Sheet mit Rahmen
  </p>
  <p class="stylebsp2">Grüner globaler <p>-Style-Sheet</p>
 </body>
</html>

Brauner lokaler <B>-Style-Sheet Blauer lokaler <I>-Style-Sheet Lila globaler <U>-Style-Sheet

Roter lokaler <P>-Style-Sheet mit Rahmen

Grüner globaler <P>-Style-Sheet

table, td, th, tr

<table border="1" bordercolor="#3030ff" align="center" bgcolor="green">
 <tr>
  <th colspan="2">1. Kopfzelle</th>
  <th bgcolor="gray">2. Kopfzelle</th>
 </tr>
 <tr>
  <td>1. Datenzelle</td>
  <td width="100">2. Datenzelle</td>
  <td>3. Datenzelle</td>
 </tr>
</table>

Hinweis: Die th-Tabellenzellen sind standardmäßig zentriert, hier im Bsp. werden diese Zellen durch meinen globalen Stylesheet bedingt linksbündig ausgegeben.

1. Kopfzelle		2. Kopfzelle
1. Datenzelle	2. Datenzelle	3. Datenzelle

Ein bißchen JavaScript

Link auf alert-Box und Statuszeilenänderung

<p>Ein <a href="/"
 onMouseOver="{window.status='hier geht es nicht weiter';return true;}"
 onMouseOut="{window.status='';return true;}"
 onClick="{alert('mhhh');return false;}">Link</a> der nicht linkt
</p>

Ein Link der nicht linkt

Folgendes JavaScript entspricht <body bgproperties="fixed">
```
<script language=JavaScript1.2>
 if(document.all)document.body.style.cssText="background:white url(home_background.jpg) repeat fixed"
</script>
```
Vielleicht schreibe ich hier ja noch mal irgendwann ein paar Zeilen rein, aber geplant ist es nicht. Dafür habe ich da zwei gute Links mit sehr viel Informations- und Testmaterial zu JavaScript im Angebot.

http://www.bingo-ev.de/~ub304/javscrpt/
JavaScript für Alle! Eine umfassende Anleitung für Einsteiger

http://de.selfhtml.org/
Riesige Doku und aktuelles zu html, javascript, css, ... - durch den extremen Umpfang etwas gewöhnungsbedürftig