HTML/CSS
Ralf Herbst
website bauen
Im Projekt Avatar die Unterseiten:
- cast_crew.html
- anfahrt.html
anhand vom Autohaus Luigi nachbauen
Im HTML-Editor im Ordner Seiten die Unterseiten anlegen:
- kontakt.html
Formular Chef benötigt eine Datenbank!
oder auch Strato
die Datei anfahrt.html speichern unter - Ordner Seiten und Namen kontakt.html
im body-Bereich den Pfad abändern:
<ul> <li><a href="../index.html">Home</a></li>
<li><a href="angebote.html">Angebote</a></li>
<li><a href="gebrauchtwagen.html">Gebrauchtwagen</a></li>
<li><a href="hit.html">Hit des Monats</a></li>
<li><a href="galerie.html">Galerie</a></li>
<li><a href="service.html">Service</a></li>
<li class="selected"><a href="#nogo">Kontakt</a></li>
im style-Bereich die Attribute verwenden für ein internes css:
<style type="text/css">
select, input, textarea { margin-bottom: 10px; background-color: rgba(255,255,255,.7); border-radius: 5px; padding: 4px 10px; }
textarea { font-family: Verdana, Geneva, sans-serif; font-size: 110%; max-width: 600px; max-height: 200px; }
.button { cursor: pointer; = Schaltfläche Finger border-radius: 10px 30px; }
/*border: ridge 5px #000; = Rahmen um den Button*/
.button:hover { background-color: #FFCE68; border-radius: 30px 10px; border-color: #FFCE68; }
/*box-shadow: 0 0 10px 10px rgba(255,206,104.3); damit der Button farbig blinkt*/
</style>
im maincontent-Bereich das Kontaktformular einarbeiten:
<h1>Kontakt</h1> = Formular: Methode senden <!--Begin Formular-->
<!--aus Formular-Chef --> <!-- Formular-Einleitung-->
<form action='http://www.formular-chef.de/fc.cgi' method='post' enctype='multipart/form-data'>
<!-- eMail an Betreiber konfigurieren und mit um-fritz.de die Email-Adresse bei value verschlüsseln--> E-Mailadresse verschlüsseln
<input type='hidden' name='empfaenger' value='murmannbirgit@gmail.com'/>
<!-- Betreff der Standard-eMail definieren -->
<input type='hidden' name='betreff' value='Ein Besucher von Autohaus Luigi hat Ihr Formular ausgefüllt'/>
<p><select name="Anrede" id="Anrede">
<option selected>Bitte auswählen...</option> <option>Frau</option></select></p>
= Möglichkeit des Einbauens einer Länderliste
<p><select="ql_land"> <option value="x">Bitte auswählen ...</option><option value="Deutschland">Deutschland</option> usw.... </select></p>
<p> <input type="text" name="Vorname" id="Vorname" value="Vorname" size="40" maxlength="40" onfocus="if(this.value == 'Vorname') {this.value=''}" onblur="if(this.value == '') { this.value='Vorname'}"></p>
= onfocus (Javascript-Programmierung) und dieses Feld wird nicht geschlossen
<p><input type="text" name="Nachname" id="Nachname" value="Nachname" size="40" maxlength="40" onfocus="if(this.value == 'Nachname') {this.value=''}" onblur="if(this.value == '') { this.value='Nachname'}"></p>
<p><input type="text" name="E-Mail" id="E-Mail" value="" size="40" maxlength="40" required }</p> required = Überprüfung, ob Eingabe erfolgt ist
<p><textarea name="Anliegen" id="Anliegen" cols="80" rows="10" onfocus="if(this.value == 'Anliegen') {this.value=''}" onblur="if(this.value == '') { this.value='Anliegen'}">Anliegen</textarea></p>
= dem Textbereich die Attribute geben mit cols (Reihen) und rows (Spalten)
<p>Newsletter</p>
<p>
<label> <input type="radio" name="Newsletter" id="Newsletter_0" value="ja"> Ja</label><br>
<label> <input type="radio" name="Newsletter" id="Newsletter_1" value="nein"> Nein</label><br> </p>
<p>Probefahrtlänge</p>
<p>
<label><input type="checkbox" name="Probefahrtlänge" id="Probefahrtlänge" value="1Std."> 1Std.</label><br>
<label> <input type="checkbox" name="Probefahrtlänge" id="Probefahrtlänge" value="2Std."> 2Std.</label><br>
</p>
= Label für Elemente
Für Formularelemente wie Eingabefelder oder Auswahllisten gibt es normalerweise keine logische Beschriftungsmöglichkeit. Sie können zwar Text vor ein solches Element setzen wie "E-Mail-Adresse:", aber ein solcher Text ist normaler HTML-Text, der keinen definierten Bezug zu dem Element hat, für das er als Beschriftung dient. Mit Hilfe von Labels können Sie jedoch einen solchen logischen Bezug zwischen Formularelement und Beschriftungstext herstellen!
<input type="submit" value="Anfrage senden" class="button">
= erzwungendes Leerzeichen
<input type="reset" value="Zurücksetzen" class="button">
</form> <!--End of Formular-->
EMPFEHLUNGEN:
Webbaukasten zB. Strato
Servermöglichkeiten zB. Strato
bplaced Subdomaine
Feenstaub (beachten wo eingesetzt head oder body)
Mausverfolger
