Zum Inhalt

Inhaltsverzeichnis • Anhang • Anhang: Allgemein • Anhang: Syntaxübersicht
⇦ Anhang: Beispiel / Anhang: Benutzung von FTP ⇨
06.07.2014 09:18:20

Anhang: Syntaxübersicht

SyntaxvergleichSyntaxzuordnung

HTML-Syntax (Satzlehre/Rechtschreibung) steht stets in einer HTML-Datei. Entsprechend steht CSS- und JS-Syntax in den entsprechenden Dateien. Allerdings steht CSS-Syntax auch zwischen <style type="text/css"> und </style> sowie innerhalb des style="" Attributs. Entsprechend steht JS-Syntax auch zwischen <script> und </script> sowie als Referenz mit dem Schema „javascript:“ (<a href="javascript:">) und nach HTML-Ereignissen wie onload="".

Syntaxvergleich

Syntaxvergleich HTML/CSS/JS
KonstruktHTMLCSSJavaScript
Anweisung<leerestag />@importAnweisung;
Funktion<starttag> </endtag>Selektor { }Funktion () { }
Zuweisungattribut="wert"eigenschaft: wert;variable = wert;
Bedingungonload="wert"@media print {}if (Bed) { Anw; }
Schleife *for (Bed) { Anw; }
Kommentar<!-- Kommentar -->/* Kommentar */
// bis Zeilenende
/* Kommentar */
// bis Zeilenende

Syntaxzuordnung

HTMLCSSJavaScript
Editor - index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type"
      *content="text/html; charset=UTF-8" />
    <title>Meine Visitenkarte</title>
    <script src="funktionen.js"
            type="text/javascript"></script>
    <link rel="stylesheet"
          type="text/css" href="vorlagen.css" />
    <style type="text/css">
        address { font-style:normal; } 
    </style>
  </head>

  <body>
    <p>
      <span id="Name">Christian Hartnick</span><br />
      <span id="Grad">Dipl.-Wirtsch.-Inf.</span><br />
      <span class="Kursiv">Freier Berater</span>

    <address>
      Sandweg 10  <br />
      16727 Oberkrämer OT Bärenklau
    </address>

    <p>
      <script type="text/javascript">
        insertEmail("hilfe","hartnick","de")
      </script>
      <noscript>
        hilfe_at_hartnick_._de
      </noscript><br />
      <a href="http://hilfe.hartnick.de">
        hilfe.hartnick.de
      </a>
    </p>

  </body>
</html>
Editor - impressum.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type"
      *content="text/html; charset=UTF-8" />
    <title>Impressum</title>
    <script src="funktionen.js"
            type="text/javascript"></script>
    <link rel="stylesheet"
          type="text/css" href="vorlagen.css" />
  </head>

  <body>
    <p></p>

  </body>
</html>
Editor - bilder.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type"
      *content="text/html; charset=UTF-8" />
    <title>Bildergallerie</title>
    <script src="funktionen.js"
            type="text/javascript"></script>
    <script src="gallerie.js"
            type="text/javascript"></script>
    <link rel="stylesheet"
          type="text/css" href="vorlagen.css" />
    <link rel="stylesheet"
          type="text/css" href="gallerie.css" />
  </head>

  <body>
    <p></p>

  </body>
</html>
Editor - vorlagen.css
#Name   { font-weight:bold; }
#Grad   { font-weight:lighter; }
.Kursiv { font-style:italic; }
a        { text-decoration:none;
           color:WindowText;}
a:before { content:"\21d2";
           color:#0000ff; }
a:hover  { color:#0000ff; }
Editor - gallerie.css
Editor - funktionen.js
function insertEmail(name,domain,tld) {
  document.write(
    '\n<a href=\"mailto:'
    +name+'@'+domain+'.'+tld+'\">'
      +name+'@'+domain+'.'+tld
    +'</a>');
}
Editor - gallerie.js
⇦ Anhang: Beispiel / Anhang: Benutzung von FTP ⇨
Nach oben