15. Tag HTML 29.10.2014

HTML/CSS
Ralf Herbst



Website bauen:


Im Projekt Avatar die Unterseiten:
- poster.html
- galerie.html
anhand vom Autohaus Luigi nachbauen


Im HTML-Editor die weiteren Unterseiten im Ordner Seiten anlegen:
- service.html
die Datei galerie.html  speichern unter - Ordner Seiten und Namen service.html
im head-Bereich bleibt nur stehen:
       <meta charset="utf-8">
       <title>Autohaus Luigi</title>
       <link rel="stylesheet" href="../css/main.css" type="text/css">  
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 class="selected"><a href="#nogo">Service</a></li>
im maincontent-Bereich den Service einarbeiten:
 <div id="maincontent"> <!--Begin Maincontent-->
 <h1>Service</h1>
 <p>Adresse</p>
 <p>Richard-Wagner-Str. 77<br>
 41065 Mönchengladbach<br>
 Fon: 02161 - 45533<br>
 Fax: 02161 - 42120</p>
<p>Öffnungszeiten</p>
 <p>Mo. - Do. 8:00 - 20:30 Uhr<br>
 Fr. 8:00 - 20:00 Uhr<br>
Sa. 9:00 - 18:00 Uhr</p>
 </div> <!--End of Maincontent-->

-anfahrt.html
die Datei service.html  speichern unter - Ordner Seiten und Namen anfahrt.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">Anfahrt</a></li>
im maincontent-Bereich die Anfahrt einarbeiten mit google maps unter Hilfe von iframe:
dh. auf "google maps" Adresse eingeben und Karte erscheint, unten rechts Button: Karten teilen und einbetten - Karte einbeten - Maße (entsprechend website) 710x550 - Vorschau der Kartengröße - den angezeigten ifram anklicken mit strg+c in unsere Datei anfahrt.html mit strg+v einfügen:
iframe = Erklärung im HTML-Lexikon: 35.iframe.html  sowie iframe unsichtbar machen
 <div id="maincontent"> <!--Begin Maincontent-->
 <h1>Anfahrt</h1>
<iframe src="https://www.google.com/maps/datenxxx "width="730" height="550" frameborder="0" style="border:0"></iframe>
 </div> <!--End of Maincontent-->





 EMPFEHLUNGEN:

css4you