XHTML und Website-Gestaltung          Grundlagen
Organisation dynamischer Websites     Struktur               Layout                Inhalt• XHTML               • CSS      ...
Aufbau einer Website         Head                   Body• DTD                • Seiteninhalt• Title                • Headli...
Verschachtelung durch Tags    DTD (Doctype Document Description)    <html>             <head>                        <titl...
Gliederung der Inhalte    Überschriften         h1 – h6• <h1>Große Überschrift</h1>• <h6>Kleine Überschrift</h6>  Absatz/U...
Listen              Unordered List <ul> Ordered List <ol>• <ul>• <li>Listenelement</li>• </ul>      Tabellen              ...
Formular-Eingabefelder Formulare Formularfelder• <form>• <input></input>• <textarea></textarea>• <select><select>• </form>...
Cascading Style Sheets CSS   Selektoren         CSS-Regel           Gestaltung• HTML Elemente   • Beschreibung      • Schr...
Elemente für Klassen und IDs            div                         span• Blockelemente zum           • Inline-Elemente  P...
Verschachtelung durch Tags    DTD (Doctype Document Description)    <html>              <head>                        <tit...
Dynamik durch Datenbankinhalte      MySQL                    PHP                  CGI• Datenbank             • Sprache zur...
Nächste SlideShare
Wird geladen in …5
×

Xhtml und Websitegestaltung

566 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
566
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Xhtml und Websitegestaltung

  1. 1. XHTML und Website-Gestaltung Grundlagen
  2. 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. 3. Aufbau einer Website Head Body• DTD • Seiteninhalt• Title • Headlines• Meta-Tags • Texte• CSS-Einbindung • Bilder• JavaScript • Video • Flash • Navigation • Hyperlinks
  4. 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. 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. 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. 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. 8. Cascading Style Sheets CSS 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. 9. Elemente für Klassen und 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. 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. 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

×