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