Xhtml und Websitegestaltung

XHTML und Website-Gestaltung

Grundlagen

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)

Aufbau einer Website
Head Body

• DTD • Seiteninhalt
• Title • Headlines
• Meta-Tags • Texte
• CSS-Einbindung • Bilder
• JavaScript • Video
• Flash
• Navigation
• Hyperlinks

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>

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>

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>

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)

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)

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

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>

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

Xhtml und Websitegestaltung

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to Xhtml und Websitegestaltung

Similar to Xhtml und Websitegestaltung (20)

Xhtml und Websitegestaltung