HTML CSS Javascript

Document Sample
HTML CSS Javascript Powered By Docstoc
					HTML / CSS / Javascript
      HTML
Hypertext Markup Language
              HTML
• HTML-Dokumente sind die Grundlage des
  WWW
• Auszeichnungssprache
• HTML-Dokumente enthalten
   • darstellbare Inhalte
   • Metadaten
                 Syntax

• beschreibende, nicht darstellungsorientierte
  Auszeichnung
• <tag> ...text... </tag>
• <tag/>
• <tag attribut=“...“>...</tag>
               Struktur


• Ein HTML-Dokument besteht aus drei
  Bereichen:
   • Dokumenttypedeklaration
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>
       Titel der Webseite
    </title>

    <!-- Evtl. weitere Kopfinformationen -->
  </head>

  <body>
    Inhalt der Webseite
  </body>
</html>
               Struktur

• Ein HTML-Dokument besteht aus drei
  Bereichen:
   • Dokumenttypedeklaration
   • HTML-Kopf (Head)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>
       Titel der Webseite
    </title>

    <!-- Evtl. weitere Kopfinformationen -->
  </head>

  <body>
    Inhalt der Webseite
  </body>
</html>
               Struktur

• Ein HTML-Dokument besteht aus drei
  Bereichen:
   • Dokumenttypedeklaration
   • HTML-Kopf (Head)
   • HTML-Körper (Body)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>
       Titel der Webseite
    </title>

    <!-- Evtl. weitere Kopfinformationen -->
  </head>

  <body>
    Inhalt der Webseite
  </body>
</html>
HTML-Kopf (Head)
•title    •script
•meta     •style
•base     •object
•link
HTML-Körper (Body)
 • exemplarisch:
  • <h1>...</h1>
  • <a href=“http://
    www.example.com“>TEXT</a>

  • <p>...</p>
  • <br> bzw.    <br />

  • <table>,     <tr>, <td>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/
loose.dtd">
<html>
<head>
<title>Textabs&auml;tze ausrichten</title>
</head>
<body>
<h1>Textabs&auml;tze ausrichten</h1>
<p align="center">Dies ist ein zentrierter Absatz.</p>
<p align="right">Dies ist ein Absatz, der
rechtsb&uuml;ndig ausgerichtet ist.</p>
<p align="left">Dies ist ein Absatz, der
linksb&uuml;ndig ausgerichtet ist ...</p>
<p align="justify">Dies ist ein Absatz, der im Blocksatz
ausgerichtet ist ...</p>
</body>
</html>
      CSS
Cascading Style Sheets
                   CSS

• deklarative Stylesheet-Sprache
• legt Darstellung ausgezeichneten Inhalts fest
• definiert Formateigenschaften einzelner
  HTML-Elemente
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//
EN">
<html>
<head>
<title>Das link-Element f&uuml;r Stylesheets</
title>
<link rel="stylesheet" type="text/css"
href="formate.css">
<style type="text/css">
/* ... hier sind dateispezifische Formate
erlaubt ... */
</style>
</head>
<body>
<h1>Das link-Element f&uuml;r Stylesheets</h1>
</body>
</html>
 p.note {
   position: relative;
   left: 15%;
   width: 80%;
   padding: 30px;
   padding-bottom: 45px;
   border: 1px solid black;
   line-height: 1.5em;
   color: black;
   font-weight: bold;
   text-align: justify;
   background-color: #eeeeee
 }



<p class="note">
  Dies ist ein kleiner Testabsatz. Dies ist ein kleiner
Testabsatz. ...
</p>
Javascript
             Javascript

• Skriptsprache
• Einsatz überwiegend clientseitig
• „erweitert“ die beschränkten Möglichkeiten
  von html
  Anwendungsgebiete

• Validierung von Formulareingaben
• Banner / Laufschriften
• Senden und Empfangen von Daten, ohne
  dass der Browser die Seite neu laden muss
  (Ajax)
    Document Object
     Model (DOM)

• Spezifikation des W3C
• Schnittstelle für den Zugriff auf HTML- oder
  XML-Dokumente
        DOM erlaubt

• Navigation zwischen einzelnen Knoten
• Erzeugen,Verschieben und Löschen von
  Knoten
• Auslesen, Ändern und Löschen von
  Textinhalten
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function Quadrat() {
   var Ergebnis = document.Formular.Eingabe.value *
document.Formular.Eingabe.value;
   alert("Das Quadrat von " +
document.Formular.Eingabe.value + " = " + Ergebnis);
}
//-->
</script>
</head>
<body>
<form name="Formular" action="">
<input type="text" name="Eingabe" size="3">
<input type="button" value="Quadrat errechnen"
onclick="Quadrat()">
</form>
</body>
</html>
http://www.selfhtml.org/