Embed Size (px)
Citation preview
XHTML und Website-Gestaltung
Grundlagen
Organisation dynamischer Websites
Struktur
• XHTML• Seitenaufbau über
HTML-Tags• Dynamische
Inhalte durch JavaScript, AJAX
Layout
• CSS• HTML-Elemente
werden adressiert und über CSS-Regeln beschrieben werden.
Inhalt
• CGI• Datenbankinhalte
werden über Platzhalter eingebunden.
• PHP/mySQL• Pearl (veraltet)
Aufbau einer Website
Head
• DTD• Title• Meta-Tags• CSS-Einbindung• JavaScript
Body
• Seiteninhalt• Headlines• Texte• Bilder• Video• Flash
• Navigation• Hyperlinks
Verschachtelung durch TagsDTD (Doctype Document Description)<html>
<head>
<title>SEITENTITEL</title>
<meta>KEYWORDS</meta>
<style>VERLINKUNG AUF STYLESHEET</style>
</head>
<body>
CONTENT
</body>
</html>
Gliederung der Inhalteh1 – h6Überschriften
• <h1>Große Überschrift</h1>• <h6>Kleine Überschrift</h6>
P, brAbsatz/Umbruch• <p>Text</p>• <br />
Img srcBilder• <img src=„Pfad zum Bild“ width=„Breite“ height=„Höhe“ alt=„Beschreibung“ />
a hrefHyperlinks• <a href=Pfad Relativ/absolut>Website</a>• <a href=Pfad Relativ/absolut target=„_blank“>Website in neuem Fenster</a>
Unordered List <ul> Ordered List <ol>Listen• <ul>• <li>Listenelement</li>• </ul>
<table> Zeile: <tr> Spalte: <td>Tabellen• <table>• <tr>• <td></td><td></td>• </tr>
Einbindung von Inhalten externer Websitesiframe• <iframe>Pfad width=„Breite height=„Höhe“ individuelle Informationen zum Inhalt</iframe>
Formular-Eingabefelder
FormularfelderFormulare• <form>• <input></input>• <textarea></textarea>• <select><select>• </form>
Art durch Attribute bestimmtinput• Textfeld• Button (Senden, Verwerfen)• Optionsfelder (ja/nein)• Kontrollkästchen (Mehrfachauswahl)
Cascading Style Sheets CSS
Selektoren
• HTML Elemente• ID • Klasse
CSS-Regel
• Beschreibung der durch Selektoren adressierten Elemente
• Selektor { Attribut:Wert }
Gestaltung
• Schriftgröße• Schriftfarbe• Schriftart• Rahmen• Hintergründe• Farbdefinitionen• Ausrichtung
(left, right, top, bottom)
Elemente für Klassen und IDs
div
• Blockelemente zum Platzieren von Inhalten
• Seitenlayout mit containern
• Über Innen- und Außenabstände detailliert definierbar
• Im Seitenfluss oder frei auf der Seite platzierbar
span
• Inline-Elemente• Gestaltungselemente im
Textfluss
Verschachtelung durch TagsDTD (Doctype Document Description)<html>
<head>
<title>SEITENTITEL</title>
<meta>KEYWORDS</meta>
<style>VERLINKUNG AUF STYLESHEET</style>
</head>
<body><div id=„ID“>CONTENT</div>
</body>
</html>
Dynamik durch Datenbankinhalte
MySQL
• Datenbank• Inhalte werden
über Datenbank-Abfragen vom Server in sie Seite geholt.
• Texte, Bilder, Formularinhalte
PHP
• Sprache zur Platzierung von Datenbank-Inhalten
• Integration im XHTML-Code
CGI
• Common Gateway Interface
• Schnittstelle von der Website zur Datenbank
• Wird durch Datenbank-Abfragen über PHP, Pearl oder ASP durchgeführt
