Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

668 Aufrufe

Veröffentlicht am

  • Als Erste(r) kommentieren

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

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

×